修复：启用评论组件

.github/workflows/deploy-pages.yml

@@ -17,24 +17,28 @@ jobs:
   # 任务1: 部署 GitHub Pages
   deploy-github-pages:
     runs-on: ubuntu-latest
-
     steps:
       # 1、检出源码
       - name: Checkout
         uses: actions/checkout@v3
-
+      # 2、安装 Node 环境
-      # 2、安装模块并打包
+      - name: Setup Node
-      - name: Install and Build
+        uses: actions/setup-node@v3
-        run: |
+        with:
-          yarn install
+          node-version: 16
-          yarn build
+          cache: yarn
-
+      # 3、安装依赖
-      # 3、部署 GitHub Pages
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      # 4、打包
+      - name: Build
+        run: yarn build
+      # 5、部署 GitHub Pages
       - name: Deploy GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           BRANCH: pages
-          FOLDER: repos/.vitepress/dist
+          FOLDER: docs/.vitepress/dist
 
   # 任务2: 部署 Gitee Pages
   deploy-gitee-pages:

.gitignore

@@ -19,7 +19,6 @@ coverage/
 .vscode
 
 # Temp files
-yarn.lock
 package-lock.json
 .vite_opt_cache
 

README.md

@@ -41,35 +41,35 @@ yarn build
 - [x] 主页美化：参照 vite 文档主页进行美化
 - [x] 自定义页脚：支持ICP备案号、公安备案号、版权信息配置（符合大陆网站审核要求）
 - [x] 文章元数据信息显示：文章标题下显示作者、发布时间、所属分类、标签列表等信息
-- [x] 《我的标签》：模仿语雀标签页风格，https://www.yuque.com/r/语雀用户名/tags?tag=，另有标签云展示
+- [x] 《我的标签》：模仿语雀标签页风格，另有标签云展示。语雀标签页地址：https://www.yuque.com/r/语雀用户名/tags?tag=
 - [x] 《我的归档》：自定义时间轴，展示历史文章数据。年份前可展示生肖，可按分类、标签筛选
 - [x] 更多细节优化：敬请发现
-- [ ] 文章评论：Gitalk
+- [x] 文章评论：目前仅支持Gitalk
 
 ## 部分页面截图
 
 ### 主页美化
 
-![主页](./repos/public/screenshot/主页.png)
+![主页](./docs/public/screenshot/主页.png)
 
 ### 文章元数据信息
 
-![文章元数据信息](./repos/public/screenshot/文章元数据信息.png)
+![文章元数据信息](./docs/public/screenshot/文章元数据信息.png)
 
 ### 我的标签
 
-![我的标签](./repos/public/screenshot/我的标签1.png)
+![我的标签](./docs/public/screenshot/我的标签1.png)
-![我的标签](./repos/public/screenshot/我的标签2.png)
+![我的标签](./docs/public/screenshot/我的标签2.png)
 
 ### 我的归档
 
-![我的归档](./repos/public/screenshot/我的归档1.png)
+![我的归档](./docs/public/screenshot/我的归档1.png)
-![我的归档](./repos/public/screenshot/我的归档2.png)
+![我的归档](./docs/public/screenshot/我的归档2.png)
 
-### 文章评论（未完待续)
+### 文章评论
 
-![文章评论](./repos/public/screenshot/文章评论1.png)
+![文章评论](./docs/public/screenshot/文章评论1.png)
-![文章评论](./repos/public/screenshot/文章评论2.png)
+![文章评论](./docs/public/screenshot/文章评论2.png)
 
 ## 致谢
 
@@ -80,6 +80,7 @@ yarn build
 - [brc-dd/vitepress-with-arco](https://github.com/brc-dd/vitepress-with-arco) 
 - [clark-cui/vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun) （参考文章标签的数据处理方案）
 - [dingqianwen/my-blog](https://github.com/dingqianwen/my-blog) （参考 Gitalk 配置暗黑主题）
+- [Dedicatus546/Dedicatus546.github.io](https://github.com/Dedicatus546/Dedicatus546.github.io) （参考 Gitalk 跨域调用 API 失效的解决方案）
 - [xiaoxian521/pure-admin-utils-docs](https://github.com/xiaoxian521/pure-admin-utils-docs) （参考词云组件的使用）
 - [arco-design/arco-design-vue](https://github.com/arco-design/arco-design-vue) （使用部分组件及图标）
 - [antvis/G2plot](https://github.com/antvis/G2plot) （使用部分图表）

collect-article-data.mjs

@@ -3,10 +3,10 @@ import matter from 'gray-matter'
 import fs from 'node:fs/promises'
 
 const articleData = await Promise.all(
-  glob.sync('./repos/**/*.md', {
+  glob.sync('./docs/**/*.md', {
     onlyFiles: true,
     objectMode: true,
-    ignore: ['./repos/**/index.md', './repos/**/tags.md', './repos/**/archives.md', './repos/**/me.md'], // without !
+    ignore: ['./docs/**/index.md', './docs/**/tags.md', './docs/**/archives.md', './docs/**/me.md'], // without !
   }).map(async (article) => {
     const file = matter.read(`${article.path}`)
     const { data, path } = file

docs/.vitepress/config/markdown.ts

@@ -5,7 +5,6 @@ export const markdown: MarkdownOptions = {
   lineNumbers: true, // 启用行号
 
   // 在所有文档的<h1>标签后添加<ArticleMetadata/>组件
-  // 感谢: https://github.com/vuejs/vitepress/issues/1050
   config: (md) => {
     md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
       let htmlResult = slf.renderToken(tokens, idx, options, env, slf)

docs/.vitepress/config/sidebar.ts

@@ -23,25 +23,25 @@ function getItemsByDate (path: string) {
   let items: DefaultTheme.SidebarItem[] = []
 
   // 1.获取所有年份目录
-  sync(`repos/${path}/*`, {
+  sync(`docs/${path}/*`, {
     onlyDirectories: true,
     objectMode: true
   }).forEach(({ name }) => {
     let year = name
     // 2.获取所有月份目录
-    sync(`repos/${path}/${year}/*`, {
+    sync(`docs/${path}/${year}/*`, {
       onlyDirectories: true,
       objectMode: true
     }).forEach(({ name }) => {
       let month = name
       // 3.获取所有日期目录
-      sync(`repos/${path}/${year}/${month}/*`, {
+      sync(`docs/${path}/${year}/${month}/*`, {
         onlyDirectories: true,
         objectMode: true
       }).forEach(({ name }) => {
         let day = name
         // 4.获取日期目录下的所有文章
-        sync(`repos/${path}/${year}/${month}/${day}/*`, {
+        sync(`docs/${path}/${year}/${month}/${day}/*`, {
           onlyFiles: true,
           objectMode: true
         }).forEach(({ name }) => {
@@ -93,13 +93,13 @@ function getItems (path: string) {
   let items: DefaultTheme.SidebarItem[] = []
 
   // 1.获取所有分组目录
-  sync(`repos/${path}/*`, {
+  sync(`docs/${path}/*`, {
     onlyDirectories: true,
     objectMode: true
   }).forEach(({ name }) => {
     let groupName = name
     // 2.获取分组下的所有文章
-    sync(`repos/${path}/${groupName}/*`, {
+    sync(`docs/${path}/${groupName}/*`, {
       onlyFiles: true,
       objectMode: true
     }).forEach(({ name }) => {

docs/.vitepress/config/theme.ts

@@ -48,16 +48,15 @@ export const themeConfig: DefaultTheme.Config = {
     type: 'gitalk',
     options: {
       clientID: '1de126ce1fbdbe049709',
-      clientSecret: '97e359a006ba7b0d8e9d9bf38b83de59eb69ecba',
+      clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
       repo: 'charles7c.github.io-comments',
       owner: 'Charles7c',
       admin: ['Charles7c'],
       language: 'zh-CN',
       distractionFreeMode: false,
       // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
-      // 感谢: https://prohibitorum.top/2022/07/26/%E8%A7%A3%E5%86%B3-Gitalk-%E6%97%A0%E6%B3%95%E8%8E%B7%E5%8F%96-Github-Token-%E9%97%AE%E9%A2%98/
       proxy: 'https://cors-server-ecru.vercel.app/github_access_token'
     },
-    hideComments: true // 全局隐藏评论，默认 false
+    showComment: true // 是否显示评论
   }
 }

docs/.vitepress/theme/MyLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <template #doc-after>
-      <Comment v-if="!(theme.commentConfig?.hideComments ?? false)" />
+      <Comment v-if="(theme.commentConfig?.showComment ?? true) && (frontmatter?.showComment ?? true)" :commentConfig="theme.commentConfig" :key="md5(page.relativePath)" />
     </template>
     <template #layout-bottom>
       <Footer v-if="(theme.footerConfig?.showFooter ?? true) && (frontmatter?.showFooter ?? true)" />
@@ -12,11 +12,12 @@
 <script lang="ts" setup>
 import DefaultTheme from 'vitepress/theme'
 import { useData } from 'vitepress'
+import md5 from 'blueimp-md5'
 import Comment from './components/Comment.vue'
 import Footer from './components/Footer.vue'
 
 const { Layout } = DefaultTheme
-const { theme, frontmatter } = useData()
+const { page, theme, frontmatter } = useData()
 </script>
 
 <style scoped>

docs/.vitepress/theme/components/Comment.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="comment-container"></div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import md5 from 'blueimp-md5'
+import Gitalk from 'gitalk'
+import '../styles/gitalk.css'
+
+// 定义属性
+const props = defineProps({
+  commentConfig: Object
+})
+
+const data = reactive({
+  type: props.commentConfig?.type ?? 'gitalk',
+  options: props.commentConfig?.options ?? {}
+})
+const { type, options } = toRefs(data)
+
+// 初始化评论组件配置
+const { page } = useData()
+let gitalk
+if (type.value && type.value == 'gitalk') {
+  gitalk = new Gitalk({
+    clientID: options.value.clientID,
+    clientSecret: options.value.clientSecret,
+    repo: options.value.repo,
+    owner: options.value.owner,
+    admin: options.value.admin,
+    id: md5(page.value.relativePath),
+    language: options.value.language,
+    distractionFreeMode: options.value.distractionFreeMode,
+    proxy: options.value.pagerDirection
+  })
+}
+
+// 渲染评论组件
+onMounted(() => {
+  if (type.value && type.value == 'gitalk') {
+    gitalk.render('comment-container')
+  }
+})
+</script>
+
+<style scoped>
+</style>

docs/about/me.md

@@ -3,6 +3,7 @@ title: 关于我
 aside: false
 editLink: false
 lastUpdated: false
+showComment: false
 ---
 
 <img width=100% src="../public/img/svg/about-me-header.svg" alt="头部图" />

docs/archives.md

@@ -3,6 +3,7 @@ title: 我的归档
 aside: false
 editLink: false
 lastUpdated: false
+showComment: false
 ---
 
 <Archive />

docs/categories/fragments/index.md

@@ -2,6 +2,7 @@
 editLink: false
 lastUpdated: false
 aside: false
+showComment: false
 ---
 
 # "杂碎"逆袭史

docs/categories/issues/index.md

@@ -2,6 +2,7 @@
 editLink: false
 lastUpdated: false
 aside: false
+showComment: false
 ---
 
 # Bug万象集

docs/categories/solutions/index.md

@@ -2,6 +2,7 @@
 editLink: false
 lastUpdated: false
 aside: false
+showComment: false
 ---
 
 # 方案春秋志