静态站点前端开发工具【免费下载链接】kit Describe your site, AI builds it, you own it as Markdown. Snap together Tailwind blocks like Lego — landing pages, blogs, portfolios, docs more. No AI slop. Free to deploy anywhere 项目地址https://gitcode.com/gh_mirrors/hu/kit点击查看免费下载steps是 Hugo Blox 文档型站点如starters/documentation启动模板内置的一款内容短代码用于在页面中呈现一步一步的教程流程。它的核心用法极简只需用{{% steps %}}与{{% /steps %}}包裹若干 Markdown 三级标题###Hugo Blox 便会自动渲染出带编号的步骤列表。读完本文你将掌握该短代码的完整语法、在文档与首页中的实战用法以及它底层基于模板与 CSS 计数器的实现原理从而在自己的文档站点中快速编排快速开始安装指南等步骤型内容。短代码速览一行文档定义的核心用法在 steps.md 中该短代码的定位被一句话概括Display a series of steps, such as for a tutorial.——用于展示一系列步骤例如教程场景。这正是文档站最常见的写作需求将从零到一的过程拆解为若干有序环节引导读者逐步完成。它的原始示例非常直观{{% steps %}} ### Step 1 The first step here... ### Step 2 The second step here... ### Step 3 The third step here... {{% /steps %}}关键点在于步骤标题不靠额外参数指定而是直接使用 Markdown 三级标题###。steps短代码内部不做任何参数解析也不要求每个步骤具备固定字段任何位于{{% steps %}}与{{% /steps %}}之间的内容都会被当作步骤主体渲染。因此你既可以用一句话说明一个步骤也可以在步骤下方放置链接、代码块、图片等任意 Markdown 内容——灵活性完全交由内容作者掌控。语法规则与书写规范根据原文档的 Usage 章节正式书写时需要遵守两条规则成对出现步骤必须整体包裹在{{% steps %}}...{{% /steps %}}之中三级标题即步骤每个步骤的标题使用###级别其下正文描述该步骤的具体操作。在文档中展示原始语法时需要对短代码做转义处理在%两侧加/以便代码块内原样呈现而不是被 Hugo 当作短代码执行{{%/* steps */%}} ### Step 1 The first step here... ### Step 2 The second step here... ### Step 3 The third step here... {{%/* /steps */%}}这里使用{{% ... %}}而非{{ ... }}是有讲究的前者按Markdown 渲染模式处理内部内容{{% steps %}}内的 Markdown 语法三级标题、加粗、链接等会被正常解析而{{ ... }}按 HTML 模式处理内部 Markdown 不会生效。这正是steps能够直接接收###标题的前提。实战在文档站中编排快速开始steps并不是孤立存在的演示组件它被真实用于 getting-started.md 的Quick Start from Template章节将站点搭建过程编排为四个步骤{{% steps %}} ### Initialize a new site [Click to copy the template on GitHub](https://github.com/new?template_nametheme-documentationtemplate_ownerHugoBlox) ### Configure your new site [Configure your site name, description, and menu.](https://docs.hugoblox.com/tutorial/blog/) ### Add your content [Edit the homepage and add your documentation pages.](https://docs.hugoblox.com/tutorial/blog/) ### Publish your site [Easily publish your site for free with GitHub Pages](https://docs.hugoblox.com/tutorial/blog/) {{% /steps %}}这个案例体现了两个实用模式步骤内可以嵌套任何 Markdown每步标题下方既可以是纯文本也可以是带说明文字的链接如上例还可以是代码块、图片或列表步骤数量无上限三至四步只是示例实际可按教程复杂度自由增减。在 shortcodes 索引页 中steps与其他常用文档短代码callout、cards、spoiler一同以卡片形式列出说明它是 Hugo Blox 文档模板可复用组件体系的一员建议与 callout.md、cards.md 等短代码组合使用构建结构清晰的文档页面。源码级原理模板只做容器CSS 负责编号要理解steps为什么什么都不用配就能自动编号需要分别看它的模板实现与样式实现。模板一个轻量包裹层steps.html 是整个短代码的完整实现仅有三行div classhb-steps {{- .Inner -}} /div也就是说短代码在渲染时所做的全部工作就是把内部内容.Inner即{{% steps %}}与{{% /steps %}}之间的 Markdown 渲染结果包进一个带hb-steps类的div容器。编号数字并不来自模板也不来自 JavaScript而是完全由 CSS 完成——这解释了为何步骤标题必须使用统一的###级别样式规则正是针对容器内的h3元素生效的。样式CSS 计数器自动编号steps.css 揭示了编号机制的核心.hb-steps { apply ml-4 mb-12 pl-6 border-l border-gray-200 dark:border-neutral-600 [counter-reset:hb_step]; } .hb-steps h3 { counter-increment: hb-step; ::before { apply absolute w-[33px] h-[33px]; apply rounded-full border-4 border-white dark:border-slate-300; apply bg-gray-100 dark:bg-hb-dark; apply text-neutral-700 dark:text-neutral-200 text-base font-normal text-center -indent-px; apply mt-[3px] ml-[-41px]; content: counter(hb-step); } }三个关键设计点计数器重置容器.hb-steps上通过counter-reset: hb_step将计数器归零保证每个steps块都从 1 开始独立编号逐标题递增.hb-steps h3上执行counter-increment: hb-step每遇到一个###标题计数加一这就是步骤序号的来源视觉呈现通过h3::before伪元素把计数值渲染为页面上的数字并用rounded-full圆形、border-4白色描边、ml-[-41px]向左偏移嵌入左边框线等 Tailwind 工具类形成左侧竖线 圆角数字徽标的经典步骤时间线外观。此外all.css 中通过import steps.css;将该样式随组件体系一并引入因此只要站点启用了 Hugo Blox Builder 的 Tailwind 模块steps短代码即可开箱即用无需额外配置。从实现结构看编号、间距、深色模式适配dark:前缀规则等全部由样式层承担短代码本身保持零配置——这正是它简单到极致的原因。使用前提与注意事项结合仓库现状使用steps短代码时有几点需要留意模块依赖该短代码定义于 blox-tailwind 模块layouts/shortcodes/steps.html对应样式在 assets/css/components/steps.css。使用前请确认站点通过 module.yaml 正确挂载了 Hugo Blox Tailwind 模块标题层级步骤标题固定使用###其下的正文层级建议不要再嵌套同级别标题以免影响编号语义与阅读结构编号自动维护由于序号由 CSS 计数器生成增删步骤后无需手工改号但同时也意味着无法通过参数自定义起始编号或样式如需深度定制应修改steps.css{{% %}}语法务必使用百分号包裹形式以启用内部 Markdown 渲染使用尖括号形式将导致###标题无法被正确解析为步骤。小结steps短代码以容器模板 CSS 计数器的极简架构为 Hugo Blox 文档站提供了一套零配置、纯 Markdown 驱动的步骤编排方案作者只需用{{% steps %}}包裹若干###标题即可获得自动编号的教程流程样式、深色模式与编号维护全部由底层 steps.css 自动完成。对于撰写快速开始、安装指南、操作教程等分步说明类内容它是开箱即用的首选组件实际效果可参考 getting-started.md 中的快速开始章节。赞分享静态站点前端开发工具【免费下载链接】kit Describe your site, AI builds it, you own it as Markdown. Snap together Tailwind blocks like Lego — landing pages, blogs, portfolios, docs more. No AI slop. Free to deploy anywhere 项目地址https://gitcode.com/gh_mirrors/hu/kit点击查看免费下载相关推荐Agent Reach社区与支持渠道指南Issue、微信群与作者邮箱全汇总Agent Reach社区与支持渠道指南Issue、微信群与作者邮箱全汇总 Agent Reach 是一款开源 CLI 工具给你的 AI Agent 一键装人工智能AI Agent工具调用AI 技能MCP 服务网页爬虫零代码建站神器Hugo Blox Builder快速上手指南零代码建站神器Hugo Blox Builder快速上手指南 Hugo Blox Builder是一款专为数据科学家和研究人员打造的开源网站构建工具通过Ma静态站点前端开发工具零代码建站终极指南用Hugo Blox Builder快速搭建专业网站零代码建站终极指南用Hugo Blox Builder快速搭建专业网站 想要快速搭建专业网站却不懂编程 Hugo Blox Builder正是你需要的零静态站点前端开发工具上一篇AngularEditor核心功能详解从基础编辑到高级自定义的完整教程下一篇WSABuilds 安装教程在 Windows 10/11 上跑 WSA 的三种预构建方案含 Magisk 与 Google Play创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考