如何使用 Docsify-This 从 Markdown 生成网页
如果您想使用 Markdown 进行在线内容创作，而无需复杂的网站设置，Docsify-This 可以帮到您。这个使用 Docsify.js 构建的开源项目，让您可以轻松地发布、分享和重用 Markdown 内容。它甚至可以在各种平台（包括内容管理系统和学习管理系统）上无缝集成 Markdown 或 HTML。Docsify-This 基于 Docsify.js 构建，提供了一种发布、分享和重用 Markdown 内容的简便方法。
什么是 Docsify-This？
使用 Docsify-This，您可以立即将任何公开可用的 Markdown 文件转换为响应式的独立网页。您还可以链接多个 Markdown 文件来创建一个简单的网站。设计人员可以使用点击式的 Web Page Builder 界面或 URL 参数来更改显示页面的视觉外观。您还可以在创建自己的 Markdown 内容时使用一组提供的 Markdown CSS 类。此外，如果您使用 Codeberg 或 GitHub 来存储您的 Markdown 文件，则可以为每个页面自动提供“编辑此页”链接，以支持协作创作。
它是开源的，因此您可以使用自己的自定义域名托管 Docsify-This 实例，而无需担心平台锁定。
使用 Docsify-This 网页构建器
要使用网页构建器，请打开浏览器并导航到 Docsify-This 网站或您的本地实例。在“网页构建器”部分，输入 Codeberg 或 GitHub 公共仓库中 Markdown 文件的 URL（其他 Git 主机也可以通过 Docsify-This URL 参数使用，但在网页构建器中不行），然后单击“发布为独立网页”按钮。
(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.mdDocsify-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') 这将生成一个按钮图像，而不仅仅是一个文本链接
除了 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')产生如下效果
包含 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>
包含 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>集成 Docsify-This 和 Git
为了充分利用版本控制的好处，并可能通过可选的“编辑此页”链接进行协作，请将您的 Docsify-This Markdown 页面存储在 Codeberg 或 GitHub 上的 Git 仓库中。一些开源工具为 Git 提供了图形界面，包括 GitHub Desktop（最近作为开源发布）、Git-Cola 和 SparkleShare。文本编辑器 VSCode 和 Pulsar Edit（以前的 Atom.io）也都具有 Git 集成。
Markdown 发布变得简单
得益于 Docsify，基于 Markdown 发布的优势惠及所有人。而且得益于 Docsify-This，它比以往任何时候都更容易。
在 Docsify-This 网站上试用一下。
