优化：初步优化全局代码样式

2023-02-25 20:36:27 +08:00
parent a0358e1079
commit 57e1051a01
26 changed files with 433 additions and 453 deletions
--- a/README.en.md
+++ b/README.en.md
@@ -13,6 +13,6 @@ English | [中文](./README.md)
 </a>


-📝 **This is the charles's personal knowledge repositories website.** 
+📝 **This is the charles's personal technology knowledge repositories website.** 

 🐢 [GitHub Pages](https://blog.charles7c.top) | 🐇 [Gitee Pages](https://charles7c.gitee.io)
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
 </a>


-📝 **查尔斯的个人知识库，记录 & 分享个人碎片化、结构化、体系化的知识内容。** 
+📝 **查尔斯的个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。** 

 🐢 [GitHub Pages（完整体验）](https://blog.charles7c.top) | 🐇 [Gitee Pages（无法评论）](https://charles7c.gitee.io)

--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,9 +1,9 @@
-import { defineConfig } from 'vitepress'
-import { metaData } from './config/constants'
-import { head } from './config/head'
-import { markdown } from './config/markdown'
-import { themeConfig } from './config/theme'
-import { withMermaid } from 'vitepress-plugin-mermaid'
+import { defineConfig } from 'vitepress';
+import { withMermaid } from 'vitepress-plugin-mermaid';
+import { metaData } from './config/constants';
+import { head } from './config/head';
+import { markdown } from './config/markdown';
+import { themeConfig } from './config/theme';

 export default withMermaid(
  defineConfig({
@@ -11,11 +11,11 @@ export default withMermaid(
    title: metaData.title,
    description: metaData.description,

-    cleanUrls: 'without-subfolders',
+    cleanUrls: true,
    lastUpdated: true, // 显示最后更新时间

    head, // <head>内标签配置
    markdown: markdown, // Markdown配置
-    themeConfig // 主题配置
-  })
-)
+    themeConfig, // 主题配置
+  }),
+);
--- a/docs/.vitepress/config/constants.ts
+++ b/docs/.vitepress/config/constants.ts
@@ -1,10 +1,10 @@
-const site = 'https://blog.charles7c.top'
+const site = 'https://blog.charles7c.top';

 export const metaData = {
  lang: 'zh-CN',
  locale: 'zh_CN',
  title: '查尔斯的知识库',
-  description: '个人知识库，记录 & 分享个人碎片化、结构化、体系化的知识内容。',
+  description: '个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。',
  site,
-  image: `${site}/logo.jpg`
-}
+  image: `${site}/logo.jpg`,
+};
--- a/docs/.vitepress/config/head.ts
+++ b/docs/.vitepress/config/head.ts
@@ -1,5 +1,5 @@
-import type { HeadConfig } from 'vitepress'
-import { metaData } from './constants'
+import type { HeadConfig } from 'vitepress';
+import { metaData } from './constants';

 export const head: HeadConfig[] = [
  ['link', { rel: 'icon', href: '/favicon.ico' }],
@@ -56,4 +56,4 @@ export const head: HeadConfig[] = [
    xhr.open('GET', 'https://api.charles7c.top/blog/pv?pageUrl=' + location.href);
    xhr.send();
  }`]
-]
+];
--- a/docs/.vitepress/config/markdown.ts
+++ b/docs/.vitepress/config/markdown.ts
@@ -1,4 +1,4 @@
-import type { MarkdownOptions } from 'vitepress'
+import type { MarkdownOptions } from 'vitepress';

 export const markdown: MarkdownOptions = {
  // Shiki主题, 所有主题参见: https://github.com/shikijs/shiki/blob/main/docs/themes.md
@@ -11,9 +11,9 @@ export const markdown: MarkdownOptions = {
  // 在所有文档的<h1>标签后添加<ArticleMetadata/>组件
  config: (md) => {
    md.renderer.rules.heading_close = (tokens, idx, options, env, slf) => {
-      let htmlResult = slf.renderToken(tokens, idx, options, env, slf)
-      if (tokens[idx].tag === 'h1') htmlResult += `\n<ClientOnly><ArticleMetadata v-if="($frontmatter?.aside ?? true) && ($frontmatter?.showArticleMetadata ?? true)" :article="$frontmatter" /></ClientOnly>`
-      return htmlResult
+      let htmlResult = slf.renderToken(tokens, idx, options);
+      if (tokens[idx].tag === 'h1') htmlResult += `\n<ClientOnly><ArticleMetadata v-if="($frontmatter?.aside ?? true) && ($frontmatter?.showArticleMetadata ?? true)" :article="$frontmatter" /></ClientOnly>`;
+      return htmlResult;
    }
-  }
-}
+  },
+};
--- a/docs/.vitepress/config/nav.ts
+++ b/docs/.vitepress/config/nav.ts
@@ -1,4 +1,4 @@
-import DefaultTheme from 'vitepress/theme'
+import type { DefaultTheme } from 'vitepress';

 export const nav: DefaultTheme.Config['nav'] = [
  {
@@ -37,5 +37,5 @@ export const nav: DefaultTheme.Config['nav'] = [
      { text: '关于我', link: '/about/me', activeMatch: '/about/me' }
    ],
    activeMatch: '/about/' // // 当前页面处于匹配路径下时, 对应导航菜单将突出显示
-  }
-]
+  },
+];
--- a/docs/.vitepress/config/sidebar.ts
+++ b/docs/.vitepress/config/sidebar.ts
@@ -1,6 +1,6 @@
-import DefaultTheme from 'vitepress/theme'
-import { sync } from 'fast-glob'
-import matter from 'gray-matter'
+import type { DefaultTheme } from 'vitepress';
+import { sync } from 'fast-glob';
+import * as matter from 'gray-matter';

 export const sidebar: DefaultTheme.Config['sidebar'] = {
  '/categories/issues/': getItemsByDate("categories/issues"),
@@ -10,7 +10,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {

  '/courses/java/': getItems("courses/java"),
  '/courses/mysql/': getItems("courses/mysql"),
-  '/courses/mybatis/': getItems("courses/mybatis")
+  '/courses/mybatis/': getItems("courses/mybatis"),
 }

 /**
@@ -19,57 +19,56 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
 * /categories/issues/2022/07/20/xxx.md
 * 
 * @param path 扫描基础路径
- * @returns {DefaultTheme.SidebarGroup[]}
+ * @returns {DefaultTheme.SidebarItem[]}
 */
 function getItemsByDate (path: string) {
  // 侧边栏年份分组数组
-  let yearGroups: DefaultTheme.SidebarGroup[] = []
-
+  let yearGroups: DefaultTheme.SidebarItem[] = [];
  // 置顶数组
-  let topArticleItems: DefaultTheme.SidebarItem[] = []
+  let topArticleItems: DefaultTheme.SidebarItem[] = [];

  // 1.获取所有年份目录
  sync(`docs/${path}/*`, {
    onlyDirectories: true,
-    objectMode: true
+    objectMode: true,
  }).forEach(({ name }) => {
-    let year = name
+    let year = name;
    // 年份数组
-    let articleItems: DefaultTheme.SidebarItem[] = []
+    let articleItems: DefaultTheme.SidebarItem[] = [];

    // 2.获取所有月份目录
    sync(`docs/${path}/${year}/*`, {
      onlyDirectories: true,
-      objectMode: true
+      objectMode: true,
    }).forEach(({ name }) => {
      let month = name

      // 3.获取所有日期目录
      sync(`docs/${path}/${year}/${month}/*`, {
        onlyDirectories: true,
-        objectMode: true
+        objectMode: true,
      }).forEach(({ name }) => {
-        let day = name
+        let day = name;
        // 4.获取日期目录下的所有文章
        sync(`docs/${path}/${year}/${month}/${day}/*`, {
          onlyFiles: true,
-          objectMode: true
+          objectMode: true,
        }).forEach((article) => {
-          const articleFile = matter.read(`${article.path}`)
-          const { data } = articleFile
+          const articleFile = matter.read(`${article.path}`);
+          const { data } = articleFile;
          if (data.isTop) {
            // 向置顶分组前追加标题
            topArticleItems.unshift({
              text: data.title,
-              link: `/${path}/${year}/${month}/${day}/${article.name.replace('.md', '')}`
-            })
+              link: `/${path}/${year}/${month}/${day}/${article.name.replace('.md', '')}`,
+            });
          }

          // 向年份分组前追加标题
          articleItems.unshift({
            text: data.title,
-            link: `/${path}/${year}/${month}/${day}/${article.name.replace('.md', '')}`
-          })
+            link: `/${path}/${year}/${month}/${day}/${article.name.replace('.md', '')}`,
+          });
        })
      })
    })
@@ -77,29 +76,29 @@ function getItemsByDate (path: string) {
    // 添加年份分组
    yearGroups.unshift({
      text: `${year}年 (${articleItems.length}篇)`,
+      items: articleItems,
      collapsed: true,
-      items: articleItems
-    })
+    });
  })

  if (topArticleItems.length > 0) {
    // 添加置顶分组
    yearGroups.unshift({
      text: `📑 我的置顶 (${topArticleItems.length}篇)`,
+      items: topArticleItems,
      collapsed: false,
-      items: topArticleItems
-    })
+    });

    // 将最近年份分组展开
-    yearGroups[1].collapsed = false
+    yearGroups[1].collapsed = false;
  } else {
    // 将最近年份分组展开
-    yearGroups[0].collapsed = false
+    yearGroups[0].collapsed = false;
  }

  // 添加序号
-  addOrderNumber(yearGroups)
-  return yearGroups
+  addOrderNumber(yearGroups);
+  return yearGroups;
 }

 /**
@@ -108,54 +107,54 @@ function getItemsByDate (path: string) {
 * courses/mybatis/01-MyBatis基础/01-xxx.md
 * 
 * @param path 扫描基础路径
- * @returns {DefaultTheme.SidebarGroup[]}
+ * @returns {DefaultTheme.SidebarItem[]}
 */
 function getItems (path: string) {
  // 侧边栏分组数组
-  let groups: DefaultTheme.SidebarGroup[] = []
+  let groups: DefaultTheme.SidebarItem[] = [];
  // 侧边栏分组下标题数组
-  let items: DefaultTheme.SidebarItem[] = []
-  let total = 0
+  let items: DefaultTheme.SidebarItem[] = [];
+  let total = 0;
  // 当分组内文章数量少于 2 篇或文章总数显示超过 20 篇时，自动折叠分组
-  const groupCollapsedSize = 2
-  const titleCollapsedSize = 20
+  const groupCollapsedSize = 2;
+  const titleCollapsedSize = 20;

  // 1.获取所有分组目录
  sync(`docs/${path}/*`, {
    onlyDirectories: true,
-    objectMode: true
+    objectMode: true,
  }).forEach(({ name }) => {
-    let groupName = name
+    let groupName = name;
    // 2.获取分组下的所有文章
    sync(`docs/${path}/${groupName}/*`, {
      onlyFiles: true,
-      objectMode: true
+      objectMode: true,
    }).forEach((article) => {
-      const articleFile = matter.read(`${article.path}`)
-      const { data } = articleFile
+      const articleFile = matter.read(`${article.path}`);
+      const { data } = articleFile;
      // 向前追加标题
      items.push({
        text: data.title,
-        link: `/${path}/${groupName}/${article.name.replace('.md', '')}`
-      })
-      total ++
+        link: `/${path}/${groupName}/${article.name.replace('.md', '')}`,
+      });
+      total += 1;
    })

    // 3.向前追加到分组
    // 当分组内文章数量少于 A 篇或文章总数显示超过 B 篇时，自动折叠分组
    groups.push({
      text: `${groupName.substring(groupName.indexOf('-') + 1)} (${items.length}篇)`,
+      items: items,
      collapsed: items.length < groupCollapsedSize || total > titleCollapsedSize,
-      items: items
    })

    // 4.清空侧边栏分组下标题数组
-    items = []
+    items = [];
  })

  // 添加序号
-  addOrderNumber(groups)
-  return groups
+  addOrderNumber(groups);
+  return groups;
 }

 /**
@@ -164,10 +163,10 @@ function getItems (path: string) {
 * @param groups 分组数据
 */
 function addOrderNumber(groups) {
-  for (var i = 0; i < groups.length; i++) {
-    for (var j = 0; j < groups[i].items.length; j++) {
-      var items = groups[i].items
-      items[j].text = `[${j + 1}] ${items[j].text}`
+  for (let i = 0; i < groups.length; i++) {
+    for (let j = 0; j < groups[i].items.length; j++) {
+      const items = groups[i].items;
+      items[j].text = `[${j + 1}] ${items[j].text}`;
    }
  }
 }
--- a/docs/.vitepress/config/theme.ts
+++ b/docs/.vitepress/config/theme.ts
@@ -1,15 +1,20 @@
-import DefaultTheme from 'vitepress/theme'
-import { nav } from './nav'
-import { sidebar } from './sidebar'
+import type { DefaultTheme } from 'vitepress';
+import { nav } from './nav';
+import { sidebar } from './sidebar';

 export const themeConfig: DefaultTheme.Config = {
  nav, // 导航栏配置
  sidebar, // 侧边栏配置

  logo: '/logo.png',
-  outline: 'deep', // 右侧大纲标题层级
-  outlineTitle: '目录', // 右侧大纲标题文本配置
+  outline: {
+    level: 'deep', // 右侧大纲标题层级
+    label: '目录', // 右侧大纲标题文本配置
+  },
  outlineBadges: false, // 是否在大纲中显示 Badge 文本
+  darkModeSwitchLabel: '切换日光/暗黑模式',
+  sidebarMenuLabel: '文章',
+  returnToTopLabel: '返回顶部',
  lastUpdatedText: '最后更新', // 最后更新时间文本配置, 需先配置lastUpdated为true
  // 文档页脚文本配置
  docFooter: {
@@ -60,10 +65,11 @@ export const themeConfig: DefaultTheme.Config = {
  ],

  // 自定义扩展: 文章元数据配置
+  // @ts-ignore
  articleMetadataConfig: {
    author: '查尔斯', // 文章全局默认作者名称
    authorLink: '/about/me', // 点击作者名时默认跳转的链接
-    showViewCount: true // 是否显示文章阅读数, 需要在 docs/.vitepress/theme/api/config.js 及 interface.js 配置好相应 API 接口
+    showViewCount: true, // 是否显示文章阅读数, 需要在 docs/.vitepress/theme/api/config.js 及 interface.js 配置好相应 API 接口
  },
  // 自定义扩展: 文章版权配置
  copyrightConfig: {
--- a/docs/.vitepress/theme/MyLayout.vue
+++ b/docs/.vitepress/theme/MyLayout.vue
@@ -15,23 +15,21 @@
 </template>

 <script lang="ts" setup>
-import { computed } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import { useData } from 'vitepress'
-import md5 from 'blueimp-md5'
-import Copyright from './components/layout/Copyright.vue'
-import Comment from './components/layout/Comment.vue'
-import Footer from './components/layout/Footer.vue'
+  import { computed } from 'vue';
+  import DefaultTheme from 'vitepress/theme';
+  import { useData } from 'vitepress';
+  import md5 from 'blueimp-md5';
+  import Copyright from './components/layout/Copyright.vue';
+  import Comment from './components/layout/Comment.vue';
+  import Footer from './components/layout/Footer.vue';

-const { Layout } = DefaultTheme
-const { page, theme, frontmatter } = useData()
-const hasSidebar = computed(() => {
-  return (
-    frontmatter.value.aside !== false &&
-    frontmatter.value.layout !== 'home'
-  )
-})
+  const { Layout } = DefaultTheme;
+  const { page, theme, frontmatter } = useData();
+  const hasSidebar = computed(() => {
+    return (
+      frontmatter.value.aside !== false && frontmatter.value.layout !== 'home'
+    )
+  });
 </script>

-<style scoped>
-</style>
+<style scoped></style>
--- a/docs/.vitepress/theme/api/config.js
+++ b/docs/.vitepress/theme/api/config.js
@@ -1,24 +1,24 @@
-import axios from 'axios'
+import axios from 'axios';

 const createBaseInstance = () => {
-    const instance = axios.create({
-      baseURL: 'https://api.charles7c.top/blog',
-      timeout: 3000
-    })
-    instance.interceptors.request.use(handleRequest, handleError)
-    instance.interceptors.response.use(handleResponse, handleError)
-    return instance
+  const instance = axios.create({
+    baseURL: 'https://api.charles7c.top/blog',
+    timeout: 3000,
+  });
+  instance.interceptors.request.use(handleRequest, handleError);
+  instance.interceptors.response.use(handleResponse, handleError);
+  return instance;
 }
-export const request = createBaseInstance()
+export const request = createBaseInstance();

 function handleError(e) {
-    throw e
+  throw e;
 }

 function handleRequest(request) {
-    return request;
+  return request;
 }

 function handleResponse(response) {
-    return response.data
+  return response.data;
 }
--- a/docs/.vitepress/theme/api/index.js
+++ b/docs/.vitepress/theme/api/index.js
@@ -1,3 +1,3 @@
-export * from './interface'
+export * from './interface';

-export { default } from './interface'
+export { default } from './interface';
--- a/docs/.vitepress/theme/api/interface.js
+++ b/docs/.vitepress/theme/api/interface.js
@@ -1,17 +1,17 @@
-import { request } from './config'
+import { request } from './config';

 export const getArticleViewCount = (id, pageUrl, call) => {
-    request.get(`/article/view/${id}?pageUrl=${pageUrl}`, {}).then(result => {
-        call(process(result))
-    })
-}
+  request.get(`/article/view/${id}?pageUrl=${pageUrl}`, {}).then(result => {
+    call(process(result));
+  });
+};

 function process(result) {
-    if (result.code === 200) {
-        return result.data
-    } else {
-        console.log(result.msg)
-    }
+  if (result.code === 200) {
+    return result.data;
+  } else {
+    console.log(result.msg);
+  }
 }

 export default { getArticleViewCount }
--- a/docs/.vitepress/theme/components/Archive.vue
+++ b/docs/.vitepress/theme/components/Archive.vue
@@ -79,142 +79,97 @@
 </template>

 <script lang="ts" setup>
-import articleData from '../../../../article-data.json'
-import { formatDate, getQueryParam, goToLink } from '../utils.ts'
+  import articleData from '../../../../article-data.json';
+  import { getQueryParam, goToLink } from '../utils.ts';

-// 文章原始数据和归档数据
-let $articleData
-let archiveData
+  // 文章原始数据和归档数据
+  let $articleData;
+  let archiveData;

-// 要筛选的分类、标签、年份
-let $category
-let $tag
-let $year
+  // 要筛选的分类、标签、年份
+  let $category;
+  let $tag;
+  let $year;

-initTimeline()
+  /**
+   * 初始化时间轴
+   */
+  function initTimeline() {
+    $articleData = [];
+    archiveData = {};

-/**
- * 初始化时间轴
- */
-function initTimeline() {
-  $articleData = []
-  archiveData = {}
-
-  // 如果URL路径有category或tag或year参数, 默认筛选出指定category或tag或year的文章数据
-  // 例如: /archives?category=Bug万象集
-  // 例如: /archives?tag=JVM
-  // 例如: /archives?year=2020
-  $category = getQueryParam('category')
-  $tag = getQueryParam('tag')
-  $year = getQueryParam('year')
-  if ($category && $category.trim() != '') {
-    for (let i = 0; i < articleData.length; i++) {
-      let article = articleData[i]
-      if (article.categories && article.categories.includes($category)) {
-        $articleData.push(article)
+    // 如果URL路径有category或tag或year参数, 默认筛选出指定category或tag或year的文章数据
+    // 例如: /archives?category=Bug万象集
+    // 例如: /archives?tag=JVM
+    // 例如: /archives?year=2020
+    $category = getQueryParam('category');
+    $tag = getQueryParam('tag');
+    $year = getQueryParam('year');
+    if ($category && $category.trim() != '') {
+      for (let i = 0; i < articleData.length; i++) {
+        let article = articleData[i];
+        if (article.categories && article.categories.includes($category)) {
+          $articleData.push(article);
+        }
      }
-    }
-  } else if ($tag && $tag.trim() != '') {
-    for (let i = 0; i < articleData.length; i++) {
-      let article = articleData[i]
-      if (article.tags && article.tags.includes($tag)) {
-        $articleData.push(article)
+    } else if ($tag && $tag.trim() != '') {
+      for (let i = 0; i < articleData.length; i++) {
+        let article = articleData[i];
+        if (article.tags && article.tags.includes($tag)) {
+          $articleData.push(article);
+        }
      }
-    }
-  } else if ($year && $year.trim() != '') {
-    for (let i = 0; i < articleData.length; i++) {
-      let article = articleData[i]
-      if (article.date && new Date(article.date).getFullYear() == $year) {
-        $articleData.push(article)
+    } else if ($year && $year.trim() != '') {
+      for (let i = 0; i < articleData.length; i++) {
+        let article = articleData[i];
+        if (article.date && new Date(article.date).getFullYear() == $year) {
+          $articleData.push(article);
+        }
      }
+    } else {
+      $articleData.push(...articleData);
    }
-  } else {
-    $articleData.push(...articleData)
+
+    // 文章数据归档处理
+    // 1.对文章数据进行降序排序
+    $articleData.sort((a, b) => b.date.localeCompare(a.date));
+    // 2.按年、月进行归档
+    for (let i = 0; i < $articleData.length; i++) {
+      const article = $articleData[i];
+      let year = (new Date(article.date).getFullYear()) + '年';
+      let month = (new Date(article.date).getMonth() + 1) + '月';
+
+      if (!archiveData[year]) {
+        archiveData[year] = {};
+      }
+      if (!(archiveData[year][month])) {
+        archiveData[year][month] = [];
+      }
+
+      archiveData[year][month].push(article);
+    }
+  }
+  initTimeline();
+
+  /**
+   * 获取生肖图标
+   *
+   * @param year 年份
+   */
+  function getChineseZodiac(year) {
+    const arr = ['monkey', 'rooster', 'dog', 'pig', 'rat', 'ox', 'tiger', 'rabbit', 'dragon', 'snake', 'horse', 'goat'];
+    return arr[year % 12];
  }

-  // 文章数据归档处理
-  // 1.对文章数据进行降序排序
-  $articleData.sort((a, b) => b.date.localeCompare(a.date))
-  // 2.按年、月进行归档
-  for (let i = 0; i < $articleData.length; i++) {
-    const article = $articleData[i]
-    let year = (new Date(article.date).getFullYear()) + '年'
-    let month = (new Date(article.date).getMonth() + 1) + '月'
-
-    if (!archiveData[year]) {
-      archiveData[year] = {}
-    }
-    if (!(archiveData[year][month])) {
-      archiveData[year][month] = []
-    }
-    
-    archiveData[year][month].push(article)
-  } 
-}
-
-/**
- * 获取生肖
- */
-function getChineseZodiac(year) {
-  switch(year % 12){
-    case 0:
-      return 'monkey'
-    case 1:
-      return 'rooster'
-    case 2:
-      return 'dog'
-    case 3:
-      return 'pig'
-    case 4:
-      return 'rat'
-    case 5:
-      return 'ox'
-    case 6:
-      return 'tiger'
-    case 7:
-      return 'rabbit'
-    case 8:
-      return 'dragon'
-    case 9:
-      return 'snake'
-    case 10:
-      return 'horse'
-    case 11:
-      return 'goat'
+  /**
+   * 获取生肖名称
+   *
+   * @param year 年份
+   */
+  function getChineseZodiacAlias(year) {
+    const arr = ['猴年', '鸡年', '狗年', '猪年', '鼠年', '牛年', '虎年', '兔年', '龙年', '蛇年', '马年', '羊年'];
+    return arr[year % 12];
  }
-}
-
-/**
- * 获取生肖名称
- */
-function getChineseZodiacAlias(year) {
-  switch(year % 12){
-    case 0:
-      return '猴年'
-    case 1:
-      return '鸡年'
-    case 2:
-      return '狗年'
-    case 3:
-      return '猪年'
-    case 4:
-      return '鼠年'
-    case 5:
-      return '牛年'
-    case 6:
-      return '虎年'
-    case 7:
-      return '兔年'
-    case 8:
-      return '龙年'
-    case 9:
-      return '蛇年'
-    case 10:
-      return '马年'
-    case 11:
-      return '羊年'
-  }
-}
 </script>

 <style scoped>
--- a/docs/.vitepress/theme/components/ArticleMetadata.vue
+++ b/docs/.vitepress/theme/components/ArticleMetadata.vue
@@ -68,49 +68,49 @@
 </template>

 <script lang="ts" setup>
-import { reactive, toRefs, onMounted } from 'vue'
-import { useData } from 'vitepress'
-import md5 from 'blueimp-md5'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { goToLink } from '../utils.ts'
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { useData } from 'vitepress';
+  import md5 from 'blueimp-md5';
+  import dayjs from 'dayjs';
+  import 'dayjs/locale/zh-cn';
+  import relativeTime from 'dayjs/plugin/relativeTime';
+  import { goToLink } from '../utils.ts';

-dayjs.extend(relativeTime)
-dayjs.locale('zh-cn')
+  dayjs.extend(relativeTime);
+  dayjs.locale('zh-cn');

-// 定义文章属性
-const props = defineProps({
-  article: Object,
-  showCategory: {
-    type: Boolean,
-    default: true
+  // 定义文章属性
+  const props = defineProps({
+    article: Object,
+    showCategory: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  // 初始化文章元数据信息
+  const { theme, page } = useData();
+  const data = reactive({
+    isOriginal: props.article?.isOriginal ?? true,
+    author: props.article?.author ?? theme.value.articleMetadataConfig.author,
+    authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
+    showViewCount: theme.value.articleMetadataConfig?.showViewCount ?? false,
+    viewCount: 0,
+    date: new Date(props.article.date),
+    categories: props.article?.categories ?? [],
+    tags: props.article?.tags ?? [],
+    showCategory: props.showCategory
+  });
+  const { isOriginal, author, authorLink, showViewCount, viewCount, date, toDate, categories, tags, showCategory } = toRefs(data);
+
+  if (data.showViewCount) {
+    // 记录并获取文章阅读数（使用文章标题 + 发布时间生成 MD5 值，作为文章的唯一标识）
+    onMounted(() => {
+      $api.getArticleViewCount(md5(props.article.title + props.article.date), location.href, function(viewCountData) {
+        data.viewCount = viewCountData;
+      });
+    });
  }
-})
-
-// 初始化文章元数据信息
-const { theme, page } = useData()
-const data = reactive({
-  isOriginal: props.article?.isOriginal ?? true,
-  author: props.article?.author ?? theme.value.articleMetadataConfig.author,
-  authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
-  showViewCount: theme.value.articleMetadataConfig?.showViewCount ?? false,
-  viewCount: 0,
-  date: new Date(props.article.date),
-  categories: props.article?.categories ?? [],
-  tags: props.article?.tags ?? [],
-  showCategory: props.showCategory
-})
-const { isOriginal, author, authorLink, showViewCount, viewCount, date, toDate, categories, tags, showCategory } = toRefs(data)
-
-if (data.showViewCount) {
-  // 记录并获取文章阅读数（使用文章标题 + 发布时间生成 MD5 值，作为文章的唯一标识）
-  onMounted(() => {
-    $api.getArticleViewCount(md5(props.article.title + props.article.date), location.href, function(viewCountData) {
-      data.viewCount = viewCountData
-    })
-  })
-}
 </script>

 <style scoped>
--- a/docs/.vitepress/theme/components/Tag.vue
+++ b/docs/.vitepress/theme/components/Tag.vue
@@ -58,63 +58,63 @@
 </template>

 <script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue'
-import md5 from 'blueimp-md5'
-import articleData from '../../../../article-data.json'
-import { formatDate, getQueryParam } from '../utils.ts'
+  import { computed, ref } from 'vue';
+  import md5 from 'blueimp-md5';
+  import articleData from '../../../../article-data.json';
+  import { getQueryParam } from '../utils.ts';

-const tags = computed(() => initTags(articleData))
-/**
- * 初始化标签数据
- * {tagTitle1: [article1, article2, ...}
- */
-function initTags(articleData) {
-  const tags: any = {}
-  for (let i = 0; i < articleData.length; i++) {
-    const article = articleData[i]
-    const articleTags = article.tags
-    if (Array.isArray(articleTags)) {
-      articleTags.forEach((articleTag) => {
-        if (!tags[articleTag]) {
-          tags[articleTag] = []
-        }
-        tags[articleTag].push(article)
-        // 文章按发布时间降序排序
-        tags[articleTag].sort((a, b) => b.date.localeCompare(a.date))
-      })
+  const tags = computed(() => initTags(articleData));
+  /**
+   * 初始化标签数据
+   * {tagTitle1: [article1, article2, ...}
+   */
+  function initTags(articleData) {
+    const tags: any = {};
+    for (let i = 0; i < articleData.length; i++) {
+      const article = articleData[i];
+      const articleTags = article.tags;
+      if (Array.isArray(articleTags)) {
+        articleTags.forEach((articleTag) => {
+          if (!tags[articleTag]) {
+            tags[articleTag] = [];
+          }
+          tags[articleTag].push(article);
+          // 文章按发布时间降序排序
+          tags[articleTag].sort((a, b) => b.date.localeCompare(a.date));
+        });
+      }
+    }
+    return tags;
+  }
+
+  // 点击指定Tag后进行选中
+  let selectTag = ref('');
+  const toggleTag = (tagTitle: string) => {
+    if (selectTag.value && selectTag.value == tagTitle) {
+      selectTag.value = null;
+    } else {
+      selectTag.value = tagTitle;
    }
  }
-  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);
  }
-}

-// 如果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})
+  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;
  }
-  return dataList
-}
 </script>

 <style scoped>
--- a/docs/.vitepress/theme/components/layout/Comment.vue
+++ b/docs/.vitepress/theme/components/layout/Comment.vue
@@ -3,79 +3,78 @@
 </template>

 <script lang="ts" setup>
-import { reactive, toRefs, onMounted } from 'vue'
-import { useData } from 'vitepress'
-import md5 from 'blueimp-md5'
-import $ from 'jquery'
-import { Message } from '@arco-design/web-vue'
-import '@arco-design/web-vue/es/message/style/css.js'
-import Gitalk from 'gitalk'
-import '../../styles/components/gitalk.css'
+  import { reactive, toRefs, onMounted } from 'vue';
+  import { useData } from 'vitepress';
+  import md5 from 'blueimp-md5';
+  import $ from 'jquery';
+  import { Message } from '@arco-design/web-vue';
+  import '@arco-design/web-vue/es/message/style/css.js';
+  import Gitalk from 'gitalk';
+  import '../../styles/components/gitalk.css';

-// 定义属性
-const props = defineProps({
-  commentConfig: Object
-})
+  // 定义属性
+  const props = defineProps({
+    commentConfig: Object,
+  });

-const data = reactive({
-  type: props.commentConfig?.type ?? 'gitalk'
-})
-const { type } = toRefs(data)
-
-// 初始化评论组件配置
-const { page } = useData()
-let gitalk
-if (type.value && type.value == 'gitalk') {
-  gitalk = new Gitalk({
-    clientID: '1de126ce1fbdbe049709',
-    clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
-    repo: 'charles7c.github.io',
-    owner: 'Charles7c',
-    admin: ['Charles7c'],
-    id: md5(page.value.relativePath),
-    language: 'zh-CN',
-    distractionFreeMode: false,
-    // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
-    proxy: 'https://vercel.charles7c.top/github_access_token'
+  const data = reactive({
+    type: props.commentConfig?.type ?? 'gitalk',
  })
-}
+  const { type } = toRefs(data);

-// 渲染评论组件
-onMounted(() => {
+  // 初始化评论组件配置
+  const { page } = useData();
+  let gitalk;
  if (type.value && type.value == 'gitalk') {
-    gitalk.render('comment-container')
-
-    // 如果点赞，先判断有没有登录
-    let $gc = $('#comment-container');
-    $gc.on('click', '.gt-comment-like', function () {
-      if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
-        Message.warning({
-          content:'点赞前，请您先进行登录',
-          closable: true
-        })
- 
-        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')
-      }
-    })
+    gitalk = new Gitalk({
+      clientID: '1de126ce1fbdbe049709',
+      clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
+      repo: 'charles7c.github.io',
+      owner: 'Charles7c',
+      admin: ['Charles7c'],
+      id: md5(page.value.relativePath),
+      language: 'zh-CN',
+      distractionFreeMode: false,
+      // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
+      proxy: 'https://vercel.charles7c.top/github_access_token',
+    });
  }
-})
+
+  // 渲染评论组件
+  onMounted(() => {
+    if (type.value && type.value == 'gitalk') {
+      gitalk.render('comment-container')
+
+      // 如果点赞，先判断有没有登录
+      let $gc = $('#comment-container');
+      $gc.on('click', '.gt-comment-like', function () {
+        if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
+          Message.warning({
+            content: '点赞前，请您先进行登录',
+            closable: true
+          })
+
+          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')
+        }
+      })
+    }
+  })
 </script>

-<style scoped>
-</style>
+<style scoped></style>
--- a/docs/.vitepress/theme/components/layout/Copyright.vue
+++ b/docs/.vitepress/theme/components/layout/Copyright.vue
@@ -43,18 +43,18 @@
 </template>

 <script lang="ts" setup>
-import { reactive, toRefs } from 'vue'
-import { useData } from 'vitepress'
-const { theme, frontmatter } = useData()
+  import { reactive, toRefs } from 'vue';
+  import { useData } from 'vitepress';
+  const { theme, frontmatter } = useData();

-const data = reactive({
-  isOriginal: frontmatter.value?.isOriginal ?? true,
-  author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
-  authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
-  articleTitle: frontmatter.value?.articleTitle ?? frontmatter.value.title,
-  articleLink: frontmatter.value?.articleLink ?? decodeURI(window.location.href)
-})
-const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(data)
+  const data = reactive({
+    isOriginal: frontmatter.value?.isOriginal ?? true,
+    author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
+    authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
+    articleTitle: frontmatter.value?.articleTitle ?? frontmatter.value.title,
+    articleLink: frontmatter.value?.articleLink ?? decodeURI(window.location.href),
+  });
+  const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(data);
 </script>

 <style scoped>
@@ -68,7 +68,7 @@ const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(dat
 }

 .copyright .content {
-  
+
  padding: 13px 16px;
 }

--- a/docs/.vitepress/theme/components/layout/Footer.vue
+++ b/docs/.vitepress/theme/components/layout/Footer.vue
@@ -23,8 +23,8 @@
 </template>

 <script lang="ts" setup>
-import { useData } from 'vitepress'
-const { theme } = useData()
+  import { useData } from 'vitepress';
+  const { theme } = useData();
 </script>

 <style scoped>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,21 +1,21 @@
 import DefaultTheme from 'vitepress/theme'
-import MyLayout from './MyLayout.vue'
-import './styles/vars.css'
-import './styles/custom.css'
-import axios from 'axios'
-import api from './api/index'
+import MyLayout from './MyLayout.vue';
+import './styles/vars.css';
+import './styles/custom.css';
+import axios from 'axios';
+import api from './api/index';

 export default {
  ...DefaultTheme,
  Layout: MyLayout,
  enhanceApp(ctx) {
    // extend default theme custom behaviour.
-    DefaultTheme.enhanceApp(ctx)
+    DefaultTheme.enhanceApp(ctx);

    // 全局挂载 API 接口
    ctx.app.config.globalProperties.$http = axios
    if (typeof window !== 'undefined') {
-        window.$api = api
+        window.$api = api;
    }

    // register your custom global components
--- a/docs/.vitepress/theme/utils.ts
+++ b/docs/.vitepress/theme/utils.ts
@@ -1,36 +1,39 @@
 /**
 * 格式化时间
+ *
 * @param date 待格式化时间
 * @returns 格式化后的时间(YYYY/MM/dd AM hh:mm)
 */
 export function formatDate(date) {
-  const formatDate = new Date(date)
-  return formatDate.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
+  const formatDate = new Date(date);
+  return formatDate.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'});
 }

 /**
- * 获取URL路径中的指定参数 
+ * 获取 URL 路径中的指定参数
+ *
 * @param paramName 参数名
 * @returns 参数值
 */
 export function getQueryParam(paramName) {
-  const reg = new RegExp("(^|&)"+ paramName +"=([^&]*)(&|$)")
-  let value = decodeURIComponent(window.location.search.substr(1)).match(reg)
+  const reg = new RegExp("(^|&)"+ paramName +"=([^&]*)(&|$)");
+  let value = decodeURIComponent(window.location.search.substr(1)).match(reg);
  if (value != null) {
-    return unescape(value[2])
+    return unescape(value[2]);
  } 
-  return null
+  return null;
 }

 /**
 * 跳转到指定链接
+ *
 * @param paramName 参数名
 * @param paramValue 参数值
 */
 export function goToLink(url, paramName, paramValue) {
  if (paramName) {
-    window.location.href = url + '?' + paramName + '=' + paramValue
+    window.location.href = url + '?' + paramName + '=' + paramValue;
  } else {
-    window.location.href = url
+    window.location.href = url;
  }
 }
--- a/docs/about/index.md
+++ b/docs/about/index.md
@@ -8,7 +8,7 @@ lastUpdated: false
 <img width=100% src="../public/img/svg/about-repos-header.svg" alt="头部图" />

 <div align="center">
-    📝 <strong>查尔斯的个人知识库，记录 & 分享个人碎片化、结构化、体系化的知识内容。</strong>
+    📝 <strong>查尔斯的个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。</strong>
 </div>

 ---
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,21 +2,21 @@
 layout: home

 title: 查尔斯的知识库
-titleTemplate: 个人知识库，记录和分享个人碎片化、结构化、体系化的知识内容
+titleTemplate: 个人技术知识库，记录和分享个人碎片化、结构化、体系化的技术知识内容

 hero:
  name: 查尔斯的知识库
  text: 专注 & 洞察 & 分享
-  tagline: 个人知识库，记录 & 分享个人碎片化、结构化、体系化的知识内容。
+  tagline: 个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。
  image:
    src: /logo.png
    alt: Logo
  actions:
    - theme: brand
-      text: Get Started
+      text: 快速开始
      link: /categories/issues/index
    - theme: alt
-      text: View on GitHub
+      text: 在 GitHub 查看
      link: https://github.com/Charles7c/charles7c.github.io

 features:
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,19 +1,19 @@
-import { defineConfig } from 'vite'
-//import { SearchPlugin } from 'vitepress-plugin-search'
-import Components from 'unplugin-vue-components/vite'
-import { ArcoResolver } from 'unplugin-vue-components/resolvers'
+import { defineConfig } from 'vite';
+import Components from 'unplugin-vue-components/vite';
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+// import { SearchPlugin } from 'vitepress-plugin-search';

 export default defineConfig({
  plugins: [
-    //SearchPlugin({
-      //encode: false,
-      //tokenize: 'full'
-    //}),
+    // SearchPlugin({
+    //   encode: false,
+    //   tokenize: 'full',
+    // }),
    Components({
      dirs: ['.vitepress/theme/components'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [ArcoResolver({ sideEffect: true, resolveIcons: true })]
-    })
+    }),
  ],
  ssr: { noExternal: ['@arco-design/web-vue'] },
  resolve: {
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.43.2",
+    "@types/blueimp-md5": "^2.18.0",
+    "@types/jquery": "^3.5.16",
    "flexsearch": "^0.7.31",
    "markdown-it": "^13.0.1",
    "mermaid": "9.3.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,8 @@ overrides:
 specifiers:
  '@antv/g2plot': ^2.4.25
  '@arco-design/web-vue': ^2.43.2
+  '@types/blueimp-md5': ^2.18.0
+  '@types/jquery': ^3.5.16
  axios: ^1.3.4
  blueimp-md5: ^2.19.0
  dayjs: ^1.11.7
@@ -36,6 +38,8 @@ dependencies:

 devDependencies:
  '@arco-design/web-vue': 2.43.2_vue@3.2.47
+  '@types/blueimp-md5': 2.18.0
+  '@types/jquery': 3.5.16
  flexsearch: 0.7.31
  markdown-it: 13.0.1
  mermaid: 9.3.0
@@ -931,6 +935,10 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /@types/blueimp-md5/2.18.0:
+    resolution: {integrity: sha512-f4A+++lGZGJvVSgeyMkqA7BEf2BVQli6F+qEykKb49c5ieWQBkfpn6CP5c1IZr2Yi2Ofl6Fj+v0e1fN18Z8Cnw==}
+    dev: true
+
  /@types/d3-timer/2.0.1:
    resolution: {integrity: sha512-TF8aoF5cHcLO7W7403blM7L1T+6NF3XMyN3fxyUolq2uOcFeicG/khQg/dGxiCJWoAcmYulYN7LYSRKO54IXaA==}
    dev: false
@@ -943,6 +951,12 @@ packages:
    resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
    dev: true

+  /@types/jquery/3.5.16:
+    resolution: {integrity: sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==}
+    dependencies:
+      '@types/sizzle': 2.3.3
+    dev: true
+
  /@types/linkify-it/3.0.2:
    resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
    dev: true
@@ -958,6 +972,10 @@ packages:
    resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
    dev: true

+  /@types/sizzle/2.3.3:
+    resolution: {integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==}
+    dev: true
+
  /@types/web-bluetooth/0.0.16:
    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
    dev: true