Docsify | 搭建个人静态笔记库

2021-10-19

1875字

甘普基本变形定律

Docsify

最后搭着搭着就变成了撸猫站点，也许这就是真正的学习热情吧。

实在太不想学习了

这次是用Docsify搭的一个笔记站，其实Docsify本身是拿来做产品文档的，但之前看到有人拿来搭了前端学习笔记，觉得也太好用了。不仅支持Markdown的强调语法和提示语法，还自带一个全文搜索。由于是根据md进行渲染生成，写起来也很方便，和如今流行的各种基于md的笔记软件都能做很好的配合。

（小声，我还觉得这个很合适用来做跑团Log堆放处，因为每个侧边栏都可以独立出来。

而且！！有！！中文文档！！——于是找了个假期就开始折腾，这篇文章拿来记录一下自定义过程和做法，这次基本没踩坑哎，学了一些Html基础后感觉我升级了！

基础工具和教程

首先用到的是中文文档，其次用到的是B站的视频教程，后者对理解前者有奇效。

辅助用品是上面学习笔记的Github仓库，拿来抄了个Sidebar结构。

常用命令和语法

本地预览

docsify serve docs

强调语法

!> 一段重要的内容，可以和其他 **Markdown** 语法混用。

提示语法

?> 一个提示块，用来写重点内容

注音html写法（太麻烦了准备换掉

これは<ruby><rb>日</rb><rt>に</rt> <rb>本</rb><rt>ほん</rt> <rb>語</rb><rt>ご</rt></ruby>です。

自定义和美化过程

配置项

    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true, //读取侧边栏
      subMaxLevel: 4, //最大目录层级
      name: 'Mantyke‘s note', //开启快捷跳转回首页
      themeColor: '#758a99', //主题色
      autoHeader: true, //和loadSidebar配合，自动为每个页面增加标题
      search: { //搜索配置，照抄的
          maxAge: 86400000,
          placeholder: '搜索',
          noData: '找不到结果',
          hideOtherSidebarContent: false,
          namespace: 'docsify-demo',
          depth: 10,
          
……          
……

  <!--搜索插件-->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

本地引用CSS

因为想做CSS修改所以把vue.css放到了本地，注意themes文件夹要放在docs文件夹里，之后修改index.html。

<link rel="stylesheet" href="/themes/vue.css">

引入思源宋体

在index.html的head部分加入引用代码，在vue.css里找一下font-family，加入'Noto Serif SC',

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap" type="text/css" rel="stylesheet">

调整提示块颜色

.markdown-section p.warn {
  background: rgba(56, 78, 148, 0.1);
  border-radius: 2px;
  padding: 1rem;
}

我发现直接在色轮里调色比找现成色卡好看多了。

调整内容范围

目标是电脑端文章宽度限制在浏览器约四分之三处，而手机端仍然居中显示

.markdown-section {
  margin: 0 auto;
  max-width: 80%;
  padding: 30px 20px 40px 20px;
  position: relative;
}

.content{max-width:60%} //增加一行，限制在60%
@media screen and (max-width: 768px) {
  .github-corner,
  .sidebar-toggle,
  .sidebar {
    position: fixed;
  }

调整侧边栏

.sidebar li {
  margin: 2px 2px 2px 0px;
}

增加伴学猫

参考运维咖啡吧的内容，下载文章中提到的Github仓库内容，把Live2D文件夹放进Docs文件夹，然后在index.html中加入JS。

  <!-- 养猫live2D -->
  <script src="/live2d/L2Dwidget.min.js"></script>
  <script type="text/javascript">
    L2Dwidget.init({
      model: {
        jsonPath: '/live2d/tororo/assets/tororo.model.json',
      },
      display: {
        superSample: 2,
        width: 150, //控制猫猫大小
        height: 150, //控制猫猫大小
        position: 'left', //控制猫猫位置
        hOffset: 150, //微调猫猫位置
        vOffset: 0,
     },
      mobile: {
        show: false, //手机端不显示
        scale: 1,
        motion: true,
      },
      react: {
        opacityDefault: 0.9,
        opacityOnHover: 0.2,
      }
    })
  </script>

加入随机一猫

找了几个直接返回图片的API接口。

这个是竖屏猫图，需要限制大小为50%，不然图片长度出超出一屏。

<img src="https://hefollo.com/api.php?type=dongwu" width="50%" height="50%"/>

3650000随机API提供的横屏动物壁纸，另外优客API也提供一些

<img src="http://3650000.xyz/api/360.php?cid=14"/>

感觉都蛮好的，就是有点慢……

另外十五发了一个公共API仓库，但需要自己写JS解析，我……不会，所以先记在这里。

就是访问API会返回一个字符串（json），你要写编程语言（js）从字符串里找出图片网址然后在网页（html）里展示出来

针对不同的API的json格式，js写法还不一定一样，还得从头学JS和json和html，不如找个返回图片的API将就一下（

修改浏览器图标

建了个image文件夹，把图标命名为favicon.ico，在index.html加入

<link rel="shortcut icon" href="/image/favicon.ico">

加入盘古之白

<script src="//cdn.jsdelivr.net/npm/docsify-pangu/lib/pangu.min.js"></script>

Vercel部署

本来是打算用Github Pages部署，值得注意的是文档中说要在Pages页选择master branch /docs folder，但我只上传了Docs文件夹的内容，所以还是从根目录读取。

但遇到一个问题：本地引用CSS后，Github Pages无法读取样式文件，网上搜了一下还是不知道发生了什么。所以改用Vercel进行部署，药到病除，立刻就好了（。

之后配置好子域名就大功告成，买了一个域名后为所欲为得非常快乐。

一些准备逐步添加的插件

分页：docsify-tabs

分栏：docsify-example-panels

Markdown扩展：Ruby标签拓展，好像差不多的另一个拓展

那什么时候学习呢？

救命，今天一定，今天一定……