Merge branch 'main' of github.com:uxiaohan/vhAstro-Theme

This commit is contained in:
Han 2025-03-12 15:53:38 +08:00
commit 4aa19d2f14
2 changed files with 44 additions and 2 deletions

View File

@ -50,4 +50,6 @@ export default {
// 文章页广告(不填不开启)
articleAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`
},
// 阻尼滚动效果开关
LenisScroll: true
}

View File

@ -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 <br>2、GitHub 下载推荐https://github.com/uxiaohan/vhAstro-Theme 帮忙点个star
> 1、QQ 群下载113445803 <br>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活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验。"
}
]
}
```
## 🌈 组件
### 文本加粗