优化：文章元数据信息增加文章阅读数信息，需要单独提供后端api服务

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.6",
+    "blueimp-md5": "^2.19.0",
     "dayjs": "^1.11.4",
     "element-plus": "^2.2.9",
     "fast-glob": "^3.2.11",

repos/.vitepress/theme/api/config.js

@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+const createBaseInstance = () => {
+    const instance = axios.create({
+      baseURL: 'http://62.234.119.173/blog',
+      timeout: 3000
+    })
+    instance.interceptors.request.use(handleRequest, handleError)
+    instance.interceptors.response.use(handleResponse, handleError)
+    return instance
+}
+export const request = createBaseInstance()
+
+function handleError(e) {
+    throw e
+}
+
+function handleRequest(request) {
+    return request;
+}
+
+function handleResponse(response) {
+    return response.data
+}

repos/.vitepress/theme/api/index.js

@@ -0,0 +1,3 @@
+export * from './interface'
+
+export { default } from './interface'

repos/.vitepress/theme/api/interface.js

@@ -0,0 +1,17 @@
+import { request } from './config'
+
+export const getPv = (id, call) => {
+    request.get(`/pv/${id}`, {}).then(result => {
+        call(process(result))
+    })
+}
+
+function process(result) {
+    if (result.code === 1) {
+        return result.data
+    } else {
+        console.log("系统异常:", result)
+    }
+}
+
+export default { getPv }

repos/.vitepress/theme/components/ArticleMetadata.vue

@@ -14,6 +14,12 @@
       </span>
       <time class="meta-content" :datetime="isoDatetime" :title="toDate">{{ datetime }}</time>
     </div>
+    <div class="meta-item">
+      <span class="meta-icon pv">
+        <svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>阅读数</title><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
+      </span>
+      <span id="pv" class="meta-content"></span>
+    </div>
   </div>
 </template>
 
@@ -23,9 +29,10 @@ import { useData } from 'vitepress'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import md5 from 'blueimp-md5'
 
 // 获取发布时间
-const { theme, frontmatter } = useData()
+const { page, theme, frontmatter } = useData()
 const date = computed(() => new Date(frontmatter.value.date))
 const isoDatetime = computed(() => date.value.toISOString())
 const datetime = date.value.toLocaleString('zh', {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})
@@ -34,6 +41,13 @@ const datetime = date.value.toLocaleString('zh', {year: 'numeric', month: 'numer
 dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
 const toDate = dayjs().to(dayjs(frontmatter.value.date))
+
+onMounted(() => {
+  // 记录并获取文章阅读数
+  $api.getPv(md5(page.value.relativePath), function(data) {
+    document.getElementById("pv").innerText = data
+  })
+})
 </script>
 
 <style scoped>

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 api from './api/index'
 import ArticleMetadata from './components/ArticleMetadata.vue'
 import './styles/vars.css'
 import './styles/custom.css'
@@ -10,7 +11,7 @@ import './styles/custom.css'
 export default {
   ...DefaultTheme,
   Layout: MyLayout,
-  enhanceApp({ app }) {
+  enhanceApp({ app, router }) {
     // 全局注册ElementPlus的所有图标
     for (const [key, elIcon] of Object.entries(ElIcons)) {
       app.component(key, elIcon)
@@ -18,6 +19,10 @@ export default {
     // 全局注册ElementPlus
     app.use(ElementPlus)
 
+    // 全局挂载api接口
+    if (typeof window !== 'undefined') {
+        window.$api = api
+    }
     app.component('ArticleMetadata', ArticleMetadata)
   }
 }

repos/.vitepress/theme/styles/vars.css

@@ -5,14 +5,14 @@
 :root {
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
+    315deg,
-    #42b883 30%,
+    #42d392 25%,
-    #41d1ff
+    #647eff
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #42b883 50%,
+    #42d392 50%,
     #47caff 50%
   );
   --vp-home-hero-image-filter: blur(40px);