UIkit 与 MDX 组件库终极使用手册

一隅之地
2023-06-04
1546 字
8 分钟

⚙️ Markdown 头部配置说明 (Frontmatter)#

在每篇文章的开头,可以通过配置以下参数来控制文章的展示效果:

title: 标题                # 文章的主标题
published: 时间            # 发布时间,例如 2026-03-25
description: 简介          # 文章的简短摘要
tags: [标签1, 标签2]       # 文章标签
category: 分类             # 文章所属分类
image: '图片链接'          # 文章的封面大图
comment: true             # 是否开启评论 (可选,默认通常为开启)
customUrl: '自定义链接'    # 自定义文章路径 (可选)
author: 一隅之地           # 文章作者 (可选)
avatar: '头像链接'         # 作者头像 (可选)
template: 'style2'        # 特殊模板选项 (可选)
slides:                   # 幻灯片图集 (可选,用于在文章顶部展示多张图片)
  - "https://img.minsp.org/images/2023/12/17/657ee99c40002.webp"
  - "https://img.minsp.org/images/2023/12/17/657ee99b9ee9b.webp"
  - "https://img.minsp.org/images/2023/12/17/657ee98b65d47.webp"

欢迎来到我的专属 UIkit 组件库!得益于 Astro 的全局组件注入,以下所有自定义组件在书写时均不需要任何 import 语句,开箱即用,极其优雅。


🚨 1. 警报框 (Alert)#

警报框常用于文章中的提示、警告或补充说明。

基础颜色#

通过 type 参数控制背景颜色:

这是一个普通的 primary (蓝色) 提示框。
🎉 恭喜,这是一条 success (绿色) 成功消息!
⚠️ 注意,这是一条 warning (黄色) 警告信息。
💣 危险操作,这是一条 danger (红色) 错误拦截!

高级排版与颜色控制#

通过 textColorfitTextclosable 进行极其自由的定制:

这个黄框的字被我强行改成了红色,并且框的宽度刚好包裹住文字。

🔒 这是一个不可关闭的重要通知,字是蓝色的。

动画控制 (高级)#

你可以控制关闭时的动画时长,甚至直接关掉动画:

🐌 慢慢消失:关掉我时,我会用整整 1 秒钟平滑收缩。

⚡ 瞬间消失:没有任何动画,干脆利落。


🏷️ 2. 标签/徽章 (Label)#

标签极其适合用来标注文章的分类、软件版本号或状态。

基础方块标签#

这是一套基础标签: 默认蓝色 绿色成功 橙色警告 红色危险

现代胶囊标签 (Pill)#

加上 pill 属性,瞬间变成 iOS 风格的圆润胶囊:

Astro 框架更新到了 v4.0 本文含有大量硬核代码,阅读需谨慎 高能预警

自定义间距 (Class 透传)#

利用 class 属性直接传入 Tailwind 类名,调节间距非常方便:

我的博客使用了 Astro 强推 构建。


🖱️ 3. 按钮 (Button)#

按钮组件通过魔法标签,完美解决了链接跳转和事件触发的语义冲突。

基础按钮与颜色#

跳转链接 (自动变身 <a> 标签)#

只需加上 href,它就是一个完美的链接:

访问我的 GitHub (新窗口打开)

禁用状态与自定义属性 (高级)#

你可以禁用按钮,或者传入任何原生的 HTML 属性(如 iddata-*):

尺寸与通栏#

极其适合用于文章末尾的下载引导:

极致排版:居中与间距#

再也不用写繁琐的 <div> 包裹,一行代码搞定居中和上下留白:

💡 排版小技巧:如果你想让多个按钮并排居中,请不要使用按钮自带的 align,而是用一个原生的 div 将它们包裹起来:


✍️ 4. 文本排版与格式#

除了 Markdown 原生语法,你还可以使用以下 HTML 标签来丰富文本表现力:

斜体文字 (em)高亮亮显文字 (mark)删除线文字 (del)简短的引用文字 (q)带下划线的文字 (u)小号附属文字 (small)

文本对齐与装饰线#

利用 UIkit 原生类名,可以轻松控制文本对齐方式或生成带有两边装饰线的标题:

居中对齐的文字 (.uk-text-center)
靠左对齐的文字 (.uk-text-left)
靠右对齐的文字 (.uk-text-right)

带装饰线的居中标题


📦 5. 容器与布局#

利用 UIkit 的 Flexbox 弹性盒子工具类,可以轻松实现内容的完美垂直+水平居中

完美居中容器

无论屏幕多大,我都在最中间。


🐙 6. GitHub 仓库卡片#

你可以通过简单的语法,在文章中插入动态的 GitHub 仓库卡片。页面加载时,会自动通过 GitHub API 获取仓库的最新信息(如 Star 数、Fork 数等)。

语法示例: ::github{repo="<用户名>/<仓库名>"}

实际效果:

mrxie68
/
BrainSpace
Waiting for api.github.com...
00K
0K
0K
Waiting...

💬 7. 高级提示块 (Admonitions)#

除了 UIkit 的 Alert 组件,本博客还原生支持 Markdown 风格的高级提示块。支持以下五种类型:note (笔记)、tip (提示)、important (重要)、warning (警告) 和 caution (危险)。

基础语法#

NOTE

高亮显示用户需要注意的信息,即使是粗略浏览也不应错过。

TIP

提供可选的提示信息,帮助用户更顺利地完成操作。

IMPORTANT

提供用户必须了解的关键重要信息。

WARNING

警告内容:涉及潜在风险,需要用户立即注意。

CAUTION

危险提醒:此操作可能会带来负面后果,请谨慎操作。

自定义标题#

你可以为提示块自定义一个专属标题:

TIP

我的自定义标题

这是一个带有自定义标题的笔记框。

:::tip[我的自定义标题]
这是一个带有自定义标题的笔记框。
:::

兼容 GitHub 风格语法#

本博客同时兼容 GitHub 官方的警报语法

NOTE

这段文字使用了 GitHub 风格的 NOTE 语法。

TIP

这段文字使用了 GitHub 风格的 TIP 语法。

> [!NOTE]
> 这段文字使用了 GitHub 风格的 NOTE 语法。

> [!TIP]
> 这段文字使用了 GitHub 风格的 TIP 语法。