Grove 主题配置与使用指南

pnpm install
pnpm setup:config # 从 site/site.config.ts.example 生成本地配置，已有文件时保留原样
pnpm dev          # 本地预览 http://localhost:4321
pnpm check        # 类型检查
pnpm build        # 构建到 site/dist

pnpm new writing my-first-post 我的第一篇文章
pnpm new note
pnpm new project tiny-focus 番茄钟

import { defineConfig } from 'astro-theme-grove/config';

export default defineConfig({
  title: '网站名称',          // 页头左上角、浏览器标题、分享卡片
  tagline: '写代码，也写生活',
  description: '一句话介绍这个网站，也是首页的搜索摘要。',
  locale: 'zh-CN',
  timezone: 'Asia/Shanghai',
  since: 2024,

  author: {
    name: '你的名字',           // 站长名字，可以和网站名称不同
    jobTitle: '全栈开发者',
    location: '上海',
    email: 'hello@example.com',
    avatar: '/avatar.jpg', // 放在 public/ 下
  },

  // 首页开场：问候 + 介绍，段落之间空一行；{name} 会换成 author.name
  hero: {
    title: '你好，我是{name}。',
    intro: `第一段是导语。

第二段是补充说明。`,
  },

  // 首页“找到我”：handle 是显示在右边的文字，不填显示去掉协议的网址
  social: [
    { label: 'GitHub', href: 'https://github.com/your-name', handle: '@your-name' },
    { label: '掘金', href: 'https://juejin.cn/user/your-id', handle: '你的名字' },
    { label: 'RSS', href: '/rss.xml', handle: '订阅全文' },
  ],

  // 首页开场顶部的公告，不需要时整段删掉
  sidebar: {
    announcement: { body: '网站正在继续打磨。', link: { label: '更新记录', href: '/notes/' } },
  },

  footer: {
    beian: {
      icp: '京ICP备12345678号-1',
      police: '京公网安备11010502030143号',
    },
  },
});

---
title: 文章标题
description: 搜索结果和列表里显示的摘要，50–150 字
pubDate: 2026-10-15
updatedDate: 2026-10-20     # 有实质修改时填
category: tutorial          # 必须是 writing.categories 里的 id
tags: [Astro, 个人网站]
series: Grove主题系列      # 同名文章自动串成系列
project: astro-theme-grove  # 所属作品，见下文
cover: ./cover.jpg          # 可选，建议 16:10；不填用生成封面
coverAlt: 封面的文字说明
featured: true              # 文章页头条优先用它
---

---
title: Tiny Focus
description: 一句话介绍
type: experiment          # 必须是 projects.types 里的 id
status: maintained        # active / maintained / paused / archived / idea
startDate: 2025-03-01
endDate: 2025-04-20       # 进行中就不写
tech: [TypeScript, Web Audio, PWA]
repo: https://github.com/you/tiny-focus
demo: https://example.com/tiny-focus
featured: true
---

skills:
  - group: 后端
    items:
      - { name: Java, level: expert }       # 精通
      - { name: MySQL, level: proficient }  # 熟练
      - { name: Redis, level: familiar }    # 了解
      - Go                                  # 不写程度也行

      - { name: Vue3, level: expert, icon: 'brand:vuedotjs' }   # 品牌图标
      - { name: 部署, level: familiar, icon: globe }             # 内置图标
      - { name: 自研工具, icon: ./src/icons/tool.svg }            # SVG 文件

writing: {
  categories: [
    // 1. 内置图标名，见下面的一览
    { id: 'tutorial', label: '技术教程', icon: 'code' },
    // 2. 品牌图标：brand: 加 simple-icons 的 slug
    { id: 'python', label: 'Python', icon: 'brand:python' },
    // 3. 直接粘贴 SVG
    { id: 'reading', label: '读书笔记', icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>' },
    // 4. 站点里的 SVG 文件，路径相对站点根目录
    { id: 'essay', label: '随笔', icon: './src/icons/feather.svg' },
  ],
},

// 只写一个颜色
{ id: 'tutorial', label: '技术教程', icon: 'code', color: '#2d7470' },
// 浅色、深色分别指定
{
  id: 'essay',
  label: '随笔',
  icon: 'pen',
  color: { light: '#a24a65', dark: '#f0b8c8' },
},

writing: {
  series: [{ name: 'Grove主题系列', description: 'Grove 主题的配置、使用与更新记录' }],
},

> [!NOTE]
> 补充说明。

> [!TIP] 可以自定义标题
> 一个小技巧。

```ts title="src/demo.ts" {2,4-5}
const a = 1;
const b = 2; // 高亮
const c = 3;
const d = 4; // 高亮
const e = 5; // 高亮
```

const a = 1;
const b = 2; // 高亮
const c = 3;
const d = 4; // 高亮
const e = 5; // 高亮

:root { --accent: #2f6f62; --accent-soft: #e1efeb; }
[data-theme='dark'] { --accent: #9fd3c4; --accent-soft: #233a35; }