diff --git a/_config.yml b/_config.yml
index 13ea9cda..6bdffa7d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -105,9 +105,9 @@ gitalk:
   autoExpand: true
   clientID: ''
   clientSecret: ''
-  repo: 'dev-blog-comments'
-  owner: 'TriDiamond'
-  admin: ['TriDiamond']
+  repo: '' ## dev-blo-comments
+  owner: '' ## owner name
+  admin: [''] ## ['admin_name']
   id: uid
   language: en
   distractionFreeMode: true
@@ -127,9 +127,18 @@ valine:
   avatarForce: false
   meta: ['nick', 'mail']
   requiredFields: []
-  admin: 'TriDiamond'
+  admin: '' # admin username
   recentComment: true
 
+# Twikoo comment plugin
+# see https://twikoo.js.org/quick-start.html
+twikoo:
+  enable: false
+  recentComment: true
+  envId: xxxxxxxxxxxxxxx # 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+  # region: ap-guangzhou # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+  lang: 'en' # 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+
 # Enable Busuanzi statistic plugin
 # see http://ibruce.info/2015/04/04/busuanzi/
 busuanzi:
diff --git a/release.config.js b/release.config.js
index ced6d214..b403adbd 100644
--- a/release.config.js
+++ b/release.config.js
@@ -1,11 +1,5 @@
 module.exports = {
-  branches: [
-    'main',
-    {
-      name: 'beta',
-      prerelease: true
-    }
-  ],
+  branches: ['main'],
   plugins: [
     '@semantic-release/commit-analyzer',
     '@semantic-release/release-notes-generator',
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 7369cd20..05d92554 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -5,27 +5,18 @@
     <SubTitle :title="'titles.comment'" />
     <div id="gitalk-container"></div>
     <div id="vcomments"></div>
+    <div id="tcomment"></div>
   </div>
 </template>
 
 <script lang="ts">
-/**
- * Gitalk and Valine is imported through CDN
- * need to dereferencing these library globals
- *
- * Gitalk version 1.6
- * Valine version 1.4.14
- *
- * Check the usage of these version before
- * using these global variables.
- */
-declare const Gitalk: any
-declare const Valine: any
-
 import { useAppStore } from '@/stores/app'
 import { defineComponent, onMounted, toRefs, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { usePostStore } from '@/stores/post'
+import { twikooInit } from '@/utils/comments/twikoo-api'
+import { githubInit } from '@/utils/comments/github-api'
+import { valineInit } from '@/utils/comments/valine-api'
 
 export default defineComponent({
   name: 'ObComment',
@@ -91,36 +82,49 @@ export default defineComponent({
             ? 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'
             : appStore.themeConfig.plugins.gitalk.proxy
 
-        const gitalk = new Gitalk({
-          clientID: appStore.themeConfig.plugins.gitalk.clientID,
-          clientSecret: appStore.themeConfig.plugins.gitalk.clientSecret,
-          repo: appStore.themeConfig.plugins.gitalk.repo, // The repository of store comments,
-          owner: appStore.themeConfig.plugins.gitalk.owner,
-          admin: appStore.themeConfig.plugins.gitalk.admin,
-          id: uid, // Ensure uniqueness and length less than 50
-          language: appStore.themeConfig.plugins.gitalk.language,
-          distractionFreeMode: true, // Facebook-like distraction free mode
-          title: title,
-          body: body,
-          proxy: proxy
-        })
+        const { clientID, clientSecret, repo, owner, admin, language } =
+          appStore.themeConfig.plugins.gitalk
 
-        gitalk.render('gitalk-container')
+        githubInit({
+          clientID,
+          clientSecret,
+          repo,
+          owner,
+          admin,
+          language,
+          uid,
+          title,
+          body,
+          proxy
+        })
       } else if (appStore.themeConfig.plugins.valine.enable) {
-        new Valine({
-          el: '#vcomments',
-          appId: appStore.themeConfig.plugins.valine.app_id,
-          appKey: appStore.themeConfig.plugins.valine.app_key,
-          avatar: appStore.themeConfig.plugins.valine.avatar,
-          placeholder: appStore.themeConfig.plugins.valine.placeholder,
-          visitor: appStore.themeConfig.plugins.valine.visitor,
-          lang: appStore.themeConfig.plugins.valine.lang,
-          meta: appStore.themeConfig.plugins.valine.meta ?? [],
-          requiredFields:
-            appStore.themeConfig.plugins.valine.requiredFields ?? [],
-          avatarForce: appStore.themeConfig.plugins.valine.avatarForce,
+        const {
+          app_id,
+          app_key,
+          avatar,
+          placeholder,
+          visitor,
+          lang,
+          meta,
+          requiredFields,
+          avatarForce
+        } = appStore.themeConfig.plugins.valine
+
+        valineInit({
+          appId: app_id,
+          appKey: app_key,
+          avatar,
+          placeholder,
+          visitor,
+          lang,
+          meta,
+          requiredFields,
+          avatarForce,
           path: window.location.pathname // Make sure updating pathname
         })
+      } else if (appStore.themeConfig.plugins.twikoo.enable) {
+        const { envId, region, lang } = appStore.themeConfig.plugins.twikoo
+        twikooInit({ envId, region, lang, path: window.location.pathname })
       }
     }
 
@@ -328,4 +332,64 @@ export default defineComponent({
     }
   }
 }
+
+#twikoo {
+  .tk-comments {
+    @apply pt-2;
+  }
+
+  .tk-input {
+    @apply bg-ob-deep-900;
+  }
+
+  .tk-meta-input input {
+    @apply bg-ob-deep-900;
+  }
+
+  .el-input__inner:focus,
+  .el-textarea__inner:focus {
+    border-color: var(--text-accent);
+  }
+
+  .el-button--primary {
+    background: var(--main-gradient);
+    border: none;
+    color: #fff;
+    &:hover {
+      color: #fff;
+      opacity: 0.5;
+    }
+  }
+
+  .tk-icon.__comments {
+    color: var(--text-accent);
+  }
+
+  .tk-action-icon {
+    color: var(--text-accent);
+  }
+
+  .tk-comment {
+    @apply px-4 pt-6 pb-6 bg-ob-deep-900 mb-2 rounded-lg;
+    transition: var(--trans-ease);
+    &:hover {
+      box-shadow: var(--accent-shadow);
+    }
+  }
+
+  .tk-avatar {
+    border: 2px solid var(--text-accent);
+  }
+
+  .tk-nick {
+    color: var(--text-accent);
+    font-weight: 700;
+  }
+
+  .tk-comments-count {
+    > span:first-of-type {
+      color: var(--text-accent);
+    }
+  }
+}
 </style>
diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
index 1b22104c..3b396f90 100644
--- a/src/components/Sidebar/src/RecentComment.vue
+++ b/src/components/Sidebar/src/RecentComment.vue
@@ -82,10 +82,11 @@
 import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { RecentComment } from '@/utils'
-import { GithubComments } from '@/utils/github-api'
-import { LeanCloudComments } from '@/utils/leancloud-api'
+import { GithubComments } from '@/utils/comments/github-api'
+import { LeanCloudComments } from '@/utils/comments/leancloud-api'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
+import { TwikooComments } from '@/utils/comments/twikoo-api'
 
 export default defineComponent({
   name: 'ObRecentComment',
@@ -127,6 +128,18 @@ export default defineComponent({
         leadCloudComments.getRecentComments(7).then(response => {
           recentComments.value = response
         })
+      } else if (
+        appStore.themeConfig.plugins.twikoo.enable &&
+        appStore.themeConfig.plugins.twikoo.recentComment
+      ) {
+        const twikooComments = new TwikooComments({
+          envId: appStore.themeConfig.plugins.twikoo.envId,
+          lang: appStore.themeConfig.plugins.twikoo.lang
+        })
+
+        twikooComments.getRecentComments(7).then(res => {
+          recentComments.value = res
+        })
       }
     }
 
@@ -134,7 +147,8 @@ export default defineComponent({
     watch(
       () => appStore.configReady,
       (newValue, oldValue) => {
-        if (!oldValue && newValue) {
+        if (!!oldValue && newValue) {
+          recentComments.value = []
           initRecentComment()
         }
       }
diff --git a/src/models/ThemeConfig.class.ts b/src/models/ThemeConfig.class.ts
index cb77740b..707f344e 100644
--- a/src/models/ThemeConfig.class.ts
+++ b/src/models/ThemeConfig.class.ts
@@ -452,10 +452,21 @@ interface PluginsData {
     admin: string
     recentComment: boolean
   }
+
+  twikoo: {
+    enable: boolean
+    envId: string
+    recentComment: boolean
+    region?: string
+    lang: string
+  }
+
   recent_comments: boolean
+
   busuanzi: {
     enable: boolean
   }
+
   copy_protection: {
     enable: boolean
     author: {
@@ -471,6 +482,7 @@ interface PluginsData {
       en: string
     }
   }
+
   aurora_bot: {
     enable: boolean
     locale: string
@@ -508,6 +520,13 @@ export class Plugins implements PluginsData {
     admin: '',
     recentComment: false
   }
+  twikoo = {
+    enable: false,
+    envId: '',
+    region: undefined,
+    recentComment: false,
+    lang: ''
+  }
   recent_comments = false
   busuanzi = {
     enable: true
diff --git a/src/utils/github-api.ts b/src/utils/comments/github-api.ts
similarity index 91%
rename from src/utils/github-api.ts
rename to src/utils/comments/github-api.ts
index 39ee89b1..6bb6d1fd 100644
--- a/src/utils/github-api.ts
+++ b/src/utils/comments/github-api.ts
@@ -3,6 +3,8 @@
  * @author TriDiamond <code.tridiamond@gmail.com>
  */
 
+declare const Gitalk: any
+
 import request from '@/utils/external-request'
 import { AxiosResponse } from 'axios'
 import { formatTime, filterHTMLContent, RecentComment } from '@/utils'
@@ -41,6 +43,48 @@ interface GithubCommentsInterface {
   comments: GithubComment[]
 }
 
+interface GitHubInitConfig {
+  clientID: string
+  clientSecret: string
+  repo: string
+  owner: string
+  admin: string[]
+  language: string
+  uid: string
+  title: string
+  body: string
+  proxy: string
+}
+
+export const githubInit = ({
+  clientID,
+  clientSecret,
+  repo,
+  owner,
+  admin,
+  language,
+  uid,
+  title,
+  body,
+  proxy
+}: GitHubInitConfig) => {
+  const gitalk = new Gitalk({
+    clientID,
+    clientSecret,
+    repo, // The repository of store comments,
+    owner,
+    admin,
+    language,
+    id: uid, // Ensure uniqueness and length less than 50
+    distractionFreeMode: true, // Facebook-like distraction free mode
+    title: title,
+    body: body,
+    proxy: proxy
+  })
+
+  gitalk.render('gitalk-container')
+}
+
 export class GithubComments implements GithubCommentsInterface {
   commentUrlCount = 0
   configs = {
diff --git a/src/utils/comments/gravatar.ts b/src/utils/comments/gravatar.ts
new file mode 100644
index 00000000..78ee9065
--- /dev/null
+++ b/src/utils/comments/gravatar.ts
@@ -0,0 +1,46 @@
+/**
+ * js-md5 package is imported through CDN.
+ *
+ * For version v0.7.3
+ */
+declare const md5: any
+
+import pack from '../../../package.json'
+const VERSION = pack.version
+
+/**
+ * Initializing Gravatar setup.
+ */
+export const getGravatarUrl = (options: {
+  avatarCDN?: string
+  lang?: string
+}) => {
+  const { avatarCDN = '', lang = 'en' } = options
+
+  const gravatarCDNs: { [key: string]: string } = {
+    en: 'https://www.gravatar.com/avatar/',
+    ja: 'https://www.gravatar.com/avatar/',
+    'zh-CN': 'https://gravatar.loli.net/avatar/',
+    'zh-TW': 'https://www.gravatar.com/avatar/'
+  }
+
+  return /^https?:\/\//.test(avatarCDN)
+    ? avatarCDN
+    : gravatarCDNs[String(lang)]
+    ? gravatarCDNs[String(lang)]
+    : gravatarCDNs['en']
+}
+
+export const getGravatar = (
+  gravatarUrl: string,
+  mail: string,
+  withMd5: boolean = false
+) => {
+  const md5Mail = withMd5 ? mail : md5(mail)
+
+  console.log(mail)
+
+  return String(mail).endsWith('@qq.com')
+    ? 'https://q4.qlogo.cn/g?b=qq&nk=' + mail.replace('@qq.com', '') + '&s=100'
+    : gravatarUrl + md5Mail + `?&v=${VERSION}`
+}
diff --git a/src/utils/leancloud-api.ts b/src/utils/comments/leancloud-api.ts
similarity index 88%
rename from src/utils/leancloud-api.ts
rename to src/utils/comments/leancloud-api.ts
index 21081eb4..9f0f9c27 100644
--- a/src/utils/leancloud-api.ts
+++ b/src/utils/comments/leancloud-api.ts
@@ -10,7 +10,8 @@
 // import request from '@/utils/external-request'
 // import { AxiosResponse } from 'axios'
 import { formatTime, filterHTMLContent, RecentComment } from '@/utils'
-import pack from '../../package.json'
+import pack from '../../../package.json'
+import { getGravatar, getGravatarUrl } from './gravatar'
 
 const VERSION = pack.version
 let AV_INITIALIZED = false
@@ -184,29 +185,12 @@ export class LeanCloudComments implements LeanCloudCommentsInterface {
    * Initializing Gravatar setup.
    */
   initGravatar(options: LeanCloudApiOption): void {
-    const ds = this.configs.gravatarConfig.ds
-    const {
-      avatar = 'undefined',
-      avatarCDN = '',
-      admin = '',
-      lang = 'en'
-    } = options
+    const { avatarCDN = '', admin = '', lang = 'en' } = options
 
     this.configs.leanCloudConfig.admin = admin
     this.configs.leanCloudConfig.lang = lang
 
-    const gravatarCDNs: { [key: string]: string } = {
-      en: 'https://www.gravatar.com/avatar/',
-      ja: 'https://www.gravatar.com/avatar/',
-      'zh-CN': 'https://gravatar.loli.net/avatar/',
-      'zh-TW': 'https://www.gravatar.com/avatar/'
-    }
-
-    this.configs.gravatarConfig.url = /^https?:\/\//.test(avatarCDN)
-      ? avatarCDN
-      : gravatarCDNs[String(this.configs.leanCloudConfig.lang)]
-      ? gravatarCDNs[String(this.configs.leanCloudConfig.lang)]
-      : gravatarCDNs['en']
+    this.configs.gravatarConfig.url = getGravatarUrl({ avatarCDN, lang })
   }
 
   /**
@@ -261,13 +245,6 @@ export class LeanCloudComments implements LeanCloudCommentsInterface {
    */
   mapComments(comment: { [key: string]: any }): { [key: string]: any } {
     const mail = comment._serverData.mail
-    const avatar = String(mail).endsWith('@qq.com')
-      ? 'https://q4.qlogo.cn/g?b=qq&nk=' +
-        mail.replace('@qq.com', '') +
-        '&s=100'
-      : this.configs.gravatarConfig.url +
-        md5(comment._serverData.mail) +
-        `?&v=${VERSION}`
     const admin = this.configs.leanCloudConfig.admin
 
     return {
@@ -283,7 +260,7 @@ export class LeanCloudComments implements LeanCloudCommentsInterface {
       user: {
         id: 0,
         login: comment._serverData.nick,
-        avatar_url: avatar,
+        avatar_url: getGravatar(this.configs.gravatarConfig.url, mail),
         html_url: comment._serverData.link
       },
       is_admin:
diff --git a/src/utils/comments/twikoo-api.ts b/src/utils/comments/twikoo-api.ts
new file mode 100644
index 00000000..47c922e6
--- /dev/null
+++ b/src/utils/comments/twikoo-api.ts
@@ -0,0 +1,98 @@
+import { RecentComment, formatCommentRelativeTime } from '..'
+import { getGravatar, getGravatarUrl } from './gravatar'
+
+declare const twikoo: any
+
+interface TwikooConfig {
+  envId: string
+  pageSize?: number
+  includeReply?: boolean
+  lang: string
+}
+
+interface TwikooInitConfig {
+  envId: string
+  path: string
+  lang: string
+  region?: string
+}
+
+interface TwikooComment {
+  id: string
+  url: string
+  nick: string
+  mailMd5: string
+  link: string
+  comment: string
+  commentText: string
+  created: string
+  relativeTime: string
+}
+
+const defaultConfig: TwikooConfig = {
+  envId: '',
+  pageSize: 7,
+  includeReply: false,
+  lang: 'en'
+}
+
+export const twikooInit = (configs: TwikooInitConfig) => {
+  twikoo.init({
+    envId: configs.envId, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+    el: '#tcomment', // 容器元素
+    region: configs.region, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+    path: configs.path, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
+    lang: configs.lang // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+  })
+}
+
+export class TwikooComments {
+  configs: TwikooConfig = defaultConfig
+
+  constructor(config: TwikooConfig) {
+    this.configs.envId = config.envId
+    this.configs.includeReply =
+      config.includeReply ?? defaultConfig.includeReply
+  }
+
+  async getRecentComments(limit?: number): Promise<RecentComment[]> {
+    const gravatarUrl = getGravatarUrl({
+      avatarCDN: undefined,
+      lang: this.configs.lang ?? defaultConfig.lang
+    })
+
+    const comments = await twikoo.getRecentComments({
+      envId: this.configs.envId, // 环境 ID
+      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
+      pageSize: limit ?? defaultConfig.pageSize, // 获取多少条，默认：10，最大：100
+      includeReply: true // 是否包括最新回复，默认：false
+    })
+
+    return comments.map((comment: TwikooComment) =>
+      this.mapComment(comment, gravatarUrl)
+    )
+  }
+
+  mapComment(comment: TwikooComment, gravatarUrl: string): RecentComment {
+    const createdAt = formatCommentRelativeTime(
+      new Date(Number(comment.created) - 8 * 1000 * 60 * 60).toISOString(),
+      this.configs.lang === 'cn' ? 'cn' : 'en'
+    )
+    return {
+      id: Number(comment.id),
+      body: comment.commentText,
+      html_url: comment.url,
+      issue_url: '',
+      created_at: createdAt,
+      updated_at: '',
+      author_association: '',
+      user: {
+        id: 0,
+        login: comment.nick,
+        avatar_url: getGravatar(gravatarUrl, comment.mailMd5, true),
+        html_url: comment.link
+      },
+      is_admin: false
+    }
+  }
+}
diff --git a/src/utils/comments/valine-api.ts b/src/utils/comments/valine-api.ts
new file mode 100644
index 00000000..0f4605ab
--- /dev/null
+++ b/src/utils/comments/valine-api.ts
@@ -0,0 +1,41 @@
+declare const Valine: any
+
+interface ValineConfig {
+  appId: string
+  appKey: string
+  avatar: string
+  placeholder: string
+  visitor: boolean
+  lang: string
+  meta: string[]
+  requiredFields: string[]
+  avatarForce: boolean
+  path: string
+}
+
+export const valineInit = ({
+  appId,
+  appKey,
+  avatar,
+  placeholder,
+  visitor,
+  lang,
+  meta,
+  requiredFields,
+  avatarForce,
+  path
+}: ValineConfig) => {
+  new Valine({
+    el: '#vcomments',
+    appId,
+    appKey,
+    avatar,
+    placeholder,
+    visitor,
+    lang,
+    meta: meta ?? [],
+    requiredFields: requiredFields ?? [],
+    avatarForce,
+    path
+  })
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 33b53342..8aeb2ce4 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,13 +1,13 @@
 export interface RecentComment {
   id: number
   body: string
-  node_id: number
+  node_id?: number
   html_url: string
   issue_url: string
   created_at: string
   updated_at: string
   author_association: string
-  filtered: boolean
+  filtered?: boolean
   user: {
     id: number
     login: string
@@ -15,7 +15,19 @@ export interface RecentComment {
     html_url: string
   }
   is_admin: boolean
-  cache_flag: boolean
+  cache_flag?: boolean
+}
+
+export function formatCommentRelativeTime(
+  time: number | string,
+  lang: 'en' | 'cn'
+) {
+  const templates = {
+    en: 'commented [TIME]',
+    cn: '[TIME]评论了'
+  }
+
+  return formatTime(time, { template: templates[lang], lang: lang })
 }
 
 /**
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 77c17631..6231dc08 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -231,7 +231,9 @@ export default defineComponent({
           (!!appStore.themeConfig.plugins.gitalk.enable &&
             !!appStore.themeConfig.plugins.gitalk.recentComment) ||
           (!!appStore.themeConfig.plugins.valine.enable &&
-            !!appStore.themeConfig.plugins.valine.recentComment)
+            !!appStore.themeConfig.plugins.valine.recentComment) ||
+          (!!appStore.themeConfig.plugins.twikoo.enable &&
+            !!appStore.themeConfig.plugins.twikoo.recentComment)
         )
       }),
       expanderClass,
diff --git a/templates/index.html b/templates/index.html
index 608f6ce4..dca1f56f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -61,13 +61,17 @@
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"
     ></script>
+    <script
+      rel="preload"
+      src="https://cdn.jsdelivr.net/npm/twikoo@1.6.17/dist/twikoo.all.min.js"
+    ></script>
   </head>
   <body id="body-container">
     <noscript>
-      <strong
-        >We're sorry but this app doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
+      <strong>
+        We're sorry but this app doesn't work properly without JavaScript
+        enabled. Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
   </body>