公司网站的开发,秦皇岛百度推广,网站建设计入到什么科目,备案网站ip地址文章目录 1、简介2、安装2.1 node2.2 docsify-cli 3、配置3.1 初始化3.2 预览效果3.3 加载对话框3.4 更多页面3.5 侧 栏3.6 自定义导航栏 结语 1、简介
https://docsify.js.org/#/?iddocsify
一个神奇的文档网站生成器。
简单轻巧没有静态构建的 html 文件多个主题 Docsify… 文章目录 1、简介2、安装2.1 node2.2 docsify-cli 3、配置3.1 初始化3.2 预览效果3.3 加载对话框3.4 更多页面3.5 侧 栏3.6 自定义导航栏 结语 1、简介
https://docsify.js.org/#/?iddocsify
一个神奇的文档网站生成器。
简单轻巧没有静态构建的 html 文件多个主题 Docsify会即时生成您的文档网站。与 GitBook 不同它不会生成静态 html 文件。相反它会智能地加载和解析您的 Markdown 文件并将它们显示为网站。要开始使用它您需要做的就是创建一个并将其部署在 GitHub Pages 上。
没有静态构建的 html 文件简单轻巧智能全文搜索插件多个主题有用的插件 APIEmoji 支持与IE11兼容支持服务端渲染
2、安装
2.1 node
https://nodejs.org/en Node.js® 是一个开源的跨平台 JavaScript 运行时环境。
node -v
npm -v2.2 docsify-cli
建议全局安装有助于在本地初始化和预览网站。
npm i docsify-cli -g
# npm i docsify-cli
# npm install --prefix ./ 包名 就会将包安装在当前文件夹
# npm install --prefix ./ docsify-cli3、配置
3.1 初始化
执行命令如下
docsify init ./docs运行结果如下 生成文件夹和文件如下; 完成后您可以在子目录中看到文件列表。
index.html作为条目文件
README.md作为主页
.nojekyll防止 GitHub Pages 忽略以下划线开头的文件3.2 预览效果
使用 运行本地服务器。您可以在 上的浏览器中预览您的网站。
docsify serve docs浏览器访问
http://localhost:3000如果您的系统上安装了 Python您可以轻松地使用它来运行静态服务器来预览您的站点。
# python2
cd docs python -m SimpleHTTPServer 3000# python3
cd docs python -m http.server 3000同时修改文件index.html中的标签内容后浏览器预览如下br/
img srchttps://img-blog.csdnimg.cn/direct/4196ad3e9f174b1d991a3803b952e1bb.png alt在这里插入图片描述/
3.3 加载对话框
如果需要您可以在 docsify 开始渲染文档之前显示一个加载对话框
!-- index.html --div data-app idmainPlease wait.../divscriptwindow.$docsify {el: #main,};
/script3.4 更多页面
如果你需要更多页面你可以简单地在你的docsify目录中创建更多的markdown文件。
.
└── docs├── README.md├── guide.md└── zh-cn├── README.md└── guide.md3.5 侧 栏
为了拥有侧边栏您可以创建自己的侧边栏.
!-- index.html --scriptwindow.$docsify {loadSidebar: true}
/script
script src//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js/script创建 文件_sidebar.md
!-- docs/_sidebar.md --* [Home](/)
* [Guide](guide.md)浏览器预览如下
从侧边栏选择设置页面标题 页面的标签是根据选定的侧边栏项目名称生成的。为了获得更好的 SEO您可以通过在文件名后指定字符串来自定义标题。
!-- docs/_sidebar.md --
* [Home](/)
* [笔记](guide.md 小沐的第一篇笔记)3.6 自定义导航栏
如果需要自定义导航可以创建基于 HTML 的导航栏。
!-- index.html --bodynava href#/EN/aa href#/zh-cn/简体中文/a/navdiv idapp/div
/body添加参数loadNavbar: true
!-- index.html --scriptwindow.$docsify {el: #main,loadSidebar: true,loadNavbar: true}
/script新建文件_navbar.md
!-- _navbar.md --* Getting started* [Quick start](quickstart.md)* [Writing more pages](more-pages.md)* [Custom navbar](custom-navbar.md)* [Cover page](cover.md)* Configuration* [Configuration](configuration.md)* [Themes](themes.md)* [Using plugins](plugins.md)* [Markdown configuration](markdown.md)* [Language highlight](language-highlight.md)结语
如果您觉得该方法或代码有一点点用处可以给作者点个赞或打赏杯咖啡╮(▽)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//就在评论处留言作者继续改进o_O??? 如果您需要相关功能的代码定制化开发可以留言私信作者(✿◡‿◡) 感谢各位大佬童鞋们的支持( ´ ▽´ ) ( ´ ▽´)っ
