旁注式笔记系统的思考（二）

之前在 旁注式笔记系统的思考（一） 中，思考过如何将 " 旁注笔记 " 和源博客文本既能关联起来，又能无侵入的方法。今天偶然在看 Handsome 大佬的博客时，他实现了一个 支持 Markdown 行级别评论 功能，其实这个 " 行级别评论 " 功能和 " 旁注笔记 " 非常相似，所以分析了下他的实现方案，提供一种不同的实现思路。

Handsome 博客方案

评论 api 返回数据如下：

{
  "success": true,
  "data": [
    {
      "sid": "4",
      "cid": "1351",
      "line": "2",
      "text": "而当我阅读其他人博客的时候，很少会去评论，有一个原因就是文章",
      "created": "1748342140",
      "count": "0",
      "comments": [
        {
          "author": "若志奕鑫",
          "avatar_url": "",
          "url": "https://rz.sb",
          "author_tag": "",
          "time": "7 个月前",
          "content": "我嘞个豆啊哥，前段时间还跟一个佬哥讨论这个功能来着，起初还是看到一个大佬的博客也是这样搞（cali.so）  ，我是觉得根据所对应内容进行评论，能有效减少一些水评，评论目的性也会强一点",
          "coid": "33917"
        },
        {
          "author": "友人C",
          "avatar_url": "",
          "url": "https://www.ihewro.com/",
          "author_tag": "博主",
          "time": "7 个月前",
          "content": "是的",
          "coid": "33921"
        },
        {
          "author": "Alan",
          "avatar_url": "",
          "url": "https://toalan.com",
          "author_tag": "",
          "time": "6 个月前",
          "content": "好耶！！！很想要的功能！！！",
          "coid": "33978"
        }
      ]
    },
    {
      "sid": "2",
      "cid": "1351",
      "line": "4",
      "text": "这两周业余时间（非工作时间）调研了一下更细粒度的评论的实现，",
      "created": "1748277636",
      "count": "0",
      "comments": [
        {
          "author": "友人C",
          "avatar_url": "",
          "url": "https://www.ihewro.com/",
          "author_tag": "博主",
          "time": "7 个月前",
          "content": "第一条段落评论！",
          "coid": "33908"
        },
        {
          "author": "林风",
          "avatar_url": "",
          "url": null,
          "author_tag": "",
          "time": "7 个月前",
          "content": "哇，好耶，新的功能又上新啦~",
          "coid": "33923"
        }
      ]
    },
    {
      "sid": "27",
      "cid": "1351",
      "line": "6",
      "text": "因为时间关系，有一些细节还没有完善好，且先发帖一下～",
      "created": "1764820102",
      "count": "0",
      "comments": [
        {
          "author": "alan",
          "avatar_url": "",
          "url": "https://toalan.com",
          "author_tag": "",
          "time": "1 个月前",
          "content": "默默催更，很需要这个功能",
          "coid": "34075"
        }
      ]
    },
    {
      "sid": "3",
      "cid": "1351",
      "line": "8",
      "text": "这次开发中，AI 生成的代码估算占据了40%以上，接下来会跟",
      "created": "1748318949",
      "count": "0",
      "comments": [
        {
          "author": "刚下飞机的匿名人士",
          "avatar_url": "",
          "url": null,
          "author_tag": "",
          "time": "7 个月前",
          "content": "坐等",
          "coid": "33915"
        },
        {
          "author": "Xiaoxuya",
          "avatar_url": "",
          "url": "https://www.sicx.top/",
          "author_tag": "",
          "time": "3 星期前",
          "content": "这个可以有 目前不是很专业的使用Ai开发",
          "coid": "34080"
        }
      ]
    }
  ],
  "count": 4
}

可以看到，锚点机制是通过 text 字段——即每段的前 30 个字进行关联的。不过，line 字段目前还不知道有什么作用。

同时，链接至对应行的链接为 /archives/1351/?sid=2，通过 sid => 对应 text => 前端段落正文匹配 的机制进行 " 行级别 " 的文章定位。

cali.so 博客方案

在上述评论中，还发现了这个大佬的博客 Cali Castle，也支持标注评论。它的评论 api 返回数据如下：

{
        "userId": "user_2XRZjF7VuawhVxdbQ4NCPpuqRp4",
        "userInfo": {
            "imageUrl": "",
            "lastName": "川崎",
            "firstName": "川崎"
        },
        "body": {
            "text": "很棒很牛的主题👍🏻。如果能明确对TailwindUI的借鉴来源就好了。应该是前不久Tailwind出售的主题Spotlight。",
            "blockId": "57e40959016c"
        },
        "createdAt": "2023-10-29T15:42:45.000Z",
        "id": "J61",
        "parentId": null
    }

该博客的锚点机制是通过 blockId 字段，虽然目前还不清楚 blockId 的生成机制，但是只要确保每个 block 生成的锚点 id 固定一致。例如，blockId 生成的算法为块内容的 hash 值。之后，只需要在前端页面加载完成后，为每一个 block 添加 id 即可。

两个方案的优劣

前者优点是，无需设计复杂的 blockId 生成机制，也无需为 block 添加 blockId。缺点则是，段落的前 30 个字作为锚点，在数据存储和传输上会稍显冗余。

后者的优缺点则反之。