缘起

因为我的旧主题使用Hexo写的，但由于Hexo并不支持现代化的UI框架以及原子化css，所以我决定改用Astro

技术栈

Astro + Svelte + Tailwindcss

Astro介绍

1. 组件群岛: 用于构建更快网站的全新 web 架构。
2. 服务器优先的 API 设计: 移除客户端上高资源消耗的激活过程。
3. 默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
4. 边缘就绪: 在任何地方部署，甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
5. 可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
6. 不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等。

---

由于Astro是基于Vite的，所以其拥有强大的热重载的功能，无论是开发还是撰写文章都很方便

获取文章

使用Astro获取文章有两种方式

1. 使用Astro封装的 import.meta.glob
2. 使用内容集合

这里我推荐使用内容集合，因为内容集合可以帮助更好的管理文章的结构，同时也提供了类型校验与类型提示的功能

我的代码

import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
    schema: z.object({
      title: z.string(),
      date: z.date(),
      update: z.date().optional(),
      categories: z.string(),
      locate: z.string().default("广东"),
      excerpt: z.string().optional(),
      cover: z.string().default("/topimg.webp"),
      abbrlink: z.string().optional()
    }),
});

export const collections = {
    'blog': blogCollection,
};

const posts = await getCollection('blog')
posts.sort(
    (a, b) =>
      Math.floor(new Date(b.data.date).getTime() / 1000) -
      Math.floor(new Date(a.data.date).getTime() / 1000)
)
export posts

侧边栏数据获取

1. 字数统计： 通过获取源文本提取有效字符。这里用到了 @homegrown/word-counter 这个库
2. 分类统计： 通过遍历集合内所有的文章，提取他们的分类，然后存进 Set 中，最后通过 [变量].size 获取数量
3. 文章统计： 同上

我的代码

function getStat(): [string, string, string] {
    const cates:Set<string> = new Set();
    let word = 0
    posts.map((post)=>{
        word += wordCounter.countWords(post.body)
        cates.add(post.data.categories);
    })
    return [posts.length.toString(), cates.size.toString(), wordExchange(word)]
}