CatOi 博客主题：基于 vhAstro 的个性化魔改版
「当极简主义遇上工程之美」
项目地址
GitHub 下载（推荐）：https://github.com/uxiaohan/vhAstro-Theme
✨ 功能特性总览
- 🎨 简洁响应式设计（适配多端）
- ✨ 流畅动画与页面过渡
- 🌀 阻尼滚动效果
- 🖼️ 顶部 Banner + 两列布局
- ⏱️ 阅读时间 + 字数统计
- 💻 代码块 & 语法高亮
- 🖼️ 图片懒加载 + 灯箱 + LivePhoto
- 📐 LaTeX 数学公式支持
- 💰 赞赏功能
- 💬 评论系统（Twikoo / Waline）
- 🔍 本地搜索
- 📢 公告系统
📚 内容管理
- 🏷️ 标签 / 📂 分类 / 🗂️ 归档
- 📰 动态 / 👥 圈子
- 🙋 关于 / 💬 留言板 / 🔗 友情链接
- 📌 置顶文章 / 👍 推荐文章
⚙️ 系统能力
- 📢 Google 广告支持
- 🧩 侧边栏模块化展示
- ❌ 内置 404 页面
- 🗺️ Sitemap + 📡 RSS 支持
- 🤝 活跃社区支持
- ⚡ 高性能优化
- 🧑💻 优秀开发体验
🛡️ 安全与保护
- 禁用 F12 / 右键 / 开发者快捷键（防爬虫基础保护）
- 🔒 文章加密（密码访问）
🧠 交互增强
- 📋 复制自动追加版权信息
- 📑 自定义右键菜单
- ✨ 点击彩豆动画特效
- 😊 头像心情 Emoji 显示
📊 监控与统计
- 📈 网站访问统计（Analytics）
- 📊 FPS 帧率实时监测
🎉 个性化功能
- 🖨️ 控制台个性化欢迎信息
- ⏰ 纪念日倒计时组件
🔍 SEO 优化
- 自动推送页面至搜索引擎
在原有“高颜值 + 高性能博客”的基础上，新增了安全防护、交互特效、数据监控与个性化增强功能，整体从「展示型博客」升级为「体验型博客」。
🚀 使用方法
- 使用此模板 生成新仓库或 Fork 此仓库
- 进行本地开发，Clone 新的仓库，执行
pnpm install以安装依赖 - 若未安装 pnpm，执行
npm install -g pnpm - 通过配置文件
src/config.ts自定义博客 - 执行 pnpm newpost ‘文章标题’ 创建新文章，并在 src/content/posts/ 目录中编辑
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
- 部署前需编辑
astro.config.mjs中的站点设置。
📄 文章格式
---
title: 标题
#1.单分类 分类名称 2.单分类+最多三色渐变['分类名称', ['#006633', '#00cc66','#66ff99']] 3.单分类+渐变色['分类名称', 'background-image:linear-gradient(to right, #FFEEEE 0%, #DDEFBB 51%, #FFEEEE 100%)'] 4.多级分类（纯分类路径）['分类名称1', '分类名称2', '分类名称3']
categories: ['分类', 'color']
tags: ['标签1','标签2']
id: 文章ID
date: 文章创建日期
updated: 文章更新日期
cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
recommend: false # 是否推荐文章
top: false # 是否置顶文章
hide: false # 是否隐藏文章
<!-- 页面独有 -->
type: "links" # 页面类型
comment: false # 关闭页面评论（默认开启）
iscopy: false # 是否禁止复制
password: #文章密码，若为空则不需要密码
theme: xray
message: 该文章为加密内容，需要输入正确密码才能进入!
abstract: 请联系作者! #密码框提示信息
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试! #密码错误提示信息
home_message: 这是自定义的首页摘要内容 #首页显示的摘要信息：为空或者无此字段默认不显示
---💻 命令
# 安装依赖
pnpm install
# 本地开发
pnpm dev
# 构建静态文件
pnpm build
# 创建新文章
pnpm newpost '文章标题'🍬 特色页面
友情链接
export default {
// API 接口请求优先，数据格式保持和 data 一致
api: '',
// api 为空则使用 data 静态数据
// 自定义分组格式：group_name + group_icon
// 相同 group_name 的友链会自动归为一组
data: [
{
"group_name": "重要的咪",
"group_icon": "🐱",
"name": "嗷呜星球",
"link": "https://blog.jumaoo.top",
"avatar": "https://jumao-zycs-img.pages.dev/v2/lD3VxUL.png",
"descr": "🐱喵呜～属于一只橘猫的世界."
},
{
"group_name": "友链",
"group_icon": "🔗",
"name": "韩小韩博客",
"link": "https://www.vvhan.com",
"avatar": "https://q1.qlogo.cn/g?b=qq&nk=1655466387&s=640",
"descr": "运气是计划之外的东西."
},
{
"group_name": "友链",
"group_icon": "🔗",
"name": "阳光开朗大男孩",
"link": "https://gysy.ltd/",
"avatar": "https://q1.qlogo.cn/g?b=qq&nk=940658582&s=640",
"descr": "躺平中。。。"
},
{
"group_name": "友链",
"group_icon": "🔗",
"name": "Apex-八尺妖剑",
"link": "https://www.ilikexff.cn/",
"avatar": "https://q1.qlogo.cn/g?b=qq&nk=2217021563&s=640",
"descr": "一个爱玩马超的游戏程序员。"
},
]
}
说说动态
export default {
// API 接口请求优先，数据格式保持和 data 一致
api: '',
// api 为空则使用 data 静态数据
// 注意：图片请用 vh-img-flex 类包裹
// <img src=\" \">
data: [
{
"date": "2025-02-22 12:23:16",
"tags": [
"越南菜",
"越南菜"
],
"content": "与小橘猫吃第一顿饭的<p class=\"vh-img-flex\"><img src=\"https://imgs.catoi.cn/v2/bLBFe1i.jpeg\"></p>"
},
]
}圈子（需部署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活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验。"
}
]
}✅ Lighthouse
🌈 项目结构
● Catoi-vhAstro/
├── 📁 public/ # 静态资源目录
│ └── 📁 assets/
│ ├── 📁 font/ # 字体文件
│ ├── 📁 fonts/ # 字体文件
│ ├── 📁 images/ # 图片资源
│ ├── 📁 js/ # 静态JS文件
│ ├── 📁 json/ # JSON数据
│ └── 📁 livephoto/ # LivePhoto资源
│
├── 📁 src/ # 源代码目录
│ ├── 📁 components/ # 组件目录
│ │ ├── 📁 Archive/ # 归档组件
│ │ ├── 📁 ArticleCard/ # 文章卡片
│ │ ├── 📁 ArticleLock/ # 文章加密
│ │ ├── 📁 Aside/ # 侧边栏
│ │ ├── 📁 BackTop/ # 返回顶部
│ │ ├── 📁 Comment/ # 评论组件
│ │ ├── 📁 Copyright/ # 版权信息
│ │ ├── 📁 Footer/ # 页脚
│ │ ├── 📁 GoogleAd/ # Google广告
│ │ ├── 📁 Head/ # HTML头部
│ │ ├── 📁 Header/ # 顶部导航
│ │ ├── 📁 MainHeader/ # 主页头部
│ │ ├── 📁 MobileSidebar/ # 移动端侧边栏
│ │ ├── 📁 Pagination/ # 分页组件
│ │ ├── 📁 Reward/ # 打赏组件
│ │ ├── 📁 Search/ # 搜索组件
│ │ └── 📁 Svg/ # SVG组件
│ │
│ ├── 📁 content/ # 内容目录
│ │ └── 📁 blog/ # 博客文章(Markdown)
│ │
│ ├── 📁 layouts/ # 布局目录
│ │ ├── 📁 Layout/ # 基础布局
│ │ ├── 📁 PageLayout/ # 页面布局
│ │ └── 📁 ToolLayout/ # 工具布局
│ │
│ ├── 📁 pages/ # 页面目录
│ │ ├── 📁 about/ # 关于页面
│ │ ├── 📁 archives/ # 归档页面
│ │ ├── 📁 article/ # 文章页面
│ │ ├── 📁 categories/ # 分类页面
│ │ ├── 📁 friends/ # 朋友圈
│ │ ├── 📁 links/ # 友链页面
│ │ ├── 📁 message/ # 留言页面
│ │ ├── 📁 tag/ # 标签页面
│ │ └── 📁 talking/ # 说说页面
│ │
│ ├── 📁 page_data/ # 页面数据
│ ├── 📁 plugins/ # 插件目录
│ ├── 📁 scripts/ # 脚本目录
│ ├── 📁 styles/ # 样式目录
│ ├── 📁 type/ # 类型定义
│ └── 📁 utils/ # 工具函数
│
├── 📁 script/ # 脚本目录
├── 📁 .claude/ # Claude配置
├── 📁 .vscode/ # VSCode配置
│
├── 📄 astro.config.mjs # Astro配置
├── 📄 tsconfig.json # TypeScript配置
├── 📄 package.json # 项目依赖
└── 📄 src/config.ts # 站点配置
主要目录说明
┌───────────────────┬──────────────────┐
│ 目 录 │ 说明 │
├───────────────────┼──────────────────┤
│ src/components/ │ 可复用的UI组件 │
├───────────────────┼──────────────────┤
│ src/content/blog/ │ Markdown博客文章 │
├───────────────────┼──────────────────┤
│ src/layouts/ │ 页面布局模板 │
├───────────────────┼──────────────────┤
│ src/pages/ │ 路由页面 │
├───────────────────┼──────────────────┤
│ src/scripts/ │ 客户端交互脚本 │
├───────────────────┼──────────────────┤
│ src/styles/ │ 样式文件 │
├───────────────────┼──────────────────┤
│ public/assets/ │ 静态资源文件 │
└───────────────────┴──────────────────┘
✻ Brewed for 34s⚙️ 项目配置
export default {
// 网站标题
Title: 'CatOi的博客',
// 网站地址
Site: 'https://www.catoi.cn',
// 网站副标题
Subtitle: '晚来白雾氤氲，只一口呷吞，便可梦千里暮云.',
// 网站描述
Description: '打造一个属于个人的生活经历分享平台、用于记录个人生活经历，分享一些学习成果，一起成长、一起进步~。',
// 网站作者
Author: 'CatOi',
// 作者头像
Avatar: 'https://q1.qlogo.cn/g?b=qq&nk=277160461&s=640',
// 头像右下角心情图标 (留空则不显示，使用 emoji 或图标名称)
Mood: '🍟',
// 心情描述 (鼠标悬停时显示)
MoodText: '小橘猫赛高!!!',
// 网站座右铭
Motto: '悟已往之不谏,知来者之可追.',
// Cover 网站缩略图
Cover: '/assets/images/banner/06f04260f04ee5d6.webp',
// 网站侧边栏公告 (不填写即不开启)
Tips: '<p>🍻 欢迎来到我的小角落</p><p>这里记录着一些生活的片段、学习的痕迹以及成长的思考。或许只是零散的文字，但它们见证了前行的每一步。</p><p>感谢你的停留，希望这些内容能陪你走过一段短暂而有趣的时光。</p><p><img class="entered loading" src="/assets/images/tips3.gif" data-ll-status="loading"></p>',
// 广子 (不填写即不开启)
Adcard: '<a href="https://www.baidu.com/" class="vh-aside-adcard" target="_blank" rel="noopener noreferrer" one-link-mark="yes"><img alt="精品大流量卡" class="entered loading" src="/assets/images/ads.webp" data-ll-status="loading"></a>',
//是否启用全站文字禁止复制功能
copyShow: false,
// 复制内容时追加版权信息
CopyRight: {
enable: true,
// 版权信息模板 {content} 为复制内容, {title} 为页面标题, {link} 为页面链接
template: '\n\n🍊内容分享自 {title}\nLink: {link}'
},
// 首页打字机文案列表
TypeWriteList: [
'追逐星辰或许空手而归，但灵魂会被光芒填满。',
"Chasing stars may leave you empty-handed, but it fills your soul with light.",
],
// 网站创建时间
CreateTime: '2025-04-01',
// 纪念日倒计时配置
Countdown: {
enable: true,
// 纪念日名称
name: '我的生日',
// 纪念日日期 (YYYY-MM-DD)
date: '2026-08-15'
},
// 顶部 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: '监测', link: 'https://site.catoi.cn/', target: true, icon: 'Nav_link' },
],
// 侧边栏个人网站
WebSites: [
// 仅支持 SVG 且 SVG 需放在 public/assets/images/svg/ 目录下，填入文件名即可 <不需要文件后缀名>（封装了 SVG 组件 为了极致压缩 SVG）
// 建议使用 https://tabler.io/icons 直接下载 SVG
{ text: 'QQ', link: 'https://qm.qq.com/q/Tre7LZmKS', icon: 'WebSite_qq' },
{ text: 'Github', link: 'https://github.com/shining-orange', icon: 'WebSite_github' },
{ text: 'Sink', link: 'https://sink.catoi.cn/', icon: 'WebSite_hot' },
{ text: '橘子图床', link: 'https://imgs.catoi.cn/', icon: 'WebSite_img' },
{ text: 'Analytics', link: 'http://analytics.catoi.cn', 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: 'url', siteId: 'Hello-DengBlog' },
// 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'
},
// 访问网页 自动推送到搜索引擎
SeoPush: {
enable: false,
serverApi: '',
paramsName: 'url'
},
// 页面阻尼滚动速度
ScrollSpeed: 666
}🌈 组件
修改默认标签配色
.
├── src
│ ├── components
│ │ ├── ArticleCard
│ │ │ ├── ArticleCard.less
└───────────────────────────────.已集成自定义标签与配色
- 单分类（纯字符串）
title: "文章标题"
categories: 待办- 单分类 + 三色渐变
title: "文章标题"
categories: ['分类名称', ['#006633', '#00cc66', '#66ff99']]示例：
categories: ['日常', ['#6270ee', '#2b90d9', '#37dede']]
categories: ['代码', ['#f48600', '#ffa12e', '#ffe9c9']]
categories: ['分享', ['rgb(240, 45, 133)', '#f95ba5', '#f4bdd0']]- 单分类 + 渐变色 CSS
title: "文章标题"
categories: ['分类名称', 'background-image: linear-gradient(to right, #颜色1 0%, #颜色2 51%, #颜色3
100%)']示例：
categories: ['魔改', 'background-image: linear-gradient(to right, #fc00ff 0%, #00dbde 51%, #fc00ff
100%)']
categories: ['文档', 'background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1
42%, #b49fda 79%, #7ac5d8 100%)']- 多级分类（嵌套路径）
title: "文章标题"
categories: ['一级分类', '二级分类', '三级分类']渐变色生成工具推荐
- https://cssgradient.io/
- https://webgradients.com/
- https://webkul.github.io/coolhue/修改灯箱插件的范围
.
├── src
│ ├── scripts
│ │ ├── ViewImage.ts
└───────────────────────.import { LoadScript } from "@/utils/index";
// 图片灯箱
declare const ViewImage: any;
const ViewImgList: string[] = [
// 文章内图片
"article.vh-article-main img.vh-article-img",
"article.vh-article-main img",
// 动态页面图片
"main.talking-main>article>.main img",
// Twikoo 评论区图片
".vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.OwO-item img,.tk-owo-emotion)",
// Waline 评论区图片
".vh-comment div[data-waline] img:not(.wl-user-avatar,.wl-avatar img,.wl-reaction-list img,.wl-panel img,.tk-owo-emotion,.wl-emoji)"
];
// 初始化
export default async () => {
try {
ViewImage.init(ViewImgList.join(","));
} catch (error) {
await LoadScript("/assets/js/view-image.min.js");
ViewImage.init(ViewImgList.join(","));
}
}文本加粗
那个女孩子 **气喘吁吁** 的打电话和你说：我在跑步那个女孩子 气喘吁吁 的打电话和你说：我在跑步
文本倾斜
你问她为什么有 _啪啪啪_ 的声音，她和你说：我是穿拖鞋跑步的你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的
文本删除
你说，好的那你继续 ~~跑步~~ 吧你说，好的那你继续 跑步 吧
行内代码
`Vscode` 是全宇宙最好的编辑器Vscode 是全宇宙最好的编辑器
引用
> 这是一个引用这是一个引用
有序列表
牛肉的的营养如下：
1. 能量 (kcal)
2. 脂类 (fat)
3. 蛋白质 (protein)
4. 碳水化合物 (carbohydrate)牛肉的的营养如下：
- 能量 (kcal)
- 脂类 (fat)
- 蛋白质 (protein)
- 碳水化合物 (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
##### H5H2
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$函数式
四则运算
希腊字母
、、、、、、、、、
三角函数、对数、指数
、、、、、、、、、
运算符
、、、、、、、、、、
集合符号
、、、、、、、、、、、、、
按钮组件
<!-- 按钮组件 -->
::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
:::自定义样式
:::picture
<img style="zoom:99%;display: block;max-width: 100%;margin: 0px auto 20px;transition: filter 375ms ease-in 0.2s;" src="https://imgs.catoi.cn/v2/Fjn7Ahg.png" alt="图片名称" />
:::
//article-img-center内置了除zoom:99%;外的其他元素
:::picture
<img class="article-img-center" style="zoom:99%;" src="https://imgs.catoi.cn/v2/Fjn7Ahg.png" alt="图片名称" />
:::
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="1078154441" type="playlist" server="tencent"}Video 组件
::vhVideo{url="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b1273328-bbc3-4c0a-8289-b9e9d35cea16/1cb6caed-bd47-4b9b-bcd1-33377aeb6f03.mp4"}