纸白墨黑,朱砂点缀。
inkpaper 是一套博客主题,同时支持 VitePress 和 Astro。为个人日志和博客设计,视觉上追求安静、可读、有质感——打开页面就像摊开一张宣纸。
English | 在线演示:VitePress · Astro
npx @inkpaper/create-for-vitepress my-blog
cd my-blog
npm install
npm run dev- 安装:
npm install @inkpaper/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',
}),
],
})- 创建
src/content/config.ts:
import { defineCollection } from 'astro:content'
import { postSchema } from '@inkpaper/astro/content'
export const collections = {
posts: defineCollection({ type: 'content', schema: postSchema }),
}- 在
src/content/posts/下写文章,启动npm run dev即可。
集成会自动注入首页、归档、标签、文章详情四个路由,无需手动创建页面文件。
详细配置见示例站点源码:examples/vitepress | examples/astro
- 宣纸纹理 — SVG 噪点纹理 + 朱砂顶线,营造纸质感
- 墨/纸/朱砂三色系统 — 完整的亮色/暗色模式支持
- 可配置侧边栏 — 按页面类型独立控制显示与否、目录树或日期树
- 首页/归档/标签 — 三个开箱即用的页面组件
- 文章侧边栏 — 字数统计、阅读时间、标签、相关文章推荐
- 视频嵌入 — Markdown 图片语法
自动渲染为<video>标签,支持 mp4/webm/mov - 共享设计系统 —
@inkpaper/core提供统一的色彩、排版、纹理,两套框架实现视觉一致 - Astro 路由自动注入 — 集成自动注入默认页面路由,无需脚手架
- VitePress 脚手架工具 —
npx @inkpaper/create-for-vitepress一键初始化 VitePress 项目
| 包 | 说明 |
|---|---|
@inkpaper/core |
纯 CSS 设计变量、纹理、排版、通用组件样式,框架无关 |
@inkpaper/vitepress |
VitePress 主题:Vue 组件、Layout、侧边栏配置、内容加载器 |
@inkpaper/astro |
Astro 主题:集成(自动注入路由和类型)、Astro 组件、侧边栏配置 |
@inkpaper/create-for-vitepress |
VitePress 项目脚手架工具 |
安装 @inkpaper/vitepress 或 @inkpaper/astro,core 会作为依赖自动装上。