新增：初步使用gitalk集成评论功能

package.json

@@ -18,6 +18,7 @@
     "dayjs": "^1.11.4",
     "element-plus": "^2.2.9",
     "fast-glob": "^3.2.11",
+    "gitalk": "^1.7.2",
     "vue": "^3.2.37"
   }
 }

repos/.vitepress/config/theme.ts

@@ -38,5 +38,21 @@ export const themeConfig: DefaultTheme.Config = {
   articleMetadataConfig: {
     author: '查尔斯', // 文章全局默认作者名称
     authorLink: '/about/me' // 点击作者名时默认跳转的链接
+  },
+  // 评论配置
+  commentConfig: {
+    type: 'gitalk',
+    options: {
+      clientID: '1de126ce1fbdbe049709',
+      clientSecret: '97e359a006ba7b0d8e9d9bf38b83de59eb69ecba',
+      repo: 'https://github.com/Charles7c/charles7c.github.io-comments',
+      owner: 'Charles7c',
+      admin: ['Charles7c'],
+      language: 'zh-CN',
+      distractionFreeMode: false,
+      pagerDirection: 'last', // 按评论创建时间倒序排序
+      proxy: 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'
+    },
+    hideComments: false // 全局隐藏评论，默认 false
   }
 }

repos/.vitepress/theme/components/ArticleMetadata.vue

@@ -28,18 +28,12 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 const { theme, frontmatter } = useData()
 const date = computed(() => new Date(frontmatter.value.date))
 const isoDatetime = computed(() => date.value.toISOString())
-const datetime = ref('')
+const datetime = date.value.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
 
 // 获取发布时间的相对时间, 例如: 1天前、2周前、3个月前、4年前
 dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
 const toDate = dayjs().to(dayjs(frontmatter.value.date))
-
-onMounted(() => {
-  watchEffect(() => {
-    datetime.value = date.value.toLocaleString(window.navigator.language, {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
-  })
-})
 </script>
 
 <style scoped>

repos/.vitepress/theme/components/Comment.vue

@@ -0,0 +1,95 @@
+<template>
+  <div v-if="!globalHideComments" id="comment-container"></div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import Gitalk from 'gitalk'
+import '../styles/gitalk.css'
+
+const { theme, frontmatter } = useData()
+const commentConfig = theme.value.commentConfig
+const globalHideComments = commentConfig.hideComments ?? false
+
+onMounted(() => {
+  if (globalHideComments) {
+    return
+  }
+
+  switch (commentConfig.type) {
+    case 'gitalk':
+      renderGitalk(commentConfig.options)
+      break
+    default:
+      break
+  }
+})
+
+/**
+ * 渲染Gitalk
+ * 
+ * @param options Gitalk配置
+ */
+function renderGitalk(options) {
+  const gitalkConfig = {
+    clientID: options.clientID,
+    clientSecret: options.clientSecret,
+    repo: options.repo,
+    owner: options.owner,
+    admin: options.admin,
+    id: decodeURI(window.location.pathname),
+    language: options.language,
+    distractionFreeMode: options.distractionFreeMode,
+    pagerDirection: options.pagerDirection,
+    proxy: options.pagerDirection
+  }
+
+  const gitalk = new Gitalk(gitalkConfig)
+  gitalk.render('comment-container')
+
+  /*
+  // 感谢: dingqianwen/my-blog
+  // 访问量 如果不存在此标签，则进行创建
+  if (!document.getElementsByClassName('browse—count')[0]) {
+    let element = document.getElementsByClassName('page-meta')[0];
+    let newElement = document.createElement('div');
+    newElement.className = 'meta-item contributors browse—count';
+    $api.pvIncr(md5(value.path), function (data) {
+      newElement.innerHTML = `<span class="meta-item-label">浏览: </span><span class="meta-item-info">${data.toLocaleString('en-US')}</span>`;
+      element.appendChild(newElement)
+    })
+  }
+  // 如果点赞，先判断有没有登录
+  let $gc = $('#gitalk-container');
+  $gc.on('click', '.gt-comment-like', function () {
+    if (!localStorage.getItem('GT_ACCESS_TOKEN')) {
+      $warning('亲，你还没有登录哦!');
+      return false;
+    }
+    return true;
+  })
+  // 评论提交评论后输入框高度没有重置bug
+  $gc.on('click', '.gt-header-controls .gt-btn-public', function () {
+    let $gt = $('.gt-header-textarea');
+    $gt.css('height', '72px');
+  })
+  // 点击预览时，隐藏评论按钮
+  $gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
+    let pl = $('.gt-header-controls .gt-btn-public');
+    if (pl.hasClass('hide')) {
+      pl.removeClass('hide');
+    } else {
+      // 隐藏
+      pl.addClass('hide');
+    }
+  })*/
+  // handleCommentPreview bug 点击编辑时也会调用预览接口
+  /*if(!_this.state.isPreview){
+    return;
+  }*/
+}
+</script>
+
+<style scoped>
+</style>

repos/.vitepress/theme/components/MyLayout.vue

@@ -1,13 +1,14 @@
 <template>
   <Layout>
-    <template #doc-footer-before>
-      
+    <template #doc-after>
+      <Comment />
     </template>
   </Layout>
 </template>
 
 <script lang="ts" setup>
 import DefaultTheme from 'vitepress/theme'
+import Comment from './Comment.vue'
 
 const { Layout } = DefaultTheme
 </script>