例行啰嗦

Hypothesis, to enable a conversation over the world’s knowledge.

在搜索引擎检索本博客相关收录,凑巧看到了 Hypothesis,瞬间察觉这是一个成熟的 Web 批注工具,一直都很希望在博客上增加这个功能,大致看了下文档就决定安装了。

在页面上划词、划句,即可看到“批注”和“高亮”的按钮。注册账号后能保存自己的所有批注,结合官方 Chrome 插件使用,还可以查看当前页面上其他人的批注(全球的访问者)。

默认会显示高亮批注,我把它关上了,具体怎么显示,我会抽空再仔细调整。

配置

themes\maupassant\layout\_partial\head.jade 文件中增加部署代码。

我加在了 favicon 前面。

1
2
3
script.js-hypothesis-config(type='application/json').
{"showHighlights": false}
script(src='https://hypothes.is/embed.js' async='')

部署:hexo g -d

进一步配置

修改 themes\maupassant\layout\_partial\head.jade 文件中的部署代码,将高亮显示由 false 改为 true,因为显示高亮后通过点击高亮文字即可查看侧栏中的公开注释。

1
2
3
script.js-hypothesis-config(type='application/json').
{"showHighlights": true}
script(src='https://hypothes.is/embed.js' async='')

themes\maupassant\source\css\style.scss 文件内设置高亮文本的样式,字体加粗、下划线、背景为黄色(模拟划线笔记样式)。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* hypothes.is hypothesis highlight style */
.hypothesis-highlight {
font-weight: bold;
padding-bottom: 2px;
word-break: break-all;
text-decoration: none;
border-bottom: 0.5px solid;
background: linear-gradient(white 20%, #fcf69a 43%, white 90%);
&:hover {
font-weight: normal;
border-bottom-style: none;
}
}

部署:hexo g -d

20210713 修改

弱化划线效果,将划线颜色修改为 background: linear-gradient(white 20%, #f1f1f0 43%, white 90%);,并取消加粗,待下次部署后效果检验


CHANGELOG

  • 20210312 Arlmy 创建、发布
  • 20210322 Arlmy 增加 CSS 优化,写入“进一步配置”
  • 20210713 Arlmy 修改颜色、取消加粗