# grace-template

**Repository Path**: Getawy/grace-template

## Basic Information

- **Project Name**: grace-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-08
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Grace Template

一个基于 Astro 和 Tailwind CSS，Thymeleaf 模板引擎构建的现代化博客/内容展示模板，专注于优雅的阅读体验和高效的开发体验。

## ✨ 功能特性

- 🚀 **快速启动**：基于 Astro 构建，开发体验流畅，构建速度快，方便模块化开发
- 🔗 **支持多种页面及自定义页面**：支持首页、分类页、标签页、归档页、关于页、自定义页面等
- 🔗 **支持内容搜索**：集成搜索功能，方便用户查找内容
- 🎨 **美观界面**：精心设计的 UI，支持浅色/深色模式切换
- 📱 **响应式设计**：完美适配桌面端、平板和移动设备
- 📝 **Markdown 支持**：支持 Markdown 内容渲染，包含代码高亮
- 🔗 **富文本编辑器**：支持多种编辑器
- 🔗 **支持评论**：集成评论系统，方便与读者互动
- 🔗 **支持点赞**：集成点赞系统，方便与读者互动
- 🔗 **支持直接后台配置主题** ：支持直接在后台配置主题，无需修改代码
- 🔍 **目录导航**：自动生成文章目录，方便长文阅读
- 🎯 **Tailwind CSS**：使用 Tailwind CSS 实现高效样式开发
- 🌙 **深色模式**：内置深色模式支持，保护用户眼睛

## 🛠️ 技术栈

- [Astro](https://astro.build/) - 现代静态站点生成器
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
- TypeScript - 类型安全的 JavaScript 超集
- Markdown - 内容格式
- [Flowbite](https://flowbite.com/) - UI 组件库
- [Canvas-confetti](https://github.com/catdad/canvas-confetti) - 庆祝效果库

## 🚀 快速开始

### 前置要求

确保你已安装以下工具：
- [Node.js](https://nodejs.org/) (v16.12.0 或更高版本)
- [npm](https://www.npmjs.com/)、[yarn](https://yarnpkg.com/) 或 [pnpm](https://pnpm.io/)

### 安装

1. 克隆仓库

```bash
git clone https://gitee.com/Getawy/grace-template.git
cd grace-template
```

2. 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
```

3. 启动开发服务器

由于不是纯静态站点，需要打包后放入搭配的后端,要想预览只能打包

```bash
npm run build
```

## 🏗️ 项目结构

```
├── src/
│   ├── components/     # 组件目录
│   │   ├── article/    # 文章相关组件
│   │   ├── category/   # 分类相关组件
│   │   ├── common/     # 通用组件
│   │   ├── index/      # 首页组件
│   │   ├── link/       # 链接相关组件
│   │   ├── query/      # 查询相关组件
│   │   ├── style/      # 样式组件
│   │   ├── timeline/   # 时间线组件
│   │   └── tool/       # 工具组件
│   ├── config/         # 配置文件
│   │   └── searchEngines.js # 搜索引擎配置
│   ├── consts.ts       # 常量定义
│   ├── env.d.ts        # 环境类型定义
│   ├── layouts/        # 布局组件
│   │   ├── LayoutBody.astro       # 主体布局
│   │   ├── LayoutFooter.astro     # 页脚布局
│   │   ├── LayoutHead.astro       # 头部布局
│   │   ├── LayoutHeader.astro     # 标题布局
│   │   ├── LayoutHeardSeo.astro   # SEO头部布局
│   │   ├── LayoutHtml.astro       # HTML布局
│   │   ├── LayoutMain.astro       # 主布局
│   │   ├── LayoutMainBottom.astro # 主底部布局
│   │   ├── LayoutMainBottomLeft.astro # 主底部左侧布局
│   │   ├── LayoutMainBottomRight.astro # 主底部右侧布局
│   │   ├── LayoutMainTop.astro    # 主顶部布局
│   │   └── main/                  # 主布局文件夹
│   ├── pages/          # 页面目录
│   │   └── nice/       # Nice页面目录
│   ├── styles/         # 全局样式
│   │   ├── global.css  # 全局CSS
│   │   └── postTheme.css # 文章主题样式
│   └── utils/          # 工具函数
│       └── scrollManager.js # 滚动管理工具
├── public/             # 静态资源
│   ├── fonts/          # 字体文件
│   └── nice/           # Nice相关静态资源
├── astro.config.mjs    # Astro 配置
└── tailwind.config.mjs # Tailwind CSS 配置
```
### 站点配置

在 `astro.config.mjs` 中可以修改以下配置：
- `site`: 站点URL（默认为 https://example.com）
- `build.assets`: 静态资源路径（默认为 nice/static/assets）
- `build.format`: 打包格式（默认为 preserve，保持原样）
- `outDir`: 输出目录（当前配置为特定环境路径，可能需要根据你的需求修改）


### Tailwind CSS 配置

在 `tailwind.config.mjs` 中可以进行以下配置：
- `content`: 配置Tailwind应该扫描的文件范围
- `theme.extend`: 可以在这里添加自定义颜色、字体等主题配置
- `plugins`: 已集成Flowbite插件，提供UI组件支持

### 全局样式

在 `src/styles/global.css` 中可以添加全局样式。

## 🚢 构建部署

### 构建

```bash
npm run build
# 或
yarn build
# 或
pnpm build
```

构建后的文件将生成在 `dist/` 目录中。



### 部署方式

可以部署到以下平台：
- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
- [GitHub Pages](https://pages.github.com/)
- 任何支持静态站点的 hosting 服务

## 📜 许可证

本项目采用 [MIT 许可证](LICENSE)。

## 🙏 致谢

感谢以下开源项目提供的支持：

- [Astro](https://astro.build/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)