一、快速开始
1.安装
推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档
npm i docsify-cli -g
2.初始化
直接通过 init 初始化项目，例如想在项目的 folderName文件夹里写文档
docsify init ./folderName
3.开始写文档
初始化成功后，可以看到 ./docs 目录下创建的几个文件
index.html 入口文件
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
直接编辑 docs/README.md 就能更新文档内容，当然也可以添加更多页面
4.本地预览
通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果
docsify serve folderName
或者
cd ./folderName
docsify serve
默认访问地址 http://localhost:3000
二、快速开发
得益于docsify对于md格式文件的支持，我们可以直接编写md格式文件，然后在_sidebar.md文件中配置路由，即可实时预览我们编写的内容
路由格式[rootName](rootPath)
路由以当前服务开启的文件夹为根目录，例如上例中的folderName文件夹中有一个名为vue的文件夹，里面由一个index.md文件，我们要配置该文件的路由即为
[我是vue文件夹里的index](/vue/index.md)
三、使用vue及组件
我们需要通过cdn方式引入vue和其他库的代码，建议下载一份保存在本地
<!-- 引入样式 -->
<link rel="stylesheet" href="./public/element-plus.css" rel="external nofollow" target="_blank" />
<!-- 引入 Vue -->
<script src="./public/vue-next.js" rel="external nofollow" ></script>
<!-- 引入组件库 -->
<script src="./public/element-plus.js" rel="external nofollow" ></script>
这样就可以使用vue及elementPlus了
可以在需要使用的md文件内，直接编写html，js，css代码
示例：
<div class="example">
<h3>el-input</h3>
<p>我们来看第一个实例</p>
<p>这是一个用来输入的输入框</p>
<div class="example-component">
<div id="vue-app1">
<el-input v-model="count" placeholder="Please input" />
<span>{{count}}</span>
</div>
</div>
</div>
<script>
const app1 = Vue.createApp({
data: function() {
return {
count: 1111
}
}
});
app1.use(ElementPlus);
app1.mount("#vue-app1");
</script>
四、其他功能文件配置
1.配置 index.html
配置index.html中window.$docsify对象不同属性启用相关功能
具体可参考文档 https://docsify.js.org//zh-cn/configuration
<!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, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<nav>
<a href="/">EN</a>
<a href="/zh-cn/">中文</a>
</nav>
<div id="app"></div>
<script>
window.$docsify = {
name: '技术文档',
repo: 'https://yfgitlab.dahuatech.com/Software-HI/DSS-Web',
loadNavbar: true,
loadSidebar: true,
coverpage: true,
subMaxLevel: 2,
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
}
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
2.配置 _coverpage.md
配置封面信息
具体可参考文档 https://docsify.js.org//zh-cn/cover
技术文档
> 一个神奇的文档网站
- 简单、轻便、易使用
- create by 305470
- create with docsify 3.5
[GitLab](https://github.com/docsifyjs/docsify/)
[Get Started](/README.md)
<!-- 背景图片 -->
<!--  -->
<!-- 背景色 -->
<!--  -->
3.配置 _navbar.md
配置顶部导航栏信息
具体可参考文档 https://docsify.js.org//zh-cn/custom-navbar
* [回到首页](/)
4.配置 _sidebar.md
配置侧边栏信息
具体可参考文档 https://docsify.js.org//zh-cn/more-pages
* [**介绍**](/README)
* [**快速开始**](src/start/index)
* [**markdown语法**](src/markdown-demo/index)
* [**vue实例和组件**](src/vue-demo/index)
更多内容请参考docsify官方文档 https://docsify.js.org/#/zh-cn/
网友评论