# docsify

**Repository Path**: trial-street/docsify

## Basic Information

- **Project Name**: docsify
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-08
- **Last Updated**: 2023-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 一、安装
全局安装docsify-cli，有助于在本地初始化和预览网站 
> npm i docsify-cli -g

### 二、初始化
如果要在子目录中编写文档，可以使用该命令。./docs init
> docsify init ./docs

![效果图](/img/init.png)

此时，基本结构已搭建完成，可尝试运行服务观看效果，命令如下:
> docsify serve ./docs

![效果图](/img/run.png)

打开浏览器，访问 http://localhost:3000/#/

![效果图](/img/result.png)

运行至此，可能你会觉得：“呵呵，不过如此”。别急，问题来了！
当你打算将满腹经纶罗列于此时，你会发现，咦！页面好像动不了，滚轮也不起作用，怎么办！！！
稍安勿躁，我们继续！既然你动不了，那我们就让你动起来，作为前端手残党，调整样式还是手到擒来

### 三、解决休眠样式问题
找到index.html文件，添加如下样式
```
<style type="text/css">
    .content {
      overflow: auto;
    }
</style>
```

呃！好像可以动了，还不错，结构简单，用来做总结貌似还可以。不过！当前页面好像只有一个，如果我的知识储备比较多，一个页面貌似用起来不方便，能不能由多个页面组成，以方便管理！
当然可以，Follow Me！

### 四、配置菜单栏
#### 1、新建文件
新建_sidebar.md 文件用来管理菜单文件,新建菜单文件guide.md(文件名称自定义，最好英文)

#### 2、添加配置
页面建好开始配置,入口文件(index.html)添加如下配置
```
//index.html
<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
```
_sidebar.md添加如下代码
```
<!-- docs/_sidebar.md -->

* [Home](/)
* [Guide](guide.md)
```

效果如下:
![效果图](/img/sidebar.png)

效果至此，基本可以满足你的需求了，毕竟，文档简约型才是博主所追求的，花里胡哨只会影响拔刀速度~呃！学习进度，不过处于对暗黑开发的钟爱，找找能否换换背景色，毕竟，真爱

### 五、更换主题
不同于其他工具需要下载的繁琐，docsify官方提供几种基本主题，对我而言，完全够用
```
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />
```
以上是官方提供的几类主题，按自己需求index.html替换即可
貌似，你想要个封面，来吧！继续

### 六、添加封面
默认情况下，docsify未开启封面，若想开启，如下操作
#### 1、新建文件
新建_coverpage.md文件
```
<!-- _coverpage.md -->

> 一个神奇的文档网站生成器。

- 简单、轻便

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](README.md)
```

#### 2、添加配置
index.html文件中添加如下配置
```
window.$docsify = {
  coverpage: true,                     //开启页面

  // Custom file name
  coverpage: 'cover.md',               //可理解为页面路由

  // multiple covers
  coverpage: ['/', '/zh-cn/'],

  // multiple covers and custom file name
  coverpage: {
    '/': 'cover.md',
    '/zh-cn/': 'cover.md',
  },
};
```

#### 3、修改菜单
修改_sidebar.md文件
```
* [Home](README.md)
```
此步骤不一定非要做，为了体验，还是作以操作未开启封面情况下，默认更目录文件为README.md，开启封面后若不修改，样式冲突，各占一半，影响观看，因此如上操作

### 七、搜索
index文件引入如何文件
```
 <script>
    window.$docsify = {
      search: {
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到结果',
        depth: 3,
      },
    }
  </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
```

### 八、图片点击放大
index文件引入如何文件
```
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
```

### 九、一键复制代码
index文件引入如何文件
```
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
```

### 十、分页
index文件引入如何文件
```
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
```

更多需求，可进入Docsify官网进行查看
[Docsify相关文档](https://docsify.js.org/#/?id=docsify)