將 Markdown 文件直接變成網(wǎng)頁，還無需搭建網(wǎng)站和生成過程，寫完文檔即可直接發(fā)布，你對這個內(nèi)容感興趣嗎？你是否希望將 Markdown 或 HTML 自由地嵌入到多個平臺（如內(nèi)容管理系統(tǒng)或?qū)W習(xí)管理系統(tǒng)）中？由 Docsify.js 構(gòu)建的開源項目 Docsify-This 提供了一種簡單的方法來發(fā)布、分享和復(fù)用 Markdown 文件內(nèi)容。

Docsify-This 是什么？

使用 Docsify-This，你可以立即將任何 Markdown 文件轉(zhuǎn)換為響應(yīng)式的獨(dú)立網(wǎng)頁。你還可以將多個 Markdown 文件鏈接起來，以創(chuàng)建一個簡單的網(wǎng)站。網(wǎng)頁設(shè)計師可以簡單地通過點(diǎn)擊 Web 頁面生成器界面或改變網(wǎng)頁的地址參數(shù)（即 URL），來更改所顯示頁面的視覺外觀。在創(chuàng)建自己的 Markdown 文件內(nèi)容時，你還可以使用一組提供的 Markdown CSS 類。此外，如果你使用 Codeberg 或 GitHub 倉庫存儲 Markdown 文件的話，每個頁面都會自動提供一個 “編輯此頁面Edit this Page” 的鏈接，以支持協(xié)同創(chuàng)作。

并且 Docsify-This 是開源的，因此你可以使用自定義域名托管 Docsify-This 實(shí)例，而不會有被平臺鎖定的風(fēng)險。

使用 Docsify-This 網(wǎng)頁生成器

要使用網(wǎng)頁生成器，請先打開瀏覽器，導(dǎo)航到 Docsify-This 網(wǎng)站 或你在本地的實(shí)例。在 “網(wǎng)頁生成器Web Page Builder” 部分，輸入 Codeberg 或 GitHub 上公共存儲倉庫中的一個 Markdown 文件的 URL（其他 Git 主機(jī)可以通過 Docsify-This URL 參數(shù)進(jìn)行使用，但不能在網(wǎng)頁生成器中使用），然后點(diǎn)擊 “發(fā)布為獨(dú)立網(wǎng)頁P(yáng)ublish as Standalone Web Page” 的按鈕，如下圖所示。

The Docsify-This web page builder interface

Markdown 文件將呈現(xiàn)為一個獨(dú)立的網(wǎng)頁，并生成一個可復(fù)制和共享的 URL。以下是一個示例 URL：

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

Docsify-This 生成的網(wǎng)頁非常適合嵌入，可以將 Docsify-This 頁面的視覺樣式調(diào)整到目標(biāo)平臺上去。

Docsify-This rendered Markdown file

渲染同一存儲庫中的其他文件

你也可以通過直接編輯 Docsify-This URL 參數(shù) homepage 來渲染同一存儲庫中的其他 Markdown 文件。例如：

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

修改網(wǎng)頁的外觀

你可以使用 URL 參數(shù) 更改 Docsify-This 中顯示的任何 Markdown 文件的外觀。例如，font-family（文本字體系列）、font-size（字體大?。?code style="background-color: rgb(231, 243, 237); padding: 1px 3px; border-radius: 4px; overflow-wrap: break-word; text-indent: 0px; display: inline-block;">link-color（超鏈接顏色）和 line-height（行高）都是常見的 CSS 屬性，同時也是 Docsify-This 中的有效參數(shù)：

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 類 來改變網(wǎng)頁的外觀。例如，你可以為一個鏈接添加“按鈕類”：

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

這將產(chǎn)生一個按鈕，而不是一個文本鏈接：

A button rendered by Docsify-This

除了 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

在 Markdown 文件中包含 HTML 片段

正如標(biāo)準(zhǔn) Markdown 所支持的那樣，你可以在 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>

使用 iFrame 嵌入 Docsify-This 網(wǎng)頁

你可以在幾乎所有的平臺上使用 iFrame 嵌入 Docsify-This 網(wǎng)頁。你還可以使用 URL 參數(shù)來確保你的嵌入內(nèi)容與你的目標(biāo)平臺相匹配：

<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>

A Docsify-This page embedded in an LMS

使用外部 URL 嵌入 Docsify-This

在某些學(xué)習(xí)管理系統(tǒng)中，包括開源的 Moodle，或者專有的 Canvas，你可以將外部網(wǎng)頁鏈接到課程導(dǎo)航菜單。例如，你可以使用 Canvas 中的重定向工具來顯示 Docsify-This 網(wǎng)頁。

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

為了充分利用版本控制的好處，并使用 “編輯此頁面Edit this Page” 的鏈接進(jìn)行協(xié)同工作，請將你的 Docsify-This Markdown 文件存儲在 Codeberg 或 GitHub 的 Git 存儲庫中。一些開源工具為 Git 提供了一個圖形界面，包括 GitHub Desktop（最近已開源）、Git-Cola 和 SparkleShare。文本編輯器 VSCode 和 Pulsar Edit（以前的 Atom.io）也都有整合 Git 的功能。

輕松實(shí)現(xiàn) Markdown 文件在網(wǎng)頁發(fā)布

由于 Docsify 的存在，每個人都能享受到 Markdown 文件的在網(wǎng)上發(fā)布的好處。而且由于 Docsify-This 的出現(xiàn)，這個工作變得很容易。不妨在 Docsify-This 網(wǎng)站 上試試吧。