例行啰嗦

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 修改颜色、取消加粗