调研 docsify 插件

为 layotto 官网 调研插件

1. 搜索

https://docsify.js.org/#/zh-cn/plugins?id=%e5%85%a8%e6%96%87%e6%90%9c%e7%b4%a2-search

image.png
image.png
存在的问题:

• 双语文档搜索体验不佳

  • 中英文重复出现. 能不能只搜当前语言的文档？
  • 没有按语言排序，比如当前是中文模式，那么中文排序在前面，英文模式同理

• 搜索下拉框会把目录挡住

2. feedback

让文档可以评论

想了想，如果开评论会导致大家的讨论太分散，就没开
可选插件：

• docsify-valine
  https://github.com/daidi/docsify-valine/

• docsify-livere
  https://github.com/TaQini/docsify-livere

• waline
  https://waline.js.org/guide/get-started.html
  https://github.com/cxcn/docsify-waline/blob/main/README.zh-CN.md

• gitalk
  可以集成gitalk，实现类似 oi-wiki 的功能，在文档下面可以评论。
  https://docsify.js.org/#/zh-cn/plugins?id=gitalk

原理是把评论写到指定issue去
https://gitalk.github.io/
https://github.com/gitalk/gitalk/issues/1

但是要的权限太大了:

image.png
而且博主自己的token也有泄漏风险
https://github.com/gitalk/gitalk/issues/95
https://github.com/gitalk/gitalk/issues/484
总之不敢用。

• Commento
  https://github.com/ndom91/docsify-commento

让文档可以点赞点踩

• 类似于 dapr.io 的这种? 没找到，可以自己写个插件
  image.png

3. 样式

Tabs

https://docsify.js.org/#/zh-cn/plugins?id=tabs

tstmp_20220502120143_166142859-e7f9b0a8-6f9c-4108-a23b-ae6a52795d72.png

折叠/展开

image.png
https://github.com/isaozler/docsify-accordion

select

tstmp_20220501095634_docsify-select-demo.gif

https://github.com/jthegedus/docsify-select

beautiful alerts

https://github.com/fzankl/docsify-plugin-flexible-alerts

阅读进度条

https://github.com/HerbertHe/docsify-progress

文档展示“上次修改时间”

https://github.com/pfeak/docsify-updated
不过这个插件没展示"上次修改的PR"

4. 代码块优化

点击后复制代码

tstmp_20220502120312_166101511-4eb9f26f-282b-4030-8bc1-81f72a9b5666.png
https://docsify.js.org/#/plugins?id=copy-to-clipboard

代码语法高亮

• docsify-code-inline
  https://www.npmjs.com/package/@rakutentech/docsify-code-inline
  试了一下不灵

5. 图片优化

显示尺寸

• 图片默认尺寸太大了，怎么改默认样式，让小图展示100% 尺寸，大图展示50%，或者限制图片框的最大大小？

• 图片点击后最大化、居中
  https://docsify.js.org/#/plugins?id=zoom-image
  [图片上传失败...(image-f22821-1651466738477)]

图片描述语言

https://github.com/KonghaYao/docsify-drawio

6. 性能优化

• 需要手动去掉 vue.css 中的google链接，这个链接会拖慢墙内用户的访问速度
  image.png
  参考
  https://lewky.cn/posts/fonts-googleapis-slow.html/

7. 文本处理

7.1. 中英文之间自动加空格

https://github.com/sy-records/docsify-pangu
docs: automatically add space between chinese and english · Issue #666 · mosn/layotto (github.com)

8. 数据分析

google 统计

https://docsify.js.org/#/zh-cn/plugins?id=%e8%b0%b7%e6%ad%8c%e7%bb%9f%e8%ae%a1-google-analytics

理论上别的统计站点也可以，都是加埋点
https://cloud.tencent.com/developer/article/1705649

Reference

https://docsify.js.org/#/plugins
https://docsify.js.org/#/awesome?id=plugins