feat: 完善主题的ts文件

docs/.vuepress/config.ts

@@ -7,14 +7,17 @@ import baiduCode from './config/baiduCode' // 百度统计hm码
 import htmlModules from './config/htmlModules' // 自定义插入的html块
 
 
-
-
 export default defineConfig4CustomTheme<VdoingThemeConfig>({
   // theme: 'vdoing', // 使用npm包主题
   theme: resolve(__dirname, '../../theme-vdoing'), // 使用本地主题
 
-  title: "Evan's blog",
-  description: 'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。',
+  locales: {
+    '/': {
+      lang: 'zh-CN',
+      title: "Evan's blog",
+      description: 'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。',
+    }
+  },
   // base: '/', // 默认'/'。如果你想将你的网站部署到如 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/",（否则页面将失去样式等文件）
 
   // 主题配置
@@ -148,25 +151,24 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
     // pageButton: false, // 是否显示快捷翻页按钮，默认true
 
     // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义>    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
-    // @ts-ignore
     sidebar: 'structuring',
 
-    // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
+    // 文章默认的作者信息，(可在md文件中单独配置此信息) string | {name: string, link?: string}
     author: {
       name: 'xugaoyi', // 必需
       link: 'https://github.com/xugaoyi', // 可选的
     },
 
-    // 博主信息，显示在首页侧边栏
+    // 博主信息 (显示在首页侧边栏)
     blogger: {
       avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
       name: 'Evan Xu',
       slogan: '前端界的小学生',
     },
 
-    // 社交图标，显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social
+    // 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)
     social: {
-      // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加
+      // iconfontCssFile: '//at.alicdn.com/t/xxx.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加。阿里图片库：https://www.iconfont.cn/
       icons: [
         {
           iconClass: 'icon-youjian',
@@ -190,10 +192,10 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
     footer: {
       createYear: 2019, // 博客创建年份
       copyrightInfo:
-        'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签
+        'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签或换行标签</br>
     },
 
-    // 插入hmtl(广告)模块
+    // 自定义hmtl(广告)模块
     htmlModules
   },
 

docs/.vuepress/config/htmlModules.js

@@ -17,7 +17,6 @@
  * ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。
  * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
  */
-
 const htmlModule = {
   homeSidebarB:
     `<div style="padding: 0.95rem">

docs/00.目录页/02.页面.md

@@ -1,7 +1,7 @@
 ---
-pageComponent: 
+pageComponent:
   name: Catalogue
-  data: 
+  data:
     key: 02.页面
     imgUrl: /img/ui.png
     description: html(5)/css(3)，前端页面相关技术

docs/02.页面/20.CSS/00.CSS教程和技巧收藏.md

@@ -2,11 +2,11 @@
 title: CSS教程和技巧收藏
 date: 2020-08-11 17:13:52
 permalink: /pages/c8f128/
-categories: 
+categories:
   - 页面
   - CSS
-tags: 
-  - 
+tags:
+  -
 ---
 
 ## Flex 布局教程：语法篇
@@ -27,6 +27,3 @@ tags:
   > 页面在垂直方向上，分成三部分：页眉、内容区、页脚。
 * 圣杯布局
   > 最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。
-
-
-

docs/《Git》学习笔记/20.文档笔记/10.Git基础与命令.md

@@ -248,7 +248,7 @@ a11bef0 - Scott Chacon, 6 years ago : first commit
 
 **当 `oneline` 或 `format` 与另一个 `log` 选项 `--graph` 结合使用时尤其有用。 这个选项添加了一些 ASCII 字符串来形象地展示你的分支、合并历史：**
 
-```console
+``` sh
 $ git log --pretty=format:"%h %s" --graph
 * 2d3acf9 ignore errors from SIGCHLD on trap
 *  5e3ee11 Merge branch 'master' of git://github.com/dustin/grit

theme-vdoing/components/ArticleInfo.vue

@@ -1,106 +1,59 @@
 <template>
   <div class="articleInfo-wrap">
     <div class="articleInfo">
-      <ul
-        class="breadcrumbs"
-        v-if="articleInfo.classify1 && articleInfo.classify1 !== '_posts'"
-      >
+      <!-- 面包屑 -->
+      <ul class="breadcrumbs" v-if="classify1 && classify1 !== '_posts'">
         <li>
           <router-link to="/" class="iconfont icon-home" title="首页" />
         </li>
-        <li>
-          <router-link
-            v-if="articleInfo.cataloguePermalink"
-            :to="articleInfo.cataloguePermalink"
-            :title="articleInfo.classify1 + '-目录页'"
-            >{{ articleInfo.classify1 }}</router-link
-          >
-          <router-link
-            v-else-if="$themeConfig.category !== false"
-            :to="`/categories/?category=${encodeURIComponent(
-              articleInfo.classify1
-            )}`"
-            title="分类"
-            >{{ articleInfo.classify1 }}</router-link
-          >
-          <span v-else>{{ articleInfo.classify1 }}</span>
-        </li>
-        <li v-if="articleInfo.classify2">
-          <router-link
-            v-if="articleInfo.cataloguePermalink"
-            :to="articleInfo.cataloguePermalink + '/#' + articleInfo.classify2"
-            :title="articleInfo.classify1 + '#' + articleInfo.classify2"
-            >{{ articleInfo.classify2 }}</router-link
-          >
-          <router-link
-            v-else-if="$themeConfig.category !== false"
-            :to="`/categories/?category=${encodeURIComponent(
-              articleInfo.classify2
-            )}`"
-            title="分类"
-            >{{ articleInfo.classify2 }}</router-link
-          >
-          <span v-else>{{ articleInfo.classify2 }}</span>
-        </li>
-        <li v-if="articleInfo.classify3">
-          <router-link
-            v-if="articleInfo.cataloguePermalink"
-            :to="articleInfo.cataloguePermalink + '/#' + articleInfo.classify3"
-            :title="articleInfo.classify1 + '#' + articleInfo.classify3"
-            >{{ articleInfo.classify3 }}</router-link
-          >
+
+        <li v-for="item in classifyList" :key="item">
+          <!-- 跳目录页 -->
+          <router-link v-if="cataloguePermalink" :to="getLink(item)">{{
+            item
+          }}</router-link>
+          <!-- 跳分类页 -->
           <router-link
             v-else-if="$themeConfig.category !== false"
-            :to="`/categories/?category=${encodeURIComponent(
-              articleInfo.classify3
-            )}`"
+            :to="`/categories/?category=${encodeURIComponent(item)}`"
             title="分类"
-            >{{ articleInfo.classify3 }}</router-link
+            >{{ item }}</router-link
           >
-          <span v-else>{{ articleInfo.classify3 }}</span>
+          <!-- 没有跳转 -->
+          <span v-else>{{ item }}</span>
         </li>
       </ul>
+
+      <!-- 作者&日期 -->
       <div class="info">
-        <div
-          class="author iconfont icon-touxiang"
-          title="作者"
-          v-if="articleInfo.author"
-        >
+        <div class="author iconfont icon-touxiang" title="作者" v-if="author">
           <a
-            :href="articleInfo.author.href || articleInfo.author.link"
+            :href="author.href || author.link"
             v-if="
-              articleInfo.author.href ||
-              (articleInfo.author.link &&
-                typeof articleInfo.author.link === 'string')
+              author.href || (author.link && typeof author.link === 'string')
             "
             target="_blank"
             class="beLink"
             title="作者"
-            >{{ articleInfo.author.name }}</a
+            >{{ author.name }}</a
           >
-          <a v-else href="javascript:;">{{
-            articleInfo.author.name || articleInfo.author
-          }}</a>
+          <a v-else href="javascript:;">{{ author.name || author }}</a>
         </div>
-        <div
-          class="date iconfont icon-riqi"
-          title="创建时间"
-          v-if="articleInfo.date"
-        >
-          <a href="javascript:;">{{ articleInfo.date }}</a>
+        <div class="date iconfont icon-riqi" title="创建时间" v-if="date">
+          <a href="javascript:;">{{ date }}</a>
         </div>
         <div
           class="date iconfont icon-wenjian"
           title="分类"
           v-if="
             $themeConfig.category !== false &&
-            !(articleInfo.classify1 && articleInfo.classify1 !== '_posts') &&
-            articleInfo.categories
+            !(classify1 && classify1 !== '_posts') &&
+            categories
           "
         >
           <router-link
             :to="`/categories/?category=${encodeURIComponent(item)}`"
-            v-for="(item, index) in articleInfo.categories"
+            v-for="(item, index) in categories"
             :key="index"
             >{{ item + ' ' }}</router-link
           >
@@ -112,49 +65,67 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
-      articleInfo: {}
+      date: '',
+      classify1: '',
+      classifyList: [],
+      cataloguePermalink: '',
+      author: null,
+      categories: []
     }
   },
-  created () {
-    this.articleInfo = this.getPageInfo()
+  created() {
+    this.getPageInfo()
   },
   watch: {
-    '$route.path' () {
-      this.articleInfo = this.getPageInfo()
+    '$route.path'() {
+      this.classifyList = []
+      this.getPageInfo()
     }
   },
   methods: {
-    getPageInfo () {
+    getPageInfo() {
       const pageInfo = this.$page
       const { relativePath } = pageInfo
       const { sidebar } = this.$themeConfig
 
-      // 分类采用解析文件夹地址名称的方式
+      // 分类采用解析文件夹地址名称的方式 (即使关闭分类功能也可以正确跳转目录页)
       const relativePathArr = relativePath.split('/')
 
       const classifyArr = relativePathArr[0].split('.')
-      const classify1 = classifyArr.length > 1 ? classifyArr[1] : classifyArr[0] // 文章一级分类名称
-      const classify2 = relativePathArr.length > 2 ? relativePathArr[1].split('.')[1] : undefined// 文章二级分类名称
-      const classify3 = relativePathArr.length > 3 ? relativePathArr[2].split('.')[1] : undefined// 文章三级分类名称
 
-      const cataloguePermalink = sidebar && sidebar.catalogue ? sidebar.catalogue[classify1] : undefined// 目录页永久链接
+      relativePathArr.forEach((item, index) => {
+        const nameArr = item.split('.')
+        if (index !== relativePathArr.length - 1) {
+          this.classifyList.push(nameArr[1] || nameArr[0] || '')
+        }
+      })
+
+      this.classify1 = this.classifyList[0]
+
+      const cataloguePermalink = sidebar && sidebar.catalogue ? sidebar.catalogue[this.classify1] : ''// 目录页永久链接
       const author = this.$frontmatter.author || this.$themeConfig.author // 作者
       let date = (pageInfo.frontmatter.date || '').split(' ')[0] // 文章创建时间
 
       // 获取页面frontmatter的分类（碎片化文章使用）
       const { categories } = this.$frontmatter
 
-      return {
-        date,
-        classify1,
-        classify2,
-        classify3,
-        cataloguePermalink,
-        author,
-        categories
+      this.date = date
+      this.cataloguePermalink = cataloguePermalink
+      this.author = author
+      this.categories = categories
+    },
+
+    getLink(item) {
+      const { cataloguePermalink } = this
+      if (item === cataloguePermalink) {
+        return cataloguePermalink
       }
+      return `${cataloguePermalink}${cataloguePermalink.charAt(cataloguePermalink.length - 1) === '/'
+        ? ''
+        : '/'
+        }#${item}`
     }
   }
 }

theme-vdoing/components/Catalogue.vue

@@ -61,14 +61,14 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       pageData: null,
       isStructuring: true,
       appointDir: {}
     }
   },
-  created () {
+  created() {
     this.getPageData()
     const sidebar = this.$themeConfig.sidebar
     if (!sidebar || sidebar === 'auto') {
@@ -77,7 +77,7 @@ export default {
     }
   },
   methods: {
-    getPageData () {
+    getPageData() {
       const pageComponent = this.$frontmatter.pageComponent
       if (pageComponent && pageComponent.data) {
         this.pageData = {
@@ -88,7 +88,7 @@ export default {
         console.error('请在front matter中设置pageComponent和pageComponent.data数据')
       }
     },
-    getCatalogueList () {
+    getCatalogueList() {
       const { sidebar } = this.$site.themeConfig
       const { data } = this.$frontmatter.pageComponent
       const key = data.path || data.key
@@ -104,7 +104,7 @@ export default {
       }
       return catalogueList
     },
-    type (o) { // 数据类型检查
+    type(o) { // 数据类型检查
       return Object.prototype.toString.call(o).match(/\[object (.*?)\]/)[1].toLowerCase()
     },
     /**
@@ -114,7 +114,7 @@ export default {
      * @param catalogueList 目录对象列表
      * @returns {*}
      */
-    appointDirDeal (index, dirKeyArray, catalogueList) {
+    appointDirDeal(index, dirKeyArray, catalogueList) {
       let dirKey = dirKeyArray[index];
       if (dirKey !== undefined && dirKey.indexOf(".") !== -1) {
         dirKey = dirKey.substring(dirKey.indexOf('.') + 1);
@@ -131,7 +131,7 @@ export default {
     },
   },
   watch: {
-    '$route.path' () {
+    '$route.path'() {
       this.getPageData()
     }
   }