Astro主題-優雅的vhAstro-Theme【使用文檔】
發佈於 | 分類於 Code
:::note{type="success"} 🥝 從 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）
✨ 功能特性
- [x] 簡潔的響應式設計
- [x] 流暢的動畫和頁面過渡
- [x] 絲滑的阻尼滾動效果
- [x] 頂部Banner
- [x] 兩列佈局
- [x] 閱讀時間
- [x] 字數統計
- [x] 代碼塊
- [x] 語法高亮
- [x] 圖片懶加載
- [x] 圖片燈箱
- [x] LivePhoto
- [x] LaTex 數學公式
- [x] 贊賞功能
- [x] 評論 - 內置【Twikoo、Waline】
- [x] 本地搜索
- [x] 公告
- [x] 標籤
- [x] 分類
- [x] 歸檔
- [x] 動態
- [x] 圈子
- [x] 關於
- [x] 留言板
- [x] 友情鏈接
- [x] 推薦文章
- [x] 置頂文章
- [x] 谷歌廣告
- [x] 側邊欄選擇性展示
- [x] 內置 404 頁面
- [x] Sitemap 支持
- [x] RSS 支持
- [x] 活躍的社區支持
- [x] 廣泛的現代框架兼容性
- [x] 高效的性能優化
- [x] 優秀的開發體驗
🚀 使用方法
使用 Github 模板
- 使用此模板 生成新倉庫或 Fork 此倉庫
- 進行本地開發，Clone 新的倉庫，執行
pnpm install以安裝依賴 - 若未安裝 pnpm，執行
npm install -g pnpm - 通過配置文件
src/config.ts自定義博客 - 執行 pnpm newpost '文章標題' 創建新文章，並在 src/content/posts/ 目錄中編輯
- 參考官方指南將博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
Vercel 自動部署
::btn[Vercel 一鍵部署]{link="https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme"}
Cloudflare Pages 自動部署
::btn[Cloudflare Pages 一鍵部署]{link="https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/uxiaohan/vhAstro-Theme" type="warning"}
其他更多部署方式（簡簡單單閉眼部署），請參考 Astro 官方文檔。
使用命令拉取模板
bash
# 使用 pnpm
pnpm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog
# 或者 yarn
yarn create astro --template uxiaohan/vhAstro-Theme astro-blog
# 或者 npm
npm create astro@latest -- --template uxiaohan/vhAstro-Theme astro-blog
# 進入項目目錄
cd astro-blog本地開發
bash
# 安裝依賴
pnpm install
# 本地開發
pnpm dev
# 構建靜態文件
pnpm build
# 創建新文章
pnpm newpost '文章標題'⚠️ Hexo 遷移 Astro 方法
:::note{type="success"} 將 Hexo 博客的 src/_posts/ 目錄下的文章文件，複製到 Astro 的 src/content/blog/ 目錄下即可，然後自定義 src/config.ts 配置文件去自定義博客。
⚠️ Hexo 的部署、使用、自動化部署等方法 完全適用於 Astro 博客！
🎉 此時，你已成功遷移 Hexo 博客至 Astro 博客！ :::
🍬 特色頁面
友情鏈接
js
// 配置文件 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數據接口調用服務平台."
}
]
};說說動態
js
// 配置文件 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）
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活躍的社區支持、廣泛的現代框架兼容性、高效的性能優化、優秀的開發體驗。"
}
]
}📄 文章格式
md
---
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
🌈 項目結構
t
.
├── public => 靜態資源
├── script => 命令
├── src
│ ├── components => 組件
│ ├── content
│ │ └── blog => 博客文章數據
│ ├── layouts => Layout 佈局
│ ├── page_data => 頁面數據
│ ├── pages
│ │ ├── about => 關於頁面
│ │ ├── archives => 歸檔頁面
│ │ ├── article => 文章頁面
│ │ ├── categories => 分類頁面
│ │ ├── friends => 圈子頁面
│ │ ├── links => 友鏈頁面
│ │ ├── message => 留言頁面
│ │ ├── tag => 標籤頁面
│ │ ├── talking => 動態頁面
│ │ ├── [...page].astro => 首頁分頁
│ │ ├── 404.astro => 404頁面
│ │ ├── robots.txt.ts => 爬蟲文件
│ │ └── rss.xml.ts => RSS文件
│ ├── plugins => 插件
│ ├── scripts => 腳本
│ ├── styles => 樣式
│ ├── type => 類型
│ ├── utils => 工具
│ ├── content.config.ts => 內容配置
│ ├── config.ts => 配置
├── tsconfig.json => Typescript 配置
├── astro.config.mjs => Astro 配置
├── package.json => 依賴管理
└── pnpm-lock.yaml => 依賴鎖定文件⚙️ 項目配置
js
export default {
// 網站標題
Title: '韓小韓博客',
// 網站地址
Site: 'https://www.vvhan.com',
// 網站副標題
Subtitle: '不曾與你分享的時間,我在進步.',
// 網站描述
Description: '韓小韓博客 專注於前開發與相關技術的實戰分享，涵蓋Vue框架、Node.js、Serverless等，並涉及Node、Python、Linux、Docker等領域。同時，博客也分享作者的生活、音樂和旅行的熱愛。',
// 網站作者
Author: '.𝙃𝙖𝙣',
// 作者頭像
Avatar: 'https://q1.qlogo.cn/g?b=qq&nk=1655466387&s=640',
// 網站座右銘
Motto: '運氣是計劃之外的東西.',
// Cover 網站縮略圖
Cover: '/assets/images/banner/072c12ec85d2d3b5.webp',
// 網站側邊欄公告 (不填寫即不開啟)
Tips: '<p>歡迎光臨我的博客 🎉</p><p>這裡會分享我的日常和學習中的收集、整理及總結，希望能對你有所幫助:) 💖</p>',
// 首頁打字機文案列表
TypeWriteList: [
'不曾與你分享的時間,我在進步.',
"I am making progress in the time I haven't shared with you.",
],
// 網站創建時間
CreateTime: '2021-09-01',
// 頂部 Banner 配置
HomeBanner: {
enable: true,
// 首頁高度
HomeHeight: '38.88rem',
// 其他頁面高度
PageHeight: '28.88rem',
// 背景
background: "url('/assets/images/home-banner.webp') no-repeat center 60%/cover",
},
// 博客主題配置
Theme: {
// 顏色請用 16 進制顏色碼
// 主題顏色
"--vh-main-color": "#01C4B6",
// 字體顏色
"--vh-font-color": "#34495e",
// 側邊欄寬度
"--vh-aside-width": "318px",
// 全局圓角
"--vh-main-radius": "0.88rem",
// 主體內容寬度
"--vh-main-max-width": "1458px",
},
// 導航欄 (新窗口打開 newWindow: true)
Navs: [
// 僅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目錄下，填入文件名即可 <不需要文件後綴名>（封裝了 SVG 組件 為了極致壓縮 SVG）
// 建議使用 https://tabler.io/icons 直接下載 SVG
{ text: '朋友', link: '/links', icon: 'Nav_friends' },
{ text: '圈子', link: '/friends', icon: 'Nav_rss' },
{ text: '動態', link: '/talking', icon: 'Nav_talking' },
{ text: '昔日', link: '/archives', icon: 'Nav_archives' },
{ text: '留言', link: '/message', icon: 'Nav_message' },
{ text: '關於', link: '/about', icon: 'Nav_about' },
{ text: 'API', link: 'https://api.vvhan.com/', target: true, icon: 'Nav_link' },
],
// 側邊欄個人網站
WebSites: [
// 僅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目錄下，填入文件名即可 <不需要文件後綴名>（封裝了 SVG 組件 為了極致壓縮 SVG）
// 建議使用 https://tabler.io/icons 直接下載 SVG
{ text: 'Github', link: 'https://github.com/uxiaohan', icon: 'WebSite_github' },
{ text: '韓小韓API', link: 'https://api.vvhan.com', icon: 'WebSite_api' },
{ text: '每日熱榜', link: 'https://hot.vvhan.com', icon: 'WebSite_hot' },
{ text: '驟雨重山圖床', link: 'https://wp-cdn.4ce.cn', icon: 'WebSite_img' },
{ text: 'HanAnalytics', link: 'https://analytics.vvhan.com', icon: 'WebSite_analytics' },
],
// 側邊欄展示
AsideShow: {
// 是否展示個人網站
WebSitesShow: true,
// 是否展示分類
CategoriesShow: true,
// 是否展示標籤
TagsShow: true,
// 是否展示推薦文章
recommendArticleShow: true
},
// DNS預解析地址
DNSOptimization: [
'https://i0.wp.com',
'https://cn.cravatar.com',
'https://analytics.vvhan.com',
'https://vh-api.4ce.cn',
'https://registry.npmmirror.com',
'https://pagead2.googlesyndication.com'
],
// 博客音樂組件解析接口
vhMusicApi: 'https://vh-api.4ce.cn/blog/meting',
// 評論組件（只允許同時開啟一個）
Comment: {
// Twikoo 評論
Twikoo: {
enable: false,
envId: ''
},
// Waline 評論
Waline: {
enable: false,
serverURL: ''
}
},
// Han Analytics 統計（https://github.com/uxiaohan/HanAnalytics）
HanAnalytics: { enable: true, server: 'https://analytics.vvhan.com', siteId: 'Hello-HanHexoBlog' },
// Google 廣告
GoogleAds: {
ad_Client: '', //ca-pub-xxxxxx
// 側邊欄廣告(不填不開啟)
asideAD_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>`,
// 文章頁廣告(不填不開啟)
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>`
},
// 文章內贊賞碼
Reward: {
// 支付寶收款碼
AliPay: '/assets/images/alipay.webp',
// 微信收款碼
WeChat: '/assets/images/wechat.webp'
},
// 頁面阻尼滾動速度
ScrollSpeed: 666
}🌈 組件
文本加粗
md
那個女孩子 **氣喘吁吁** 的打電話和你說：我在跑步那個女孩子 氣喘吁吁 的打電話和你說：我在跑步
文本傾斜
md
你問她為什麼有 _啪啪啪_ 的聲音，她和你說：我是穿拖鞋跑步的你問她為什麼有 啪啪啪 的聲音，她和你說：我是穿拖鞋跑步的
文本刪除
md
你說，好的那你繼續 ~~跑步~~ 吧你說，好的那你繼續 跑步 吧
行內代碼
md
`Vscode` 是全宇宙最好的編輯器Vscode 是全宇宙最好的編輯器
引用
md
> 這是一個引用這是一個引用
有序列表
md
牛肉的的營養如下：
1. 能量 (kcal)
2. 脂類 (fat)
3. 蛋白質 (protein)
4. 碳水化合物 (carbohydrate)牛肉的的營養如下：
- 能量 (kcal)
- 脂類 (fat)
- 蛋白質 (protein)
- 碳水化合物 (carbohydrate)
無序列表
md
- 一個女朋友
- 二個女朋友
- 三個女朋友
- ...
- N 個女朋友- 一個女朋友
- 二個女朋友
- 三個女朋友
- ...
- N 個女朋友
超鏈接
md
[百度一下，你就懂了](https://www.baidu.com)3 行 3 列的表格
md
| 表頭 | 表頭 | 表頭 |
| :--: | :--: | :--: |
| 雞頭 | 鴨頭 | 狗頭 |
| 雞頭 | 鴨頭 | 狗頭 |
| 雞頭 | 鴨頭 | 狗頭 || 表頭 | 表頭 | 表頭 |
|---|---|---|
| 雞頭 | 鴨頭 | 狗頭 |
| 雞頭 | 鴨頭 | 狗頭 |
| 雞頭 | 鴨頭 | 狗頭 |
代碼塊
javascript
const obj = {
name: "hi",
age: 18
};
// 判斷某個屬性是否在對象裡
console.log("name" in obj);
// 刪除對象某個屬性
console.log(delete obj.name);
// 將對象的屬性名提取成數組
console.log(Object.keys(obj));H 標籤
md
<!-- H標籤，頁面標題即h1，不建議文章內使用h1標籤 -->
## H2
### H3
#### H4
##### H5H2
H3
H4
H5
數學公式
latex
% 函數式
${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)=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$
按鈕組件
md
<!-- 按鈕組件 -->
::btn[標題]{link="URL 鏈接"}
<!-- 支持類型：info、success、warning、error、import -->
::btn[按鈕]{link="鏈接" type="info"}::btn[按鈕]{link="https://www.baidu.com"} ::btn[按鈕]{link="https://www.baidu.com" type="info"} ::btn[按鈕]{link="https://www.baidu.com" type="success"} ::btn[按鈕]{link="https://www.baidu.com" type="warning"} ::btn[按鈕]{link="https://www.baidu.com" type="error"} ::btn[按鈕]{link="https://www.baidu.com" type="import"}
Note 組件
md
<!-- note組件 -->
:::note
這是 note 組件 默認主題
:::
<!-- 支持類型：info、success、warning、error、import -->
:::note{type="info"}
這是 note 組件 success 主題
::::::note 這是 note 組件 默認主題 :::
:::note{type="info"} 這是 note 組件 info 主題 :::
:::note{type="success"} 這是 note 組件 success 主題 :::
:::note{type="warning"} 這是 note 組件 warning 主題 :::
:::note{type="error"} 這是 note 組件 error 主題 :::
:::note{type="import"} 這是 note 組件 import 主題 :::
Picture 組件
md
:::picture
::::::picture 
:::
LivePhoto 組件
md
<!-- 縱向圖片 -->
::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"}::vhLivePhoto
::vhLivePhoto
Music 組件
md
<!-- 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"}::vhMusic{id="1474697967"} ::vhMusic
Video 組件
md
::vhVideo{url="https://originfastly.jsdelivr.net/gh/uxiaohan/uxiaohan.github.io@master/v2/2022/08/index.m3u8"}::vhVideo{url="https://originfastly.jsdelivr.net/gh/uxiaohan/uxiaohan.github.io@master/v2/2022/08/index.m3u8"}
覺得有用？請我喝杯咖啡 ☕
如果文章對你有幫助，歡迎支持一下~
