快速安装
1. 全局安装docsify
npm i docsify-cli -g
安装成功后显示
image
2. 初始化项目
docsify init ./docs
初始化成功后,可以看到 ./docs
目录下创建的几个文件
index.html
入口文件
README.md
会做为主页内容渲染
.nojekyll
用于阻止 GitHub Pages 会忽略掉下划线开头的文件
直接编辑 docs/README.md
就能更新网站内容,当然也可以写多个页面。
image
3. 本地预览网站
运行一个本地服务器,通过 docsify serve
可以方便的预览效果,而且提供 LiveReload 功能,可以实时的预览。默认通过 http://localhost:3000访问。
docsify serve docs
image
常用配置项
Github Corner
通过设置index.html中window.$docsify的 repo
参数配置仓库地址或者 username/repo
的字符串,会在页面右上角渲染一个 GitHub Corner 挂件,点击即可跳转到Github中对应的项目地址。
<script>
window.$docsify = {
name: '豆瓣影音',
repo: 'https://github.com/Hanxueqing/Douban-Movie.git',
coverpage: true
}
</script>
image
封面
通过设置index.html中window.$docsify的 coverpage
参数,即可开启渲染封面的功能。
<script>
window.$docsify = {
name: '豆瓣影音',
repo: '',
coverpage: true
}
</script>
封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建 _coverpage.md
文件,在文档中编写需要展示在封面的内容。
![logo](https://docsify.js.org/_media/icon.svg)
# 豆瓣影音
> 使用Vue全家桶+Node.js搭建的小型全栈项目.
* 前端框架:vue-cli、vue-router、axios、vuex
* UI类库:Mint-UI、Vant
* 后端数据接口:Express、MongoDB
[GitHub](https://github.com/Hanxueqing/Douban-Movie.git)
[Get Started](#quick-start)
展示效果如图:
image
目前的背景是随机生成的渐变色,我们自定义背景色或者背景图。可以参考官网文档封面这一章节自行设置。
主题
直接打开 index.html 修改替换 css 地址即可切换主题,官方目前提供五套主题可供选择,模仿 Vue 和 buble 官网订制的主题样式。还有 @liril-net 贡献的黑色风格的主题。
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dolphin.css">
其他主题docsify-themeable又提供了三种样式可供选择:
docsify-themeable是一个用于docsify的,简单到令人愉悦的主题系统.
<!-- Theme: Defaults -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
image
<!-- Theme: Defaults -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css">
image
<!-- Theme: Simple Dark -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
image
另外还有一种在网上看到的样式:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
多页面
目前我创建的文档是单页面的,上下滚动即可浏览全部内容。如果想创建多个页面,即点击左侧侧边栏导航跳转到不同url,就需要配置多级路由,这一功能在docsify中也很容易实现,我们需要在index.html文件中的window.$docsify
中开启loadSidebar选项:
<script>
window.$docsify = {
loadSidebar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
然后在根目录创建自己的_sidebar.md文件,配置我们需要显示的页面。详细操作步骤参考官方多页文档教程。
注:配置了loadSidebar
后就不会生成默认的侧边栏了。