分享一个文档构建工具docsify 官方网址:https://docsify.js.org/#/zh-cn/ 基本上现在很多开源项目都是基于其构建 主要是样式简洁、编写、部署方便,基于markdown文件生成目录 、文章 非常适合程序员 快速开始:https://docsify.js.org/#/zh-cn/quickstart
目前市面上有大致这么几款主流的文档生成站点,分别为docsify、gitbook、Phenomic等,可帮助用户快速搭建文档站点。 今天我们详细介绍下docsify的使用文档及实现原理。 docsify-cli快速入手 docsify提供了一个名为docsify-cli脚手架工具,通过这个脚手架工具,可以快速生成docsify站点并部署到本地或远程服务器。 安装 // 安装docsify-cli npm install docsify-cli -g 初始化 /* @desc: 初始化docsify,将模板文件拷贝至path下 * @param:local 为Docsify原型对象 proto. 服务端渲染(SSR),主要依赖Docsify的docsify-server-renderer模块,官方示例Node直出-Docsify。 若本文内容有不足或需要改正的地方,欢迎在评论区拍砖!
首先查看你的本地命令行中是否安装了 Docsify。 运行 docsify -v 如果显示: C:\WorkDir\Repository\cwiki-us-docs\spring-boot-docs>docsify -v 'docsify' is not \Roaming\npm\docsify -> C:\Users\yhu\AppData\Roaming\npm\node_modules\docsify-cli\bin\docsify > docsify @4.11.6 postinstall C:\Users\yhu\AppData\Roaming\npm\node_modules\docsify-cli\node_modules\docsify > //www.ossez.com/t/docsify/476
docsify是什么? 简单来说,docsify可以动态地将Markdown文件转换html文件。所谓动态,即所有转换工作都是在运行时进行。 docsify把自己家的家谱曼氏家谱实现网络化,寒假有事情做了~? 快速开始 docsify需要Node.js环境,不知道Node.js的同学可以把它认为是一个无界面需要使用命令行操作的软件,而docsify需要在该软件中运行,因此在开始学习docsify之前,需要安装 Please run docsify serve . /) [Get Started](#docsify) 默认情况下,封面和文档是在同一页的,[Get Started](#docsify)链接直接写标题就行。
docsify 根据官方说法,docsify是一个神奇的文档网站生成工具,也可以把它当做一个简易版的静态站点诸如Hexo、Hugo等。 然后用npm来全局安装docsify: 1 npm i docsify-cli -g 简易搭建 初始化 创建一个文档站点目录,比如note目录,然后在该目录下执行命令: 1 docsify init docsify支持实时更新,可以在启动本地服务时自动重新加载刚刚更新的文件。 参考链接 docsify官方文档 docsify 入坑指南与我放弃 Gitbook 的那些理由 有了docsify神器,从此爱上看文档 关于写作那些事之github告诉我构建失败,然后呢? docsify-scroll-to-top 入坑 docsify,一款神奇的文档生成利器! 警告 本文最后更新于 May 18, 2021,文中内容可能已过时,请谨慎使用。
什么是Docsify? 一个神奇的文档网站生成器。docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件,所有转换工作都是在运行时。 Docsify使用指南 Docsify使用指南(打造最快捷、最轻量级的个人&团队文档) Windows10 IIS Web服务器安装配置 详情参考:Windows10 IIS Web服务器安装配置 打开IIS并添加Docsify网站 访问托管在IIS中的DocsifyWeb站点 本地访问地址:http://localhost:8899/#/ 如下所示,显示并不完整那是因为Docsify的文件内容基本上都是
docsify 介绍 docsify:一个神奇的文档站点生成器。 官网:https://docsify.js.org/ 我们在开发项目时,需要一份精致的开发文档,那么使用 docsify 是个不错的选择,docsify 是一个快速生成 Vue 风格文档的工具,它直接加载 基础的配置和搭建我这里就不说了,官网有详细的步骤 docsify 嵌入Django项目 1.根据官网教程生成 docs 文件夹 2.将 docs 文件夹(除去index.html)放入 Django $docsify = { basePath:'/static/docs/', ... ... } </script> 5.在view.py增加一个视图,返回文档首页 docs.html
简单而轻便(〜18kB压缩) 没有静态构建的HTML文件 多个主题 快速开始 建议docsify-cli全局安装,这有助于本地初始化和预览网站。 npm i docsify-cli -g 初始化 如果在根目录中编写文档 docsify init ./ 写作内容 在之后init完成后,你可以看到在文件列表./根目录。 $docsify = { loadSidebar: true } </script> <script src="//unpkg.com/<em>docsify</em>/lib/<em>docsify</em>.min.js" $docsify = { auto2top: true, //当路线改变时,滚动到屏幕的顶部。 coverpage: true, //激活封面功能。 /lib/docsify.min.js"></script> <script src="//unpkg.com/<em>docsify</em>/lib/plugins/search.min.js"></script
Markdown 官方教程 Docsify使用指南 Docsify使用指南(打造最强、最轻量级的个人&团队文档) Typora快捷键的使用 使用快捷键能够提高我们的开发,编辑效率,因此对于工具的快捷键灵活操作而言是十分重要的 Typora配置图片保证在Docsify中能够正常访问 一般情况下为了保证项目中的图片在不同的平台中都能够正常的访问到,我们通常都是使用相对路径去存储,因此在Typora中我们需要设置图片保存的路径为当前项目的指定文件夹下
为了管理自己的文献,不让阅读之后的论文吃灰,决定使用docsify + git来管理自己的文献。 git clone 仓库地址 不出意外,你的这个空文件下就会出现在GitHub上创建的项目 五:docsify配置 1.打开cmd,把路径切换为git克隆下来的那个文价夹下,运行以下命令完成docsify docsify init . ,也可以用使用以下的命令来运行docsify docsify serve docs 2.定制侧边栏 详细的配置过程请看docsify文档 简略的过程如下: 3.修改index.html文件,加入标红的那段代码 具体细节可以查看docsify官方文档
官方推荐部署 docsify 快速开始文档:https://docsify.js.org/#/quickstart 快速开始 安装 docsify-cli 工具: npm i docsify-cli /docs 预览网站: docsify serve docs 部署到服务器 docsify 部署文档:https://docsify.js.org/#/deploy 可以选择部署到以下服务: GitHub 自定义配置 docsify 自定义配置文档:https://docsify.js.org/#/configuration 各项配置都在 window.$docsify 里。 插件 docsify 插件文档:https://docsify.js.org/#/plugins docsify 有丰富的插件,可以按需添加。 截止到发文,docsify 的最新版本是 4.11.3,查询更多版本请查看「docsify releases」。
docsify init ./docs <! $docsify = { //... } </script> <script src="//cdn.jsdelivr.net/npm/<em>docsify</em>/lib/<em>docsify</em>.min.js //cdn.jsdelivr.net/npm/<em>docsify</em>/lib/<em>docsify</em>.min.js"></script> </body> </html> 官方地址的压缩版 压缩版 css <link /npm/docsify/lib/docsify.min.js"></script> 其他主题 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/ <em>docsify</em>/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/<em>docsify</em>/themes/dark.css
而是采用了 在线阅读 的方式,但在这过程中我发现了很多的问题,阅读体验很差劲 无法返回顶部 侧边栏没有层级目录显示 阅读记录无法保存(每次打开都需要从头开始查找) 于是我便想为这个项目做些什么 修改页面布局 docsify 介绍 查阅了很多资料,最终我找到了 docsify,这样一款文档神器,以下介绍来自官方文档 docsify是一个神奇的文档网站生成器。 安装避坑 大家在使用命令 npm i docsify-cli -g 全局安装 docsify-cli 工具时,如果你在安装 node.js 时修改了默认的路径: node_global 和 node_cache ,在运行全局安装命令之后可能会出错,这里需要找到默认的脚本 docsify.cmd ,将其路径添加到环境变量 [05137d3fe1534910a650780d9018049d.png] 避免后续系统无法识别 docsify 命令,其他的我们按照文档配置就好啦,如果需要完全卸载重新安装,请使用命令 npm uninstall -g docsify 应用效果 [5cfc5869bf5c4d029c524f546fa9672b.gif
使用docsify 写开源文档 官网:https://docsify.js.org/#/ docsify 是一个动态生成文档网站的工具。 查看node 版本,命令:node -v 版本:v8.9.4 1.2 安装docsify-cli工具 命令行执行: npm i docsify-cli -g 会在这个路径下 C:\Users\Administrator \AppData\Roaming\npm\node_modules 生成 docsify-cli 文件夹 ? 1.3 初始化文档结构 先创建一个本地文件夹docs,然后执行命令 docsify init . $docsify = { coverpage: true } </script> 添加_coverpage.md文件来配置封面页 !
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io /docsify-themeable/#/ Quick Start Installation Create a docsify site by following the instructions on the docsify.js website. docsify-cli globally npm install -g docsify-cli # Serve current directory docsify serve # Serve . /lib/docsify.min.js"></script>
在推特上搜索 Docsify 的时候发现了一个在少数派上发布的配置 RSS 订阅的文章 ? 有人引用说: 挺少能在少数派上看到这么离谱的文章。 作为教程,竟然通篇不提其静态博客是 Powered by Docsify。 哈哈哈,点进去看了一下原文 《给你的静态博客带来 RSS 订阅》 ,确实没有看到 Docsify 的身影,不过原作者的博客确实是用了 Docsify 研究了一下他的这篇文章,生成 RSS 的原理就是在 如果你需要可以使用此方法为你的 Docsify 站点生成 RSS 订阅。
那么今天要讲的 Docsify 是什么呢? Docsify简介 Docsify 是一个动态生成文档网站的工具。 docsify 中文文档:https://docsify.js.org/#/zh-cn/ 全局安装 安装脚手架工具 docsify-cli,安装过程中较慢的可以切换 npm 源为 cnpm $ npm $docsify = { coverpage: true }</script><script src="//unpkg.com/<em>docsify</em>"></script> docs/_coverpage.md 关于 docsify 定制化,可以看官方文档讲的也很详细 docsify 中文版 https://docsify.js.org/#/zh-cn/,下面开始介绍如何将我们的 blog 项目通过 Github Docsify,因为它用起来给我的感觉真的很简洁,方便。
最终选定的技术方案如下 工具 用途 官网 Typora 文档编写 https://typoraio.cn/ Docsify 文档部署 https://docsify.js.org/#/ Hutool 服务集成 Docsify docsify 可以自动地将 Markdown 中的标题生成目录,快速搭建一个小型的文档网站,整个页面的配色和布局也十分舒适,让阅读体验在不知不觉中提升了好几个档次。 和 Gitbook 不同,docsify 不会生成静态的 HTML 文件,它会智能地加载和解析 Markdown 文件,这就避免了 HTML 文件对整个文档库的“污染”。 还支持丰富的自定义样式。 docsify init .docs 2. 访问 当启动 springboot 项目时,访问 localhost:8888即可访问对应文档 参考文档 [1] SpringBoot整合Docsify生成网站文档-每天学Java-腾讯云社区
这次,我们决定使用 md 的文档格式,所以我们考虑在 Docsify 和 Hugo 之间进行选型。DocsifyDocsify 主打的就是一个简单。 对个人用户来说,使用 Docsify 是非常好的选择,这个能让个人只专注内容的,而不需要考虑复杂的配置。 总结如果是个人使用,在前端和技术能力也不是非常强的情况下,建议使用 Docsify ,因为我们还是需要更多的关注内容。 https://www.isharkfly.com/t/docsify-hugo/15115
关于Docsify 官网地址:https://docsify.js.org/ 在Docsify官网对Docsify是这样的描述的, docsify 是一个动态生成文档网站的工具。 所以这里我不介绍官网使用,而是介绍在SpringBoot项目如何使用Docsify生成文档。下面附上效果图: ? 过程 第一步:新建SpringBoot项目,记得勾选thymeleaf,如果有现成的。 $docsify = { loadSidebar: true } </script> <! --docsify插件的CDN地址--> <script src="https://cdn.bootcss.com/<em>docsify</em>/4.9.4/<em>docsify</em>.min.js"></script> <! 到这里就完成SpringBoot结合Docsify生成文档,笔者觉得在一些小项目中,这样可以非常快速的 生成网站文档,不用另外新建项目。