时间：2023-07-08 07:06:01 | 来源：网站运营
时间：2023-07-08 07:06:01 来源：网站运营
如何使用 Docsify 和 GitHub Pages 创建一个文档网站 | Linux 中国：使用 Docsify 创建文档网页并发布到 GitHub Pages 上。
在线咨询
.md 或 .markdown 扩展名。虽然这种设置很好，但我想尝试一下其他的东西。index.html。git clone https://github.com/bryantson/OpensourceDotComDemos然后 cd 进入 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 目录下，你应该看到这样的文件结构：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"> <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>这本质上只是一个普通的 HTML 文件，但看看这两行：<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">... 一些其它内容 ...<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>这些行使用内容交付网络（CDN）的 URL 来提供 CSS 和 JavaScript 脚本，以将网站转化为 Docsify 网站。只要你包含这些行，你就可以把你的普通 GitHub 页面变成 Docsify 页面。<body> 标签后的第一行指定了要渲染的内容：<div id="app"></div>Docsify 使用单页应用（SPA）的方式来渲染请求的页面，而不是刷新一个全新的页面。<script> 块里面的行：<script> window.$docsify = { el: "#app", repo: 'https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo', loadSidebar: true, }</script>在这个块中：el 属性基本上是说：“嘿，这就是我要找的 id，所以找到它并在那里呈现。”repo 值，以确定当用户点击右上角的 GitHub 图标时，会被重定向到哪个页面。 loadSideBar 设置为 true 将使 Docsify 查找包含导航链接的 _sidebar.md 文件。_sidebar.md 文件。因为你在 index.html 中设置了 loadSidebar 属性值为 true，所以 Docsify 会查找 _sidebar.md 文件，并根据其内容生成导航文件。示例存储库中的 _sidebar.md 内容是：<!-- 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 的链接格式来创建导航。请注意 “Tomcat”、“Cloud” 和 “Java” 等链接是缩进的；这意味着它们被渲染为父链接下的子链接。README.md 和 images 这样的文件与存储库的结构有关，但所有其它 Markdown 文件都与你的 Docsify 网页有关。$ git clone 你的 GitHub 存储库位置$ cd 你的 GitHub 存储库位置$ git add .$ git commit -m "My first Docsify!"$ git push设置你的 GitHub Pages 页面。在你的新 GitHub 存储库中，点击 “Settings”：关键词：中国,创建,使用
