Astro博客

astro-theme-reimu — Astro 博客模板

作者 D-Sketon

博丽灵梦风格的 Astro 博客主题,由 hexo-theme-reimu 移植而来,支持多语言、暗黑模式与多种评论系统。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-09-30查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

完整的 Astro 博客主题,提供响应式布局、暗黑模式与 i18n 多语言支持

02

集成 Expressive Code 代码高亮、KaTeX 数学公式与 Mermaid 流程图

03

支持本地搜索(Fuse.js)、目录导航与 RSS 订阅

04

可选用 Valine、Waline、Twikoo、Gitalk、Giscus、Disqus、Utterances 等多种评论系统

05

内置 MDX 组件,包括内部链接、外部链接、友情链接、热力图、标签轮盘、标签页与照片墙

06

提供图片懒加载、图片灯箱、加载动画、AOS 滚动动画与鼠标特效

模板详细介绍

astro-theme-reimu 是 hexo-theme-reimu 的 Astro 移植版本,定位为博丽灵梦风格的博客主题,仓库采用 MIT 许可。主题提供完整的博客功能,包括响应式布局、暗黑模式与 i18n 多语言支持,语言文件覆盖 en、zh-cn、zh-tw 与 ja。内容方面,博客文章存放在 src/content/blog,关于页面位于 src/pages,静态资源放在 public 目录。

在内容呈现上,主题集成 Expressive Code 代码高亮、KaTeX 数学公式与 Mermaid 流程图,并支持本地搜索(基于 Fuse.js)、目录导航与 RSS 订阅。评论系统可选用 Valine、Waline、Twikoo、Gitalk、Giscus、Disqus 或 Utterances;统计方面支持不蒜子访客统计以及百度统计、Google Analytics、Clarity 三种网站分析。媒体与交互包括图片懒加载、图片灯箱、加载动画、AOS 滚动动画与鼠标特效。

主题配置集中在 src/config.ts,可设置站点信息、侧边栏位置与小部件、菜单导航、头图与响应式 srcset、页脚备案信息、社交链接、评论系统、分析与统计、版权声明、加载动画、友链、首页分类卡片与分享渠道。封面图在 src/covers.ts 中配置随机列表,文章 Front Matter 指定 cover 时优先使用指定封面。内置 MDX 组件涵盖内部链接、外部链接、友情链接、热力图、标签轮盘、标签页与照片墙。

使用限制方面,评论、统计与部分交互功能依赖外部服务或账号配置,例如 Waline 需要服务器地址、Valine 需要 LeanCloud 应用信息、Gitalk/Giscus/Utterances 需要 GitHub 仓库或应用凭据、Twikoo 需要环境 ID、Disqus 需要 shortname,分析与统计需要对应的站点 ID。主题基于 Astro,安装依赖推荐使用 pnpm,构建与预览分别通过 pnpm run build 与 pnpm run preview 完成。

Astro博客

适合你的项目吗?

适用场景

  • 搭建以博丽灵梦风格为主题的静态博客站点
  • 需要多语言(en、zh-cn、zh-tw、ja)博客界面的个人站点
  • 希望在博客中展示代码高亮、数学公式与流程图的文章
  • 需要接入第三方评论系统或网站分析工具的博客

适合人群

  • 使用 Astro 构建静态博客的开发者
  • 偏好东方 Project 博丽灵梦视觉风格的个人博主
  • 需要多语言与暗黑模式支持的博客作者
  • 希望按 src/config.ts 集中配置主题选项的用户

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后进入目录,推荐使用 pnpm install 安装依赖

  2. 2

    开发服务器使用 pnpm run dev,生产构建使用 pnpm run build,预览构建结果使用 pnpm run preview

  3. 3

    站点信息、侧边栏、菜单、头图、页脚、社交链接等在 src/config.ts 中配置

  4. 4

    博客文章存放在 src/content/blog,关于页面位于 src/pages,静态资源放在 public 目录

  5. 5

    评论系统与分析统计需要填写对应服务的凭据或 ID,例如 Waline 服务器地址、LeanCloud 应用信息、GitHub 应用凭据、Twikoo 环境 ID、Disqus shortname 以及百度统计/Google Analytics/Clarity 的站点 ID

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • Waline 评论系统需自行部署或提供服务器地址,属于外部服务依赖,非主题自带功能。
  • Valine 评论依赖 LeanCloud 账号与应用凭据(App ID/App Key),需注册外部服务。
  • Gitalk 评论需创建 GitHub OAuth 应用并提供 Client ID/Secret 及存储评论的仓库。
  • Giscus 评论依赖 GitHub 仓库与 Discussion 配置,需提供仓库 ID 与分类 ID。
  • Twikoo 评论需自行部署服务端并填写环境 ID 或部署地址。
  • Disqus 评论需注册 Disqus 站点并填写 shortname,依赖第三方服务。
  • 网站分析功能需注册百度统计并填写站点 ID,属外部服务依赖。
  • Google Analytics 需注册账号并提供衡量 ID,属外部服务依赖。
  • Microsoft Clarity 分析需注册并提供项目 ID,属外部服务依赖。
  • 不蒜子访客统计依赖第三方公共统计服务,启用后数据由外部服务提供。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

serverURL: "your-server-url", // Waline 服务器地址

README 原文

appId: "your-app-id", // LeanCloud App ID

README 原文

clientID: "your-client-id", // GitHub Application Client ID

README 原文

repoId: "your-repo-id", // 仓库 ID

README 原文

envId: "your-env-id", // 腾讯云环境填 envId;Vercel 环境填地址(https://xxx.vercel.app)

README 原文

shortname: "your-shortname", // Disqus shortname

README 原文

baidu_analytics: "your-baidu-id", // 百度统计 ID

README 原文

google_analytics: "your-ga-id", // Google Analytics ID

README 原文

clarity: "your-clarity-id", // Microsoft Clarity ID

README 原文

busuanzi: true, // 是否启用不蒜子访客统计

README 原文
https://github.com/D-Sketon/astro-theme-reimu/blob/main/LICENSEhttps://github.com/D-Sketon/astro-theme-reimu/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 87 / 100
技术栈
Astro
网站类型
博客
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-05-13
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 19fe27fcead41d3ed3b17f60f482ce669683faa5178f4e7122fde4926d66fff3

2026-10-01T13:34:31.744Z

来源文件 / 仓库
<div align="center">
  <img src="https://fastly.jsdelivr.net/gh/D-Sketon/blog-img/icon.png"/>
  <h1>astro-theme-reimu</h1>
  <img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgithub.com%2FD-Sketon%2Fastro-theme-reimu%2Fraw%2Fmain%2Fpackage.json&query=%24.version&label=version">
  <img alt="GitHub License" src="https://img.shields.io/github/license/D-Sketon/astro-theme-reimu">
  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/D-Sketon/astro-theme-reimu">

💘 博麗 霊夢 💘

[演示网站](https://d-sketon.github.io/astro-theme-reimu)

简体中文 | [English](https://github.com/D-Sketon/astro-theme-reimu/blob/main/README.en.md)

<img src="https://cdn.jsdelivr.net/gh/D-Sketon/astro-theme-reimu/screenshot.png"/>
</div>

---

本主题是 [hexo-theme-reimu](https://github.com/D-Sketon/hexo-theme-reimu) 的 Astro 移植版本,一款博丽灵梦风格的 Astro 主题。

| framework                    | repository                                                         | version                                                                                                                                                                                     | stars                                                                                              |
| ---------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [Hexo](https://hexo.io/)     | [hexo-theme-reimu](https://github.com/D-Sketon/hexo-theme-reimu)   | <img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgithub.com%2FD-Sketon%2Fhexo-theme-reimu%2Fraw%2Fmain%2Fpackage.json&query=%24.version&label=version">  | <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/D-Sketon/hexo-theme-reimu">  |
| [Hugo](https://gohugo.io)    | [hugo-theme-reimu](https://github.com/D-Sketon/hugo-theme-reimu)   | <img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgithub.com%2FD-Sketon%2Fhugo-theme-reimu%2Fraw%2Fmain%2Fpackage.json&query=%24.version&label=version">  | <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/D-Sketon/hugo-theme-reimu">  |
| [Astro](https://astro.build) | [astro-theme-reimu](https://github.com/D-Sketon/astro-theme-reimu) | <img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgithub.com%2FD-Sketon%2Fastro-theme-reimu%2Fraw%2Fmain%2Fpackage.json&query=%24.version&label=version"> | <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/D-Sketon/astro-theme-reimu"> |

**欢迎提交 ISSUE 和 PR!**

## 特性

### 基础功能

- ✨ 完整的博客功能
- 📱 响应式布局
- 🌙 暗黑模式支持
- 🌍 多语言支持(i18n)

### 代码与数学

- 🖥️ 代码高亮(基于 Expressive Code)
- ➗ KaTeX 数学公式支持
- 📊 Mermaid 流程图支持

### 搜索与评论

- 🔍 本地搜索(基于 Fuse.js)
- 💬 多评论系统支持:
  - Valine
  - Waline
  - Twikoo
  - Gitalk
  - Giscus
  - Disqus
  - Utterances

### 统计与分析

- 📊 文章阅读统计(Waline/Valine)
- 👥 访客统计(不蒜子)
- 📈 网站分析:
  - 百度统计
  - Google Analytics
  - Clarity

### 媒体与交互功能

- 🖼️ 图片懒加载
- 🖼️ 图片灯箱
- ⚡ 加载动画
- 🎨 AOS 滚动动画
- 🎯 鼠标特效

### 导航与结构

- 📑 目录导航
- 📰 RSS 订阅

### 设计与自定义

- 🎨 图标支持(FontAwesome、Iconify)
- 🔗 内置 MDX 组件:
  - 内部链接
  - 外部链接
  - 友情链接
  - 热力图
  - 标签轮盘
  - 标签页
  - 照片墙
- ©️ 文章版权声明
- 🌐 响应式头图(srcset)
- 🎨 分享卡片功能

## 安装与使用

### 快速开始

```bash
# 克隆仓库
git clone https://github.com/D-Sketon/astro-theme-reimu.git
cd astro-theme-reimu

# 安装依赖(推荐使用 pnpm)
pnpm install

# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览构建结果
pnpm run preview
```

### 项目结构

```plain
/
├── public/              # 静态资源
│   ├── images/
│   │   ├── banner.webp
│   │   ├── banner-800w.webp
│   │   ├── banner-600w.webp
│   │   ├── favicon.ico
│   │   ├── reimu.png
│   │   └── taichi.png
│   └── robots.txt
├── src/
│   ├── components/      # Astro/React 组件
│   ├── content/         # 内容集合
│   │   └── blog/        # 博客文章
│   ├── content.config.ts# 内容集合配置
│   ├── hooks/           # React Hooks
│   ├── languages/       # i18n 语言文件
│   │   ├── en.ts
│   │   ├── zh-cn.ts
│   │   ├── zh-tw.ts
│   │   └── ja.ts
│   ├── layouts/         # 页面布局
│   ├── pages/           # 页面路由
│   │   ├── about.mdx    # 关于页面
│   │   ├── archives/    # 归档页面
│   │   ├── blog/        # 博客页面
│   │   ├── categories/  # 分类页面
│   │   ├── tags/        # 标签页面
│   │   └── rss.xml.js   # RSS 订阅
│   ├── plugins/         # Markdown 插件
│   ├── styles/          # 样式文件
│   ├── utils/           # 工具函数
│   ├── config.ts        # 主题配置文件
│   ├── covers.ts        # 封面图配置
│   └── env.d.ts
├── astro.config.mjs     # Astro 配置
├── package.json
└── tsconfig.json
```

任何静态资产(如图像)都可以放置在 `public/` 目录中。  
所有博客文章都存储在目录 `src/content/blog` 中,关于页面存储在目录 `src/pages` 中。

## 配置

编辑 `src/config.ts` 进行主题配置:

<details>
<summary>基本配置</summary>

##### 站点信息

```typescript
export default {
  site: {
    title: "My Blog", // 站点标题
    subtitle: "My Blog Subtitle", // 站点副标题
    description: "Your blog description", // 站点描述
    keywords: "blog, astro, theme", // 关键词
    author: "Your Name", // 作者名称
    language: "zh-CN", // 站点语言 (en | zh-CN | zh-TW | ja)
  },
};
```

##### 侧边栏

```typescript
export default {
  sidebar: {
    avatar: "/images/avatar.webp", // 头像路径(相对于 public 目录)
    position: "right", // 侧边栏位置 (left | right)
  },
};
```

##### 侧边栏小部件

```typescript
export default {
  widgets: [
    "category", // 分类
    "tag", // 标签
    "tagcloud", // 标签云
    "archive", // 归档
    "recent_posts", // 最近文章
  ],
};
```

##### 菜单导航

```typescript
export default {
  menu: [
    { name: "home", url: "/" }, // 菜单项名称(对应 i18n 翻译)
    { name: "archives", url: "/archives" },
    { name: "about", url: "/about" },
  ],
};
```

##### 头图与封面

###### 头图配置

```typescript
export default {
  banner: "/images/banner.webp", // 头图路径

  // 响应式头图(可选)
  banner_srcset: {
    enable: true,
    srcset: [
      { src: "/images/banner-600w.webp", media: "(max-width: 479px)" },
      { src: "/images/banner-800w.webp", media: "(max-width: 799px)" },
      { src: "/images/banner.webp", media: "(min-width: 800px)" },
    ],
  },
};
```

###### 封面配置

在 `src/covers.ts` 中配置随机封面图列表:

```typescript
export default [
  "https://example.com/cover1.webp",
  "https://example.com/cover2.webp",
  "https://example.com/cover3.webp",
];
```

文章封面显示逻辑:

1. 如果文章 Front Matter 中指定了 `cover`,则使用指定的封面
2. 否则从 `covers.ts` 中随机选择一张
3. 如果 `covers.ts` 为空,则使用头图作为封面

##### 页脚

```typescript
export default {
  footer: {
    since: 2020, // 起始年份(会显示为 2020 - 当前年份)
    powered: true, // 是否显示 "Powered by Astro"
    count: true, // 是否显示文章统计
    busuanzi: true, // 是否启用不蒜子访客统计
    icp: {
      icpnumber: "", // ICP备案号
      beian: "", // 网安备案号
      recordcode: "", // 网安备案链接中的recordcode参数
    },
    moe_icp: {
      icpnumber: "", // 萌国ICP备案号
    },
  },
};
```

##### 社交链接

```typescript
export default {
  social: {
    email: "mailto:[email protected]",
    github: "https://github.com/yourname",
    twitter: "https://twitter.com/yourname",
    facebook: "https://www.facebook.com/yourname",
    // 更多社交平台...
  },
};
```

</details>

<details>
<summary>评论系统</summary>

##### Waline

[Waline](https://waline.js.org/) 是一个简洁、安全的评论系统。

```typescript
export default {
  waline: {
    enable: true,
    serverURL: "your-server-url", // Waline 服务器地址
    lang: "zh-CN", // 语言
    locale: {}, // 自定义语言包
    emoji: [
      // 表情包
      "https://unpkg.com/@waline/[email protected]/weibo",
      "https://unpkg.com/@waline/[email protected]/bilibili",
    ],
    meta: ["nick", "mail", "link"], // 评论者信息
    requiredMeta: ["nick", "mail"], // 必填项
    wordLimit: 0, // 评论字数限制(0 为不限制)
    pageSize: 10, // 每页评论数
    pageview: true, // 是否启用浏览量统计
  },
};
```

##### Valine

[Valine](https://valine.js.org/) 是一个基于 LeanCloud 的快速、简洁且高效的无后端评论系统。

```typescript
export default {
  valine: {
    enable: true,
    appId: "your-app-id", // LeanCloud App ID
    appKey: "your-app-key", // LeanCloud App Key
    pageSize: 10, // 评论列表分页
    avatar: "mp", // Gravatar 头像风格
    lang: "zh-cn", // 语言
    placeholder: "Just go go", // 评论框占位文本
    guest_info: "nick,mail,link", // 评论者信息字段
    recordIP: true, // 是否记录评论者 IP
    highlight: true, // 是否高亮代码块
    visitor: false, // 是否显示访问量
    serverURLs: "", // LeanCloud 服务器地址(可选)
  },
};
```

##### Gitalk

[Gitalk](https://gitalk.github.io/) 是一个基于 GitHub Issue 和 Preact 的现代评论组件。

```typescript
export default {
  gitalk: {
    enable: true,
    clientID: "your-client-id", // GitHub Application Client ID
    clientSecret: "your-client-secret", // GitHub Application Client Secret
    repo: "your-repo", // 存储评论的 GitHub 仓库
    owner: "your-name", // 仓库所有者
    admin: ["your-name"], // 仓库管理员(可以是数组)
  },
};
```

##### Giscus

[Giscus](https://giscus.app/zh-CN) 是一个基于 GitHub Discussion 的评论系统。

```typescript
export default {
  giscus: {
    enable: true,
    repo: "your-username/your-repo", // GitHub 仓库
    repoId: "your-repo-id", // 仓库 ID
    category: "your-category", // 分类名称
    categoryId: "your-category-id", // 分类 ID
    mapping: "pathname", // 评论映射方式
    strict: 0, // 严格模式
    reactionsEnabled: 1, // 启用反应
    emitMetadata: 0, // 发出元数据
    inputPosition: "bottom", // 输入框位置
  },
};
```

##### Twikoo

[Twikoo](https://twikoo.js.org/) 支持多种部署方式的评论系统。

```typescript
export default {
  twikoo: {
    enable: true,
    envId: "your-env-id", // 腾讯云环境填 envId;Vercel 环境填地址(https://xxx.vercel.app)
    region: "", // 腾讯云区域(可选)
  },
};
```

##### Utterances

[Utterances](https://utteranc.es/) 是一个基于 GitHub Issue 的轻量级评论组件。

```typescript
export default {
  utterances: {
    enable: true,
    repo: "owner/repo", // GitHub 仓库
    issue_term: "title", // Issue 映射方式
    theme: "github-light", // 主题
  },
};
```

##### Disqus

[Disqus](https://disqus.com/) 是一个全球性的评论系统。

```typescript
export default {
  disqus: {
    enable: true,
    shortname: "your-shortname", // Disqus shortname
    count: true, // 是否启用评论数量统计
  },
};
```

</details>

<details>
<summary>分析与统计</summary>

##### 网站分析

```typescript
export default {
  analytics: {
    baidu_analytics: "your-baidu-id", // 百度统计 ID
    google_analytics: "your-ga-id", // Google Analytics ID
    clarity: "your-clarity-id", // Microsoft Clarity ID
  },
};
```

</details>

<details>
<summary>其他功能</summary>

##### 版权声明

```typescript
export default {
  copyright: {
    enable: true, // 是否启用版权声明
    content: {
      author: true, // 显示作者
      link: true, // 显示文章链接
      title: true, // 显示文章标题
      date: false, // 显示发布日期
      updated: false, // 显示更新日期
      license: true, // 显示许可协议
      license_type: "by-nc-sa", // 许可协议类型
    },
  },
};
```

##### 加载动画

```typescript
export default {
  preloader: {
    enable: true, // 是否启用加载动画
    text: "少女祈祷中...", // 加载文本
    rotate: true, // 图标是否旋转
  },
};
```

##### 友链

```typescript
export default {
  friend: [
    {
      name: "Friend Name", // 友链名称
      url: "https://friend.com", // 友链地址
      desc: "Description", // 友链描述
      avatar: "/avatar.webp", // 友链头像
    },
  ],
};
```

##### 首页分类卡片

```typescript
export default {
  home_categories: {
    enable: true, // 是否启用首页分类卡片
    content: [
      {
        categories: "Blog", // 分类名称
        cover: "/images/category-cover.webp", // 分类封面(可选)
      },
    ],
  },
};
```

##### 分享功能

```typescript
export default {
  share: [
    "weibo", // 微博
    "qq", // QQ
    "weixin", // 微信
    // "twitter",  // Twitter
    // "facebook", // Facebook
    // "linkedin", // LinkedIn
    // "reddit",   // Reddit
  ],
};
```

##### 赞助功能

```typescript
export default {
  sponsor: {
    enable: false, // 是否启用赞助功能
    qr: [
      { name: "支付宝", src: "/sponsor/alipay.jpg" },
      { name: "微信", src: "/sponsor/wechat.png" },
    ],
  },
};
```

##### 文章过期提醒

```typescript
export default {
  outdate: {
    enable: false, // 是否启用文章过期提醒
    daysAgo: 180, // 多少天前的文章算过期
  },
};
```

##### 鼠标特效

```typescript
export default {
  firework: {
    enable: true, // 是否启用鼠标特效
    disable_on_mobile: false, // 是否在移动端禁用
    options: {
      // 详细配置请参考 mouse-firework 文档
    },
  },
};
```

##### 三角徽标

```typescript
export default {
  triangle_badge: {
    enable: false,
    type: "github", // 图标类型
    link: "https://github.com/yourname",
  },
};
```

</details>

## 写作

<details>
<summary>创建文章</summary>

在 `src/content/blog/` 目录下创建 `.md` 或 `.mdx` 文件:

```markdown
---
title: 你的文章标题
description: 文章描述
pubDate: 2024-01-01
updatedDate: 2024-01-02
cover: https://example.com/cover.jpg
tags:
  - tag1
  - tag2
categories:
  - category1
---

你的文章内容...
```

</details>

<details>
<summary>Front Matter 字段</summary>

#### Front Matter 字段

| 字段        | 描述                   | 类型                 | 必填 | 默认值  |
| ----------- | ---------------------- | -------------------- | ---- | ------- |
| title       | 文章标题               | `string`             | 是   | -       |
| description | 文章描述(用于 SEO)   | `string`             | 是   | -       |
| keywords    | 文章关键词(用于 SEO) | `string[] \| string` | 否   | `[]`    |
| pubDate     | 发布日期               | `Date`               | 是   | -       |
| updatedDate | 更新日期               | `Date`               | 否   | -       |
| cover       | 封面图 URL             | `string`             | 否   | -       |
| tags        | 标签列表               | `string[]`           | 否   | `[]`    |
| categories  | 分类列表               | `string[]`           | 否   | `[]`    |
| excerpt     | 文章摘要               | `string`             | 否   | -       |
| comment     | 是否启用评论系统       | `boolean`            | 否   | `true`  |
| author      | 文章作者               | `string`             | 否   | -       |
| toc         | 是否显示目录           | `boolean`            | 否   | `true`  |
| sponsor     | 是否显示赞助信息       | `boolean`            | 否   | -       |
| copyright   | 是否显示版权声明       | `boolean`            | 否   | -       |
| share       | 是否显示分享按钮       | `boolean`            | 否   | -       |
| outdated    | 文章是否过期           | `boolean`            | 否   | `false` |

</details>

<details>
<summary>数学公式</summary>

主题内置了 KaTeX 支持,可以直接在 Markdown 中使用 LaTeX 语法:

#### 行内公式

```markdown
行内公式:$E = mc^2$
```

#### 块级公式

```markdown
块级公式:

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
```

</details>

<details>
<summary>Mermaid 流程图</summary>

主题内置了 Mermaid 支持:

````markdown
```mermaid
graph TD
    A[开始] --> B[处理]
    B --> C{判断}
    C -->|是| D[结束]
    C -->|否| B
```
````

</details>

<details>
<summary>代码块</summary>

代码块基于 [Expressive Code](https://expressive-code.com/) 实现,支持:

- 语法高亮
- 行号显示
- 代码折叠(使用 `collapse` 标记)
- 代码复制按钮

#### 基本代码块

````markdown
```javascript
function hello() {
  console.log("Hello, World!");
}
```
````

#### 代码折叠

````markdown
```js collapse={1-5, 12-14}
// 这些行默认折叠
function example() {
  console.log("Hello");
}

// 这些行默认展开
const result = example();
```
````

</details>

<details>
<summary>内置组件</summary>

主题提供了丰富的内置 MDX 组件:

#### 链接组件

##### 内部链接

用于在文章中创建指向其他文章的精美链接卡片,支持显示封面图和摘要。适合在文章中推荐相关内容或创建内容导航。

```markdown
<Link slug="post-slug" title="文章标题" cover="封面URL" />
```

**Props:**

- `slug` (`string`, 可选): 文章 slug
- `url` (`string`, 可选): 外部链接 URL
- `title` (`string`, 可选): 链接标题
- `cover` (`string | "auto"`, 可选): 封面图片

##### 外部链接

用于创建指向外部网站的精美链接卡片,自动识别为外部链接。适合在文章中分享外部资源或推荐其他网站。

```markdown
<Link url="https://github.com" title="GitHub" cover="auto" />
```

#### 内容组件

##### 友情链接卡片

展示友情链接列表,每个链接包含头像、名称和描述。适合在关于页面或专门的友链页面展示合作伙伴网站。

友情链接卡片使用全局配置中的友链列表:

```markdown
<FriendCard />
```

**Props:** 无

##### 热力图卡片

基于访问量数据生成热力图可视化,展示内容活跃度。适合在个人主页或数据统计页面展示访问数据。

```markdown
<HeatMapCard levelStandard="1000,5000,10000" />
```

**Props:**

- `levelStandard` (`string`, 可选): 等级标准,默认 "1000,5000,10000"

##### 标签轮盘

以轮盘形式展示标签列表,用户可以点击随机选择标签。适合在标签页面或侧边栏增加趣味性交互。

```markdown
<TagRoulette tags="标签1,标签2,标签3" icon="🎯" />
```

**Props:**

- `tags` (`string`, 可选): 标签列表,用逗号分隔,默认预设标签
- `icon` (`string`, 可选): 按钮图标,默认 "🕹️"

#### 布局组件

##### 标签页

创建多标签页界面,可以在同一区域展示不同内容。适合展示相关内容的多个方面或选项卡式导航。

```markdown
<Tabs active={1} center={false}>
  <TabItem title="Tab 1">内容1</TabItem>
  <TabItem title="Tab 2">内容2</TabItem>
</Tabs>
```

**Tabs Props:**

- `active` (`number`, 可选): 默认激活的标签页,默认 1
- `center` (`boolean`, 可选): 是否居中,默认 false

**TabItem Props:**

- `title` (`string`, 必需): 标签页标题

##### 折叠详情

创建可展开/折叠的内容区域,可以隐藏次要信息。适合展示详细说明、代码示例或长文本内容。

```markdown
<Details summary="点击展开">
  这里是折叠的内容
</Details>
```

**Props:**

- `summary` (`string`, 必需): 折叠标题

##### 网格布局

创建响应式网格布局,可以灵活排列内容。适合展示卡片列表、图片网格或等宽内容块。

```markdown
<Grid col={3}>
  <GridCell>单元格1</GridCell>
  <GridCell>单元格2</GridCell>
  <GridCell>单元格3</GridCell>
</Grid>
```

**Grid Props:**

- `width` (`number`, 可选): 最小宽度,默认 240
- `col` (`number`, 可选): 列数,优先于 width

**GridCell Props:** 无

##### 照片墙

创建精美的图片展示墙,支持灯箱效果。适合在文章中展示多张图片或创建图片集页面。

```markdown
<Gallery>
  ![图片1](image1.jpg)
  ![图片2](image2.jpg)
</Gallery>
```

**Props:** 无

##### 警告块

创建不同类型的提示信息框,支持多种样式。适合突出重要信息、警告或提示用户注意。

```markdown
<AlertBlockquote type="info" title="提示">
  这是一个信息提示
</AlertBlockquote>

<AlertBlockquote type="warning">
  这是一个警告提示
</AlertBlockquote>

<AlertBlockquote type="danger">
  这是一个危险提示
</AlertBlockquote>
```

**Props:**

- `type` (`"info" | "warning" | "danger" | "tip" | "important"`, 可选): 警告类型,默认 "info"
- `title` (`string`, 可选): 自定义标题,默认使用 type 大写

</details>

## 部署

### 配置站点信息

编辑 `astro.config.mjs`:

```javascript
export default defineConfig({
  site: "https://yourusername.github.io", // 你的站点 URL
  base: "/your-repo-name", // 子路径(如部署到 GitHub Pages)
  // ...
});
```

### GitHub Pages

1. 构建项目:

```bash
pnpm run build
```

2. 将 `dist/` 目录部署到 GitHub Pages

或者配置 GitHub Actions 自动部署(推荐),具体可参考 [GitHub Pages](https://docs.astro.build/zh-cn/guides/deploy/github/)。

### Vercel / Netlify

这些平台会自动识别 Astro 项目:

1. 连接 GitHub 仓库
2. 平台会自动检测并使用正确的构建命令
3. 点击部署即可,具体请参考 [Netlify](https://docs.astro.build/zh-cn/guides/deploy/netlify/) 或 [Vercel](https://docs.astro.build/zh-cn/guides/deploy/vercel/) 文档。

## 开发

### 添加新页面

在 `src/pages/` 目录下创建文件即可,Astro 会自动处理路由。

### 修改样式

样式文件位于 `src/styles/` 目录:

- `base.stylus` - 基础样式
- `global.css` - 全局样式
- `markdown.stylus` - Markdown 渲染样式
- 其他样式文件...

### i18n

语言文件位于 `src/languages/` 目录,支持的语言:

- `en.ts` - English
- `zh-cn.ts` - 简体中文
- `zh-tw.ts` - 繁体中文
- `ja.ts` - 日本語

要添加新语言,创建对应的 `.ts` 文件并参考现有文件的结构。

## 贡献者

[![](https://contributors-img.web.app/image?repo=D-Sketon/astro-theme-reimu)](https://github.com/D-Sketon/astro-theme-reimu/graphs/contributors)

## 赞助 💘

[爱发电-afdian](https://afdian.com/a/dsketon)

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=D-Sketon/astro-theme-reimu&type=date&legend=top-left)](https://www.star-history.com/#D-Sketon/astro-theme-reimu&type=date&legend=top-left)

## 许可

MIT

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FD-Sketon%2Fastro-theme-reimu.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FD-Sketon%2Fastro-theme-reimu?ref=badge_large)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。