Astro 博客现代统计组件添加指南#

在浏览别人博客的时候，我们会发现在侧栏有个统计文章的小工具。其实这是一个自定义组件。我们只需要简单几步。就也能在自己的博客实现文章统计。这样会有一种成就感，码字更有动力（？）

本文将以 Mizuki 主题为例，不同主题配置方法如出一辙。具体效果图看参考下图和博客页面。

在 src/components/widget/ 下新建文件 BlogStats.astro 将下行代码复制进去并保存。

1
---
2
import { getCollection } from 'astro:content';
3
import WidgetLayout from "./WidgetLayout.astro";
4

5
const posts = await getCollection('posts');
6

7
const postCount = posts.length;
8
const tags = new Set();
9
const categories = new Set();
10
let totalWords = 0;
11

12
posts.forEach(post => {
13
  if (post.data.tags) {
14
    post.data.tags.forEach(tag => {
15
      tags.add(tag);
16
    });
17
  }
18
  if (post.data.category) {
19
    categories.add(post.data.category);
20
  }
21
  if (post.body) {
22
    totalWords += post.body.split(/\s+/).length;
23
  }
24
});
25

26
const totalWordsInWan = (totalWords / 10000).toFixed(1);
27
---
28

29
<link
30
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded"
31
  rel="stylesheet"
32
/>
33

34
<style>
35
  .material-symbols-rounded {
36
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
37
    font-size: 1.8rem;
38
    margin-right: 0.75rem;
39
  }
40

41
  .stats-grid {
42
    display: grid;
43
    grid-template-columns: repeat(2, 1fr);
44
    gap: 0.75rem;
45
  }
46

47
  .stat-card {
48
    border-radius: 12px;
49
    padding: 0.75rem;
50
    display: flex;
51
    align-items: center;
52
    transition: all 0.25s ease;
53
    background-color: var(--card-bg-color);
54
    color: var(--card-text-color);
55
  }
56

57
  html.dark .stat-card {
58
    background-color: transparent;
59
    color: white;
60
  }
61
</style>
62

63
<WidgetLayout id="blog-stats">
64
  <div class="stats-grid">
65
    {/** 文章数 */}
66
    <div class="stat-card">
67
      <span class="material-symbols-rounded">description</span>
68
      <div>
69
        <div class="text-sm">文章数</div>
70
        <div class="text-lg font-semibold">{postCount}</div>
71
      </div>
72
    </div>
73

74
    {/** 标签数 */}
75
    <div class="stat-card">
76
      <span class="material-symbols-rounded">label_important</span>
77
      <div>
78
        <div class="text-sm">标签数</div>
79
        <div class="text-lg font-semibold">{tags.size}</div>
80
      </div>
81
    </div>
82

83
    {/** 分类数 */}
84
    <div class="stat-card">
85
      <span class="material-symbols-rounded">folder</span>
86
      <div>
87
        <div class="text-sm">分类数</div>
88
        <div class="text-lg font-semibold">{categories.size}</div>
89
      </div>
90
    </div>
91

92
    {/** 总字数 */}
93
    <div class="stat-card">
94
      <span class="material-symbols-rounded">edit</span>
95
      <div>
96
        <div class="text-sm">总字数</div>
97
        <div class="text-lg font-semibold">{totalWordsInWan} 万</div>
98
      </div>
99
    </div>
100
  </div>
101
</WidgetLayout>

2.修改侧边栏配置#

在 src/config.ts 的 components 数组中添加：

1
{
2
  type: "blogStats",
3
  enable: true,
4
  order: 6,   //顺序
5
  position: "sticky",
6
  class: "onload-animation",
7
  animationDelay: 100,
8
}

3. 添加组件映射表#

打开 src/components/widget/sidebar ，在 componentMap 中添加：

1
import BlogStats from './BlogStats.astro'; //添加的
2

3
const componentMap = {
4
  profile: Profile,
5
  announcement: Announcement,
6
  categories: Categories,
7
  tags: Tags,
8
  toc: TOC,
9
  "music-player": MusicPlayer,
10
  blogStats: BlogStats, //添加的
11
};

4.重启 Astro#

1
pnpm run dev

刷新页面即可看到已经生成的统计组件