feat: 完善主题的ts文件

2022-01-02 21:52:07 +08:00 · 2022-01-02 21:52:07 +08:00 · 88c17acf91
parent fc34b35537
commit 88c17acf91
9 changed files with 213 additions and 134 deletions
--- a/docs/.vuepress/config.ts
+++ b/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
  },

--- a/docs/.vuepress/config/htmlModules.js
+++ b/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">
--- a/docs/00.目录页/02.页面.md
+++ b/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)，前端页面相关技术
--- a/docs/02.页面/20.CSS/00.CSS教程和技巧收藏.md
+++ b/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:
  > 页面在垂直方向上，分成三部分：页眉、内容区、页脚。
 * 圣杯布局
  > 最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。
-
-
-
--- a/docs/《Git》学习笔记/20.文档笔记/10.Git基础与命令.md
+++ b/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
--- a/theme-vdoing/components/ArticleInfo.vue
+++ b/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
-          >
+
+        <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.classify1
-            )}`"
+            :to="`/categories/?category=${encodeURIComponent(item)}`"
            title="分类"
-            >{{ articleInfo.classify1 }}</router-link
+            >{{ item }}</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
-          >
-          <router-link
-            v-else-if="$themeConfig.category !== false"
-            :to="`/categories/?category=${encodeURIComponent(
-              articleInfo.classify3
-            )}`"
-            title="分类"
-            >{{ articleInfo.classify3 }}</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}`
    }
  }
 }
--- a/theme-vdoing/components/Catalogue.vue
+++ b/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()
    }
  }
--- a/theme-vdoing/components/Footer.vue
+++ b/theme-vdoing/components/Footer.vue
@ -1,9 +1,6 @@
 <template>
  <div class="footer">
-    <div
-      class="icons"
-      v-if="social && social.icons"
-    >
+    <div class="icons" v-if="social && social.icons">
      <a
        :href="item.link"
        :title="item.title"
@ -20,12 +17,11 @@
      href="https://github.com/xugaoyi/vuepress-theme-vdoing"
      target="_blank"
      title="本站主题"
-    >Vdoing</a>
+      >Vdoing</a
+    >
    <template v-if="footer">
      | Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
-      <span
-        v-html="footer.copyrightInfo"
-      ></span>
+      <span v-html="footer.copyrightInfo"></span>
    </template>
  </div>
 </template>
@ -33,10 +29,10 @@
 <script>
 export default {
  computed: {
-    social () {
+    social() {
      return this.$themeConfig.social
    },
-    footer () {
+    footer() {
      return this.$themeConfig.footer
    }
  }
@ -52,6 +48,8 @@ export default {
  box-sizing border-box
  font-size 0.85rem
  transition all 0.2s ease
+  > span
+    line-height 1.5rem
  .icons
    margin-bottom 12px
    .iconfont
@ -64,10 +62,10 @@ export default {
@media (min-width ($MQMobile + 1px))
  .sidebar-open .footer
    width auto
-    padding-left ($sidebarWidth + 1.5rem)
+    padding-left: ($sidebarWidth + 1.5rem)
@media (min-width 1520px)
  .have-rightmenu .footer
-    padding-right ($rightMenuWidth + 1.5rem)
+    padding-right: ($rightMenuWidth + 1.5rem)
 .no-sidebar .footer
  width auto
  padding-left 1.5rem
--- a/theme-vdoing/types/index.ts
+++ b/theme-vdoing/types/index.ts
@ -1,7 +1,12 @@
 import { DefaultThemeConfig } from '@vuepress/types'

-// vdoing主题配置类型
-export interface VdoingThemeConfig extends DefaultThemeConfig {
+type NoSidebar4DefaultThemeConfig = Omit<DefaultThemeConfig, 'sidebar'> // 忽略sidebar属性
+
+/**
+ * Vdoing主题配置类型
+ * @see https://doc.xugaoyi.com/
+ */
+export interface VdoingThemeConfig extends NoSidebar4DefaultThemeConfig {
  /**
   * 是否打开分类功能. Enable classification
   * @default true
@ -38,5 +43,112 @@ export interface VdoingThemeConfig extends DefaultThemeConfig {
   */
  bodyBgImgOpacity?: 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;

+  /**
+   * 是否显示文章标题前的图标
+   * @default true
+   */
+  titleBadge?: boolean;

+  /**
+   * 文章标题前图标的地址
+   * @default <内置图标>
+   */
+  titleBadgeIcons?: string[];
+
+  /**
+   * 文章内容块的背景风格. 1 方格 | 2 横线 | 3 竖线 | 4 左斜线 | 5 右斜线 | 6 点状
+   * @default <none>
+   */
+  contentBgStyle?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * 最近更新栏. showToArticle 是否显示到文章页底部，默认true。 moreArticle “更多文章”跳转的页面，默认'/archives'
+   * @default {showToArticle: true, moreArticle: '/archives'}
+   */
+  updateBar?: {
+    showToArticle: boolean,
+    moreArticle?: '/archives' | string
+  };
+
+  /**
+   * 宽屏时是否显示右侧文章大纲栏 (屏宽小于1300px下无论如何都不显示)
+   * @default true
+   */
+  rightMenuBar?: boolean;
+
+  /**
+   * 初始状态是否打开左侧边栏 (注：这里只是决定收起还是展开侧边栏)
+   * @default true
+   */
+  sidebarOpen?: boolean;
+
+  /**
+   * 是否显示快捷翻页按钮
+   * @default true
+   */
+  pageButton?: boolean;
+
+  /**
+   * 侧边栏配置
+   */
+  sidebar?:
+  | 'structuring'
+  | { mode: 'structuring', collapsable: Boolean }
+  | DefaultThemeConfig['sidebar']
+
+  /**
+   * 文章默认的作者信息
+   */
+  author?: string | { name: string, link?: string }
+
+  /**
+   * 博主信息 (显示在首页侧边栏)
+   */
+  blogger?: {
+    avatar: string,
+    name: string,
+    slogan?: string,
+  }
+
+  /**
+   * 社交图标 (显示于博主信息栏和页脚栏)
+   * @内置图标-see：https://doc.xugaoyi.com/pages/a20ce8/#social
+   */
+  social?: {
+    iconfontCssFile?: string,
+    icons: {
+      iconClass: string,
+      title: string,
+      link: string,
+    }[]
+  }
+
+  /**
+   * 页脚信息
+   */
+  footer?: {
+    createYear: number,
+    copyrightInfo: string
+  }
+
+  /**
+   * 自定义hmtl(广告)模块
+   * @see: https://doc.xugaoyi.com/pages/a20ce8/#htmlmodules
+   */
+  htmlModules?: {
+    homeSidebarB?: string,
+    sidebarT?: string,
+    sidebarB?: string,
+    pageT?: string,
+    pageB?: string,
+    pageTshowMode?: 'article' | 'custom',
+    pageBshowMode?: 'article' | 'custom',
+    windowLB?: string,
+    windowRB?: string,
+  }
+
+  /**
+   * 兼容其他未列举配置项
+   */
+  [key: string]: any;
 }