介绍
Docsify可以快速创建一个文档网站,小巧简洁,支持Markdown语法。快速生成网页界面。
开始使用
- 首先本地安装nodejs环境,具体可以参考上一篇文章。
- 安装docsify推荐的docsify-cli工具
npm i docsify-cli -g
- 创建初始文档
docsify init ./
- 本地化运行之后,浏览器访问
127.0.0.1:4000
就可以看到效果了,非常简单!
docsify serve --port 4000
参考代码
最后附上一段推荐的首页文件配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app">Please wait...</div>
<script>
window.$docsify = {
auto2top: true, //当路线改变时,滚动到屏幕的顶部。
coverpage: true, //激活封面功能。如果为true,则会从中加载_coverpage.md。
executeScript: true, //执行页面上的脚本。只解析第一个脚本标记(演示)。如果存在Vue,则默认开启。
loadSidebar: true, //_sidebar.md如果为真,则从_sidebar.md文件加载边栏,否则从指定的路径加载。
loadNavbar: true,//_navbar.md如果为真,则从_navbar.md文件加载navbar ,否则从指定的路径加载。
mergeNavbar: true,//Navbar将在小屏幕上与侧边栏合并。
maxLevel: 4,//最大的内容表级别。
subMaxLevel: 2,//在自定义边栏中添加目录(TOC)。
ga: 'UA-106147152-1',
name: 'docsify',
search: {
noData: {
'/de-de/': 'Keine Ergebnisse!',
'/zh-cn/': '没有结果!',
'/': 'No results!'
},
paths: 'auto',
placeholder: {
'/de-de/': 'Suche',
'/zh-cn/': '搜索',
'/': 'Search'
}
},
formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function(hook, vm) {
hook.beforeEach(function (html) {
var url = 'https://github.com/PYfive/docsify/blob/master/' + vm.route.file
var editHtml = '[:memo: Edit Document](' + url + ')\n'
return html
+ '\n----\n'
+ 'Last modified {docsify-updated} '
+ editHtml
})
}
]
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</body>
</html>