一、🦄 标签页（Tabs）
基础用法
js
const hello = "Hello World";
console.log(hello);
ts
const hello: string = "Hello World";
console.log(hello);
vue
<template>
<div>{{ hello }}</div>
</template>
<script setup>
const hello = "Hello World";
</script>
例子
指定默认激活标签（active=标签索引，从1开始）
内容 1
内容 2（默认激活）
内容 3
例子
:::tabs active=2
== tab 第一个标签
内容 1
== tab 第二个标签
内容 2（默认激活）
== tab 第三个标签
内容 3
:::二、📁折叠框（Folding）
基础用法（默认收起）
折叠框标题
这是折叠框的内容，默认是收起状态。
支持 Markdown 语法。
例子
:::folding
折叠框标题
这是折叠框的内容，默认是收起状态。
支持 **Markdown** 语法。
:::默认展开（添加open参数）
默认展开的折叠框
这个折叠框默认是展开状态。
例子
:::folding open
默认展开的折叠框
这个折叠框默认是展开状态。
:::自定义颜色（十六进制颜色值）
粉色折叠框
使用十六进制颜色值自定义边框和标题背景色。
例子
:::folding #FF6B9D
粉色折叠框
使用十六进制颜色值自定义边框和标题背景色。
:::组合参数（展开+自定义颜色）
绿色折叠框（默认展开）
同时设置展开状态和自定义颜色。
例子
:::folding open #42b983
绿色折叠框（默认展开）
同时设置展开状态和自定义颜色。
:::三、🙈隐藏内容（Hidden）
块级隐藏内容（默认按钮文字）
例子
:::hidden
这是默认的隐藏内容，点击"查看隐藏内容"按钮后显示。
支持 **Markdown** 语法。
:::自定义按钮文字（display参数）
例子
:::hidden display=点击查看答案
这是一道题目的答案。
:::自定义按钮颜色（bg=背景色，color=文字色）
例子
:::hidden display=查看彩蛋 bg=#FF6B9D color=#fff
这是一个彩蛋内容！
:::行内隐藏内容（{hide}标签）
这是一段文字，，点击按钮查看。
例子
这是一段文字，{hide display=查看}这部分内容被隐藏了{/hide}，点击按钮查看。四、🔘按钮（Button）
基础按钮（url=链接，text=按钮文字）
例子
{btn url=https://blog.anheyu.com text=访问博客}{/btn}自定义图标（icon=图标名称）
例子
{btn url=https://github.com text=GitHub icon=anzhiyu-icon-github}{/btn}按钮颜色（color参数：blue/pink/red/purple/orange/green）
例子
{btn url=# text=蓝色按钮 color=blue}{/btn}
{btn url=# text=粉色按钮 color=pink}{/btn}
{btn url=# text=红色按钮 color=red}{/btn}描边样式（style=outline）
例子
{btn url=# text=描边按钮 style=outline color=blue}{/btn}更大尺寸（size=larger）
例子
{btn url=# text=大按钮 size=larger color=blue}{/btn}块级布局（layout=block，position=对齐方式）
例子
{btn url=# text=块级按钮 layout=block}{/btn}
{btn url=# text=居中按钮 layout=block position=center}{/btn}
{btn url=# text=右对齐按钮 layout=block position=right}{/btn}五、🎯按钮组（Btns）
基础用法
例子
:::btns
icon=anzhiyu-icon-shapes title=张三 url=https://example.com desc=前端工程师
icon=anzhiyu-icon-shapes title=李四 url=https://example.com desc=后端工程师
icon=anzhiyu-icon-shapes title=王五 url=https://example.com desc=UI 设计师
:::自定义列数（cols=1-6）
例子
:::btns cols=4
- icon=anzhiyu-icon-github title=GitHub url=https://github.com desc=代码托管平台
- icon=anzhiyu-icon-twitter title=Twitter url=https://twitter.com desc=社交媒体平台
- icon=anzhiyu-icon-bilibili title=Bilibili url=https://bilibili.com desc=视频分享网站
- icon=anzhiyu-icon-wechat title=微信 url=# desc=即时通讯工具
:::按钮颜色
例子
:::btns cols=3
- icon=anzhiyu-icon-shapes title=蓝色成员 url=# desc=前端开发 color=blue
- icon=anzhiyu-icon-shapes title=粉色成员 url=# desc=设计师 color=pink
- icon=anzhiyu-icon-shapes title=绿色成员 url=# desc=后端开发 color=green
:::卡片样式
支持的样式：default、card、simple
例子
:::btns style=card
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
:::参数说明
容器参数：cols（列数 1-6，默认 3）、style（default/card/simple）
按钮参数：
icon：图标（必需），支持 AnZhiYu 图标、Iconify 图标、图片 URL
title：标题（必需）
url：链接地址
desc：描述文字
color：颜色（blue/pink/red/purple/orange/green）
六、🖼️图片组（Gallery）
基础用法（默认3列）
风景1
风景2
风景3
例子
:::gallery
:::自定义列数
默认为 3 列，可以设置 1-6 列：
宽屏风景
宽屏建筑
宽屏风景
宽屏建筑
例子
:::gallery cols=4
:::设置图片间距
图片1
图片2
图片3
例子
:::gallery gap=20px
:::自定义列数+宽高比
宽屏风景
宽屏建筑
例子
:::gallery cols=2 ratio=16:9
:::常用宽高比：
1:1 正方形
16:9 宽屏
4:3 传统屏幕
3:2 照片常用比例
参数说明
容器参数：cols（列数 1-6，默认 3）、gap（间距，默认 10px）、ratio（宽高比，如 16:9）
图片格式：使用标准 Markdown 图片语法 
七、视频画廊（Video Gallery）
基础用法
武汉风光1
武汉风光2
例子
:::video-gallery
url=https://example.com/video1.mp4 title=武汉风光1
url=https://example.com/video2.mp4 title=武汉风光2
:::带封面图+描述
教程视频
详细教程说明
例子
:::video-gallery
url=https://example.com/video1.mp4 title=教程视频 poster=https://example.com/cover1.jpg desc=详细教程说明
:::八、音乐播放器（Music Player）
基础用法（网易云歌曲ID）
我的名字
焦迈奇
例子
{music id=554241732}{/music}多首歌曲列表
我的名字
焦迈奇
我记得
赵雷
例子
{music id=554241732}{/music}
{music id=1974443814}{/music}九、行内样式
下划线（{u}）
这是下划线文字
彩色下划线
例子
{u}这是下划线文字{/u}
{u color=#FF6B9D}彩色下划线{/u}着重号（{emp}）
这是着重号文字
彩色着重号
例子
{emp}这是着重号文字{/emp}
{emp color=#42b983}彩色着重号{/emp}波浪线（{wavy}）
这是波浪线文字
例子
{wavy}这是波浪线文字{/wavy}键盘样式（{kbd}）
按 Ctrl + S 保存
例子
按 {kbd}Ctrl{/kbd} + {kbd}S{/kbd} 保存十、基础文本格式
标题（#分级）
h1标题
h2标题
例子
# h1标题
## h2标题图片（带参数）
例子
{caption="底部描述" width=800 align=center}表格（支持对齐）
| 表头1 | 表头2 |
|---|---|
| 左对齐 | 右对齐 |
例子
| 表头1 | 表头2 |
| :----- | -----: |
| 左对齐 | 右对齐 |
十一、数学公式
行内公式（$包裹）
x+y2xx+y^{2x}
块级公式（$$包裹）
x3\sqrt[3]{x}
例子
行内公式：$x+y^{2x}$
块级公式：
$$
\sqrt[3]{x}
$$十二、图表（Mermaid）
gitGraph
commit
branch develop
checkout develop
commit
例子
```mermaid
gitGraph
commit
branch develop
checkout develop
commit
```十三、提示框（!!!语法）
成功提示
成功提示
操作完成！
警告提示
警告提示
请注意风险！
例子
!!! success 成功提示
操作完成！
!!!
!!! warning 警告提示
请注意风险！
!!!十四、付费内容（PRO）
基础用法
自定义标题+价格
例子
:::paid-content
:::十五、链接卡片（LinkCard）
基础用法
自定义图标
例子
{linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard}
{linkcard url=https://github.com title=GitHub icon=anzhiyu-icon-github}{/linkcard}十六、提示框（Tip，PRO）
点击触发+成功主题
点击查看右侧显示+延迟
右侧提示
例子
{tip text=点击查看 content=操作成功 theme=success trigger=click}{/tip}
{tip text=右侧提示 content=显示在右侧 position=right delay=500}{/tip}
本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 小植
评论
隐私政策
0/500
滚动到此处加载评论...