[TOC] > [home](https://jingping-ye.github.io/docsify-docs-zh/) ## 概述 Docsify 是一个轻量级的文档网站生成器，不会生成静态 html 文件，而是在运行时直接加载并解析 Markdown 文件。 **主要特点** * 🚀 零配置，快速开始 * 📝 智能的全文搜索 * 🎨 多个主题 * 🌐 支持服务端渲染 SSR * 🔌 丰富的插件系统 * 💻兼容 IE11 * 🌍 支持多语言 ## 插件 - 全文搜索 - 谷歌分析 - emoji - 外部脚本 - 放大图片 - 每一页添加 Edit on github 按钮 - 嵌入 jsfiddle - 复制到剪贴板 - Disqus 评论 - 领英 - Gitalk - 翻页插件 - 字数统计 ## 支持的主题 ``` // 未压缩 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css"> // 压缩 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css"> ``` ## 快速入门 ### 初始化 ``` docsify init docs ``` 目录结构 ``` |—— docs |—— index.html 入口 |—— README.md 主页 |—— .nojekyll 防止Github忽视下划线开头文件 ``` 运行 ``` docsify serve /or php -S 127.0.0.1:1234 ``` ### 添加页面 ``` |—— docs |-- REAMD.md |-- 自定义.md |-- 指导文档 |-- READMD.md |-- 部署.md ``` 添加侧边栏 _sidebar.md ``` - [首页](/) - [快速入门](快速入门.md) ``` 配置 ``` <!-- index.html --> <script> window.$docsify = { loadSidebar: true, }; </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> ``` 为标签设置标题 -sidebar.md ``` - [首页](/) - [快速入门](快速入门.md "从这里开始") ``` 从这里开始会出现在页面中 ### 顶部导航栏 index.html ``` <script> window.$docsify = { loadNavbar: true, }; </script> ``` _navbar ``` - [百度](https://www.baidu.com) - 经典文档 - [快速入门](/快速入门.md) - [:cn:](/自定义导航栏.md) ``` ### 添加封面 index.html ``` window.$docsify = { coverpage: true, onlyCover: true, // false: 下拉显示文档, true=跳转显示文档 }; ``` _coverpage.md ``` # docsify 中文文档 <small>1.0</small> > 快速文档生成器 - 简单轻量（21kB） - 无需静态构建 - 主题丰富 [GitHub](https://github.com/docsifyjs/docsify/) [快速上手](/快速上手/开始) ``` **自定义背景图片** _coverpage.md ``` <!-- 背景 --> <!----> <!-- 背景颜色 -->  ```