新增：Badge 徽章组件

README.md

@@ -45,6 +45,7 @@ yarn build
 - [x] 《我的归档》：自定义时间轴，展示历史文章数据。年份前可展示生肖，可按分类、标签筛选
 - [x] 文章评论：目前仅支持Gitalk
 - [x] 版权声明：文末显示版权声明，可自由配置采用的版权协议
+- [x] 徽章：标题后可显示徽章，此功能来自于 VitePress 未合并的 PR，如若后续被合并，则改用官方主题功能
 - [x] 更多细节优化：敬请发现
 
 ## 部分页面截图
@@ -80,6 +81,10 @@ yarn build
 
 ![版权声明](./docs/public/screenshot/版权声明.png)
 
+### 徽章
+
+![徽章](./docs/public/screenshot/徽章.png)
+
 ## 致谢
 
 - [vuejs/vitepress](https://github.com/vuejs/vitepress) （本知识库基于 vitepress 构建）
@@ -93,6 +98,7 @@ yarn build
 - [xiaoxian521/pure-admin-utils-docs](https://github.com/xiaoxian521/pure-admin-utils-docs) （参考词云组件的使用）
 - [arco-design/arco-design-vue](https://github.com/arco-design/arco-design-vue) （使用部分组件及图标）
 - [antvis/G2plot](https://github.com/antvis/G2plot) （使用部分图表）
+- [richardo2016/vitepress-pr](https://github.com/vuejs/vitepress/pull/1134) （使用徽章）
 - ......
 
 ## License

docs/.vitepress/theme/MyLayout.vue

@@ -19,6 +19,9 @@ 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()

docs/.vitepress/theme/components/ArticleMetadata.vue

@@ -26,7 +26,7 @@
       </span>
       <span class="meta-content">
         <span v-for="(category, index) in categories" :key="index">
-          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'category', category)" target="_self" title="按分类归档">{{ category }}</a>
+          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'category', category)" target="_self" :title="category">{{ category }}</a>
           <span v-if="index != categories.length - 1">, </span>
         </span>
       </span>
@@ -37,7 +37,7 @@
       </span>
       <span class="meta-content">
         <span v-for="(tag, index) in tags" :key="index">
-          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'tag', tag)" target="_self" title="按标签归档">{{ tag }}</a>
+          <a href="javascript:void(0);" @click="goToLink('/archives.html', 'tag', tag)" target="_self" :title="tag">{{ tag }}</a>
           <span v-if="index != tags.length - 1">, </span>
         </span>
       </span>

docs/.vitepress/theme/components/Badge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    text?: string,
+    type?: 'warning' | 'tip' | 'error' | 'info'
+    vertical?: 'top' | 'middle'
+  }>(), {
+    text: '',
+    type: 'tip',
+    vertical: 'top',
+  }
+);
+</script>
+
+<template>
+  <span
+    class='VPBadge'
+    :class="[ `VPBadge-type-${props.type}` ]"
+    :style="{ 'vertical-align': props.vertical }"
+  >
+    <slot>{{ props.text }}</slot>
+  </span>
+</template>
+
+<style scoped>
+.VPBadge {
+  display: inline-block;
+  font-size: 14px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 3px;
+  padding: 0 6px;
+  color: #fff;
+}
+.VPBadge.VPBadge-type-warning {
+  background-color: var(--vp-c-badge-type-warning);
+}
+.VPBadge.VPBadge-type-tip {
+  background-color: var(--vp-c-badge-type-tip);
+}
+.VPBadge.VPBadge-type-error {
+  background-color: var(--vp-c-badge-type-error);
+}
+.VPBadge.VPBadge-type-info {
+  background-color: var(--vp-c-badge-type-info);
+}
+</style>

docs/.vitepress/theme/components/layout/Comment.vue

@@ -10,7 +10,7 @@ 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/gitalk.css'
+import '../../styles/components/gitalk.css'
 
 // 定义属性
 const props = defineProps({

docs/.vitepress/theme/styles/vars.css

@@ -28,4 +28,16 @@
   :root {
     --vp-home-hero-image-filter: blur(72px);
   }
+}
+
+
+/**
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-badge-type-warning: #e7c000;
+  --vp-c-badge-type-tip: #42b983;
+  --vp-c-badge-type-error: #da5961;
+  --vp-c-badge-type-info: #0170fe;
 }

docs/categories/fragments/2019/12/28/个人SQL优化技巧.md

@@ -10,13 +10,13 @@ tags:
  - SQL优化
 ---
 
-# 个人SQL优化技巧
+# 个人SQL优化技巧 <Badge text="持续更新" type="warning" />
 
 <!-- more -->
 
 ## 查询优化
 
-### （建议）如果确定结果只有一条，使用 LIMIT 1
+### 如果确定结果只有一条，使用 LIMIT 1 <Badge text="建议" />
 
 我们在根据一个或多个条件查询数据时，如果确定查询结果只有一条，可以在结尾处添加 LIMIT 1 进行限制。
 
@@ -36,7 +36,7 @@ SELECT * FROM `sys_user` WHERE `email` = 'charles7c@126.com' LIMIT 1;
 ```
 :::
 
-### （强制）避免隐式类型转换
+### 避免隐式类型转换 <Badge text="强制" type="error" />
 
 我们在使用 MySQL 时，或多或少都感受过 MySQL 的隐式类型转换。例如：user_id 是整数类型，但是依然可以使用字符串类型数据来进行判断。MySQL 帮你做完这种隐式类型转换是有代价的，什么代价呢？ **索引不再生效了而已** 。
 
@@ -54,7 +54,7 @@ SELECT * FROM `sys_user` WHERE `user_id` = 10;
 
 ## 数据库表设计
 
-### （建议）列名带上前缀
+### 列名带上前缀 <Badge text="建议" />
 
 部分列名带上前缀或缩写，可以有效减少在连接查询、ORM 映射等场景下刻意起别名或思考区分不同的问题。
 
@@ -80,7 +80,7 @@ LEFT JOIN `sys_contact_user` cu ON c.`customer_id` = cu.`customer_id`
 ```
 :::
 
-### （建议）非负数列添加UNSIGNED约束
+### 非负数列添加UNSIGNED约束 <Badge text="建议" />
 
 在大部分的数据存储场景中，我们只会使用正整数，如果能确定该列为非负数，建议添加 `UNSIGNED` 无符号约束。
 
@@ -93,7 +93,7 @@ tinyint：0～255
 
 ## 数据库设计
 
-### （建议）utf8mb4编码
+### utf8mb4编码 <Badge text="建议" />
 
 ::: tip 如果要存储特殊字符（例如：emoij表情符），使用 utf8mb4 编码。
 MySQL 5.5.3 后增加了一个新的编码： `utf8mb4` ，其中 mb4 是 most bytes 4 的意思，用于兼容四字节的 unicode。  

docs/categories/fragments/2019/12/29/个人常用Stream使用技巧.md

@@ -11,7 +11,7 @@ tags:
  - Lambda
 ---
 
-# 个人常用Stream使用技巧
+# 个人常用Stream使用技巧 <Badge text="持续更新" type="warning" />
 
 <!-- more -->
 

docs/categories/fragments/2019/12/30/个人常用Hutool工具类.md

@@ -11,7 +11,7 @@ tags:
  - Hutool
 ---
 
-# 个人常用Hutool工具类
+# 个人常用Hutool工具类 <Badge text="持续更新" type="warning" />
 
 ## 前言
 

docs/categories/fragments/2019/12/31/个人常用Linux命令.md

@@ -9,7 +9,7 @@ tags:
  - Linux
 ---
 
-# 个人常用Linux命令
+# 个人常用Linux命令 <Badge text="持续更新" type="warning" />
 
 <!-- more -->
 

docs/categories/fragments/2022/02/16/个人常用SQL函数.md

@@ -10,7 +10,7 @@ tags:
  - SQL函数
 ---
 
-# 个人常用SQL函数
+# 个人常用SQL函数 <Badge text="持续更新" type="warning" />
 
 ## 时间函数
 

docs/index.md

@@ -28,5 +28,5 @@ features:
     details: 我既没有突出的理解力，也没有过人的机智。只在觉察那些稍纵即逝的事物并对其进行精细观察的能力上，我可能在普通人之上。 -- 达尔文
   - icon: 🌟
     title: 乐于分享
-    details: 关于分享，有形的东西越分越少，无形的东西越分越多。在记录与分享的过程中, 梳理所学, 交流所得, 必有所获。
+    details: 关于分享，有形的物品越分越少，无形的知识越分越多。在记录与分享的过程中, 梳理所学, 交流所得, 必有所获。
 ---