docsify搭建个人知识库

最新推荐文章于 2023-10-24 12:11:12 发布

YanKeyon

最新推荐文章于 2023-10-24 12:11:12 发布

阅读量2.2k

点赞数

分类专栏：工具文章标签： docsify

本文链接：https://blog.csdn.net/Lonelyooacz/article/details/103439770

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个神奇的文档网站生成工具

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。

这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。

优点：轻量快速，只需要一个index.html搭配一个README.md即可快速书写（或者多级目录构建多篇MarkDown。

为什么要用：

Markdown深度用户，经常一篇写很长，用Typora写作和阅读，有大纲预览，但切换到iPad平板没找到合适的，方便的阅读方式。于是想用仓库统一管理，多终端浏览。
备份很重要，仓库既提供了存储，还提供了版本控制。

搭建教程

参考官方文档：docsify官方文档

仓库选择

Gitee、GitHub，能提供Pages服务的即可。

Gitee国内速度快，有Gitee Pages Pro服务（仓库推送自动更新、自定义域名、可配HTTPS证书），属收费性质（个人号免费一个月，企业号免费使用，可申请企业号免费版）。
GitHub国内速度慢，但免费。

docsify配置

贴下个人配置。

index.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, 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">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
</head>
<body>
  <div id="app"></div>
  <script>

    window.$docsify = {
      name: 'KeyonBlog',
      repo: 'https://gitee.com/YanKeyon/YanKeyon',
      loadNavbar: 'navbar.md',
      coverpage: 'coverpage.md',
      search: 'auto',
      noEmoji: true,
      copyCode: {
      	buttonText : 'Copy to clipboard',
      	errorText  : 'Error',
      	successText: 'Copied'
      },
      'flexible-alerts': {
      	style: 'flat'
      },
      formatUpdated: '{YYYY}/{MM}/{DD} {HH}:{mm}',
      plugins: [
        function(hook, vm) {
          hook.beforeEach(function (html) {
            var url = 'https://gitee.com/YanKeyon/YanKeyon/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.js"></script>
  <script src="//unpkg.com/docsify-copy-code"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
  <script src="//unpkg.com/prismjs/components/prism-java.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-c.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-cpp.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-css.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-javascript.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-http.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-python.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-properties.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-sql.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-yaml.min.js"></script>

</body>
</html>

封面配置

coverpage.md

# Keyon's PagesBlog

> A Knowledge Repository.

[Get Started](#keyonblog) 

![](_media/cover.jpg)

![](#FFFFFF)

导航栏配置

navbar.md

* 博客
  * [📖 Pages静态博客](https://yankeyon.gitee.io/#/)
  * [📙 CSDN博客](https://blog.csdn.net/Lonelyooacz)
* 仓库
  * [📁 Gitee](https://gitee.com/YanKeyon)
  * [📂 GitHub](https://github.com/KeyonYan)

效果

YanKeyon

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
docsify搭建个人知识库

一个神奇的文档网站生成工具docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在 Gi...
复制链接

扫一扫