解决评论操作会回到文章顶部,修改链接

解决评论操作会回到文章顶部
见 issue #721，Twikoo 加了一个href="#"，这是为了防止回复按钮在某些主题（如 VuePress）下被识别为不可点击的链接而加的，不能被官方仓库删除。但是 Fuwari 正是这个href="#"导致了问题。

我去 Twikoo 项目提了个 issue 也问了一下，回答说“拉 twikoo 的源代码，全局替换掉href="#"，然后编译一个自己的 js 出来用。”

那，还能怎么办，编译呗。用官方 js 的话不仅评论相关功能会出问题，就连登录管理页面输入密码回车，以及退出管理页面都能弹射到文章顶部，真的是弹射…

步骤：

Fork 官方项目到自己分支
仓库 Clone 到本地
全局删除href="#"
编译出 js 文件
编译流程：

# 安装 yarn（如未安装）
sudo npm install -g yarn
# 安装依赖
yarn install
# 搜索并删除 twikoo 源码中的 href="#"（建议用编辑器全局替换）
# 比如 VS Code 搜索全项目替换为 "javascript:void(0)"或删除，我是都删除了
# 编译（非腾讯云用 twikoo.min.js，全部文件输出在./dist）
yarn build

编译之后本地拉取最新上游更新（可选）

git remote add upstream https://github.com/twikoojs/twikoo.git
git fetch upstream
git merge upstream/main

编译之后的文件上传至自己仓库的 releases 里，版本号为 tag 名（如1.6.44）方便回找和升级。但是 releases 只供下载不提供 CDN，于是再上传一份到 GitHub 仓库中拿到 CDN。

于是我的Twikoo.astro最终版本：

Twikoo.astro
---
import { commentConfig } from '@/config'

interface Props {
  path: string
}

const config = {
  ...commentConfig.twikoo,
  el: '#tcomment',
  path: Astro.props.path,
}
---

<div id="tcomment"></div>

<script define:vars={{ config }}>
  function loadTwikoo() {

    // 动态加载 Twikoo 脚本，并在加载完成后执行 twikoo.init

    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/gh/MicroSic/twikoo-magic/twikoo/twikoo.min.js';  // 去除腾讯云，删除所有href="#"的1.6.44版本
    script.defer = true;
    script.onload = () => {
      if (window.twikoo) {
        window.twikoo.init(config);
      }
    };
    // script.onerror = () => {
    //   console.error('Twikoo script load failed');
    // };
    document.body.appendChild(script);
  }
  document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。
</script>

src/components/comment/Twikoo.astro

@@ -19,7 +19,7 @@ function loadTwikoo() {
   // 动态加载 Twikoo 脚本，并在加载完成后执行 twikoo.init
 
   const script = document.createElement('script');
-  script.src = 'https://s4.zstatic.net/npm/twikoo@1.6.44/dist/twikoo.min.js';
+  script.src = 'https://s4.zstatic.net/npm/@mckero/twikoo-fuwari-patch@1.6.44-custom.1/twikoo.min.js';
   script.defer = true;
   script.onload = () => {
     if (window.twikoo) {