From fcecb08c6b929e8aeabefe088f095bd112c06f11 Mon Sep 17 00:00:00 2001
From: Han <1655466387@qq.com>
Date: Sun, 9 Mar 2025 12:27:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../blog/Astro主题优雅的vhAstro-Theme.md | 44 ++++++++++++++++++-
1 file changed, 42 insertions(+), 2 deletions(-)
diff --git a/src/content/blog/Astro主题优雅的vhAstro-Theme.md b/src/content/blog/Astro主题优雅的vhAstro-Theme.md
index d713c79..5099530 100644
--- a/src/content/blog/Astro主题优雅的vhAstro-Theme.md
+++ b/src/content/blog/Astro主题优雅的vhAstro-Theme.md
@@ -5,16 +5,20 @@ tags:
- Astro
- 主题
- 博客
+ - vhAstro
- vhAstro-Theme
id: "astro-theme-vhastro-theme"
date: 2025-03-02 18:18:18
cover: "https://i0.wp.com/uxiaohan.github.io/v2/2025/03/1740977096666.webp"
recommend: true
+top: true
---
:::note{type="success"}
🥝 从 Z-Blog 到 Emlog，从 Typecho 到 Hexo，从动态博客到静态博客，作为一个前端，我深入了解了多种 SSG 工具，如 Hexo、Vitepress、Hugo 等，并最终锁定了 Astro 作为重构博客的选择。
+
🍇 Astro 活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验以及原生 SEO 优化，支持 Markdown/MDX 编写内容，且允许开发者混合使用 React、Vue、Svelte 等主流框架的组件，是我心目中最适合构建博客这样的以内容驱动的网站的 Web 框架。
+
🍊 我以 Astro 为基础开发的 vhAstro-Theme 主题模版，是一款优雅的响应式博客主题，它具有简洁的设计、流畅的动画和页面过渡。
:::
@@ -26,7 +30,7 @@ recommend: true
## 项目地址
-> 1、QQ 群下载：113445803
2、GitHub 下载（推荐）：https://github.com/uxiaohan/vhAstro-Theme （帮忙点个star）
+> 1、QQ 群下载：113445803
2、GitHub 下载（推荐）：https://github.com/uxiaohan/vhAstro-Theme （谢谢你的star）
## ✨ 功能特性
@@ -59,7 +63,7 @@ recommend: true
## 🚀 使用方法
-- 使用此模板生成新仓库或 Fork 此仓库
+- 使用此模板 [生成新仓库或 Fork 此仓库](https://github.com/new?template_name=vhAstro-Theme&template_owner=uxiaohan)
- 进行本地开发，Clone 新的仓库，执行 `pnpm install` 以安装依赖
- 若未安装 pnpm，执行 `npm install -g pnpm`
- 通过配置文件 `src/config.ts` 自定义博客
@@ -67,6 +71,7 @@ recommend: true
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
- 部署前需编辑 `astro.config.mjs` 中的站点设置。
+
## ⚙️ 文章格式
```md
@@ -81,6 +86,7 @@ date: 文章创建日期
updated: 文章更新日期
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
recommend: false # 是否推荐文章
+top: false # 是否置顶文章
hide: false # 是否隐藏文章
---
```
@@ -149,6 +155,40 @@ export default {
};
```
+### 圈子（需部署FreshRSS）
+
+```js
+// 配置文件 src/page_data/Friends.ts
+export default {
+ // API 接口请求优先，数据格式保持和 data 一致
+ api: '',
+ // api 为空则使用 data 静态数据
+ data: [
+ {
+ "title": "Astro 中使用 Lenis 增加鼠标滚动阻尼感",
+ "auther": "韩小韩博客",
+ "date": "2025-03-06",
+ "link": "https://www.vvhan.com/article/Lenis-in-Astro",
+ "content": "在移动端触控交互中，惯性滚动带来的丝滑体验已成为标配，但鼠标滚轮受限于机械结构，滚动时难免产生生硬的段落感。如何让传统滚轮操作也能获得如触控板般的阻尼反馈？Lenis库通过JavaScript模拟惯性算法，成功将”物理惯性”引入网页滚动，本文将解析其实现原理与实战应用。"
+ },
+ {
+ "title": "Astro 添加 Twikoo 评论组件",
+ "auther": "韩小韩博客",
+ "date": "2025-03-03",
+ "link": "https://www.vvhan.com/article/astro-twikoo",
+ "content": "Astro在使用视图过渡路由时，在跳转路由时，会导致JS文件只有在第一次进入页面时生效，所以Astro在使用视图过渡路由下Twikoo时无法正常使用的，我是单独写了一个评论组件，对Twikoo进行动态加载，然后在需要评论的页面引入的。"
+ },
+ {
+ "title": "Astro主题-优雅的vhAstro-Theme【使用文档】",
+ "auther": "韩小韩博客",
+ "date": "2025-03-02",
+ "link": "https://www.vvhan.com/article/astro-theme-vhastro-theme",
+ "content": "🥝从Z-Blog到Emlog，从Typecho到Hexo，从动态博客到静态博客，作为一个前端，我深入了解了多种SSG工具，如Hexo、Vitepress、Hugo等，并最终锁定了Astro作为重构博客的选择。🍇Astro活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验。"
+ }
+ ]
+}
+```
+
## 🌈 组件
### 文本加粗