优化：《我的标签》增加标签云展示

README.md

@@ -41,7 +41,7 @@ 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
@@ -75,12 +75,14 @@ yarn build
 
 - [vuejs/vitepress](https://github.com/vuejs/vitepress) （本知识库基于 vitepress 构建）
 - [vitejs/vite](https://github.com/vitejs/vite) （参考主页美化）
-- [brc-dd/vitepress-with-arco](https://github.com/brc-dd/vitepress-with-arco) （感谢 vitepress 维护者 brc-dd 的帮助）
-- [brc-dd/vitepress-blog-demo](https://github.com/brc-dd/vitepress-blog-demo)
 - [windicss/docs](https://github.com/windicss/docs) （参考配置文件拆分）
-- [dingqianwen/my-blog](https://github.com/dingqianwen/my-blog) （参考 Gitalk 配置暗黑主题）
+- [brc-dd/vitepress-blog-demo](https://github.com/brc-dd/vitepress-blog-demo) （感谢 vitepress 维护者 brc-dd 的热心帮助）
+- [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 配置暗黑主题）
+- [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) （使用部分图表）
 - ......
 
 ## License

collect-article-data.mjs

@@ -2,7 +2,6 @@ import glob  from 'fast-glob'
 import matter from 'gray-matter'
 import fs from 'node:fs/promises'
 
-// 感谢: https://github.com/brc-dd/vitepress-blog-demo
 const articleData = await Promise.all(
   glob.sync('./repos/**/*.md', {
     onlyFiles: true,

package.json

@@ -12,7 +12,9 @@
     "vitepress": "^1.0.0-alpha.4"
   },
   "dependencies": {
-    "@arco-design/web-vue": "^2.34.1",
+    "@antv/g2plot": "^2.4.20",
+    "@arco-design/web-vue": "^2.35.0",
+    "@pureadmin/utils": "^0.0.33",
     "blueimp-md5": "^2.19.0",
     "dayjs": "^1.11.4",
     "fast-glob": "^3.2.11",

repos/.vitepress/config.ts

@@ -4,7 +4,6 @@ import { head } from './config/head'
 import { markdown } from './config/markdown'
 import { themeConfig } from './config/theme'
 
-// 感谢: https://github.com/windicss/docs
 export default defineConfig({
   lang: metaData.lang,
   title: metaData.title,

repos/.vitepress/config/theme.ts

@@ -34,7 +34,7 @@ export const themeConfig: DefaultTheme.Config = {
   footerConfig: {
     showFooter: true, // 是否显示页脚
     icpRecordCode: '津ICP备2022005864号-2', // ICP备案号
-    publicSecurityRecordCode: '津公网安备 12011202000677号', // 联网备案号
+    publicSecurityRecordCode: '津公网安备12011202000677号', // 联网备案号
     copyright: `Copyright © 2019-${new Date().getFullYear()} Charles7c` // 版权信息
   },
   // 自定义扩展: 文章元数据配置

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

@@ -44,7 +44,6 @@ function renderGitalk(options) {
   gitalk.render('comment-container')
 
   /*
-  // 感谢: https://github.com/dingqianwen/my-blog
   // 如果点赞，先判断有没有登录
   let $gc = $('#gitalk-container');
   $gc.on('click', '.gt-comment-like', function () {

repos/.vitepress/theme/components/Footer.vue

@@ -14,7 +14,7 @@
           <img src="/img/badge/gongan.png" title="联网备案号">
         </span>
         <span class="content">
-          <a :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footerConfig.publicSecurityRecordCode.replace('号', '').substring(theme.footerConfig.publicSecurityRecordCode.indexOf(' ') + 1)" target="_blank">{{ theme.footerConfig.publicSecurityRecordCode }}</a>
+          <a :href="'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footerConfig.publicSecurityRecordCode.replace('号', '').substring(theme.footerConfig.publicSecurityRecordCode.indexOf('备') + 1)" target="_blank">{{ theme.footerConfig.publicSecurityRecordCode }}</a>
         </span>
       </p>
       <p class="copyright" v-html="theme.footerConfig.copyright"></p>

repos/.vitepress/theme/components/WordCloud.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="wordcloud-container"></div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onBeforeUnmount, watch } from 'vue'
+import { WordCloud, G2 } from '@antv/g2plot'
+import { debounce, useDark } from '@pureadmin/utils'
+
+// 定义属性
+const props = defineProps({
+  dataList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+
+// 渲染WordCloud
+const theme = G2.getTheme('dark')
+G2.registerTheme('customize-dark', {
+  ...theme,
+  background: 'transparent',
+})
+
+const { isDark } = useDark()
+let wordCloud
+debounce(() => {
+  wordCloud = new WordCloud("wordcloud-container", {
+    data: props.dataList,
+    wordField: 'name',
+    weightField: 'value',
+    colorField: 'name',
+    wordStyle: {
+      fontFamily: 'Verdana',
+      fontSize: [14, 35],
+      rotation: 0,
+    },
+    theme: isDark.value ? 'customize-dark' : 'light',
+    // 返回值设置成一个 [0, 1) 区间内的值，
+    // 可以让每次渲染的位置相同（前提是每次的宽高一致）。
+    random: () => 0.5,
+  })
+  wordCloud.render()
+}, 20)()
+
+watch(isDark, (value) => {
+  value
+    ? wordCloud?.update({ theme: 'customize-dark' })
+    : wordCloud?.update({ theme: 'light' })
+})
+
+onBeforeUnmount(() => {
+  wordCloud.destroy()
+})
+</script>

repos/.vitepress/theme/components/dynamic/Tag.vue

@@ -10,6 +10,8 @@
 
     <!-- 内容 -->
     <div>
+      <!-- 标签云 -->
+      <WordCloud :dataList="dataList" :style="{ width: '100%', height: '130px' }" />
       <a-row :gutter="24">
         <!-- 标签列表区域 -->
         <a-col :span="24">
@@ -42,7 +44,6 @@
               </div>
             </a-list-item>
           </a-list>
-
           <a-card
             :style="{ width: '100%' }"
             class="no-result"
@@ -57,32 +58,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import md5 from 'blueimp-md5'
 import articleData from '../../../../../article-data.json'
 import { formatDate, getQueryParam } from '../../utils.ts'
 
-// 获取所有Tag数据
 const tags = computed(() => initTags(articleData))
-
-// 点击指定Tag后进行选中
-let selectTag = ref('')
-const toggleTag = (tagTitle: string) => {
-  if (selectTag.value && selectTag.value == tagTitle) {
-    selectTag.value = null
-  } else {
-    selectTag.value = tagTitle
-  }
-}
-
-// 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git
-let tag = getQueryParam('tag')
-if (tag && tag.trim() != '') {
-  toggleTag(tag)
-}
-
 /**
- * 初始化Tag数据(感谢https://github.com/clark-cui/vitepress-blog-zaun)
+ * 初始化标签数据
  * {tagTitle1: [article1, article2, ...}
  */
 function initTags(articleData) {
@@ -103,6 +86,35 @@ function initTags(articleData) {
   }
   return tags
 }
+
+// 点击指定Tag后进行选中
+let selectTag = ref('')
+const toggleTag = (tagTitle: string) => {
+  if (selectTag.value && selectTag.value == tagTitle) {
+    selectTag.value = null
+  } else {
+    selectTag.value = tagTitle
+  }
+}
+
+// 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git
+let tag = getQueryParam('tag')
+if (tag && tag.trim() != '') {
+  toggleTag(tag)
+}
+
+const dataList = computed(() => initWordCloud(tags))
+/**
+ * 初始化词云数据
+ * [{"name": xx, "value": xx}]
+ */
+function initWordCloud(tags) {
+  const dataList = []
+  for (let tag in tags.value) {
+    dataList.push({"name": tag, "value": tags.value[tag].length})
+  }
+  return dataList
+}
 </script>
 
 <style scoped>

repos/.vitepress/theme/index.ts

@@ -3,11 +3,13 @@ import MyLayout from "./MyLayout.vue"
 import './styles/vars.css'
 import './styles/custom.css'
 import ArticleMetadata from './components/ArticleMetadata.vue'
+import WordCloud from './components/WordCloud.vue'
 
 export default {
   ...DefaultTheme,
   Layout: MyLayout,
   enhanceApp({ app }) {
     app.component('ArticleMetadata', ArticleMetadata)
+    app.component('WordCloud', WordCloud)
   }
 }