工具_docsify - 技术栈

文章目录

配置环境
侧边栏
导航栏
常用属性配置
- 别名路由
封面
插件

一句话简介：基于Vue的一个静态文档前端框架

配置环境

bash 复制代码

#安装docsify脚手架
npm i docsify-cli -g
#初始化
docsify init ./docs
#启动项目
docsify serve docs

index.html示例

html 复制代码

<!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>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: ''
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

引入有几个不同的CDN网站，看自己的网络能连上哪个吧

侧边栏

当前目录创建一个_sidebar.md 文件

markdown 复制代码

<!-- docs/_sidebar.md -->

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

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>

导航栏

创建一个_navbar.md

markdown 复制代码

<!-- _navbar.md -->

* [En](/)
* [chinese](/zh-cn/)



<!-- _navbar.md -->

* Getting started

  * [Quick start](quickstart.md)
  * [Writing more pages](more-pages.md)
  * [Custom navbar](custom-navbar.md)
  * [Cover page](cover.md)

* Configuration
  * [Configuration](configuration.md)
  * [Themes](themes.md)
  * [Using plugins](plugins.md)
  * [Markdown configuration](markdown.md)
  * [Language highlight](language-highlight.md)

常用属性配置

别名路由

window.$docsify = {
  alias: {
    '/foo/(.*)': '/bar/$1', // supports regexp
    '/zh-cn/changelog': '/changelog',
    '/changelog':
      'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
    '/.*/_sidebar.md': '/_sidebar.md', // See #301
  },
};

auto2top: true,切换路由时回到顶端

homepage:"readme.md" 默认值为'README.md'，默认网页

侧边栏点击根目录展开层级设置

subMaxLevel: 2, 默认为0，点击不展开

设置文章内容最大层级

maxLevel: 4, 默认为6

封面

创建一个_coverpage.md

markdown 复制代码

 window.$docsify = {
    coverpage: true
  }

<!-- _coverpage.md -->

![logo](_media/icon.svg)

# docsify <small>3.5</small>

> A magical documentation site generator.

- Simple and lightweight
- No statically built html files
- Multiple themes

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

插件

使用emoji

markdown 复制代码

<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- _navbar.md -->

* [:us:, :uk:](/)
* [:cn:](/zh-cn/)

全文检索

html 复制代码

 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
 
 <script>
  window.$docsify = {
    search: 'auto', // default

    search: [
      '/',            // => /README.md
      '/guide',       // => /guide.md
      '/get-started', // => /get-started.md
      '/zh-cn/',      // => /zh-cn/README.md
    ],

    // complete configuration parameters
    search: {
      maxAge: 86400000, // Expiration time, the default one day
      paths: [], // or 'auto'
      placeholder: 'Type to search',

      // Localization
      placeholder: {
        '/zh-cn/': '搜索',
        '/': 'Type to search',
      },

      noData: 'No Results!',

      // Localization
      noData: {
        '/zh-cn/': '找不到结果',
        '/': 'No Results',
      },

      // Headline depth, 1 - 6
      depth: 2,

      hideOtherSidebarContent: false, // whether or not to hide other sidebar content

      // To avoid search index collision
      // between multiple websites under the same domain
      namespace: 'website-1',

      // Use different indexes for path prefixes (namespaces).
      // NOTE: Only works in 'auto' mode.
      //
      // When initialiazing an index, we look for the first path from the sidebar.
      // If it matches the prefix from the list, we switch to the corresponding index.
      pathNamespaces: ['/zh-cn', '/ru-ru', '/ru-ru/v1'],

      // You can provide a regexp to match prefixes. In this case,
      // the matching substring will be used to identify the index
      pathNamespaces: /^(\/(zh-cn|ru-ru))?(\/(v1|v2))?/,
    },
  };
</script>

翻页插件

html 复制代码

<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
window.$docsify = {
  // ...
  pagination: {
    previousText: '上一章节',
    // or
    nextText: {
      '/en/': 'NEXT',
      '/': '下一章节'
    },
    crossChapter: true,
    crossChapterText: true,
  },
}