工具_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,
  },
}
相关推荐
李鸿耀2 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1213 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊7 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel7 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴7 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel7 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫7 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin8 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学9 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室11 小时前
CSS高效开发三大方向
前端·css