逸燧博客

外观

在 Vuepress Theme Hope 中展示站点信息

约 2038 字大约 7 分钟

vuepressvuejs组件教程

2026-04-03

本页信息
页面访问量
0
评论数量 0
本页链接 点击复制

本教程将教你如何在 VuePress Theme Hope 博客中添加一个美观的站点信息展示组件，显示文章数量、标签数量、分类数量、评论数量以及网站运行时间。

效果预览

𝓈𝓲𝓽𝓮 𝓲𝓷𝓯𝓸

站点信息

0文章
0标签
0分类
0评论
🎉 本站已运行：

实现步骤

1：创建自定义插件

首先，我们需要创建一个 VuePress 插件，在构建时统计站点信息。

创建文件 .vuepress/plugins/site-info.js：

import { path } from '@vuepress/utils'
import { writeFileSync } from 'fs'

/**
 * 站点统计插件
 * 在编译时统计文章数量、标签、分类等信息
 */
export const siteInfoPlugin = () => ({
  name: 'vuepress-plugin-site-info',

  onInitialized(app) {
    console.log('[site-info-plugin] Generating Site Info')
    // 收集所有页面信息
    const pages = app.pages
    const blogPages = pages.filter(page => {
      // 过滤出博客文章（排除首页和非文章页面）
      return page.filePathRelative?.startsWith('blog/') && 
             !page.frontmatter.home &&
             !page.frontmatter.layout
    })

    // 统计数据
    const stats = {
      postCount: blogPages.length,
      tags: new Set(),
      categories: new Set(),
    }

    // 遍历所有文章收集信息
    blogPages.forEach(page => {
      // 收集标签
      if (page.frontmatter.tags && Array.isArray(page.frontmatter.tags)) {
        page.frontmatter.tags.forEach(tag => stats.tags.add(tag))
      }

      // 收集分类 - 从文件路径中提取（blog/ 目录下的第一级子目录）
      if (page.filePathRelative) {
        // 移除 'blog/' 前缀，然后取第一个目录段作为分类
        const relativePath = page.filePathRelative.replace('blog/', '')
        const category = relativePath.split('/')[0]
        if (category && category !== relativePath) {
          // 只有在有子目录的情况下才认为是分类
          stats.categories.add(category)
        }
      }
    })

    // 转换为最终格式
    const statsData = {
      postCount: stats.postCount,
      tagCount: stats.tags.size,
      categoryCount: stats.categories.size,
      updatedAt: new Date().toISOString()
    }

    // 生成 JSON 文件到 public 目录
    const outputPath = path.resolve(app.dir.public(), 'site-info.json')
    writeFileSync(outputPath, JSON.stringify(statsData, null, 2))
    
    console.log('[site-info-plugin] Site Info Generated:\n', statsData)
  }
})

2：注册插件

在 .vuepress/config.js 中注册插件：

import { siteInfoPlugin } from './plugins/site-info.js'

export default defineUserConfig({
  // ... 其他配置
  
  plugins: [
    // ... 其他插件
    siteInfoPlugin(),
  ],
})

3：创建站点信息组件

创建任意vue组件，如 .vuepress/components/SiteInfo.vue：

4：在页面中使用

在 Markdown 文件中直接使用

在你的 Markdown 文件（如 README.md）中直接使用组件：

<!-- 其他内容 -->

<script setup lang='ts'>
import SiteInfo from '/.vuepress/theme/components/SiteInfo.vue'
</script>

<SiteInfo />

<!-- 其他内容 -->

在首页布局中使用

在任意布局文件中引入： 此处以布局文件 .vuepress/layouts/home.vue 为例

<template>
  <div class="home-page">
    <header>
      <h1>我的博客</h1>
    </header>
    
    <SiteInfo />
    
    <main>
      <slot />
    </main>
  </div>
</template>

<script setup>
import SiteInfo from '../components/SiteInfo.vue'
</script>

说明

插插件何时执行？

插件在每次构建或启动开发服务器时执行，修改文章后重新构建才会更新统计信息

分类如何统计?

自动统计 blog/ 目录下的第一级子目录（与vuepress-theme-hope 默认分类规则一致）

如何传递信息？

通过执行插件生成./vuepress/public/site-info.json储存站点统计信息，组件通过fetch获取数据并渲染

进阶配置

添加动画效果

为数字添加计数动画：

<script setup>
import { ref, computed } from 'vue'

const animatedNumber = (target) => {
  const current = ref(0)
  const step = () => {
    if (current.value < target) {
      current.value++
      requestAnimationFrame(step)
    }
  }
  step()
  return current
}
</script>

统计评论数

重要

以下教程基于Waline 评论系统（因为本站使用 Waline 评论系统），若不同请自行查找文档

总结

通过以上步骤，你就可以在 VuePress Theme Hope 博客中添加一个功能完善的站点信息展示组件。这个组件不仅能够展示站点的基本统计信息，还能实时显示网站运行时间，提升用户体验。

如果你有任何问题或建议，欢迎在评论区留言！

更新日志

2026/4/3 14:44
查看所有更新日志
  • 61514-docs(博客): 添加文章封面图片配置于
  • bc48a-feat(站点信息): 添加站点信息组件和文档于

版权归属：逸燧Esyka

许可证：署名-非商业性-相同方式共享 4.0 国际 (CC-BY-NC-SA-4.0)