Jekyll 纯 Liquid 标题锚点

GitHub Pages 无法运行自定义 Jekyll 插件，因此在为标题（即 h1 - h6）生成锚点时，你只能使用 JavaScript 解决方案来注入锚点。但如果用户在浏览器中禁用了 JavaScript 怎么办？如果你正在构建静态网站，为什么不把锚点也做成静态的呢？

标题旁边的示例锚点

作为我的"纯 Liquid"系列 Jekyll 代码片段的一部分，这里有一个 Liquid 代码片段，可以修改你生成的 HTML 以注入锚点。想看看它的实际效果吗？以下是我所知道的一些使用这个解决方案的很棒的网站 :heart:。

想要在 Jekyll 布局中添加目录，而不需要 JavaScript 或插件吗？

请查看姐妹项目 allejo/jekyll-toc。

使用方法

好的，那么如何使用它呢？

从最新发布版本或主分支下载 anchor_headings.html 文件
将该文件放入你的 _includes 文件夹
在你的布局中，通常放置 {{ content }} 的地方，你应该使用这个 Liquid 标签来输出你的页面内容：
```
{% include anchor_headings.html html=content anchorBody="#" %}
```

:wheelchair: 链接无障碍性

无障碍性是一个复杂的问题，不同人可能有不同的处理方式。因此，本项目不强制开发者采用任何特定的无障碍处理方法。但是，本项目可以配置为无障碍，如 wiki 中的示例所示。

:warning: 布局继承

如果这个代码片段用在被子布局继承的父布局中，它也会应用到子布局。如果子布局除了父布局之外还使用了这个代码片段，那么标题锚点将会重复。你应该只在一个布局中使用这个代码片段。

:art: 自定义

你可以移除 anchorBody 并通过 CSS 的 content 属性添加图标。你也可以在 anchorBody 中使用 HTML 并添加对屏幕阅读器友好的标记。请查看单元测试目录和维基页面，了解如何使用此脚本的更多示例。

参数

这个代码片段具有高度可定制性。以下是可用于更改代码片段行为的参数。

参数	类型	默认值	描述
`html`	字符串	^*	Jekyll中由kramdown生成的编译后markdown的HTML
`beforeHeading`	布尔值	false	如果锚点应放置在标题内容_之前_，则设为true
`headerAttrs`	字符串	''	将添加到标题标签的任何自定义HTML属性；不能使用`id`；可使用`%heading%`和`%html_id%`占位符
`anchorAttrs`	字符串	''	将添加到`<a>`标签的任何自定义HTML属性；不能使用`href`、`class`或`title`；可使用`%heading%`和`%html_id%`占位符
`anchorBody`	字符串	''	将放置在锚点内的内容；可使用`%heading%`占位符
`anchorClass`	字符串	''	用于每个锚点的类；多个类用空格分隔
`anchorTitle`	字符串	''	用于锚点的`title`属性；可使用`%heading%`占位符
`h_min`	整数	1	创建锚点的最小标题级别；任何低于此值的标题将被忽略
`h_max`	整数	6	创建锚点的最大标题级别；任何高于此值的标题将被忽略
`bodyPrefix`	字符串	''	在标题标签内锚点和内容_之前_插入的任何内容
`bodySuffix`	字符串	''	在标题标签内锚点和内容_之后_插入的任何内容
`generateId`	布尔值	false	如果没有id的标题应生成一个id以使用，则设为true

^* 这是一个必需参数

性能

此代码片段对您网站的性能影响可以忽略不计。以下统计数据来自Jekyll的--profile选项。

文件名                                            | 计数  |    字节数 |  时间
-------------------------------------------------+-------+----------+------

# 2018年8月左右docs.travis-ci.com的性能
_includes/anchor_headings.html                   |   193 | 1667.96K | 0.695