欢迎使用 Anheyu-App
这是一篇系统生成的默认文章，你可以编辑或删除它。
段落文本 p
MARKDOWN
<font color=#00ffff size=7> color=#00ffff </font>
<p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p><font color=#00ffff size=7> color=#00ffff </font><p style="text-align: left">我是居中文字</p>MARKDOWN
<font color=#00ffff size=7> color=#00ffff </font>
<p style="text-align: left">我是居中文字</p>颜色: color 十六进制值
大小: size 数字值(number)
p 标签支持写 自定义 css
color=#00ffff
我是居中文字
MARKDOWN
<font color=#00ffff size=7> color=#00ffff </font>
<p style="text-align: left">我是居中文字</p>🤖 基本演示
加粗，下划线，斜体，删除线，上标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.
周五
周六
周天
🤗 代码演示
VUE
<template><MdEditor v-model="text" /></template>
<script setup>import { ref } from "vue";
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
const text = ref("Hello Editor!");
</script>🖨 文本演示
依照普朗克长度这项单位，目前可观测的宇宙的直径估计值（直径约 930 亿光年，即 8.8 × 1026 米）即为 5.4 × 1061倍普朗克长度。而可观测宇宙体积则为 8.4 × 10184立方普朗克长度（普朗克体积）。
📈 表格演示
表头 1 | 表头 2 | 表头 3 |
|---|---|---|
左对齐 | 中间对齐 | 右对齐 |
📏 公式
行内：
🧬 图表
Start
Stop
第二个图表
maindevelop0-eddef271-c45eac62-993a4583-2fafe4b5-337b11c6-28d1a57Example Git diagram
🪄 提示
支持的类型
note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention
折叠框
折叠框
查看详情
查看详情
查看详情
查看详情
查看详情
这是折叠框的内容
默认打开的折叠框
查看默认打开的折叠框
查看默认打开的折叠框
查看默认打开的折叠框
查看默认打开的折叠框
查看默认打开的折叠框
这是一个默认打开的折叠框。
带十六进制颜色
查看红色折叠框
查看红色折叠框
查看红色折叠框
查看红色折叠框
查看红色折叠框
这是一个红色主题的折叠框。
带颜色且默认打开
查看默认打开的红色折叠框
查看默认打开的红色折叠框
查看默认打开的红色折叠框
查看默认打开的红色折叠框
查看默认打开的红色折叠框
这是一个默认打开的红色折叠框。
隐藏块
这是一个谜语：为什么西装很酷？查看答案 因为西装裤(C 装酷)
文本
这是带下划线的文本
这是带着重号的文本
这是带波浪线的文本
这是带删除线的文本
按command + D可以复制当前行
密码是：这里没有验证码
这是红色下划线文本
这是蓝色着重号文本
这是绿色波浪线文本
这是紫色删除线文本
按Ctrl + C复制
密码：secret123
按钮
MARKDOWN
{btn url=链接地址 text=按钮文字}{/btn}
{btn url=链接地址 text=按钮文字 icon=图标类名 color=颜色 style=样式 layout=布局 position=位置 size=大小}{/btn}必填参数：
url: 链接地址text: 按钮文字
可选参数：
icon: 图标（可选，默认：mdi:arrow-right-circle），支持三种格式：AnZhiYu 图标：如
anzhiyu-icon-github、anzhiyu-icon-circle-arrow-right。查看所有可用图标：AnZhiYu 图标库Iconify 图标：如
simple-icons:github、mdi:arrow-right-circle（格式为prefix:name）。查看所有可用图标：Iconify 图标库图片链接：支持 http:// 或 https:// 开头的图片 URL
color: 颜色主题default（默认主题色）
blue（蓝色）
pink（粉色）
red（红色）
purple（紫色）
orange（橙色）
green（绿色）
style: 按钮样式留空（实心按钮，默认）
outline（空心按钮）
layout: 布局方式留空（行内布局，默认）
block（块级布局）
position: 按钮位置（仅 layout=block 时有效）留空（左对齐，默认）
center（居中）
right（右对齐）
size: 按钮大小留空（普通大小，默认）
larger（大号按钮）
基础按钮
颜色主题
空心按钮
Default
Blue
Pink
Green
块级按钮（左中右）
大号按钮
大号实心按钮
大号空心按钮
自定义图标
MARKDOWN
<!-- 基础用法 -->
{btn url=https://blog.anheyu.com/ text=AnZhiYu}{/btn}
<!-- 带颜色 -->
{btn url=# text=蓝色按钮 color=blue}{/btn}
{btn url=# text=粉色按钮 color=pink}{/btn}
<!-- 空心样式 -->
{btn url=# text=空心按钮 style=outline}{/btn}
{btn url=# text=蓝色空心 color=blue 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=大按钮 size=larger}{/btn}
<!-- 组合使用 -->
{btn url=# text=立即开始 color=green layout=block position=center size=larger}{/btn}
<!-- 自定义图标 -->
{btn url=https://github.com text=GitHub icon=simple-icons:github color=blue}{/btn}
<!-- 多按钮并排 -->
{btn url=#download text=下载 color=blue}{/btn}
{btn url=#docs text=文档 color=green}{/btn}
{btn url=#about text=关于 color=orange style=outline}{/btn}颜色选择
主要操作用实心按钮（默认、blue、green）
次要操作用空心按钮（outline）
警告操作用 red 或 orange
特殊强调用 pink 或 purple
布局建议
多个按钮并排时使用行内布局（默认）
单个重要按钮使用块级居中布局
表单提交按钮使用块级布局
尺寸使用
普通内容使用默认尺寸
重要行动号召使用 larger 尺寸
移动端考虑使用 larger 增加点击区域
图标规范
按钮组
MARKDOWN
:::btns
- icon=图标类名 title=标题 url=链接地址 desc=描述文字
- icon=图标类名 title=标题 url=链接地址 desc=描述文字
:::完整格式：
MARKDOWN
:::btns cols=列数 style=样式
- icon=图标类名 title=标题 url=链接地址 desc=描述文字 color=颜色
- icon=图标类名 title=标题 url=链接地址 desc=描述文字 color=颜色
:::容器参数（在 :::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
title: 按钮标题（必填）url: 链接地址，默认为#desc: 描述文字（可选）color: 按钮颜色（可选）blue（蓝色）
pink（粉色）
red（红色）
purple（紫色）
orange（橙色）
green（绿色）
团队成员展示
友情链接（4 列）
社交媒体链接（5 列）
简单列表（2 列）
示例 1：团队成员页面
展示团队成员信息，使用 3 列布局：
MARKDOWN
:::btns cols=3
- icon=ri:user-3-fill title=张三 url=https://example.com desc=前端工程师 color=blue
- icon=ri:user-3-fill title=李四 url=https://example.com desc=后端工程师 color=green
- icon=ri:user-3-fill title=王五 url=https://example.com desc=UI 设计师 color=pink
:::示例 2：项目展示
展示多个项目，使用 4 列布局：
MARKDOWN
:::btns cols=4
- icon=mdi:code-tags title=项目 A url=# desc=Web 应用开发
- icon=mdi:cellphone title=项目 B url=# desc=移动端应用
- icon=mdi:server title=项目 C url=# desc=后端服务
- icon=mdi:database title=项目 D url=# desc=数据库设计
:::示例 3：合作伙伴
不使用描述，只显示图标和标题：
MARKDOWN
:::btns cols=6
- icon=ri:building-fill1 title=公司 A url=#
- icon=ri:building-fill2 title=公司 B url=#
- icon=ri:building-fill3 title=公司 C url=#
- icon=ri:building-fill4 title=公司 D url=#
- icon=ri:building-fill5 title=公司 E url=#
- icon=ri:building-fill6 title=公司 F url=#
:::示例 4：使用图片作为图标
icon 支持 https 图片链接，显示为圆形头像：
MARKDOWN
:::btns cols=4
- icon=https://example.com/avatar1.jpg title=成员 A url=#
- icon=https://example.com/avatar2.jpg title=成员 B url=#
- icon=https://example.com/avatar3.jpg title=成员 C url=#
- icon=https://example.com/avatar4.jpg title=成员 D url=#
:::1. 列数选择
2 列: 适合内容较多的项目，需要更多空间展示描述
3 列: 最常用的布局，适合团队成员、服务介绍等
4 列: 适合友情链接、合作伙伴等
5-6 列: 适合社交媒体图标、简单链接等
2. 图标使用
保持同一组按钮使用相同系列的图标
团队成员建议使用
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 分栏
MARKDOWN
:::tabs
== tab 标签 1
内容 1
== tab 标签 2
内容 2
== tab 标签 3
内容 3
:::指定默认选中
MARKDOWN
:::tabs active=2
== tab 标签 1
内容 1
== tab 标签 2
内容 2（默认选中）
== tab 标签 3
内容 3
:::基础语法：
使用
:::tabs开始标签容器使用
== tab 标题标记每个标签页使用
:::结束标签容器
可选参数：
active=数字: 指定默认激活的标签（从 1 开始计数）不设置时默认激活第一个标签
数字超出范围会降级为第一个标签
示例：
:::tabs active=2表示默认激活第二个标签
内容支持：
✅ 完整的 Markdown 语法
✅ 代码块（支持语法高亮）
✅ 图片、链接
✅ 列表、表格
✅ 其他插件（按钮、隐藏内容、折叠框等）
注意事项：
:::tabs和:::必须独占一行== tab必须在行首标签标题不能为空
基础标签切换
可以在不同标签页之间切换内容，第一个标签默认选中。
带按钮的标签
标签页内可以包含按钮：
带代码的标签
标签页内可以包含代码块：
JAVASCRIPT
console.log("Hello World");带隐藏内容的标签
标签页内可以使用隐藏内容：
查看答案 这是隐藏的内容
带文本样式的标签
标签页内可以使用各种文本样式：
下划线、着重号、波浪线、删除线
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 语法
代码块结束标记必须是纯
```
Tip
Tip 插件可以创建各种样式的提示信息，支持鼠标悬停和点击触发。
基础用法
鼠标悬停提示这是一个基础的悬停提示
MARKDOWN
{tip text=鼠标悬停提示 content=这是一个基础的悬停提示}{/tip}点击触发
点击我查看提示这是一个点击触发的提示
MARKDOWN
{tip text=点击我查看提示 content=这是一个点击触发的提示 trigger=click}{/tip}不同主题
成功提示操作成功完成！信息提示这是一条信息提示警告提示请注意这个警告错误提示发生了一个错误浅色主题这是浅色主题的提示
MARKDOWN
{tip text=成功提示 content=操作成功完成！ theme=success}{/tip}
{tip text=信息提示 content=这是一条信息提示 theme=info}{/tip}
{tip text=警告提示 content=请注意这个警告 theme=warning}{/tip}
{tip text=错误提示 content=发生了一个错误 theme=error}{/tip}
{tip text=浅色主题 content=这是浅色主题的提示 theme=light}{/tip}不同位置
顶部显示提示显示在顶部底部显示提示显示在底部左侧显示提示显示在左侧右侧显示提示显示在右侧
MARKDOWN
{tip text=顶部显示 content=提示显示在顶部 position=top}{/tip}
{tip text=底部显示 content=提示显示在底部 position=bottom}{/tip}
{tip text=左侧显示 content=提示显示在左侧 position=left}{/tip}
{tip text=右侧显示 content=提示显示在右侧 position=right}{/tip}自定义延迟
快速显示立即显示的提示延迟显示延迟 500ms 显示的提示
MARKDOWN
{tip text=快速显示 content=立即显示的提示 delay=0}{/tip}
{tip text=延迟显示 content=延迟 500ms 显示的提示 delay=500}{/tip}组合使用
复杂提示这是一个成功主题、底部显示、点击触发的提示
MARKDOWN
{tip text=复杂提示 content=这是一个成功主题、底部显示、点击触发的提示 theme=success position=bottom trigger=click}{/tip}参数说明
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
text | 显示的文本 | string | - | 提示文本 |
content | 提示内容 | string | - | 这里是提示内容 |
theme | 主题样式 | string | dark/light/info/warning/error/success | dark |
position | 显示位置 | string | top/bottom/left/right | top |
trigger | 触发方式 | string | hover/click | hover |
delay | 延迟时间(ms) | string/number | - | 300 |
注意事项
提示文本会显示下划线虚线样式，表示可交互
鼠标悬停时文本颜色会发生变化
点击触发的提示需要再次点击才能关闭
支持响应式设计，在移动端会自动调整样式
图片组
图片组插件可以创建美观的网格布局图片展示，适合展示作品集、相册、产品图等。
基础用法
MARKDOWN
:::gallery
:::自定义列数和宽高比
MARKDOWN
:::gallery cols=4 gap=8px
:::正方形图片组
MARKDOWN
:::gallery cols=3 ratio=1:1
:::参数说明
cols: 列数，默认为 3，范围 1-6gap: 图片间距，默认为 10pxratio: 图片宽高比（如 16:9、1:1），不设置则自适应
常用宽高比：1:1（正方形）、16:9（宽屏）、4:3（传统）、3:2（照片）
特性
✅ 响应式设计，自动适配移动端
✅ 悬停效果，图片轻微上浮并放大
✅ 点击放大，支持全屏查看
✅ 图片懒加载，优化性能
LinkCard
LinkCard 插件可以创建美观的链接卡片，用于展示外部链接信息。
LinkCard 基础用法
MARKDOWN
{linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard}自定义图标
字体图标
MARKDOWN
{linkcard url=https://github.com title=GitHub sitename=代码托管平台 icon=simple-icons:github}{/linkcard}HTTP 图标链接
MARKDOWN
{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}自定义提示文本
MARKDOWN
{linkcard url=https://www.google.com title=Google sitename=搜索引擎 tips=访问搜索引擎}{/linkcard}完整示例
MARKDOWN
{linkcard url=https://docs.anheyu.com title=AnZhiYu 文档 sitename=AnZhiYu Docs icon=mdi:book tips=查看完整文档}{/linkcard}多个链接卡片
MARKDOWN
{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}参数说明
参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
url | 链接地址 | string | - | # |
title | 链接标题 | string | - | 链接标题 |
sitename | 网站名称 | string | - | 网站名称 |
icon | 图标（字体图标类名或图片链接） | string | 字体图标类名或 HTTP 图片链接 | mdi:link |
tips | 提示文本 | string | - | 引用站外地址 |
注意事项
链接会在新标签页中打开
自动添加
rel="external nofollow noreferrer"属性图标支持两种方式：
字体图标：使用 AnZhiYu 图标字体类名（如
simple-icons:github）图片图标：使用 HTTP/HTTPS 图片链接（如网站 favicon）
图片图标会自动调整为 20x20 像素，带圆角效果
卡片具有悬停效果和点击反馈
适合用于推荐相关链接或引用外部资源
🎬 视频画廊
视频画廊插件可以创建美观的视频展示区域，非常适合展示教程视频、作品集、产品演示等。
基础用法
MARKDOWN
:::video-gallery
url=视频地址 1 title=视频标题 1
url=视频地址 2 title=视频标题 2
:::自定义列数和比例
MARKDOWN
:::video-gallery cols=1 ratio=16:9
url=视频地址 title=视频标题 desc=视频描述
:::参数说明
cols: 列数，默认为 2，范围 1-4gap: 视频间距，默认为 16pxratio: 视频宽高比，默认为 16:9（也可设置 4:3、1:1 等）url: 视频地址（必填）poster: 视频封面图（可选）title: 视频标题（可选）desc: 视频描述（可选）
🎵 音乐播放器
音乐播放器插件可以在文章中嵌入美观的网易云音乐播放器，支持播放、暂停、进度控制等功能。
基础用法
MARKDOWN
{music id=554241732}{/music}只需提供网易云音乐的歌曲 ID，系统会自动获取歌曲信息、封面、音频 URL，并提取封面主色用于进度条。
如何获取歌曲 ID
打开网易云音乐网页版或客户端
找到你喜欢的歌曲
复制歌曲链接，ID 就是链接中的数字
例如：https://music.163.com/#/song?id=554241732，ID 就是 554241732
☘️ 占个坑@！
没了
