valaxy-theme-warmpaper
v0.2.3
Published
A warm, grid-paper styled theme for Valaxy, ported from the warmpaper design.
Readme
valaxy-theme-warmpaper
一个为 Valaxy 打造的暖色方格纸(warmpaper)风格主题,移植自 finch-xu/hexo-theme-warmpaper(灵感来自 Claude 的配色方案,米色背景 + 淡橙色方格草稿纸纹理)。仓库同时包含一个可直接运行的示例博客站点。
在线示例博客站点:https://xunv.github.io/valaxy-theme-warmpaper/
特性
- 暖色方格纸视觉风格,主强调色
#da7756 - 内置多种布局:首页、文章、归档、标签、分类
- 支持暗色模式切换
- 支持 SSG 分页(
/page/1、/page/2…) - 首页文章卡片自动摘要
- 内置 RSS/Atom/JSON Feed 生成
目录结构
.
├── pages/ # 示例站点的页面与文章
├── public/ # 静态资源与生成的 feed
├── valaxy-theme-warmpaper/ # 主题源码
│ ├── components/ # 组件(导航、页脚、文章卡片、分页)
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 布局(home/post/archives/tags/categories/default)
│ ├── node/ # 构建期配置
│ ├── styles/ # 全局样式与变量
│ └── types/ # 类型定义(ThemeConfig 等)
└── valaxy.config.ts # 站点与主题配置快速开始
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建(SSG)
pnpm build
# 本地预览构建产物
pnpm serve
# 生成 RSS
pnpm rss使用主题
在 valaxy.config.ts 中引入并配置主题:
import { defineValaxyConfig } from 'valaxy'
import type { ThemeConfig } from 'valaxy-theme-warmpaper'
export default defineValaxyConfig<ThemeConfig>({
theme: 'warmpaper',
themeConfig: {
colors: {
primary: '#da7756', // 主强调色
},
nav: [
{ text: '首页', link: '/' },
{ text: '归档', link: '/archives/' },
{ text: '标签', link: '/tags/' },
{ text: '分类', link: '/categories/' },
{ text: '关于', link: '/about/' },
],
pageSize: 7, // 首页每页文章数,默认 7
},
})主题配置(ThemeConfig)
| 字段 | 类型 | 说明 |
| ------------------ | ----------- | ------------------------------------------- |
| colors.primary | string | 主强调色,默认 #da7756 |
| nav | NavItem[] | 顶栏导航项(text / link / 可选 icon) |
| pageSize | number | 首页每页文章数,默认 7 |
| hero.title | string | 首页 hero 主标题 |
| hero.motto | string | 首页 hero 副标题/一言 |
| footer.message | string | 页脚文案(支持 HTML) |
| footer.copyright | string | 版权信息 |
环境要求
- Node.js(建议 LTS)
valaxy >= 0.28.0、vue >= 3.5.0、pinia >= 2.1.0(作为 peerDependencies)
致谢
- 原始设计与灵感来自 finch-xu/hexo-theme-warmpaper(Hexo 版 warmpaper 主题,在线预览 pidan.dev)
- 本仓库是其在 Valaxy 框架下的移植实现
License
MIT © iyue.top
