组件样式示例

Markdown 内容组件

Nuxt Content 使用 Markdown 语法和约定来提供丰富的文本编辑体验。它使用自定的 MDC 语法，可以让你在 Markdown 中使用 Vue 组件，并支持多种 remark 扩展。

MDC 基本语法（必读）

v2.content.nuxt.com

~~也许要看到本页源码才能领会到这种语法的特性~~，现在可以在页面内看源代码了，就像这样——，或是主题介绍页面的组件入口卡片那样……确定不对照源码阅读吗？

内容组件样式示例

我编写了一些可以在 Markdown 文件中调用的组件，以下是一些示例。

通过 CSS 类名控制的样式

各级标题
- 在 Front matter 中设置 type: story 可以换用不同样式。
- 跟随 URL Hash（网址锚点）的高亮。
引用。
无序和有序列表。
粗体、~~删除线~~。
分割线。

带有 icon 类名的图片，如。
只在 type: story 时🀄
故事感。
阴影回声
滚动，然后悄悄变大变高，惊艳所有人。

Markdown 原生组件

可以通过 Mardown 原生语法、HTML 语法和 MDC 语法使用的组件。

链接 `ProseA`

这是内部链接。站外链接默认在新标签页打开，并在鼠标悬浮时展示域名。

还会根据域名展示图标，例如微软文档、GitHub、Bilibili、QQ 官网、微信公众号等。

自定义图标

你可以将 icon 属性指定 Iconify 图标名，例如 a。图标可在 Iconify 或 Yesicon 搜索。

为更多站点匹配图标

你可以在 app/utils/icon.ts 分别为主域名或专门域名（优先级高）添加匹配规则来为更多站点匹配图标。

代码 `ProseInlineCode`

行内代码 和在超链接中的 行内代码。

还可以通过在反引号后加 {lang="js"} 等语言实现高亮，例如 const a = 1 。

代码块 `ProsePre`

纯文本代码块

文件名

带文件夹名、未指定语言的代码块

yaml

语言: yaml # 指定语言但无文件名

特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文件名yaml

羽化边缘: 如果一行特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长，溢出滚动时有羽化边缘。

CHANGELOG.mdmd

# 更新日志
- 特殊文件名自动匹配图标
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠
- 超出 `appConfig.content.codeblockCollapsibleRows` 行的代码自动折叠

更多功能md

- 在 Markdown 文件中，可以通过代码块语法的 meta 标记
  - `wrap` 直接启用自动换行功能，以展示特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文本而不换行
  - `icon=ph:files-duotone` 自定义代码块图标
  - `expand` 禁用自动折叠功能

# 代码块语法

```语言简写 [文件名] icon=图标 wrap expand
- 上面这几项都是可选的。
- 如果有语言简写，必须位于反引号后的第一项。
- 方括号包裹的是文件名。
- icon=图标、wrap、expand 都是 meta 标记。
- 如果要在代码块中嵌套代码块语法，外层可以用四个反引号包裹。
```

高亮

代码块通过 Shiki 进行高亮，可在 blog.config.ts 中配置语言（Markdown 中出现的所有语言）和代码高亮主题。

为更多语言匹配图标

你可以根据 app/utils/icon.ts 语言图标匹配流程为文件后缀、语言简写或别名添加匹配规则来为更多语言匹配图标：

查找 file2icon 映射表，将文件名后缀替换为图标名。
若无匹配，查找 ext2lang 映射表，将语言简写或别名转换为 Catppuccin 图标库中的语言名。
将 Catppuccin 图标库中的语言名转换为 Iconify 图标名。

表格 `ProseTable`

支持表格横向滚动或自动换行的切换。

表头滚动吸附	滚动时边缘羽化	如果标题或内容很 loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog	这里还有一列，但是是空内容
未实现	已实现	可以切换滚动方式

自定义组件

可以通过 Vue 模板语法、MDC 语法使用的组件。

Alert

提醒

你好

标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

仅标题，并且自定义图标和颜色

Badge

普通带链接纯文本指定圆形纯文本指定方形带个图

外部域名自动获取站点图标纸鹿，古怪杂记本， GitHub链接能自动识别头像 KazariEX，也可指定方形 isYangs/GioPic。

在其他组件中使用带链接

指定圆形背景色可以动态变化使用

Blur

你知道得太多了。

也未必。

CardList

给列表刷上了自定义样式，待完善。

无序列表项1
无序列表项2
- 无序列表项2-1
- 无序列表项2-2

Chat

2024-11-09 23:39:30

也许

我们可以聊聊天

纸鹿

我还可以有名字

纸鹿撤回了一条消息

用户1

有趣
我学到了。

Copy

$rm -rf # 修改命令后再复制，也可撤销修改

不带提示符的命令，可以是 URL、单行代码

自定义命令提示符、高亮语言const customLang = 'js' // 滚动条、边缘羽化会出现，假如它特别特别特别特别特别特别特别特别长

自动推断语言

语言从 app/utils/str.ts 的 getPromptLanguage 里根据命令提示符前缀推断，使用 plain-shiki 高亮。和之前的 Markdown 代码块使用相同的高亮语言和高亮主题配置。

EmojiClock

现在几点了？

🕑

FeedCard 和 FeedGroup

用于在友链页面展示链接，由于友链页面的 Markdown 部分要可能会显示这个组件，就放在这个目录下大家都能调用了。去友链页面看看吧。

Folding

折叠组件，支持折叠和展开，可以嵌套使用。

可以通过标题插槽传值超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

折叠还可以嵌套

默认展开的折叠。

在嵌套使用的组件内部使用 MDC 的 #slotname 插槽语法

必须缩进，否则会报错。

foldingmd

- 默认展开的折叠。

Key

按下键时会亮，可以通过 @press 配置触发事件，鼠标点击也会触发事件，博客全站搜索框的按键提示使用了这个组件。

Esc F2 Ctrl Shift a Space Tab Enter

Ctrl+Shift+A Alt Alt+Shift Ctrl+Alt

↑ ↑ ↓ ↓ ← → ← → B A B A

LinkBanner

LinkCard

标题

这是一行描述，如果不提供描述会展示域名

Pic

用于展示图片，支持说明文字、点击后打开灯箱缩放。

Poetry

在文章的 type 为 tech 或 story 时，它有不同的样式。

诗有诗的标题

一名作者

如你所见，我, 是一首—— 诗。

可选的落款

Quote

在文章的 type 为 tech 或 story 时，它有不同的样式。

有时候，有些话，有点意思。

令图标有所指，引用亦有中心。

ヾ(•ω•`)o

图标插槽也可以是 Emoji 或颜文字，或者英文装饰。

RenderWithRaw

这是一个元组件，用于同时渲染 MDC 和原始 MDC 代码，使用时请清楚自己在做什么。

Tip我啊，被包了又包

Tab

# 一个简单的 Tab

是这样。

Timeline

前天

看到了小兔

昨天

是小鹿

今天

是你。

今日无事

今日依旧无事

然后——

一件事
两件事。

再添一笔。

Tip

我是一条小提示，我没有图标， +v 点击就能复制，太方便了！

VideoEmbed

放点视频给你看。

ZhiluHeader

📄💓😮🐟🏖️

BiuXin-s Blog

人生的每一天，都在学习当中

鼠标悬浮时的动画 Emoji 📄🦌🙌🐟🏖️ 对应“纸鹿摸鱼处”的汉字，在 app.config.ts 中配置，字体由阿里妈妈方圆体分割而来。

# iconfont 网页版生成的字体子集在 Chrome 124 的版本无法解析，需要借助 fonttools 工具手动生成子集
pip install fonttools brotli
pyftsubset ./AlimamaFangYuanTi.ttf --text=Header文本 --flavor=woff2