Home
avatar

𝒙𝒊𝒂𝒐

Astro主题-优雅的vhAstro-Theme【使用文档】

1459字 7.3分钟 Code

🍬 特色页面

友情链接

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

圈子（需部署FreshRSS）

// 配置文件 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活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验。"
    }
  ]
}

📄 文章格式

---
title: 标题
categories: 分类
tags:
  - 标签1
  - 标签2
id: 文章ID
date: 文章创建日期
updated: 文章更新日期
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
recommend: false # 是否推荐文章
top: false # 是否置顶文章
hide: false # 是否隐藏文章
<!-- 页面独有 -->
type: "links" # 页面类型
comment: false # 关闭页面评论（默认开启）
---

✅ Lighthouse

vhAstro-Theme-Lighthouse

🌈 组件

文本加粗

那个女孩子 **气喘吁吁** 的打电话和你说：我在跑步

那个女孩子 气喘吁吁 的打电话和你说：我在跑步

文本倾斜

你问她为什么有 _啪啪啪_ 的声音，她和你说：我是穿拖鞋跑步的

你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的

文本删除

你说，好的那你继续 ~~跑步~~ 吧

你说，好的那你继续 跑步 吧

行内代码

`Vscode` 是全宇宙最好的编辑器

Vscode 是全宇宙最好的编辑器

引用

> 这是一个引用

这是一个引用

有序列表

牛肉的的营养如下：

1. 能量 (kcal)
2. 脂类 (fat)
3. 蛋白质 (protein)
4. 碳水化合物 (carbohydrate)

牛肉的的营养如下：

  1. 能量 (kcal)
  2. 脂类 (fat)
  3. 蛋白质 (protein)
  4. 碳水化合物 (carbohydrate)

无序列表

- 一个女朋友
- 二个女朋友
- 三个女朋友
- ...
- N 个女朋友
  • 一个女朋友
  • 二个女朋友
  • 三个女朋友
  • …
  • N 个女朋友

超链接

[百度一下，你就懂了](https://www.baidu.com)

百度一下，你就懂了

3 行 3 列的表格

| 表头 | 表头 | 表头 |
| :--: | :--: | :--: |
| 鸡头 | 鸭头 | 狗头 |
| 鸡头 | 鸭头 | 狗头 |
| 鸡头 | 鸭头 | 狗头 |
表头表头表头
鸡头鸭头狗头
鸡头鸭头狗头
鸡头鸭头狗头

代码块

const obj = {
	name: "hi",
	age: 18
};
// 判断某个属性是否在对象里
console.log("name" in obj);
// 删除对象某个属性
console.log(delete obj.name);
// 将对象的属性名提取成数组
console.log(Object.keys(obj));

H 标签

<!-- H标签，页面标题即h1，不建议文章内使用h1标签 -->
## H2
### H3
#### H4
##### H5

H2

H3

H4

H5

数学公式

% 函数式
${f(x)=a_nx^n+a_{n-1}x^{n-1}+a_{n-2}x^{n-2}}+\cdots$
% 四则运算
$2x - 5y =  8$
$3x + 9y =  -12$
$7x \times 2y \neq 3z$
% 希腊字母
$\Gamma$、$\iota$、$\sigma$、$\phi$、$\upsilon$、$\Pi$、$\Bbbk$、$\heartsuit$、$\int$、$\oint$
% 三角函数、对数、指数
$\tan$、$\sin$、$\cos$、$\lg$、$\arcsin$、$\arctan$、$\min$、$\max$、$\exp$、$\log$
% 运算符
$+$、$-$、$=$、$>$、$<$、$\times$、$\div$、$\equiv$、$\leq$、$\geq$、$\neq$
% 集合符号
$\cup$、$\cap$、$\in$、$\notin$、$\ni$、$\subset$、$\subseteq$、$\supset$、$\supseteq$、$\N$、$\Z$、$\R$、$\R$、$\infty$

函数式

f(x)=anxn+an−1xn−1+an−2xn−2+⋯{f(x)=a_nx^n+a_{n-1}x^{n-1}+a_{n-2}x^{n-2}}+\cdots

四则运算

2x−5y=82x - 5y = 83x+9y=−123x + 9y = -127x×2y≠3z7x \times 2y \neq 3z

希腊字母

Γ\Gamma、ι\iota、σ\sigma、ϕ\phi、υ\upsilon、Π\Pi、k\Bbbk、♡\heartsuit、∫\int、∮\oint

三角函数、对数、指数

tan⁡\tan、sin⁡\sin、cos⁡\cos、lg⁡\lg、arcsin⁡\arcsin、arctan⁡\arctan、min⁡\min、max⁡\max、exp⁡\exp、log⁡\log

运算符

++、−-、==、>>、<<、×\times、÷\div、≡\equiv、≤\leq、≥\geq、≠\neq

集合符号

∪\cup、∩\cap、∈\in、∉\notin、∋\ni、⊂\subset、⊆\subseteq、⊃\supset、⊇\supseteq、N\N、Z\Z、R\R、R\R、∞\infty

按钮组件

<!-- 按钮组件 -->
::btn[标题]{link="URL 链接"}
<!-- 支持类型：info、success、warning、error、import -->
::btn[按钮]{link="链接" type="info"}
按钮 按钮 按钮 按钮 按钮 按钮

Note 组件

<!-- note组件 -->
:::note
这是 note 组件 默认主题
:::
<!-- 支持类型：info、success、warning、error、import -->
:::note{type="info"}
这是 note 组件 success 主题
:::

这是 note 组件 默认主题

这是 note 组件 info 主题

这是 note 组件 success 主题

这是 note 组件 warning 主题

这是 note 组件 error 主题

这是 note 组件 import 主题

Picture 组件

:::picture
![Astro主题-vhAstro-Theme](https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png)
![Astro主题-vhAstro-Theme](https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png)
![Astro主题-vhAstro-Theme](https://i0.wp.com/uxiaohan.github.io/v2/2023/03/42944511.png)
:::
Astro主题-vhAstro-Theme Astro主题-vhAstro-Theme Astro主题-vhAstro-Theme

LivePhoto 组件

<!-- 纵向图片 -->
::vhLivePhoto{photo="https://static.vvhan.com/img/1.webp" video="https://static.vvhan.com/img/1.mp4" type="y"}
<!-- 横向图片 -->
::vhLivePhoto{photo="https://static.vvhan.com/img/2.webp" video="https://static.vvhan.com/img/2.mp4"}

Music 组件

<!-- id 支持：歌曲 id / 歌单 id / 专辑 id / 搜索关键词
type 支持：song, playlist, album, search（默认值：song）
server 支持：netease, tencent, kugou, xiami, baidu（默认值：netease） -->
<!-- 单曲 -->
::vhMusic{id="1474697967"}
<!-- 列表 -->
::vhMusic{id="173901981" type="playlist"}

Video 组件

::vhVideo{url="https://originfastly.jsdelivr.net/gh/uxiaohan/uxiaohan.github.io@master/v2/2022/08/index.m3u8"}
Astro 主题 博客 vhAstro vhAstro-Theme