前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >docsify简单教程

docsify简单教程

作者头像
用户8851537
修改2021-08-03 18:06:08
9590
修改2021-08-03 18:06:08
举报

简介

一个神奇的文档网站生成器。 简单而轻便(〜18kB压缩) 没有静态构建的HTML文件 多个主题

快速开始

建议docsify-cli全局安装,这有助于本地初始化和预览网站。

代码语言:javascript
复制
npm i docsify-cli -g

初始化

如果在根目录中编写文档

代码语言:javascript
复制
docsify init ./

写作内容

在之后init完成后,你可以看到在文件列表./根目录。

  • index.html 作为入口文件
  • README.md 作为主页
  • .nojekyll 防止GitHub页面忽略以下划线开头的文件

您可以轻松更新文档./README.md,当然您可以添加更多页面。

侧边栏

为了有侧边栏,那么你可以创建你自己的_sidebar.md

首先,你需要设置loadSidebar为true。详细信息可在配置段落中找到。

代码语言:javascript
复制
<!-- index.html -->

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

创建_sidebar.md

代码语言:javascript
复制
<!-- docs/_sidebar.md -->

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

其他详细配置情参考官方文档

配置index.html

下面是我参考官方文档修改的一个配置:

代码语言:javascript
复制
<!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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app">Please wait...</div>
  <script>
    window.$docsify = {
      auto2top: true, //当路线改变时,滚动到屏幕的顶部。
      coverpage: true, //激活封面功能。如果为true,则会从中加载_coverpage.md。
      executeScript: true, //执行页面上的脚本。只解析第一个脚本标记(演示)。如果存在Vue,则默认开启。
      loadSidebar: true, //_sidebar.md如果为真,则从_sidebar.md文件加载边栏,否则从指定的路径加载。
      loadNavbar: true,//_navbar.md如果为真,则从_navbar.md文件加载navbar ,否则从指定的路径加载。
      mergeNavbar: true,//Navbar将在小屏幕上与侧边栏合并。
      maxLevel: 4,//最大的内容表级别。
      subMaxLevel: 2,//在自定义边栏中添加目录(TOC)。
      ga: 'UA-106147152-1',
      name: 'docsify',
      search: {
        noData: {
          '/de-de/': 'Keine Ergebnisse!',
          '/zh-cn/': '没有结果!',
          '/': 'No results!'
        },
        paths: 'auto',
        placeholder: {
          '/de-de/': 'Suche',
          '/zh-cn/': '搜索',
          '/': 'Search'
        }
      },
      formatUpdated: '{MM}/{DD} {HH}:{mm}',
      plugins: [
        function(hook, vm) {
          hook.beforeEach(function (html) {
            var url = 'https://github.com/PYfive/docsify/blob/master/' + vm.route.file
            var editHtml = '[:memo: Edit Document](' + url + ')\n'
            return html
              + '\n----\n'
              + 'Last modified {docsify-updated} '
              + editHtml
          })
        }
      ]
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</body>
</html>

运行

代码语言:javascript
复制
docsify serve --port 4000

访问 http:/localhost:4000 即可查看页面效果

总结

docsify用法和gitbook差不多,但是样式比较好看,个人比较喜欢。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
    • 快速开始
      • 初始化
        • 写作内容
          • 侧边栏
            • 配置index.html
              • 运行
                • 总结
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档