時間：2023-07-08 07:06:01 | 來源：網(wǎng)站運營
時間：2023-07-08 07:06:01 來源：網(wǎng)站運營
如何使用 Docsify 和 GitHub Pages 創(chuàng)建一個文檔網(wǎng)站 | Linux 中國：使用 Docsify 創(chuàng)建文檔網(wǎng)頁并發(fā)布到 GitHub Pages 上。
在線咨詢
.md 或 .markdown 擴展名。雖然這種設(shè)置很好，但我想嘗試一下其他的東西。index.html。git clone https://github.com/bryantson/OpensourceDotComDemos然后 cd 進(jìn)入 DocsifyDemo 目錄。index.html 文件，就像 Docsify 文檔中的的示例一樣：<!-- index.html --><!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"></head><body> <div id="app"></div> <script> window.$docsify = { //... } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script></body></html>DocsifyDemo 目錄下，你應(yīng)該看到這樣的文件結(jié)構(gòu)：index.html 是 Docsify 可以工作的唯一要求。打開該文件，你可以查看其內(nèi)容：<!-- index.html --><!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> <title>Docsify Demo</title></head><body> <div id="app"></div> <script> window.$docsify = { el: "#app", repo: 'https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo', loadSidebar: true, } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script></body></html>這本質(zhì)上只是一個普通的 HTML 文件，但看看這兩行：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">... 一些其它內(nèi)容 ...<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>這些行使用內(nèi)容交付網(wǎng)絡(luò)（CDN）的 URL 來提供 CSS 和 JavaScript 腳本，以將網(wǎng)站轉(zhuǎn)化為 Docsify 網(wǎng)站。只要你包含這些行，你就可以把你的普通 GitHub 頁面變成 Docsify 頁面。<body> 標(biāo)簽后的第一行指定了要渲染的內(nèi)容：<div id="app"></div>Docsify 使用單頁應(yīng)用（SPA）的方式來渲染請求的頁面，而不是刷新一個全新的頁面。<script> 塊里面的行：<script> window.$docsify = { el: "#app", repo: 'https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo', loadSidebar: true, }</script>在這個塊中：el 屬性基本上是說：“嘿，這就是我要找的 id，所以找到它并在那里呈現(xiàn)?！?/li>repo 值，以確定當(dāng)用戶點擊右上角的 GitHub 圖標(biāo)時，會被重定向到哪個頁面。 loadSideBar 設(shè)置為 true 將使 Docsify 查找包含導(dǎo)航鏈接的 _sidebar.md 文件。_sidebar.md 文件。因為你在 index.html 中設(shè)置了 loadSidebar 屬性值為 true，所以 Docsify 會查找 _sidebar.md 文件，并根據(jù)其內(nèi)容生成導(dǎo)航文件。示例存儲庫中的 _sidebar.md 內(nèi)容是：<!-- docs/_sidebar.md -->* [HOME](./)* [Tutorials](./tutorials/index) * [Tomcat](./tutorials/tomcat/index) * [Cloud](./tutorials/cloud/index) * [Java](./tutorials/java/index)* [About](./about/index)* [Contact](./contact/index)這會使用 Markdown 的鏈接格式來創(chuàng)建導(dǎo)航。請注意 “Tomcat”、“Cloud” 和 “Java” 等鏈接是縮進(jìn)的；這意味著它們被渲染為父鏈接下的子鏈接。README.md 和 images 這樣的文件與存儲庫的結(jié)構(gòu)有關(guān)，但所有其它 Markdown 文件都與你的 Docsify 網(wǎng)頁有關(guān)。$ git clone 你的 GitHub 存儲庫位置$ cd 你的 GitHub 存儲庫位置$ git add .$ git commit -m "My first Docsify!"$ git push設(shè)置你的 GitHub Pages 頁面。在你的新 GitHub 存儲庫中，點擊 “Settings”：關(guān)鍵詞：中國,創(chuàng)建,使用
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
