⚙️ 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 参数控制背景颜色:
高级排版与颜色控制
通过 textColor、fitText 和 closable 进行极其自由的定制:
🔒 这是一个不可关闭的重要通知,字是蓝色的。
动画控制 (高级)
你可以控制关闭时的动画时长,甚至直接关掉动画:
🏷️ 2. 标签/徽章 (Label)
标签极其适合用来标注文章的分类、软件版本号或状态。
基础方块标签
这是一套基础标签: 默认蓝色 绿色成功 橙色警告 红色危险
现代胶囊标签 (Pill)
加上 pill 属性,瞬间变成 iOS 风格的圆润胶囊:
Astro 框架更新到了 v4.0 本文含有大量硬核代码,阅读需谨慎 高能预警
自定义间距 (Class 透传)
利用 class 属性直接传入 Tailwind 类名,调节间距非常方便:
我的博客使用了 Astro 强推 构建。
🖱️ 3. 按钮 (Button)
按钮组件通过魔法标签,完美解决了链接跳转和事件触发的语义冲突。
基础按钮与颜色
跳转链接 (自动变身 <a> 标签)
只需加上 href,它就是一个完美的链接:
访问我的 GitHub (新窗口打开)
禁用状态与自定义属性 (高级)
你可以禁用按钮,或者传入任何原生的 HTML 属性(如 id、data-*):
尺寸与通栏
极其适合用于文章末尾的下载引导:
极致排版:居中与间距
再也不用写繁琐的 <div> 包裹,一行代码搞定居中和上下留白:
💡 排版小技巧:如果你想让多个按钮并排居中,请不要使用按钮自带的
align,而是用一个原生的div将它们包裹起来:
✍️ 4. 文本排版与格式
除了 Markdown 原生语法,你还可以使用以下 HTML 标签来丰富文本表现力:
斜体文字 (em)高亮亮显文字 (mark)简短的引用文字 (q)带下划线的文字 (u)小号附属文字 (small)
文本对齐与装饰线
利用 UIkit 原生类名,可以轻松控制文本对齐方式或生成带有两边装饰线的标题:
带装饰线的居中标题
📦 5. 容器与布局
利用 UIkit 的 Flexbox 弹性盒子工具类,可以轻松实现内容的完美垂直+水平居中:
完美居中容器
无论屏幕多大,我都在最中间。
🐙 6. GitHub 仓库卡片
你可以通过简单的语法,在文章中插入动态的 GitHub 仓库卡片。页面加载时,会自动通过 GitHub API 获取仓库的最新信息(如 Star 数、Fork 数等)。
语法示例: ::github{repo="<用户名>/<仓库名>"}
实际效果:
💬 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 语法。