Blume组件库实战：Card、Tabs、Steps、FileTree等10+无需import的内置组件

【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载Blume 的内置组件库包含 Card、Tabs、Steps、FileTree 等 40 多个开箱即用组件任何.mdx文档页都能零 import 直接使用——不安装依赖、不写 import 语句、零配置这是 Blume 文档框架最省心的能力之一。内置组件如何做到无需 importBlume 的哲学是写文档的人只管内容排版、主题、交互交给框架。框架在构建时把一套组件映射表自动注入每一个.mdx页面实现见 templates.ts所以这些标签开箱即用组件源码统一放在 packages/blume/src/components/content/完整清单见 builtin-tags.ts。 写错也不怕内容请写在标签之间如Badgebeta/Badge而非textbeta。给组件传了它不认识的属性blume validate会报BLUME_UNKNOWN_PROP并列出它真正支持的 props构建时就能发现笔误。常用内置组件速览一张表看懂 Card、Tabs、Steps 的定位组件用途关键属性Card/CardGroup导航卡片与响应式网格title、href、icon、colsSteps/Step有序教程、安装流程title、icon、titleSizeTabs/Tab多变体内容切换inline、param、syncKeyView整页级多受众视图title、iconFileTree/Tree项目结构图示defaultOpen、openableAccordion/AccordionItemFAQ、可选步骤收纳title、defaultOpenBadge状态与元数据小标签variant、color、shapeCallout提示、警告、贴士框type、title、iconCodeGroup多语言代码切换dropdownDiffgit 风格差异对比old/new、before/afterCard 与 CardGroup零代码搭出卡片式导航卡片是 Blume 文档站出镜率最高的组件标题 图标 一句话简介点击跳转。CardGroup把多张卡片排成响应式网格移动端自动堆叠。适用场景落地页、章节索引、页面末尾的下一步去哪里。CardGroup cols{2} Card titleQuickstart href/quickstart iconrocket 安装 Blume 并发布你的第一个页面。 /Card Card titleComponents href/content/components iconfolder 浏览内置组件库。 /Card /CardGroup常用属性速记img卡片顶部配图路径写法与 Markdown 图片相同cta正文下方一行强调色的行动号召文案typenote、info、tip、check、warning、danger自动着色并配对应图标horizontalsm断点以上改为图文左右排布Steps把安装教程变成带编号的流程写第一步、第二步、第三步最舒服的方式就是Steps——每一步渲染成带编号标记的垂直条目Step的title是步骤名icon可替代数字出现在标记位。Steps Step title安装 Blume把包加入你的项目。/Step Step title写一个页面在 content 文件夹里丢一个 .mdx 文件。/Step Step title发布运行 blume build部署 dist/。/Step /StepsSteps上的titleSize控制步骤标题字号p默认到h2任选——教程放在大章节里时调成h3更醒目。Tabs 与 View同一页面服务多种读者Tabs解决内容等价、平台不同的问题macOS 和 Windows 的装包命令、TypeScript 和 Python 的用法示例放进标签页就互不干扰不用把整页内容堆成一摞。Tabs inline paraminstall Tab titlemacOS用 Homebrew 安装工具链。/Tab Tab titleWindows用 winget 安装工具链。/Tab /Tabs四个让 Tabs 真正好用的配置paraminstall选中的标签写入 URL 查询参数分享?installwindows的链接会直接打开 Windows 标签——链接即状态inline去掉边框标签条骑在一条通栏分割线上内容像正文一样自然展开同名标签联动页面上所有含 macOS 标签的 Tabs 组会一起切换syncKey可指定哪些组算一组dropdown标签太多时换成下拉菜单省横向空间当整页大部分内容都随选择变化时用View每个不同的title变成内容上方选择器里的一项目录自动隐藏被收起视图里的标题选择会写进?viewPython并跨页记忆。一句话区分整页切换用 View局部切换用 Tabs。FileTree 与 Tree用目录树解释项目结构FileTree是把普通 Markdown 列表包一下级别的简单——缩进的列表直接变成树形目录解释项目布局时几乎零成本FileTree - docs/ - index.mdx - guides/ - configuration.mdx - blume.config.ts /FileTree需要更细的控制时换TreeTree.Folder可单独设置defaultOpen默认展开和openable能否折叠Tree.File就是文件条目。介绍 monorepo 布局、配置文件位置这类内容时非常好用。Accordion、Badge、Callout整理 FAQ 与元数据的三件套Accordion把多个折叠项装进一个带分隔线的容器FAQ、可选步骤、长示例都适合收进去。AccordionItem的title支持行内 Markdown代码、链接、斜体都能写defaultOpen让某项默认展开。只有一项可展开内容时用更轻量的Expandable。Badge是版本标签、New / Beta / Deprecated 这类高频元数据的首选。variant把颜色和语义绑在一起accent抓眼球新功能、success通过、warning实验性、danger弃用还支持任意 CSS 颜色、pill胶囊形、描边、图标和悬停提示。Callout是:::warning[注意]这类指令背后的组件type决定底色与默认图标note、info、tip、check、warning、danger需要自定义图标或颜色时直接写组件即可。Icon、Frame、CodeGroup、Diff四个提升完成度的细节组件Icon按名字渲染图标Lucide 图标集rocket、book-open这类连字符小写名也是 Card、Step、Tab 的icon属性的取值来源构建期解析并内联为零 JS 的 SVG运行时零请求。Frame给截图或插图套一个居中带边框的框caption写说明支持 Markdown、hint写提示比裸图片专业得多。CodeGroup多个代码块组成标签切换器每个代码块一个标签复制按钮在标签栏里、复制当前展示的那个加dropdown可换成菜单。Diffgit 风格差异对比构建期生成、零客户端 JS支持内联old/new字符串、项目内两个文件路径before/after或 unified patch。还有哪些顺手就用的组件组件一句话说明Columns/Column响应式等宽网格把卡片或任意块并排放TypeTable/AutoTypeTableProp/Type 属性表格后者直接从 TypeScript 类型和 JSDoc 注释生成文档与源码永远同步Prompt一行标签 复制按钮内容作为 Markdown 原样复制做AI 提示词卡片正合适Visibilityforweb只给网站看foragents只给 AI 代理读取的 Markdown 看Tile视觉优先的可点击预览图标或图片在上、标题描述在下适合组件画廊Color品牌色板色块 可复制 hex 值支持明暗主题双值Tooltip行内术语悬停释义可带跳转链接YouTube隐私友好的 16:9 视频嵌入零客户端 JSPanel带标题的侧栏式容器放补充说明不打断主线所有组件的实时预览与完整属性说明见官方文档 components.mdx。如何覆盖或新增组件components.ts 一步到位想替换某个内置组件、或添加自己的组件在项目根目录新建components.ts导出defineComponentsmdx映射表里同名即替换、新名即新增——新增后在所有.mdx页面立即可用依然无需 import// components.ts import Callout from ./components/Callout.astro; import Pricing from ./components/Pricing.astro; import { defineComponents } from blume; export default defineComponents({ mdx: { Callout, // 替换内置 Callout Pricing, // 新增 Pricing / }, });相关实现见 define-components.ts完整定制指南见 customization.mdx。小结Blume 内置组件的正确打开方式把 Card、CardGroup 用于导航Steps 讲流程Tabs/View 收纳多变体内容FileTree 画结构Accordion、Badge、Callout 整理细节——这就是新手写 Blume 文档的最高频组合。它们不需要安装、不需要 import在.mdx里直接写标签即可写错了blume validate会替你指出来。这也正是 Blume 自称为人类和 AI 代理而生的开源文档框架的底气之一文档结构像写 Markdown 一样简单。赞分享【免费下载链接】blumeThe open-source docs framework for humans and agents.项目地址https://gitcode.com/gh_mirrors/blum/blume点击查看免费下载相关推荐VUX 虚拟组件Virtual Component原理与实战编译期按需内联的免 import 组件机制VUX 虚拟组件Virtual Component原理与实战编译期按需内联的免 import 组件机制 虚拟组件 是 VUXMobile UI CompUI组件前端Varlet 组件库按需引入配置babel-plugin-import 使用指南Varlet 组件库按需引入配置babel plugin import 使用指南 前言为什么需要按需引入 在前端开发中完整引入组件库会导致最终构建包体积UI组件前端D2Admin内置组件清单d2-container等10可复用组件快速上手D2Admin内置组件清单d2 container等10可复用组件快速上手 D2Admin 是一款基于 Vue 的企业级中后台管理框架它内置了 15 个开前端企业应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考