欢迎使用 Anheyu-App！
欢迎使用 Anheyu-App！
Ai极客派欢迎使用 Anheyu-App
这是一篇系统生成的默认文章，你可以编辑或删除它。
段落文本 p
1 | <font color=#00ffff size=7> color=#00ffff </font> |
:::tabs
== tab 标签语法
1 | <font color=#00ffff size=7> color=#00ffff </font> |
== tab 配置参数
颜色: color 十六进制值
大小: size 数字值(number)
p 标签支持写 自定义 css
== tab 样式预览
color=#00ffff我是居中文字
== tab 示例源码
1 | <font color=#00ffff size=7> color=#00ffff </font> |
:::
🤖 基本演示
加粗，下划线，斜体，删除线，上标^26^，下标~1~，inline code，超链接
引用：《I Have a Dream》
- So even though we face the difficulties of today and tomorrow, I still have a dream.
- It is a dream deeply rooted in the American dream.
- I have a dream that one day this nation will rise up.
- [ ] 周五
- [ ] 周六
- [x] 周天
🤗 代码演示
1 | <template> |
🖨 文本演示
依照普朗克长度这项单位，目前可观测的宇宙的直径估计值（直径约 930 亿光年，即 8.8 × 10^26^ 米）即为 5.4 × 10^61^倍普朗克长度。而可观测宇宙体积则为 8.4 × 10^184^立方普朗克长度（普朗克体积）。
📈 表格演示
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 左对齐 | 中间对齐 | 右对齐 |
📏 公式
行内：$x+y^{2x}$
🧬 图表
1 | flowchart TD |
1 | --- |
🪄 提示
!!! success 支持的类型
note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
!!!
折叠框
- 折叠框
::: folding
查看详情
这是折叠框的内容
::: - 默认打开的折叠框
::: folding open
查看默认打开的折叠框
这是一个默认打开的折叠框。
::: - 带十六进制颜色
::: folding #ca1b1b
查看红色折叠框
这是一个红色主题的折叠框。
::: - 带颜色且默认打开
::: folding open #ca1b1b
查看默认打开的红色折叠框
这是一个默认打开的红色折叠框。
:::
隐藏块
:::hidden display=查看答案 bg=#FF7242 color=#fff
傻子，怎么可能有答案
:::
这是一个谜语：为什么西装很酷？{hide display=查看答案 bg=#FF7242 color=#fff}因为西装裤(C 装酷){/hide}
文本
这是{u}带下划线的文本{/u}
这是{emp}带着重号的文本{/emp}
这是{wavy}带波浪线的文本{/wavy}
这是{del}带删除线的文本{/del}
按{kbd}command + D{/kbd}可以复制当前行
密码是：{psw}这里没有验证码{/psw}
这是{u color=#FF0000}红色下划线{/u}文本
这是{emp color=#0066FF}蓝色着重号{/emp}文本
这是{wavy color=#00CC66}绿色波浪线{/wavy}文本
这是{del color=#9933FF}紫色删除线{/del}文本
按{kbd color=#FF6600}Ctrl + C{/kbd}复制
密码：{psw color=#FF69B4}secret123{/psw}
按钮
:::tabs active=3
== tab 标签语法
1 | {btn url=链接地址 text=按钮文字}{/btn} |
== tab 配置参数
必填参数：
url: 链接地址text: 按钮文字
可选参数：
icon: 图标（可选，默认：anzhiyu-icon-circle-arrow-right），支持三种格式：- AnZhiYu 图标：如
anzhiyu-icon-github、anzhiyu-icon-circle-arrow-right。查看所有可用图标：AnZhiYu 图标库 - Iconify 图标：如
simple-icons:github、mdi:arrow-right-circle（格式为prefix:name）。查看所有可用图标：Iconify 图标库 - 图片链接：支持 http:// 或 https:// 开头的图片 URL
- AnZhiYu 图标：如
color: 颜色主题- default（默认主题色）
- blue（蓝色）
- pink（粉色）
- red（红色）
- purple（紫色）
- orange（橙色）
- green（绿色）
style: 按钮样式- 留空（实心按钮，默认）
- outline（空心按钮）
layout: 布局方式- 留空（行内布局，默认）
- block（块级布局）
position: 按钮位置（仅 layout=block 时有效）- 留空（左对齐，默认）
- center（居中）
- right（右对齐）
size: 按钮大小- 留空（普通大小，默认）
- larger（大号按钮）
== tab 样式预览
基础按钮
{btn url=https://blog.anheyu.com/ text=AnZhiYu}{/btn}
颜色主题
{btn url=# text=Default}{/btn}
{btn url=# text=Blue color=blue}{/btn}
{btn url=# text=Pink color=pink}{/btn}
{btn url=# text=Red color=red}{/btn}
{btn url=# text=Purple color=purple}{/btn}
{btn url=# text=Orange color=orange}{/btn}
{btn url=# text=Green color=green}{/btn}
空心按钮
{btn url=# text=Default style=outline}{/btn}
{btn url=# text=Blue color=blue style=outline}{/btn}
{btn url=# text=Pink color=pink style=outline}{/btn}
{btn url=# text=Green color=green style=outline}{/btn}
块级按钮（左中右）
{btn url=# text=左对齐按钮 layout=block}{/btn}
{btn url=# text=居中按钮 layout=block position=center}{/btn}
{btn url=# text=右对齐按钮 layout=block position=right}{/btn}
大号按钮
{btn url=# text=大号实心按钮 color=purple size=larger}{/btn}
{btn url=# text=大号空心按钮 color=orange style=outline size=larger}{/btn}
自定义图标
{btn url=https://github.com text=GitHub icon=anzhiyu-icon-github color=blue}{/btn}
{btn url=# text=下载 icon=anzhiyu-icon-download color=green}{/btn}
== tab 示例源码
1 | <!-- 基础用法 --> |
== tab 高级技巧
响应式按钮组
在移动端和桌面端都能良好展示的按钮组合：
{btn url=#feature1 text=功能一 color=blue}{/btn}
{btn url=#feature2 text=功能二 color=green}{/btn}
{btn url=#feature3 text=功能三 color=orange}{/btn}
行动号召按钮
突出重要操作的大号居中按钮：
{btn url=#start text=立即开始使用 color=purple layout=block position=center size=larger}{/btn}
次要操作按钮
使用空心样式表示次要操作：
{btn url=#learn text=了解更多 style=outline layout=block position=center}{/btn}
== tab 最佳实践
颜色选择
- 主要操作用实心按钮（默认、blue、green）
- 次要操作用空心按钮（outline）
- 警告操作用 red 或 orange
- 特殊强调用 pink 或 purple
布局建议
- 多个按钮并排时使用行内布局（默认）
- 单个重要按钮使用块级居中布局
- 表单提交按钮使用块级布局
尺寸使用
- 普通内容使用默认尺寸
- 重要行动号召使用 larger 尺寸
- 移动端考虑使用 larger 增加点击区域
图标规范
:::
按钮组
:::tabs active=3
== tab 标签语法
1 | :::btns |
完整格式：
1 | :::btns cols=列数 style=样式 |
== tab 配置参数
容器参数（在 :::btns 后指定）：
cols: 列数，默认为 3，范围 1-6style: 样式风格，可选default、card、simple
按钮参数：
icon: 图标（必填），支持三种格式：- AnZhiYu 图标：使用 AnZhiYu 图标字体类名，如
anzhiyu-icon-github、anzhiyu-icon-user-3-fill。查看所有可用图标：AnZhiYu 图标库 - Iconify 图标：使用 Iconify 格式
prefix:name，如simple-icons:github、ri:user-3-fill、simple-icons:bilibili。查看所有可用图标：Iconify 图标库 - 图片链接：支持 http:// 或 https:// 开头的图片 URL
- AnZhiYu 图标：使用 AnZhiYu 图标字体类名，如
title: 按钮标题（必填）url: 链接地址，默认为#desc: 描述文字（可选）color: 按钮颜色（可选）- blue（蓝色）
- pink（粉色）
- red（红色）
- purple（紫色）
- orange（橙色）
- green（绿色）
== tab 样式预览
团队成员展示
:::btns cols=3
- icon=ri:user-3-fill title=安知鱼 url=https://blog.anheyu.com desc=创始人·全栈开发 color=blue
- icon=ri:user-3-fill title=张小明 url=# desc=前端工程师 color=green
- icon=ri:user-3-fill title=李小红 url=# desc=UI/UX 设计师 color=pink
- icon=ri:user-3-fill title=王小刚 url=# desc=后端工程师 color=purple
- icon=ri:user-3-fill title=刘小丽 url=# desc=产品经理 color=orange
- icon=ri:user-3-fill title=赵小强 url=# desc=测试工程师 color=red
:::
友情链接（4 列）
:::btns cols=4
- icon=mdi:link title=安知鱼博客 url=https://blog.anheyu.com desc=技术分享与生活记录
- icon=mdi:link title=Hexo url=https://hexo.io desc=快速、简洁的博客框架
- icon=mdi:link title=Vue.js url=https://vuejs.org desc=渐进式 JavaScript 框架
- icon=mdi:link title=TypeScript url=https://www.typescriptlang.org desc=JavaScript 的超集
:::
社交媒体链接（5 列）
:::btns cols=5
- icon=simple-icons:github title=GitHub url=https://github.com color=blue
- icon=mdi:twitter title=Twitter url=https://twitter.com color=blue
- icon=simple-icons:bilibili title=Bilibili url=https://bilibili.com color=pink
- icon=mdi:wechat title=微信 url=# color=green
- icon=simple-icons:tencentqq title=QQ url=# color=blue
:::
简单列表（2 列）
:::btns cols=2
- icon=mdi:file-document-outline title=文档 url=# desc=查看完整文档 color=blue
- icon=simple-icons:github title=源码 url=# desc=GitHub 仓库 color=purple
:::
== tab 使用示例
示例 1：团队成员页面
展示团队成员信息，使用 3 列布局：
1 | :::btns cols=3 |
示例 2：项目展示
展示多个项目，使用 4 列布局：
1 | :::btns cols=4 |
示例 3：合作伙伴
不使用描述，只显示图标和标题：
1 | :::btns cols=6 |
示例 4：使用图片作为图标
icon 支持 https 图片链接，显示为圆形头像：
1 | :::btns cols=4 |
== tab 最佳实践
1. 列数选择
- 2 列: 适合内容较多的项目，需要更多空间展示描述
- 3 列: 最常用的布局，适合团队成员、服务介绍等
- 4 列: 适合友情链接、合作伙伴等
- 5-6 列: 适合社交媒体图标、简单链接等
2. 图标使用
- 支持 AnZhiYu 图标库（查看图标）和 Iconify 图标库（查看图标）
- 保持同一组按钮使用相同系列的图标
- 团队成员建议使用
ri:user-3-fill、mdi:account或anzhiyu-icon-user-*系列 - 社交媒体使用对应的品牌图标（如
simple-icons:github、simple-icons:bilibili或anzhiyu-icon-github） - 链接使用
mdi:link、mdi:open-in-new或anzhiyu-icon-link、anzhiyu-icon-external-link
3. 颜色搭配
- 团队成员可以使用不同颜色区分角色
- 同类型链接建议使用相同颜色
- 重要项目可以使用
blue或purple突出显示
4. 描述文字
- 描述文字应该简短精炼（10-20 字为佳）
- 如果内容较长，考虑使用 2 列布局
- 纯图标导航可以省略描述
5. 响应式注意事项
- 移动端会自动调整为更少的列数
- 6 列布局在移动端可能显示为 2-3 列
- 建议测试移动端效果
:::
tab 分栏
:::tabs
== tab 标签语法
1 | :::tabs |
指定默认选中
1 | :::tabs active=2 |
== tab 配置参数
基础语法：
- 使用
:::tabs开始标签容器 - 使用
== tab 标题标记每个标签页 - 使用
:::结束标签容器
可选参数：
active=数字: 指定默认激活的标签（从 1 开始计数）- 不设置时默认激活第一个标签
- 数字超出范围会降级为第一个标签
- 示例：
:::tabs active=2表示默认激活第二个标签
内容支持：
- ✅ 完整的 Markdown 语法
- ✅ 代码块（支持语法高亮）
- ✅ 图片、链接
- ✅ 列表、表格
- ✅ 其他插件（按钮、隐藏内容、折叠框等）
注意事项：
:::tabs和:::必须独占一行== tab必须在行首- 标签标题不能为空
== tab 样式预览
基础标签切换
可以在不同标签页之间切换内容，第一个标签默认选中。
带按钮的标签
标签页内可以包含按钮：
{btn url=#demo text=在线演示 color=blue}{/btn}
{btn url=#docs text=查看文档 color=green}{/btn}
带代码的标签
标签页内可以包含代码块：
1 | console.log("Hello World"); |
带隐藏内容的标签
标签页内可以使用隐藏内容：
{hide display=查看答案}这是隐藏的内容{/hide}
带文本样式的标签
标签页内可以使用各种文本样式：
{u}下划线{/u}、{emp}着重号{/emp}、{wavy}波浪线{/wavy}、{del}删除线{/del}
== tab 最佳实践
1. 标签标题命名
- ✅ 简洁明了：HTML、CSS、JavaScript
- ✅ 长度建议：2-8 个字
- ✅ 避免特殊符号
- ❌ 不要过长：如何在 Windows 系统上完成安装
2. 标签数量建议
- ✅ 推荐 2-6 个标签
- ⚠️ 超过 6 个考虑拆分内容
- ❌ 避免只有 1 个标签
3. 内容组织
- 第一个标签放最常用内容
- 使用
active参数突出重点 - 相关内容归为一组
- 保持各标签内容量均衡
4. 默认激活策略
active=1：最常用、最基础的内容active=2或更后：进阶内容、特殊场景- 教程类：从第一个开始
- 对比类：激活最推荐的选项
5. 嵌套建议
- ✅ 可嵌套：折叠框、隐藏内容、按钮
- ✅ 可嵌套：文本样式插件
- ⚠️ 谨慎嵌套：Tabs 嵌套 Tabs（不超过 2 层）
- ❌ 避免过度嵌套导致结构混乱
6. 响应式考虑
- 标签按钮会自动换行适配移动端
- 移动端建议使用较短的标题
- 保持标题长度一致更美观
7. 代码块处理
- 代码块中的
:::和== tab会被正确忽略 - 可以安全地在代码块内展示 Tabs 语法
- 代码块结束标记必须是纯
```
:::
图片组
图片组插件可以创建美观的网格布局图片展示，非常适合展示作品集、相册、产品图等。
:::tabs active=3
== tab 标签语法
1 | :::gallery |
带参数：
1 | :::gallery cols=列数 gap=间距 ratio=宽高比 |
== tab 配置参数
容器参数（在 :::gallery 后指定）：
cols: 列数，默认为 3，范围 1-6gap: 图片间距，默认为 10px（支持 px、rem、em 单位）ratio: 图片宽高比（如 16:9、1:1），不设置则自适应图片原始尺寸
图片格式支持：
Markdown 图片语法（推荐）
1
HTML img 标签
1
<img src="图片URL" alt="替代文本" title="图片标题" />
参数格式
1
url=图片 URL alt=替代文本 title=图片标题 desc=图片描述
常用宽高比：
1:1- 正方形16:9- 宽屏4:3- 传统屏幕3:2- 照片常用比例
== tab 样式预览
基础三列图片组
:::gallery
:::
四列照片墙
:::gallery cols=4 gap=8px
:::
正方形图片组（1:1）
:::gallery cols=3 ratio=1:1
:::
宽屏比例（16:9）
:::gallery cols=2 ratio=16:9 gap=20px
:::
单列大图展示
:::gallery cols=1
:::
== tab 使用示例
示例 1：作品集展示
1 | :::gallery cols=3 ratio=1:1 |
示例 2：视频封面展示
1 | :::gallery cols=2 ratio=16:9 gap=20px |
示例 3：产品展示
1 | :::gallery cols=4 |
示例 4：活动海报
1 | :::gallery cols=1 |
:::
LinkCard
LinkCard 插件可以创建美观的链接卡片，用于展示外部链接信息。
LinkCard 基础用法
{linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard}
1 | {linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard} |
自定义图标
字体图标
{linkcard url=https://github.com title=GitHub sitename=代码托管平台 icon=anzhiyu-icon-github}{/linkcard}
1 | {linkcard url=https://github.com title=GitHub sitename=代码托管平台 icon=anzhiyu-icon-github}{/linkcard} |
HTTP 图标链接
{linkcard url=https://www.google.com title=Google sitename=搜索引擎 icon=https://www.google.com/favicon.ico}{/linkcard}
{linkcard url=https://github.com title=GitHub sitename=代码托管平台 icon=https://github.githubassets.com/favicons/favicon.png}{/linkcard}
1 | {linkcard url=https://www.google.com title=Google sitename=搜索引擎 icon=https://www.google.com/favicon.ico}{/linkcard} |
自定义提示文本
{linkcard url=https://www.google.com title=Google sitename=搜索引擎 tips=访问搜索引擎}{/linkcard}
1 | {linkcard url=https://www.google.com title=Google sitename=搜索引擎 tips=访问搜索引擎}{/linkcard} |
完整示例
{linkcard url=https://docs.anheyu.com title=AnZhiYu 文档 sitename=AnZhiYu Docs icon=anzhiyu-icon-book tips=查看完整文档}{/linkcard}
1 | {linkcard url=https://docs.anheyu.com title=AnZhiYu 文档 sitename=AnZhiYu Docs icon=anzhiyu-icon-book tips=查看完整文档}{/linkcard} |
多个链接卡片
{linkcard url=https://blog.anheyu.com title=安知鱼博客 sitename=AnZhiYu Blog}{/linkcard}
{linkcard url=https://github.com/anzhiyu-c title=AnZhiYu GitHub sitename=GitHub Repository icon=https://github.githubassets.com/favicons/favicon.png}{/linkcard}
{linkcard url=https://www.bilibili.com title=哔哩哔哩 sitename=B 站 icon=https://www.bilibili.com/favicon.ico tips=观看视频}{/linkcard}
1 | {linkcard url=https://blog.anheyu.com title=安知鱼博客 sitename=AnZhiYu Blog}{/linkcard} |
参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| url | 链接地址 | string | - | # |
| title | 链接标题 | string | - | 链接标题 |
| sitename | 网站名称 | string | - | 网站名称 |
| icon | 图标（字体图标类名或图片链接） | string | 字体图标类名或 HTTP 图片链接 | anzhiyu-icon-link |
| tips | 提示文本 | string | - | 引用站外地址 |
注意事项
- 链接会在新标签页中打开
- 自动添加
rel="external nofollow noreferrer"属性 - 图标支持两种方式：
- 字体图标：使用 AnZhiYu 图标字体类名（如
anzhiyu-icon-github） - 图片图标：使用 HTTP/HTTPS 图片链接（如网站 favicon）
- 字体图标：使用 AnZhiYu 图标字体类名（如
- 图片图标会自动调整为 20x20 像素，带圆角效果
- 卡片具有悬停效果和点击反馈
- 适合用于推荐相关链接或引用外部资源
🎬 视频画廊
视频画廊插件可以创建美观的视频展示区域，非常适合展示教程视频、作品集、产品演示等。
基础用法
:::video-gallery
url=https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/1.mp4 title=武汉风光 1
url=https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/2.mp4 title=武汉风光 2
:::
1 | :::video-gallery |
自定义列数和比例
:::video-gallery cols=1 ratio=16:9
url=https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/1.mp4 title=单列展示 desc=武汉城市风光
:::
1 | :::video-gallery cols=1 ratio=16:9 |
参数说明
cols: 列数，默认为 2，范围 1-4gap: 视频间距，默认为 16pxratio: 视频宽高比，默认为 16:9（也可设置 4:3、1:1 等）url: 视频地址（必填）poster: 视频封面图（可选）title: 视频标题（可选）desc: 视频描述（可选）
🎵 音乐播放器
音乐播放器插件可以在文章中嵌入美观的网易云音乐播放器，支持播放、暂停、进度控制等功能。
基础用法
{music id=554241732}{/music}
1 | {music id=554241732}{/music} |
只需提供网易云音乐的歌曲 ID，系统会自动获取歌曲信息、封面、音频 URL，并提取封面主色用于进度条。
多首歌曲
{music id=1974443814}{/music}
{music id=1868553}{/music}
1 | {music id=1974443814}{/music} |
如何获取歌曲 ID
- 打开网易云音乐网页版或客户端
- 找到你喜欢的歌曲
- 复制歌曲链接，ID 就是链接中的数字
例如：https://music.163.com/#/song?id=554241732，ID 就是 554241732
☘️ 占个坑@！
没了
