使用 Docsify-This 从 Markdown 生成网页

Digital creative of a browser on the internet

您是否有兴趣在没有任何网站设置或构建过程的情况下利用 Markdown 进行在线内容创作？又或者想将不受约束的 Markdown 或 HTML 无缝嵌入到多个平台（例如内容管理系统或学习管理系统）中？开源项目 Docsify-This，基于 Docsify.js 构建，提供了一种发布、共享和重用 Markdown 内容的简便方法。

[ 获取 Markdown 速查表 ]

什么是 Docsify-This？

使用 Docsify-This，您可以立即将任何公开可用的 Markdown 文件转换为响应式独立网页。您还可以链接多个 Markdown 文件以创建简单的网站。设计师可以使用点击式的网页构建器界面或 URL 参数来更改显示页面的视觉外观。您还可以在创建自己的 Markdown 内容时使用一组提供的 Markdown CSS 类。此外，如果您使用 Codeberg 或 GitHub 存储您的 Markdown 文件，则可以为每个页面自动提供一个编辑此页面链接，以支持协作创作。

它是开源的，因此您可以使用自己的自定义域名托管 Docsify-This 实例，而无需担心平台锁定。

使用 Docsify-This 网页构建器

要使用网页构建器，请打开浏览器并导航到 Docsify-This 网站或您的本地实例。在网页构建器部分，在 Codeberg 或 GitHub 的公共仓库中输入 Markdown 文件的 URL（其他 Git 托管平台也可以通过 Docsify-This URL 参数使用，但在网页构建器中不行），然后单击发布为独立网页按钮。

The Docsify-This web page builder interface

图片来源：

(Paul Hibbitts, CC BY-A 4.0)

Markdown 文件将呈现为独立网页，并带有您可以复制和共享的 URL。这是一个示例 URL

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md

Docsify-This 渲染的网页非常适合嵌入，并且能够根据目标平台视觉样式化 Docsify-This 页面。

图片来源：

(Paul Hibbitts, CC BY-A 4.0)

渲染同一仓库中的其他文件

您可以通过直接编辑 Docsify-This URL 参数 homepage 来渲染同一仓库中的其他 Markdown 文件。例如

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md

修改网页外观

您可以使用 URL 参数来更改 Docsify-This 中显示的任何 Markdown 文件的外观。例如，font-family、font-size、link-color 和 line-height 都是常见的 CSS 属性，并且是 Docsify-This 的有效参数

https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif

您还可以使用一组特殊的 Markdown CSS 类来更改视觉外观。例如，您可以将 button 类添加到链接

[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')

这将生成按钮图像，而不仅仅是文本链接

图片来源：

(Paul Hibbitts, CC BY-A 4.0)

除了 Docsify-This 支持的 Markdown CSS 类之外，您还可以在显示的 Markdown 文件中定义自己的自定义类。例如

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

[Custom CSS Class Button](# ':class=mybutton')

生成如下效果

A custom button image rendered with Docsify-This

图片来源：

(Paul Hibbitts, CC BY-A 4.0)

包含 HTML 代码片段

如标准 Markdown 支持的那样，您可以包含 HTML 代码片段。这允许您向 HTML 渲染添加布局元素。例如

<div class="row">
<div class="column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
<div class="column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
</div>

将 Docsify-This 嵌入为 iFrame

您可以使用 iFrame 将 Docsify-This 网页嵌入到几乎任何平台中。您还可以使用 URL 参数来确保您的嵌入内容与目标平台匹配

<p><iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"></iframe></p>

图片来源：

(Paul Hibbitts, CC BY-A 4.0)

使用外部 URL 嵌入 Docsify-This

在某些学习管理系统 (LMS) 中，包括开源的 Moodle 甚至专有的 Canvas，您可以将外部网页链接到课程导航菜单，有时还可以进行更多操作。例如，您可以使用 Canvas 中的重定向工具来显示 Docsify-This 网页。

url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true

我们最喜欢的开源资源

集成 Docsify-This 和 Git

为了充分利用版本控制的优势，并有可能使用可选的编辑此页面链接进行协作，请将您的 Docsify-This Markdown 页面存储在 Codeberg 或 GitHub 上的 Git 仓库中。一些开源工具为 Git 提供了图形界面，包括 GitHub Desktop（最近开源发布）、Git-Cola 和 SparkleShare。文本编辑器 VSCode 和 Pulsar Edit（以前的 Atom.io）也都具有 Git 集成功能。

[ 获取 Git 技巧和窍门电子书 ]