使用 docsify 創建自己的 markdown 文檔系統
先來看一下我在碼雲上創建的demo:
http://lin1270.gitee.io/nicedoc/#/
GIT自己clone一下:
https://gitee.com/lin1270/nicedoc.git
PRE.------------------------------------
1.如果沒有安裝NODEJS,先安裝一下NODEJS。
2.安裝docsify: ---> 方便本地跑起來看效果,不然直接懟GIT上,可能格式不正確的啦。
npm i docsify-cli
3.創建git。 ----> 方便版本管理。有些文檔,有版本管理,更容易應對扯皮。
4.將GIT拉下來,如果你想用我一樣的結構,就複製一下我的文件夾唄。
5.本地預覽:
docsify serve
當然,也可以創建nodejs項目,在 package.json 中加入腳本: "dev": "docsify serve",
這樣就可以愉快地執行:npm run dev啦。
6.一切就緒就可以傳到GIT了。
7.那麼如何愉快地遠程查看呢?
這就需要配置GIT了。
那麼請參照官方文檔:
https://docsify.js.org/#/deploy?id=github-pages
(我使用碼雲,碼雲自動部署貌似要付費才得,所以我是需要手動更新,才生效的)
(所以建議使用github,github只要PUSH成功,再CTRL+R刷新即可看到更新後的效果了)
文檔結構主要分爲幾部分:
1. 搜尋框。
2.左側菜單。side.md
3.右上角的導航欄。nav.md
4.內容區。
入口:
index.html
看一下配置就知道文檔的組織結構了,不必贅述。
下面帖一下錦榮大佬幫寫的菜單點擊折疊展開的牛B插件代碼:
plugins: [
function(hook, vm) {
hook.doneEach(function() {
var sidebarLiEls = document.querySelectorAll('.sidebar-nav li')
sidebarLiEls.forEach(function(el) {
el.style.cursor = 'pointer'
el.addEventListener('click', function(e) {
e.stopPropagation()
clearActiveClass()
el.classList.add('active')
var targetEl = e.target.children[0] || e.target.nextElementSibling
if (!targetEl) return
if (targetEl.nodeName.toLowerCase() !== 'ul') return
if (targetEl.style.display === 'none') {
targetEl.style.display = 'block'
} else {
targetEl.style.display = 'none'
}
}, false)
}) function clearActiveClass() {
sidebarLiEls.forEach(function(el) {
if (el.classList.contains('active')) {
el.classList.remove('active')
}
})
}
})
}
]
使用 docsify 創建自己的 markdown 文檔系統的更多相关文章
- Markdown 文档生成工具
之前用了很多Markdown 文档生成工具,发现有几个挺好用的,现在整理出来,方便大家快速学习. loppo: 非常简单的静态站点生成器 idoc:简单的文档生成工具 gitbook:大名鼎鼎的文档协 ...
- 入坑 docsify,一款神奇的文档生成利器!
layout: postcategory: javatitle: 入坑 docsify,一款神奇的文档生成利器!tagline: by 沉默王二tags: - java Guide 哥是我认识的一个非 ...
- 如何創建一個自己的 Composer/Packagist 包 (PHP)
如何創建一個自己的 Composer/Packagist 包 首先讓我們踏着歡快的腳步去Github創建一個新庫,這裏取名 composer-car,又歡快的將它克隆到本地: git clone ht ...
- js 加载并解析Markdown文档
网上有很多网站会通过.md文档来做页面内容(比如,阮一峰老师的es6入门blog: http://es6.ruanyifeng.com/),很好奇,这是怎么做的?(至于.md是什么,或许(https: ...
- 使用Python从Markdown文档中自动生成标题导航
概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...
- 「Ionic」創建新項目
1.創建新項目 创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidem ...
- Linux(Ubuntu)使用日记------markdown文档转化为word文档
Linux(Ubuntu)使用日记------markdown文档转化为word文档
- 将markdown文档使用gulp转换为HTML【附带两套css样式】
将markdown文档使用gulp转换为HTML[附带两套css样式] 今天遇到一个需求,即将Markdown文档转为为HTML在网页展示,身为一名程序员,能用代码解决的问题,手动打一遍无疑是可耻的. ...
- [Ms SQL] 基本創建、修改與刪除
##創建 table student, 內涵 id ,name ,tel三種columne,設定id為primary key create table student ( id int primary ...
随机推荐
- 配置https证书
官网: https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx ssl安装检测工具: https://www.myssl.cn/tools/ch ...
- 微信小程序开发入门教程(一)---hello world
由于无法备案网站,前期做了个微信小程序(开发版)就搁置了,几乎忘了开发过程.现在重新梳理,做个记录. 一.最基本的小程序前端例子hello 1.下载安装 微信开发者工具 官网: https://d ...
- cookbook 10.1生成随机密码
任务: 随机地创造出新密码.比如,有时需要给新的用户账号分配新的密码. 解决方案: from random import choice import string def GenPasswd(leng ...
- Battle ships HDU - 5093二分匹配
Battle shipsHDU - 5093 题目大意:n*m的地图,*代表海洋,#代表冰山,o代表浮冰,海洋上可以放置船舰,但是每一行每一列只能有一个船舰(类似象棋的車),除非同行或者同列的船舰中间 ...
- 【模板】OI常用模板(待补充)
//PS:最近修改日期:2017-11-07 20:41:44 首先感觉这种模板类的东西写了还是很有意义的,毕竟时不时的可以拿出来借鉴一下. 现在因为刚开始写这一类的东西,所以说还不是很详细,若有读者 ...
- vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法
我用vue开发的一个小项目,项目开发出雏形,想打包一下放测试,但是我想放测试前自己检查一下经过npm run build打包生成的项目,在本地服务器能不能正常跑,于是,经过网上大哥的帮忙,写了个简易的 ...
- 使用wait/notify实现生产消费模型
public class A { private Deque<Integer> list = new LinkedList<>(); private int max = 10; ...
- Codeforces 981 D.Bookshelves(数位DP)
Codeforces 981 D.Bookshelves 题目大意: 给n个数,将这n个数分为k段,(n,k<=50)分别对每一段求和,再将每个求和的结果做与运算(&).求最终结果的最大 ...
- [CSP-S模拟测试]:射手座之日(dsu on tree)
题目传送门(内部题103) 输入格式 第一行一个数$n$,表示结点的个数. 第二行$n–1$个数,第$i$个数是$p[i+1]$.$p[i]$表示结点$i$的父亲是$p[i]$.数据保证$p[i]&l ...
- 使用conda进行本地安装
1. 由于安装源被墙转换为本地安装 例如要安装 boost-1.59版本,因为在默认源中没有,我们指定了特定源进行安装 conda install -c menpo dlib=boost-1.59 然 ...