重构：扩展默认主题配置，文章标题下新增显示作者名及发布时间信息

2022-07-24 11:31:49 +08:00
parent 40676da91e
commit 43723a1de8
14 changed files with 104 additions and 19 deletions
--- a/repos/.vitepress/config.ts
+++ b/repos/.vitepress/config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { metaData } from './config/constants'
 import { head } from './config/head'
+import { markdown } from './config/markdown'
 import { themeConfig } from './config/theme'

 export default defineConfig({
@@ -9,13 +10,7 @@ export default defineConfig({
  description: metaData.description,

  head, // <head>内标签配置
-  themeConfig, // 主题配置
-  
  lastUpdated: true, // 显示最后更新时间
-
-  // Markdown配置
-  markdown: {
-    theme: 'one-dark-pro', // Shiki主题, 所有主题参见: https://github.com/shikijs/shiki/blob/main/docs/themes.md
-    lineNumbers: true // 启用行号
-  }
+  markdown: markdown, // Markdown配置
+  themeConfig // 主题配置
 })
--- a/repos/.vitepress/config/markdown.ts
+++ b/repos/.vitepress/config/markdown.ts
@@ -0,0 +1,16 @@
+import type { MarkdownOptions } from 'vitepress'
+
+export const markdown: MarkdownOptions = {
+  theme: 'one-dark-pro', // Shiki主题, 所有主题参见: https://github.com/shikijs/shiki/blob/main/docs/themes.md
+  lineNumbers: true, // 启用行号
+
+  // 在所有文档的<h1>标签后添加<ArticleMetadata/>组件
+  // 感谢: vitepress/@brc-dd
+  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<ArticleMetadata/>`
+      return htmlResult
+    }
+  }
+}
--- a/repos/.vitepress/config/theme.ts
+++ b/repos/.vitepress/config/theme.ts
@@ -32,5 +32,11 @@ export const themeConfig: DefaultTheme.Config = {
    { icon: 'github', link: 'https://github.com/Charles7c/charles7c.github.io' }
  ],
  nav, // 导航栏配置
-  sidebar // 侧边栏配置
+  sidebar, // 侧边栏配置
+
+  // 文章元数据配置
+  articleMetadataConfig: {
+    author: '查尔斯', // 文章全局默认作者名称
+    authorLink: '/about/me' // 点击作者名时默认跳转的链接
+  }
 }
--- a/repos/.vitepress/theme/components/ArticleMetadata.vue
+++ b/repos/.vitepress/theme/components/ArticleMetadata.vue
@@ -0,0 +1,64 @@
+<template>
+  <div v-if="frontmatter?.aside ?? true" class="meta-wrapper">
+    <div class="meta-item">
+      <span class="meta-icon">
+        <svg t="1658631419379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5313" width="200" height="200"><path d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z" p-id="5314" fill="#8A8F8D"></path></svg>
+      </span>
+      <span class="meta-content">
+        <a :href="frontmatter?.authorLink ?? theme.articleMetadataConfig.authorLink">{{ frontmatter?.author ?? theme.articleMetadataConfig.author }}</a>
+      </span>
+    </div>
+    <div class="meta-item">
+      <span class="meta-icon">
+        <svg t="1658631488653" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7904" width="200" height="200"><path d="M512.006169 1024c-136.761166 0-265.330233-53.260979-362.04388-149.962289S0 648.754997 0 511.993831s53.260979-265.330233 149.962289-362.031542S375.245003 0 512.006169 0s265.330233 53.248642 362.04388 149.962289S1024.012337 375.232665 1024.012337 511.993831s-53.260979 265.34257-149.962288 362.04388S648.767335 1024 512.006169 1024z m0-960.474223c-247.280473 0-448.468054 201.187581-448.468054 448.468054s201.187581 448.468054 448.468054 448.468054 448.468054-201.175243 448.468054-448.468054S759.286642 63.525777 512.006169 63.525777z" p-id="7905" fill="#8A8F8D"></path><path d="M786.688225 599.82448H512.006169a31.769057 31.769057 0 0 1 0-63.538115h274.682056a31.769057 31.769057 0 0 1 0 63.538115z" p-id="7906" fill="#8A8F8D"></path><path d="M512.006169 598.88683a31.769057 31.769057 0 0 1-31.769058-31.769057V292.435716a31.769057 31.769057 0 0 1 63.538115 0v274.682057A31.769057 31.769057 0 0 1 512.006169 598.88683z" p-id="7907" fill="#8A8F8D"></path></svg>
+      </span>
+      <span class="meta-content">{{ dayjs(frontmatter.date).format('YYYY-MM-DD HH:mm') }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue"
+import { useData } from 'vitepress'
+import dayjs from 'dayjs'
+
+const { theme, frontmatter } = useData()
+</script>
+
+<style scoped>
+.meta-wrapper {
+  margin-top: 10px;
+}
+.meta-item {
+  display: inline-block;
+  margin-right: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  max-width: 240px;
+  color: #8a8f8d;
+  cursor: default;
+  font-size: 14px;
+}
+.meta-icon, meta-content {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: baseline;
+}
+.meta-icon {
+  position: relative;
+  top: 1.3px;
+}
+.meta-icon svg {
+  height: 14px;
+  width: 14px;
+}
+.meta-content a {
+  font-weight: 400;
+  color: #8a8f8d;
+}
+.meta-content a:hover {
+  color: var(--vp-c-brand);
+}
+</style>
--- a/repos/.vitepress/theme/index.ts
+++ b/repos/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import MyLayout from "./components/MyLayout.vue"
 import ElementPlus from 'element-plus'
 import "element-plus/dist/index.css"
 import * as ElIcons from '@element-plus/icons-vue'
+import ArticleMetadata from './components/ArticleMetadata.vue'
 import './styles/vars.css'
 import './styles/custom.css'

@@ -16,5 +17,7 @@ export default {
    }
    // 全局注册ElementPlus
    app.use(ElementPlus)
+
+    app.component('ArticleMetadata', ArticleMetadata)
  }
 }
--- a/repos/fragments/2022/03/25.合并两个Git仓库的历史提交记录.md
+++ b/repos/fragments/2022/03/25.合并两个Git仓库的历史提交记录.md
@@ -1,7 +1,7 @@
 ---
 title: 合并两个Git仓库的历史提交记录
-author: Charles7c
-date: 2022/3/25 21:30
+author: 查尔斯
+date: 2022/03/25 21:30
 categories:
 - 杂碎逆袭史
 tags:
--- a/repos/fragments/2022/03/26.修改Git最后一次提交记录的作者和邮箱.md
+++ b/repos/fragments/2022/03/26.修改Git最后一次提交记录的作者和邮箱.md
@@ -1,7 +1,7 @@
 ---
 title: 修改Git最后一次提交记录的作者和邮箱
-author: Charles7c
-date: 2022/3/26 10:30
+author: 查尔斯
+date: 2022/03/26 10:30
 categories:
 - 杂碎逆袭史
 tags:
--- a/repos/issues/2021/12/01.F盘上的回收站已损坏。是否清空该驱动器上的回收站.md
+++ b/repos/issues/2021/12/01.F盘上的回收站已损坏。是否清空该驱动器上的回收站.md
@@ -1,6 +1,6 @@
 ---
 title: F:\ 上的回收站已损坏。是否清空该驱动器上的"回收站"?
-author: Charles7c
+author: 查尔斯
 date: 2021/12/01 22:36
 categories:
 - Bug万象集
--- a/repos/issues/2021/12/08.for循环中删除集合元素隐藏的陷阱.md
+++ b/repos/issues/2021/12/08.for循环中删除集合元素隐藏的陷阱.md
@@ -1,6 +1,6 @@
 ---
 title: for循环中删除集合元素隐藏的陷阱
-author: Charles7c
+author: 查尔斯
 date: 2021/12/08 20:00
 categories:
 - Bug万象集
--- a/repos/issues/2021/12/10.Command
+++ b/repos/issues/2021/12/10.Command
@@ -1,6 +1,6 @@
 ---
 title: Command line is too long. Shorten command line for XXX or also for Spring Boot default configuration？
-author: Charles7c
+author: 查尔斯
 date: 2021/12/10 22:11
 categories:
 - Bug万象集
--- a/repos/issues/2021/12/11.SQL
+++ b/repos/issues/2021/12/11.SQL
@@ -1,6 +1,6 @@
 ---
 title: SQL 注入攻击风险
-author: Charles7c
+author: 查尔斯
 date: 2021/12/11 22:51
 categories:
 - Bug万象集
--- a/repos/issues/2021/12/13.无法访问F盘。文件或目录损坏且无法读取.md
+++ b/repos/issues/2021/12/13.无法访问F盘。文件或目录损坏且无法读取.md
@@ -1,6 +1,6 @@
 ---
 title: 无法访问 F:\。文件或目录损坏且无法读取。
-author: Charles7c
+author: 查尔斯
 date: 2021/12/13 22:57
 categories:
 - Bug万象集
--- a/repos/issues/2022/01/26.JavaScript
+++ b/repos/issues/2022/01/26.JavaScript
@@ -1,6 +1,6 @@
 ---
 title: JavaScript 无法存储 Java Long 类型数据问题
-author: Charles7c
+author: 查尔斯
 date: 2022/01/26 09:07
 categories:
 - Bug万象集