Merge branch 'main' of github.com:uxiaohan/vhAstro-Theme
This commit is contained in:
commit
4aa19d2f14
@ -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
|
||||
}
|
||||
@ -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活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验。"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 🌈 组件
|
||||
|
||||
### 文本加粗
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user