整个博客增加 Hypothesis 批注功能

例行啰嗦

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 文件内设置高亮文本的样式，字体加粗、下划线、背景为黄色（模拟划线笔记样式）。

/* 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%);，并取消加粗，待下次部署后效果检验

20251005 修改

加载过慢，取消加载，转为按需加载

注释掉官方的的代码

1
2
3

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

在maupassant\source\js中增加文件lazy-hypothesis.js

document.addEventListener('DOMContentLoaded', function() {
  
  const triggerButton = document.getElementById('hypothesis-trigger');

  // 检查按钮是否存在
  if (triggerButton) {
    
    // 监听点击事件
    triggerButton.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止 <a> 标签的默认跳转行为

      // 防止重复加载：检查脚本是否已被加载
      if (document.querySelector('script[src="https://hypothes.is/embed.js"]')) {
        console.log('Hypothes.is is already loaded or loading.');
        return;
      }
      
      console.log('Loading Hypothes.is script...');

      // 1. 创建一个新的 <script> 标签
      const hypothesisScript = document.createElement('script');
      hypothesisScript.src = 'https://hypothes.is/embed.js';
      hypothesisScript.async = true; // 异步加载

      // 2. 将脚本添加到 <head> 中
      document.head.appendChild(hypothesisScript);

      // 3. 隐藏触发按钮，因为脚本加载后Hypothes.is会显示自己的UI
      this.style.display = 'none';
    });
  }
});

base.pug中增加（注意缩进）：

a(href="#", id="hypothesis-trigger", title="开启网页标注功能", aria-label="Enable annotations")
  | <svg viewBox="0 0 384 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  |   <title>xl - black</title>
  |   <g id="xl---black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  |     <path d="M240.941176,384 L352.003017,384 C369.64758,384 384,369.674463 384,352.003017 L384,31.9969832 C384,14.3524196 369.674463,0 352.003017,0 L31.9969832,0 C14.3524196,0 0,14.3255373 0,31.9969832 L0,352.003017 C0,369.64758 14.3255373,384 31.9969832,384 L143.058824,384 L192,448 L240.941176,384 L240.941176,384 Z" id="Path" fill="#202020"></path>
  |     <path d="M304,319.790403 C321.673112,319.790403 336,305.510435 336,287.895201 C336,270.279968 321.673112,256 304,256 C286.326888,256 272,270.279968 272,287.895201 C272,305.510435 286.326888,319.790403 304,319.790403 Z" id="Path" fill="#FFFFFF"></path>
  |     <path d="M112.129807,64 L64,64 L64,320 L112.129807,320 L112.129807,248.04636 C112.129807,213 128,196 144,192 C160,188 176.302883,198 176.302883,224.055632 L176.302883,320 L224.43269,320 L224.43269,209.740579 C224.432693,160 192,144.049446 160,144.04945 C128.173076,144.049455 112.129807,176.030907 112.129807,176.030906 L112.129807,64 Z" id="Path" fill="#FFFFFF"></path>
  |   </g>
  | </svg>

style.scss中增加：

/* 新版 Hypothes.is 触发按钮样式 */
#hypothesis-trigger {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1001;

  /* 模仿原生按钮的背景、边框和尺寸 */
  background-color: white;
  border: 1px solid #dbdbdb; /* 关键：精致的边框 */
  width: 32px;  /* 按钮尺寸 */
  height: 32px;
  border-radius: 50%; /* 圆形 */
  
  /* 用于居中内部的 SVG 图标 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 设置图标的默认颜色 */
  color: #5f6368; /* 中度灰色 */

  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加细微阴影 */
  transition: all 0.2s ease-in-out; /* 平滑过渡效果 */
}

/* 鼠标悬停时的样式 */
#hypothesis-trigger:hover {
  color: #000; /* 图标变为黑色 */
  border-color: #ababab; /* 边框颜色加深 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 阴影加深 */
}

/* 控制内部 SVG 图标的大小 */
#hypothesis-trigger svg {
  width: 18px;  /* SVG 图标的实际大小 */
  height: 18px;
  /* 关键：让 SVG 的填充色继承父元素的 color 属性 */
  fill: currentColor; 
}

CHANGELOG

20210312 Arlmy 创建、发布
20210322 Arlmy 增加 CSS 优化，写入“进一步配置”
20210713 Arlmy 修改颜色、取消加粗
20251005 Arlmy 取消加载，转为按需加载