让 ink 实现 toc

draft: false date: 2018-06-02 22:25:02 cover: http://www.chole.io/blog/images/example.png tags: - ink - blog preview:


缘起

ink 已经很久很久没有更新过了.

并不支持 TOC(table of content), 文章写长了, 没有个目录简直是惨剧, 很容易迷失

导致我不太愿意写太长的 blog, 这并不是一个好习惯

后端解决(放弃)

倒是有爱好者向其提了 issues, 但是都他喵的去年的事了, 看来作者已经懒得不想维护了

我也不太喜欢作者写 go 的风格, 有空了自己来写重构一个自己的 blog 工具吧. 又挖坑了

js 方案

前端 js 也是乱糟糟的, jquery 年代感觉更模块化一些, star 数最多的还是一个jquery 的 toc 插件.

https://github.com/tscanlin/tocbot 试试这个

引入 js

ink 的模板似乎是在 theme 里面, 好奇怪的放置方式

参照这里引入依赖

使用分析

初始化语句是这样的:

tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
});

依次配置了要显示toc的元素, 从哪里抓取 toc, 哪些元素要作为标题

加入样式

https://github.com/bigzhu/ink_blog/commit/32ea88d807d873af6695050e13e9f286b16eceee

解决锚点失效的问题

head 没有生成 id, 所以锚点是失效的

以前就写过一篇来尝试解决了: go 的 markdown 转 html 打开锚点

ink 用的也是 blackfriday, 但是是自己 fork 出来的 github.com/InkProject/blackfriday, 最近的修改是 16 年的了..囧

先直接换成官方的看看: github.com/russross/blackfriday, 没用, 还是没解决这个问题

换成我的项目 https://github.com/bigzhu/blackfriday 这个问题搞定