简介

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

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

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

项目地址

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 中的站点设置。

⚙️ 文章格式

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

💻 命令

# 安装依赖
pnpm install
# 本地开发
pnpm dev
# 构建静态文件
pnpm build
# 创建新文章
pnpm newpost '文章标题'

🍬 特色页面

友情链接

// 配置文件 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数据接口调用服务平台."
		}
	]
};

说说动态

// 配置文件 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: "记录第一条说说"
		}
	]
};

👉 请放心使用并给予反馈，我们将在后续版本中不断优化和改进，为您提供更好的体验！