🥝 从 Z-Blog 到 Emlog，从 Typecho 到 Hexo，从动态博客到静态博客，作为一个前端，我深入了解了多种 SSG 工具，如 Hexo、Vitepress、Hugo 等，并最终锁定了 Astro 作为重构博客的选择。
🍇 Astro 活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验以及原生 SEO 优化，支持 Markdown/MDX 编写内容，且允许开发者混合使用 React、Vue、Svelte 等主流框架的组件，是我心目中最适合构建博客这样的以内容驱动的网站的 Web 框架。
🍊 我以 Astro 为基础开发的 vhAstro-Theme 主题模版，是一款优雅的响应式博客主题，它具有简洁的设计、流畅的动画和页面过渡。

🚀 vhAstro-Theme：一款基于 Astro 构建的优雅的响应式博客主题

「当极简主义遇上工程之美」

Astro主题 vhAstro-Theme

项目地址

1、QQ 群下载：113445803
2、GitHub 下载（推荐）：https://github.com/uxiaohan/vhAstro-Theme （谢谢你的star）

✨ 功能特性

  • 简洁的响应式设计
  • 流畅的动画和页面过渡
  • 两列布局
  • 阅读时间
  • 字数统计
  • 代码块
  • 语法高亮
  • 图片懒加载
  • 图片灯箱
  • Twikoo 评论
  • 本地搜索
  • 标签
  • 分类
  • 归档
  • 动态
  • 关于
  • 友情链接
  • 推荐文章
  • 谷歌广告
  • 内置 404 页面
  • Sitemap 支持
  • RSS 支持
  • 活跃的社区支持
  • 广泛的现代框架兼容性
  • 高效的性能优化
  • 优秀的开发体验

🚀 使用方法

  • 使用此模板 生成新仓库或 Fork 此仓库
  • 进行本地开发，Clone 新的仓库，执行 pnpm install 以安装依赖
  • 若未安装 pnpm，执行 npm install -g pnpm
  • 通过配置文件 src/config.ts 自定义博客
  • 执行 pnpm newpost ‘文章标题’ 创建新文章，并在 src/content/posts/ 目录中编辑
  • 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
  • 部署前需编辑 astro.config.mjs 中的站点设置。

⚙️ 文章格式

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 标题
categories: 分类
tags:
  - 标签1
  - 标签2
id: 文章ID
date: 文章创建日期
updated: 文章更新日期
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
recommend: false # 是否推荐文章
hide: false # 是否隐藏文章
---

💻 命令

1
2
3
4
5
6
7
8
# 安装依赖
pnpm install
# 本地开发
pnpm dev
# 构建静态文件
pnpm build
# 创建新文章
pnpm newpost '文章标题'

🍬 特色页面

友情链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 配置文件 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数据接口调用服务平台."
		}
	]
};

说说动态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 配置文件 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: "记录第一条说说"
		}
	]
};