138 lines
3.3 KiB
Markdown
138 lines
3.3 KiB
Markdown
# 🍥 Astro 主题 vhAstro-Theme
|
||
|
||
## 🚀 vhAstro-Theme：一款基于 Astro 构建的优雅的响应式博客主题
|
||
|
||
**「当极简主义遇上工程之美」**
|
||
|
||
在线演示 ➡️ [https://www.vvhan.com](https://www.vvhan.com)
|
||
|
||
官方文档 ➡️ [vhAstro-Theme](https://www.vvhan.com/article/astro-theme-vhastro-theme)
|
||
|
||
|
||
|
||
## ✨ 功能特性
|
||
|
||
- [x] 简洁的响应式设计
|
||
- [x] 流畅的动画和页面过渡
|
||
- [x] 丝滑的阻尼滚动效果（自定义开启/关闭）
|
||
- [x] 两列布局
|
||
- [x] 阅读时间
|
||
- [x] 字数统计
|
||
- [x] 代码块
|
||
- [x] 语法高亮
|
||
- [x] 图片懒加载
|
||
- [x] 图片灯箱
|
||
- [x] Twikoo 评论
|
||
- [x] 本地搜索
|
||
- [x] 标签
|
||
- [x] 分类
|
||
- [x] 归档
|
||
- [x] 动态
|
||
- [x] 圈子
|
||
- [x] 关于
|
||
- [x] 留言板
|
||
- [x] 友情链接
|
||
- [x] 推荐文章
|
||
- [x] 置顶文章
|
||
- [x] 谷歌广告
|
||
- [x] 内置 404 页面
|
||
- [x] Sitemap 支持
|
||
- [x] RSS 支持
|
||
- [x] 活跃的社区支持
|
||
- [x] 广泛的现代框架兼容性
|
||
- [x] 高效的性能优化
|
||
- [x] 优秀的开发体验
|
||
|
||
## 🚀 使用方法
|
||
|
||
- 使用此模板 [生成新仓库或 Fork 此仓库](https://github.com/new?template_name=vhAstro-Theme&template_owner=uxiaohan)
|
||
- 进行本地开发，Clone 新的仓库，执行 `pnpm install` 以安装依赖
|
||
- 若未安装 [pnpm](https://pnpm.io)，执行 `npm install -g pnpm`
|
||
- 通过配置文件 `src/config.ts` 自定义博客
|
||
- 执行 pnpm newpost '文章标题' 创建新文章，并在 src/content/posts/ 目录中编辑
|
||
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
|
||
- 部署前需编辑 `astro.config.mjs` 中的站点设置。
|
||
|
||
## 🍬 特色页面
|
||
|
||
### 友情链接
|
||
|
||
```js
|
||
// 配置文件 src/page_data/Link.ts
|
||
export default {
|
||
// API 接口请求优先，数据格式保持和 data 一致
|
||
api: "",
|
||
// api 为空则使用 data 静态数据
|
||
data: [
|
||
{
|
||
name: "韩小韩博客",
|
||
link: "https://www.vvhan.com",
|
||
avatar: "https://q1.qlogo.cn/g?b=qq&nk=1655466387&s=640",
|
||
descr: "运气是计划之外的东西."
|
||
},
|
||
{
|
||
name: "韩小韩API",
|
||
link: "https://api.vvhan.com",
|
||
avatar: "https://api.vvhan.com/static/images/logo.webp",
|
||
descr: "免费Web API数据接口调用服务平台."
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
### 说说动态
|
||
|
||
```js
|
||
// 配置文件 src/page_data/Talking.ts
|
||
export default {
|
||
// API 接口请求优先，数据格式保持和 data 一致
|
||
api: "",
|
||
// api 为空则使用 data 静态数据
|
||
// 注意：图片请用 vh-img-flex 类包裹
|
||
data: [
|
||
{
|
||
date: "2025-02-12 19:36:16",
|
||
tags: ["树", "夕阳"],
|
||
content: '好美🌲<p class="vh-img-flex"><img src="https://i0.wp.com/shp.qpic.cn/collector/1655466387/937ec070-8448-4c7b-9c8b-abd41ce892cb/0"></p>'
|
||
},
|
||
{
|
||
date: "2024-10-05 16:16:06",
|
||
tags: ["日常"],
|
||
content: "记录第一条说说"
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
## ⚙️ 文章格式
|
||
|
||
```md
|
||
---
|
||
title: 标题
|
||
categories: 分类
|
||
tags:
|
||
- 标签1
|
||
- 标签2
|
||
id: 文章ID
|
||
date: 文章创建日期
|
||
updated: 文章更新日期
|
||
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
|
||
recommend: false # 是否推荐文章
|
||
top: false # 是否置顶文章
|
||
hide: false # 是否隐藏文章
|
||
---
|
||
```
|
||
|
||
## 💻 命令
|
||
|
||
```bash
|
||
# 安装依赖
|
||
pnpm install
|
||
# 本地开发
|
||
pnpm dev
|
||
# 构建静态文件
|
||
pnpm build
|
||
# 创建新文章
|
||
pnpm newpost '文章标题'
|
||
```
|