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

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)
   }
 }