如何搭建docsify環境
一、前言,搭建環境
使用docsify必須基於node.js 環境。
1、下載node.js
2、安裝docsify （終端輸入命令，進行安裝）
npm i docsify-cli -g
安裝結束後，輸入命令查看版本
docsify -v
二、初始化項目
核心命令
docsify init ./ //初始化項目
docsify serve ./ //啓動項目
運行地址如下
三、自定義文檔
1、自定義左側菜單
打開index.html,加入 loadSidebar: true,//不生成默認的左側菜單
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默認的左側菜單
}
新建一個文件_sidebar.md 內容如下
* [文檔](home1)
** [介紹](home2)
** [快速瞭解](home2)
** [部署環境](home2)
** [項目介紹](home2)
** [後臺手冊](home2)
** [前端手冊](home2)
** [組件文檔](home2)
** [項目擴展](home2)
** [視頻教程](home2)
* [其他](home1)
** [常見問題](home2)
** [捐贈支持](home2)
* [顯示在界面上的名稱](頁面名稱，也就是跳轉到哪去，文件名) 代表一級目錄，記得空格。
** [顯示在界面上的名稱](頁面名稱，也就是跳轉到哪去，文件名) 二級目錄，空格別忘記了。
2、自定義頂部導航菜單
(1)、可以直接在index.html 中加入nav
<nav>
<a href="#/">菜單1</a>
<a href="#/home1">菜單2</a>
<a href="#/home1/a">菜單3</a>
</nav>
(2)、引入文件
修改index.html 中的
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默認的左側菜單
// subMaxLevel: 3 //是否顯示目錄級別
loadNavbar: true,//自定義頂部導航
}
新建_navbar.md 文件內容如下
* 文檔
* 前後端分離
* 生態系統
* 幫助
* 我要提問
* 常見問題
* 加入羣聊
* github
* gitee
3、獨立封面
修改index.html
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默認的左側菜單
// subMaxLevel: 3 //是否顯示目錄級別
loadNavbar: true,//自定義頂部導航
coverpage: true,//封面定義
onlyCover: true,//只顯示封面
}
新建 _coverpage.md 文件內容如下
 //圖標
# NDCFL
## Fly文檔
> 神奇的文檔網站生成技術
[GitHub](https://github.com/ndcfl/)
[Get Started](/README)
[Get Started](#quick-start)
5、引入搜索，github 的評論等
<!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="css/vue.css">
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">
</head>
<body>
<div id="app"></div>
<div id="gitalk-container" style="width: 60%;float: right;margin-top: -300px;margin-right: 50px"></div>
<script>
window.$docsify = {
name: '',
repo: '',
loadSidebar: true,//不生成默認的左側菜單
// subMaxLevel: 3 //是否顯示目錄級別
loadNavbar: true,//自定義頂部導航
coverpage: true,//封面定義
onlyCover: true,//只顯示封面
// 完整配置參數
search: {
maxAge: 86400000, // 過期時間，單位毫秒，默認一天
paths: [], // or 'auto'，匹配文件路徑
placeholder: '輸入關鍵詞', // 搜索提示框文字， 支持本地化，例子在下面
// placeholder: {
// '/zh-cn/': '搜索',
// '/': 'Type to search'
// },
noData: 'No Results!', // 找不到結果文字提示，支持本地化，例子在下面
// noData: {
// '/zh-cn/': '找不到結果',
// '/': 'No Results'
// },
depth: 2, // 搜索標題的最大程級, 1 - 6
}
}
</script>
<script src="js/docsify.min.js"></script>
<!-- 引入搜索模塊 -->
<script src="js/search.js"></script>
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>
<script>
var gitalk = new Gitalk({
clientID: 'b88876b45cd9d0e39d00', // GitHub Application Client ID
clientSecret: '7ec68da38fccc80e08fbeff8844273ca8e8f452c', // GitHub Application Client Secret
repo: 'gitalk-comment', // 存放評論的倉庫
owner: 'ndcfl', // 倉庫的創建者，
admin: ['ndcfl'], // 如果倉庫有多個人可以操作，那麼在這裏以數組形式寫出
id: location.pathname, // 用於標記評論是哪個頁面的，確保唯一，並且長度小於50
})
gitalk.render('gitalk-container'); // 渲染Gitalk評論組件
</script>
</body>
</html>
