使用docsify快速生成精美电子书(文档)
851 字
4 分钟
使用docsify快速生成精美电子书(文档)
docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages。
下载并安装docsify
docsify运行时生成页面，所以下载和安装环境很简单，只需要在页面中引入 docsify.min.js 即可.
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>博主个人示例 Intellij IDEA修炼指南（2020版）
<!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="shortcut icon" href="./web/intellij-idea.png" type="image/x-icon"/> <link rel="stylesheet" href="./web/themes/css/theme-simple-dark.css"> <link rel="stylesheet" href="./web/themes/css/theme-search.css"> <link rel="stylesheet" href="./web/themes/css/theme-pagination.css"></head>
<body> <!-- Global site tag (gtag.js) - Google Analytics --> <div id="app"></div> <script> window.$docsify = { name: 'Intellij IDEA修炼指南', logo: './web/intellij-idea.png', // 加载侧边栏 loadSidebar: true, // 侧边栏目录最大层级 subMaxLevel: 3, // 自定义封面页 coverpage: true, // 切换页面自动跳转到页面顶部 auto2top: true, // 右上角渲染github挂件 repo: 'https://github.com/TinyZzh/Intellij-IDEA-Master', // 主页 homepage: 'README.md', // 全文搜索插件配置 search: 'auto', search: { depth: 3, noData: 'No results!', placeholder: 'Search...' } } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="./web/js/docsify-pagination.min.js"></script> <script src="./web/js/docsify-search.min.js"></script> <script src="./web/js/disqus.min.js"></script> <script src="./web/themes/js/docsify-themeable@0.js"></script> <script src="./web/themes/js/zoom-image.min.js"></script>
</body>
</html>定制书籍封面
新建一个名称为 _coverpage.md 的md文件。
_coverpage.md 示例：
# Intellij IDEA修炼指南#
> 旨在帮助Intellij IDEA用户更好的掌握IDEA。
- **上卷 - 内功篇** : 讲解Intellij IDEA内置集成的功能。- **下卷 - 外功篇** : 主要介绍常用或有特色的插件。- 环境 : `Windows 10`, `Intellij IDEA 2020.1`
[内功](/)[外功](/)
定制书籍目录(导航栏)
新建一个名称为 _navbar.md 的md文件。
_sidebar.md 示例：
* [首页](/)* 内功篇* [**新手引导**](zh-cn/000_新用户.md)* [常用快捷键](zh-cn/001_常用快捷键.md)* [常用设置](zh-cn/301_常用设置.md)* [菜单栏](100_菜单栏.md)* [代码提示和补全](400_代码提示和补全.md)* [代码重构](700_代码重构.md)* [`Alt`+`Enter`快捷键实战](499_Alt_Enter快捷键实战.md)* [静态代码检查](450_静态代码检查.md)* [代码覆盖率](410_代码覆盖率.md)* [版本控制](zh-cn/111_版本控制.md)* [Emmet](zh-cn/209_Emmet.md)* [FAQ](900_FAQ.md)* 外功篇* [阿里巴巴Java代码规范](zh-cn/1000_阿里巴巴Java代码规范.md)* [Lombok](zh-cn/1001_Lombok.md)* [AiXcoder代码补全插件](zh-cn/1002_AIXcoder.md)* [Google Protocol Buffer](zh-cn/1003_Google_Protocol_Buffer.md)* [Material Theme UI](zh-cn/1004_Material_Theme_UI.md)* [静态代码检查](zh-cn/1100_静态代码检查扩展.md)* [Custom Postfix Templates](1300_Custom_Postfix_Templates.md)
支持emoji表情
引入 emoji插件
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>支持多语言本地化
默认读取根目录的全部文档，并根据国家，组织你的markdown文档或者html网页。
示例：
支持mermaid
mermaidjs是一种基于JavaScript语言的将文本和代码（DSL）转为图表的绘图制图工具。
var num = 0;mermaid.initialize({ startOnLoad: false });
window.$docsify = { markdown: { renderer: { code: function(code, lang) { if (lang === "mermaid") { return ( '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>" ); } return this.origin.code.apply(this, arguments); } } }}自定义404页面
在配置项中 notFoundPage 指定对应的路径和文件。
window.$docsify = { notFoundPage: { '/': '_404.md', '/de': 'de/_404.md', },};接入Github Pages
创建一个空的Github仓库并提交。并根据下图修改Github Pages设置，允许Github自动编译和发布你的仓库。
参考资料
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
使用docsify快速生成精美电子书(文档)
https://tinyzzh.github.io/posts/2023-02-23-docsify/ 相关文章 智能推荐
1
Rust语言从入门到精通系列 - SeaORM框架实战(数据库DML篇)
Rust 2023-05-30
2
Rust语言从入门到精通系列 - SeaORM框架实践(基础篇)
Rust 2023-05-30
3
Rust语言从入门到精通系列 - SQLx模块MySQL入门
Rust 2023-05-30
4
Rust语言从入门到精通系列 - SQLx模块PostgreSQL入门
Rust 2023-05-30
5
Rust语言从入门到精通系列 - SQLx模块SQLite入门
Rust 2023-05-30
随机文章 随机推荐
评论区
欢迎来到我的博客！这是一则示例公告。
音乐
暂未播放
0:00 0:00
211
38
200
337,853
0 天
0 天前