# mayun-pro

**Repository Path**: xiangyingying/mayun-pro

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Headline

### 一 安装

#### 1 新建一个不带readme文档的仓库

#### 2 安装

https://docsify.js.org/#/

```
npm i docsify-cli -g
```

#### 3 初始化项目

```
docsify init ./
```

#### 4 启动

```
docsify serve
```

### 二 配置

https://hooray.github.io/posts/ed9dc49e/

#### 2-1 配置侧边栏

打开 `index.html` 文件配置 `loadSidebar` 选项：

```
window.$docsify = {    loadSidebar: true}
```

接着在根目录下创建 `_sidebar.md` 文件，内容如下：

```
* [首页](/)      //*表示超链接 []里面是内容  ()是链接
* [指南](guide)
* [中文首页](zh-cn/)
* [中文指南](zh-cn/guide)
```

##### 配置文档目录

新建pages文价夹，下面放置导航栏页面

```
* [html-css](pages/html-css)
* [javascript](pages/javascript)
* [vue](pages/vue)
```

```
# html   //#表示引用
html
```

##### 配置标题级数

```
window.$docsify = {
      name: '前端面试',
      loadSidebar: true,
      subMaxLevel: 3      //数字代表几级标题
    }
```

```
# html
 ## 标题1
  ### 标题1-1
  ### 标题1-2
 ## 标题2
html
```

#### 2-2 配置导航栏

```
window.$docsify = {
    loadNavbar: true
}
```

接着在根目录下创建 `_navbar.md` 文件，内容如下：

```
* [En](/)
* [中文](/zh-cn/)
```

如果导航内容很多，也可以使用嵌套的方式：

```
* En
  * [Index](/)
  * [Guide](guide)
* 中文
  * [首页](/zh-cn/)
  * [指南](/zh-cn/guide)
```

#### 2-3 设置封面

打开 `index.html` 文件配置 `coverpage` 选项：

```
window.$docsify = {coverpage: true}
```

接着在根目录下创建 `_coverpage.md` 文件，内容就是标准的 markdown 语法，可以参考一下官方的封面：

```
![logo](assets/github.png)
# 前端面试宝典
> 涉及以下技术栈
* [html-css](pages/html-css)
* CSS
* Javascript
* vue
* react
* angular

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#quick-start)
```

封面的背景是随机生成的渐变色，我们也可以指定一个背景色或者背景图，只要放在文档末尾就可以，同时设定只生效第一个。

```
<!-- 自定义背景色 -->![color](#f0f0f0)<!-- 自定义背景图 -->![](background_image.png)
```

#### 2-4 githut小图标

```
repo:"xiangyingying",
```

#### 2-5 隐藏readme文档

```
homepage:"pages/html-css.md"
```

#### 2-6 不返回到封面

```
 mergeNavbar:true,
```

#### 2-6 配置搜索框

https://docsify.js.org/#/plugins?id=full-text-search

```
search:{
        paths:["auto"],
        maxAge:86400000,
        placeholder: 'Type to search',
        depth: 6,
        noData:"没有搜索数据"
      }
      
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
```

#### 2-7 使用emoji

emoji代码使用大全

https://www.uulucky.com/emoji.htm

默认是提供 emoji 解析的，能将类似 `:100:` 解析成 <img src="https://github.githubassets.com/images/icons/emoji/100.png" alt="100" style="zoom:25%;" />但是它不是精准的，因为没有处理非 emoji 的字符串。如果你需要正确解析 emoji 字符串，你可以引入这个插件。

```html
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
```

2-8 文档中使用图片

图片缩放

```
![](../assets/github.png)
```

```
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
```