一个基于 Astro 和 Tailwind CSS 构建的现代化博客主题。

• 现代技术栈：基于 Astro 5 构建，支持 React 集成
• 响应式设计：移动端优先，完美适配所有设备
• 深色模式：基于 CSS 变量的主题系统
• MDX 支持：在 Markdown 中使用 React 组件
• 丰富组件：Header、Footer、侧边栏、文章卡片、分页等
• 评论系统：支持 Twikoo 和 Waline 评论系统
• 数据分析：集成 Umami analytics
• SEO 优化：内置 SEO 支持和站点地图生成
• TypeScript：完整的 TypeScript 支持

# 克隆仓库
git clone https://github.com/kevisual/tale-theme.git

# 进入目录
cd tale-theme

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 启动开发服务器
pnpm dev

站点将在 http://localhost:7008 可访问

# 构建站点
pnpm build

# 预览生产版本
pnpm preview

├── src/
│   ├── components/          # 可复用 UI 组件
│   │   ├── Header.astro     # 导航栏
│   │   ├── Footer.astro     # 页脚
│   │   ├── Aside.astro      # 侧边栏
│   │   ├── ArticleCard.astro # 文章卡片
│   │   ├── HomeBanner.astro # 首页横幅
│   │   └── Pagination.astro # 分页组件
│   ├── config/
│   │   ├── default.ts       # 主题配置
│   │   └── schema.ts        # 类型定义
│   ├── layouts/
│   │   ├── MainLayout.astro # 主布局
│   │   └── MDXPost.astro    # 文章布局
│   ├── pages/
│   │   ├── [...page].astro  # 首页
│   │   ├── posts/[slug].astro # 文章页
│   │   ├── archives.astro   # 归档页
│   │   ├── categories/      # 分类页
│   │   └── tags/            # 标签页
│   ├── styles/
│   │   ├── global.css       # 全局样式
│   │   └── theme.css        # 主题样式
│   ├── data/
│   │   ├── blogs/           # 博客文章
│   │   └── docs/            # 文档页面
│   └── content.config.ts    # 内容集合配置
├── public/
│   ├── assets/images/       # 图片和图标
│   └── rss.xsl
├── astro.config.mjs         # Astro 配置
└── package.json

编辑 src/config/default.ts 自定义站点：

export const config: Config = {
  title: '站点标题',
  subtitle: '站点副标题',
  description: '站点描述',
  author: {
    name: '你的名字',
    avatar: '/assets/images/avatar.jpg',
    motto: '你的座右铭',
  },
  url: 'https://your-site.com',
  navItems: [
    { name: '首页', path: '/' },
    { name: '归档', path: '/archives/' },
    { name: '关于', path: '/about/' },
  ],
  socialLinks: [
    { name: 'GitHub', icon: 'github', url: 'https://github.com/yourname' },
  ],
  // ... 更多选项
}

在 src/data/blogs/ 创建 Markdown 文件：

---
title: '文章标题'
description: '文章简要描述'
date: 2026-01-22
tags: ['标签1', '标签2']
category: '分类名称'
cover: '/path/to/cover.jpg'
---

你的内容...

## 子标题

更多内容...

选项	类型	描述
title	string	站点标题
subtitle	string	站点副标题
description	string	站点描述
author	object	作者信息（名字、头像、座右铭）
url	string	站点 URL
navItems	array	导航菜单项
socialLinks	array	社交媒体链接
banner	object	首页横幅设置
sidebar	object	侧边栏可见性设置
comments	object	评论系统配置
analytics	object	数据分析配置
footer	object	页脚徽章和链接

Twikoo:

comments: {
  type: 'twikoo',
  envId: 'your-env-id',
}

Waline:

comments: {
  type: 'waline',
  serverURL: 'https://your-server.com',
}

analytics: {
  umami: {
    src: '/script.js',
    websiteId: 'your-website-id',
  },
}

修改 src/styles/global.css 和 src/styles/theme.css 自定义样式。

主题支持多种字体：

• Montserrat
• Roboto
• Inter
• 以及更多 Google Fonts

通过 src/styles/theme.css 中的 CSS 变量自定义颜色。

pnpm dev         # 启动开发服务器
pnpm build       # 构建生产版本
pnpm preview     # 预览生产版本
pnpm clean       # 清理构建产物
pnpm pub         # 发布到 npm

• 框架：Astro 5.16.12
• 样式：Tailwind CSS 4 + @tailwindcss/typography
• UI 库：React 19 + Ant Design 6
• 图标：Lucide React
• 工具库：clsx, tailwind-merge, zustand, dayjs, fuse.js
• 内容处理：marked, highlight.js, @astrojs/mdx

MIT License - 欢迎将本主题用于个人或商业项目。

@kevisual