<div align="center">

# Clarity

一款注重阅读体验的三栏博客主题，用清晰的设计让阅读回归本真。

[![Halo](https://img.shields.io/badge/Halo-2.21+-blue?style=flat-square)](https://halo.run)
[![License](https://img.shields.io/badge/License-GPL--3.0-green?style=flat-square)](./LICENSE)
[![Version](https://img.shields.io/badge/Version-1.0.0-orange?style=flat-square)](./theme.yaml)

[🌐 预览站点](https://www.xhhao.com)

</div>

---

## ✨ 特性

- 🎨 **精心设计的三栏布局** - 左侧导航 + 主内容区 + 右侧边栏，信息层次清晰
- 🌓 **深色模式** - 支持浅色/深色/跟随系统三种模式，带圆形展开过渡动画
- 📱 **响应式设计** - 完美适配桌面端、平板和移动设备
- 🧩 **可配置小组件** - 博客统计、技术信息、天气预报、微语等，支持拖拽排序
- ✍️ **丰富的内容组件** - 提示框、选项卡、折叠面板、时间线、聊天对话等
- 🔍 **搜索快捷键** - 支持 `Ctrl+K` / `⌘K` 快速唤起搜索
- 📤 **文章分享** - 一键复制分享文本或生成精美海报
- 🎭 **文章目录** - 自动生成 TOC，带滚动高亮效果

## 📸 预览

![主题预览](./img/jietu.png)

## 🚀 安装

### 方式一：应用市场安装（推荐）

在 Halo 后台的「主题」页面，点击「安装主题」，选择「应用市场」，搜索 `Clarity` 并安装。

### 方式二：手动安装

1. 前往 [Releases](https://github.com/acanyo/theme-clarity/releases) 下载最新版本的 `theme-clarity.zip`
2. 在 Halo 后台的「主题」页面，点击「安装主题」，选择「本地上传」
3. 上传下载的 zip 文件完成安装

### 右侧边栏小组件

支持以下小组件，可自由拖拽排序：

- **博客统计** - 运营时长、上次更新、文章数目
- **技术信息** - 构建平台、图片存储、许可协议等
- **天气预报** - 集成心知天气 API，自动定位
- **微语** - 展示最新的瞬间动态
- **社区群组** - QQ 群等社交卡片
- **云计算支持** - 赞助商展示
- **自定义** - 支持任意 HTML 内容

# 💬交流

![群.png](https://www.lik.cc/upload/iShot_2025-03-03_16.03.00.png)

## 🛠️ 开发

### 本地开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 在 Halo 后台启用「开发模式」设置
# 主题将自动连接 localhost:5173 获取资源
```

### 构建打包

```bash
# 完整构建（生成主题 zip 包）
pnpm build

# 仅构建前端资源
pnpm build-only
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 📄 许可证

本项目采用 [GPL-3.0](./LICENSE) 许可证开源。

## 🔗 移植来源

本主题移植自 [blog-v3](https://github.com/L33Z22L11/blog-v3) 项目，感谢原作者 **纸鹿** 的精心设计。

- 原项目：https://github.com/L33Z22L11/blog-v3
- 作者博客：https://blog.zhilu.site

## 💖 致谢

- [Halo](https://halo.run) - 强大的开源建站工具
- [纸鹿](https://blog.zhilu.site) - 原项目 [blog-v3](https://github.com/L33Z22L11/blog-v3) 作者
- 所有贡献者和使用者

---

<div align="center">

**如果这个主题对你有帮助，欢迎 Star ⭐**

Made with ❤️ by [Handsome](https://www.xhhao.com)

</div>
