inkpaper 主题介绍与快速上手

inkpaper 是一个博客主题。视觉上就一句话：纸白墨黑，朱砂点缀。

做这个主题的想法很简单——个人日志不需要花哨的设计，需要的是安静、可读、有质感。市面上大多数博客主题要么过于工程化，要么视觉上太吵，我想要的是打开页面就像摊开一张宣纸。

inkpaper 同时提供 VitePress 和 Astro 两个版本，共享同一套设计系统（@inkpaper/core）。本文以 Astro 版本为例。

安装

npm install @inkpaper/astro

主题依赖 Astro >= 4.0.0（peerDependency）。

快速开始

1. Astro 配置

astro.config.mjs：

import { defineConfig } from 'astro/config'
import inkpaper from '@inkpaper/astro'

export default defineConfig({
  integrations: [
    inkpaper({
      title: 'My Blog',
      description: 'A personal journal',
    }),
  ],
})

title 和 description 会显示在首页标题和副标题上。

集成会自动注入首页、归档页、标签页和文章详情页的路由，不需要手动创建页面文件。

2. 内容集合

Astro 版本使用 Content Collections 管理文章。在 src/content/config.ts 里定义 schema：

import { defineCollection } from 'astro:content'
import { postSchema } from '@inkpaper/astro/content'

export const collections = {
  posts: defineCollection({ type: 'content', schema: postSchema }),
}

在 src/content/posts/ 下写文章，Frontmatter 至少要有 title、date、tags 三个字段：

---
title: 我的第一篇文章
date: 2026-05-11
tags:
  - 随笔
---

正文内容。

date 决定排序，tags 用于标签页筛选和相关文章推荐。支持子目录分类。

3. 启动

npm run dev

打开浏览器就能看到带有 inkpaper 主题的站点，包含首页、归档、标签和文章详情四个页面。

如果你想自定义某个页面，可以在 src/pages/ 下创建同名的 .astro 文件覆盖默认路由。

源码

GitHub: Moonshile/inkpaper-theme