前言#

花了一下午的时间也是把博客从Hexo迁移至Fuwari了，使用了Twikoo给博客添加评论系统，但是效果不尽人意。

问题#

Twikoo的评论系统中包含“点赞”、“回复”等按钮，点击这些按钮会导致自动跳转至页面顶部的问题。

原因出自Twikoo的官方版本对于这些按钮使用了包含链接href="#"的a标签。需要修改的方法也很简单，将#改成javascript(0)就可以了。

修复方法#

复制仓库#

1
git clone https://github.com/twikoojs/twikoo.git

修改源码#

需要对twikoo源码中TkAction.vue、TkComment.vue、TkAdmin.vue三个文件进行修改

1
<template>
2
  <div class="tk-action">
3
    <a class="tk-action-link" :class="{ 'tk-liked': liked }" href="#" @click="onLike">
4
    <a class="tk-action-link" :class="{ 'tk-liked': liked }" href="javascript:void(0)" @click="onLike">
5
      <span class="tk-action-icon" v-html="iconLike"></span>
6
      <span class="tk-action-icon tk-action-icon-solid" v-html="iconLikeSolid"></span>
7
      <span class="tk-action-count">{{ likeCountStr }}</span>
8
    </a>
9
    <a class="tk-action-link" href="#" @click="onReply">
10
    <a class="tk-action-link" href="javascript:void(0)" @click="onReply">
11
      <span class="tk-action-icon" v-html="iconComment"></span>
12
      <span class="tk-action-icon tk-action-icon-solid" v-html="iconCommentSolid"></span>
13
      <span class="tk-action-count">{{ repliesCountStr }}</span>
14
    </a>
15
  </div>
16
</template>


20 collapsed lines
1
<template>
2
  <div class="tk-comment" :id="comment.id" :class="{ 'tk-master': comment.master }" ref="tk-comment">
3
    <tk-avatar :config="config"
4
        :nick="comment.nick"
5
        :avatar="comment.avatar"
6
        :mail-md5="comment.mailMd5"
7
        :link="convertedLink" />
8
    <div class="tk-main">
9
      <div class="tk-row">
10
        <div class="tk-meta">
11
          <strong class="tk-nick" v-if="!convertedLink">{{ comment.nick }}</strong>
12
          <a class="tk-nick tk-nick-link" v-if="convertedLink" :href="convertedLink" target="_blank" rel="noopener noreferrer">
13
            <strong>{{ comment.nick }}</strong>
14
          </a>
15
          <span class="tk-tag tk-tag-green" v-if="comment.master">{{ config.MASTER_TAG || t('COMMENT_MASTER_TAG') }}</span>
16
          <span class="tk-tag tk-tag-red" v-if="comment.top">{{ t('COMMENT_TOP_TAG') }}</span>
17
          <span class="tk-tag tk-tag-yellow" v-if="comment.isSpam">{{ t('COMMENT_REVIEWING_TAG') }}</span>
18
          <small class="tk-time">
19
            <time :datetime="jsonTimestamp" :title="localeTime">{{ displayCreated }}</time>
20
          </small>
21
          <small class="tk-actions" v-if="isLogin">
22
            <a href="#" v-if="comment.isSpam" @click="handleSpam(false, $event)">{{ t('ADMIN_COMMENT_SHOW') }}</a>
23
            <a href="#" v-if="!comment.isSpam" @click="handleSpam(true, $event)">{{ t('ADMIN_COMMENT_HIDE') }}</a>
24
            <a href="#" v-if="!comment.rid && comment.top" @click="handleTop(false, $event)">{{ t('ADMIN_COMMENT_UNTOP') }}</a>
25
            <a href="#" v-if="!comment.rid && !comment.top" @click="handleTop(true, $event)">{{ t('ADMIN_COMMENT_TOP') }}</a>
26
            <a href="javascript:void(0)" v-if="comment.isSpam" @click="handleSpam(false, $event)">{{ t('ADMIN_COMMENT_SHOW') }}</a>
27
            <a href="javascript:void(0)" v-if="!comment.isSpam" @click="handleSpam(true, $event)">{{ t('ADMIN_COMMENT_HIDE') }}</a>
28
            <a href="javascript:void(0)" v-if="!comment.rid && comment.top" @click="handleTop(false, $event)">{{ t('ADMIN_COMMENT_UNTOP') }}</a>
29
            <a href="javascript:void(0)" v-if="!comment.rid && !comment.top" @click="handleTop(true, $event)">{{ t('ADMIN_COMMENT_TOP') }}</a>
30
          </small>

1
<template>
2
  <div class="tk-admin-container">
3
    <div class="tk-admin" :class="{ '__show': show }" v-loading="loading">
4
      <a class="tk-admin-close" href="#" @click="onClose" v-html="iconClose"></a>
5
      <a class="tk-admin-close" href="javascript:void(0)" @click="onClose" v-html="iconClose"></a>
6
      <div class="tk-login-title" v-if="needUpdate">
7
        <div>{{ t('ADMIN_NEED_UPDATE') }}</div>
8
        <a href="https://twikoo.js.org/update.html" target="_blank">https://twikoo.js.org/update.html</a>
9
      </div>
35 collapsed lines
10
      <div v-if="!needUpdate">
11
        <div class="tk-login" v-if="!isLogin && isSetPassword">
12
          <div class="tk-login-title">{{ t('ADMIN_LOGIN_TITLE') }}</div>
13
          <form>
14
            <input type="hidden" />
15
            <el-input class="tk-password" :placeholder="t('ADMIN_PASSWORD_PLACEHOLDER')" v-model="password" show-password @keyup.enter.native="onLogin" ref="focusme">
16
              <template slot="prepend">{{ t('ADMIN_PASSWORD') }}</template>
17
              <el-button slot="append" @click="onLogin">{{ t('ADMIN_LOGIN') }}</el-button>
18
            </el-input>
19
          </form>
20
          <div class="tk-login-msg" v-if="loginErrorMessage">
21
            {{ loginErrorMessage }}
22
            <a href="https://twikoo.js.org/faq.html" rel="noopener noreferrer" target="_blank">{{ t('ADMIN_FORGOT') }}</a>
23
          </div>
24
        </div>
25
        <div class="tk-regist" v-if="!isLogin && !isSetPassword">
26
          <div class="tk-login-title">{{ t('ADMIN_LOGIN_TITLE') }}</div>
27
          <form>
28
            <el-input class="tk-password" :placeholder="t('ADMIN_CREDENTIALS_PLACEHOLDER')" v-if="!isSetCredentials" v-model="credentials" ref="focusme">
29
              <template slot="prepend">{{ t('ADMIN_CREDENTIALS') }}</template>
30
            </el-input>
31
            <el-input class="tk-password" :placeholder="t('ADMIN_SET_PASSWORD_PLACEHOLDER')" v-model="password" show-password>
32
              <template slot="prepend">{{ t('ADMIN_SET_PASSWORD') }}</template>
33
            </el-input>
34
            <el-input class="tk-password" :placeholder="t('ADMIN_SET_PASSWORD_CONFIRM_PLACEHOLDER')" v-model="passwordConfirm" show-password>
35
              <template slot="prepend">{{ t('ADMIN_SET_PASSWORD_CONFIRM') }}</template>
36
            </el-input>
37
          </form>
38
          <el-button class="tk-regist-button" :disabled="!canRegist" @click="onRegist">{{ t('ADMIN_REGIST') }}</el-button>
39
          <div class="tk-login-msg" v-if="loginErrorMessage">{{ loginErrorMessage }}</div>
40
          <div class="tk-login-msg" v-if="!isSetCredentials">
41
            <a href="https://twikoo.js.org/faq.html" rel="noopener noreferrer" target="_blank">{{ t('ADMIN_CREDENTIALS_FAQ') }}</a>
42
          </div>
43
        </div>
44
        <div class="tk-panel" v-if="isLogin">
45
          <div class="tk-panel-title">
46
            <div>{{ t('ADMIN_TITLE') }}</div>
47
            <a class="tk-panel-logout" href="#" @click="onLogout">{{ t('ADMIN_LOGOUT') }}</a>
48
            <a class="tk-panel-logout" href="javascript:void(0)" @click="onLogout">{{ t('ADMIN_LOGOUT') }}</a>
49
          </div>

编译#

1
npm install --legacy-peer-deps
2
npm run build

很快就能在dist目录看到编译后的js文件了。

使用#

将编译好的twikoo.min.js放入public/twikoo文件夹中，并在astro文件引用自编译的twikoojs文件。

1
script.src = '/twikoo/twikoo.min.js';

使用CSS#

这里使用Cherry大佬写的css文件，适配Fuwari和深色模式。

下载链接

我自己对其进行了一点修改，可在代码后面附上使得加载评论时转圈的图标会居中，更好看。

NOTE
代码由AI生成，请仔细辨别

1
/* 加载图标居中 */
2
.el-loading-mask {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7

8
.el-loading-spinner {
9
  display: flex;
10
  justify-content: center;
11
  align-items: center;
12
  margin: 0 auto;
13
}

区域指示#

可以给你的评论区域左上角添加一个小标题说明这是评论区。

同时这段文字支持随黑夜模式变色。

1
<div class="flex items-center mb-4">
2
    <div class="w-1 h-5 rounded-md bg-[var(--primary)] mr-3"></div>
3
    <h2 class="text-xl font-bold dark:text-white">评论</h2>
4
</div>