Files
AboutMe/docs/README_ZH.md
2026-02-02 22:47:52 +03:00

122 lines
4.1 KiB
Markdown

<div align = "center">
# Twilight
一个支持后台管理的静态博客主题模板,基于 Astro 框架打造
[**🖥️ 演示**](https://twilight.spr-aachen.com)
[**📝 文档**](https://docs.twilight.spr-aachen.com)
[![Bilibili](https://img.shields.io/badge/Bilibili-Intro-blue?logo=Bilibili)](https://space.bilibili.com/359461611/lists/6641229)&nbsp;
[![YouTube](https://img.shields.io/badge/YouTube-Intro-red?logo=YouTube)](https://youtube.com/playlist?list=PLzjq8Hx1SRV7yqZQiACcCJmKPeg5D8JKe&si=Bcz2o0PF8MFvx8ec)
<table style="width: 100%; table-layout: fixed;">
<tr>
<td colspan="5"><img alt="Desktop" src="image/Desktop.jpg" style="max-width: 100%;"></td>
</tr>
<tr>
<td><img alt="Mobile_4" src="image/Mobile_4.jpg" style="max-width: 100%;"></td>
<td><img alt="Mobile_2" src="image/Mobile_2.jpg" style="max-width: 100%;"></td>
<td><img alt="Mobile_1" src="image/Mobile_1.jpg" style="max-width: 100%;"></td>
<td><img alt="Mobile_3" src="image/Mobile_3.jpg" style="max-width: 100%;"></td>
<td><img alt="Mobile_5" src="image/Mobile_5.jpg" style="max-width: 100%;"></td>
</tr>
</table>
</div>
---
<div align = "center">
[**English**](../README.md) | 中文
</div>
## ✨ 特性
### 内容
- **CMS 功能**: 基于 Decap CMS 的便捷内容管理
- **数据可视化**: 可视化的项目、技能等个人数据
- **自动化导航**: 自动化生成的文章导航
### 组件
- **站点统计**: 集成 Umami 访客统计的站点分析
- **评论系统**: 基于 Twikoo 的评论功能
- **音乐播放器**: 背景音乐播放和播放列表管理
- **看板娘插件**: 可交互的 live2d 角色
### 视效
- **平滑过渡动画**: 精心设计的页面组件过渡动画
- **自定义主题色**: 可实时调整的个性化配色方案
- **动态壁纸系统**: 拥有多种显示模式的轮播壁纸
- **动态粒子系统**: 可高度自定义的动画粒子特效
### 适配
- **响应式设计**: 支持桌面端、移动端无缝切换
- **多语言能力**: 内置翻译功能,方便全球访问
## 📦 安装
1. **克隆仓库**
```bash
git clone https://github.com/Spr-Aachen/Twilight.git
cd Twilight
```
2. **安装依赖**
```bash
# Install pnpm if not already installed
npm install -g pnpm
# Install project dependencies
pnpm install
```
3. **配置博客**
- 在 `twilight.config.yaml` 中 [自定义博客设置](https://docs.twilight.spr-aachen.com/config/core)
- 在 `.env` 中 [配置 CMS 功能](https://docs.twilight.spr-aachen.com/config/cms)
- 在 `.env` 中 [配置站点统计功能](https://docs.twilight.spr-aachen.com/config/analytics)
- 在 `src/content` 中 [管理站点内容](https://docs.twilight.spr-aachen.com/config/content)
4. **本地调试**
```bash
pnpm dev
```
## 🚀 部署
将你的博客部署到任何静态托管平台
## ⚡ 命令
| 指令 | 说明 |
|:---------------------------|:-------------------------|
| `pnpm lint` | 检查并修复代码问题 |
| `pnpm format` | 使用 Biome 格式化代码 |
| `pnpm check` | 运行 Astro 错误检查 |
| `pnpm dev` | 启动本地服务器 |
| `pnpm build` | 构建站点到 `./dist/` |
| `pnpm preview` | 预览本地构建结果 |
| `pnpm astro ...` | 运行 `Astro CLI` 命令 |
| `pnpm new-post <filename>` | 创建新博客文章 |
## 🙏 致谢
- 原型 - [Fuwari](https://github.com/saicaca/fuwari)
- 灵感 - [Yukina](https://github.com/WhitePaper233/yukina) & [Mizuki](https://github.com/matsuzaka-yuki/Mizuki)
- CMS - [astro-decap-cms-oauth](https://github.com/dorukgezici/astro-decap-cms-oauth)
- 翻译 - [translate](https://gitee.com/mail_osc/translate)
## 🤝 支持
本项目由阿里云ESA提供加速、计算和保护
<a href="https://esa.console.aliyun.com/">
<img src="https://img.alicdn.com/imgextra/i3/O1CN01H1UU3i1Cti9lYtFrs_!!6000000000139-2-tps-7534-844.png" href="https://esa.console.aliyun.com/" alt="阿里云ESA支持" style="max-width: 100%; height: auto;">
</a>