如何修改HTML评论脚本使其识别URL中的哈希片段ID

当然可以通过修改涉及window.location的代码来实现你的需求！下面是具体的分步实现方案：

1. 编写URL处理函数 #

首先创建一个自定义函数，用来生成符合你要求的URL——移除移动端的?m=1查询参数，同时完整保留哈希（#）片段：

function getProcessedCommentUrl() {
  // 用原生URL API解析当前页面地址，方便操作各个部分
  const currentUrl = new URL(window.location.href);
  
  // 移除移动端的m参数（对应?m=1）
  currentUrl.searchParams.delete('m');
  
  // 重新组合URL：协议+域名+路径+剩余查询参数+哈希片段
  return currentUrl.origin + currentUrl.pathname + currentUrl.search + currentUrl.hash;
}

2. 修改htmlcommentbox的配置 #

找到你嵌入的htmlcommentbox代码中，设置评论框关联URL的部分（通常是hcb_user对象里的url属性），把原来的window.location.href替换成我们的函数返回值：

// 替换前可能的代码
// var hcb_user = { url: window.location.href, ... };

// 替换后的代码
var hcb_user = {
  url: getProcessedCommentUrl(),
  // 其他原有配置项保持不变
};

原理说明 #

• 保留哈希片段：通过URL对象的hash属性，我们可以完整保留页面的片段ID，传递给评论框服务后，它会将带不同哈希的页面视为独立的评论区，实现你要的识别需求。
• 移除移动端参数：利用searchParams.delete('m')精准删除?m=1参数，不会影响其他可能存在的查询参数（如果有的话），同时保证URL格式正确。
• 兼容性：原生URL API在现代浏览器（包括移动端主流浏览器）都能正常工作，不用担心兼容问题。

测试验证 #

可以在移动端访问你的博客页面，检查评论框加载时使用的URL是否符合预期：

• 原URL：https://your-blog.com/post.html?m=1#section-2
• 处理后URL：https://your-blog.com/post.html#section-2

这样评论框就会基于处理后的URL关联评论，既移除了移动端的m=1参数，又能识别哈希片段区分不同评论区。

内容的提问来源于stack exchange，提问作者Dvolatility