一、🦄 标签页(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
滚动到此处加载评论...

