静态站点前端开发工具【免费下载链接】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点击查看免费下载starters/academic-cv/content/experience.md是 Academic CV 起始模板中一份典型的 landing 型 页面配置它本身几乎不书写 HTML而是通过 front matter 声明type: landing并以sections列表按顺序挂载 4 个resume-*系列 Blox履历经历、技能、奖项、语言。本文将以该文件为骨架结合仓库中modules/blox-tailwind/layouts/partials/blox/下的源码实现逐块拆解其配置语法、数据来源与底层渲染原理帮助你掌握用 Hugo Blox Builder本项目gh_mirrors/hu/kit即其源码镜像快速搭建一份个人简历页的完整方法。一、页面骨架一份 landing 页面如何被 拼装 出来先看关联文档starters/academic-cv/content/experience.md的完整内容--- title: Experience date: 2023-10-24 type: landing design: spacing: 5rem # Note: username refers to the users folder name in content/authors/ # Page sections sections: - block: resume-experience content: username: admin design: # Hugo date format date_format: January 2006 # Education or Experience section first? is_education_first: false - block: resume-skills content: title: Skills Hobbies username: admin design: show_skill_percentage: false - block: resume-awards content: title: Awards username: admin - block: resume-languages content: title: Languages username: admin ---这份 front matter 可以拆成三层结构层级字段作用页面级type: landing声明页面使用 landing 布局由 Hugo Blox Builder 的 landing 渲染管线接管页面级design.spacing: 5rem控制区块之间的垂直间距Tailwind 风格的长度值区块级sections[].block指定要渲染的 Blox 名称如resume-experience区块级sections[].content传给 Blox 的内容参数核心是username区块级sections[].design传给 Blox 的样式/行为参数如date_format、is_education_first关键约定原文档注释原话username指的是content/authors/下某个作者目录的文件夹名。也就是说简历数据不写在这个页面里而是统一存放在作者档案页content/authors/admin/_index.md的 front matter 中各resume-*Blox 通过username找到对应的作者页面再读取其work、education、skills、languages、awards等参数进行渲染。这种 页面只做拼装、数据归于作者档案 的设计让同一份作者数据可以被多个页面About、Experience、Publications 等复用。二、resume-experience经历 教育的时间线区块resume-experience是这份页面中参数最丰富的区块对应源码 modules/blox-tailwind/layouts/partials/blox/resume-experience.html。2.1 数据从哪来源码第 10-16 行展示了其数据获取链路{{ $author : $block.content.username | default admin }} {{ $person_page_path : (printf /authors/%s $author) }} {{ $person_page : site.GetPage $person_page_path }} {{ $person : $person_page.Params }}即username缺省时为admin拼出/authors/admin路径后通过site.GetPage取到作者页面再取它的Params。若找不到对应作者页模板会直接以errorf抛出构建错误第 13-15 行提示你检查username取值并创建对应的作者页面——这是使用该 Blox 最常见的报错来源。2.2 两个 design 参数的源码级解释原文档配置了design: date_format: January 2006 # Hugo date format is_education_first: false # Education or Experience section first?date_formatGo 模板日期格式化字符串参照 Go 的 2006 年 1 月 2 日参考时间约定。源码第 44、47 行在渲染起止日期时使用(time .date_start) | time.Format ($block.design.date_format | default January 2006)即未配置时默认输出January 2006这样的 年-月 格式适合简历场景。你也可以改成Jan 2006、2006-01等任意 Go 格式。is_education_first源码第 17 行{{ $is_education_first : $block.design.is_education_first | default false }}默认false工作经历在前。第 27 行通过{{ if $is_education_first }}flex-col-reverse{{end}}控制容器使用 Tailwind 的flex-col-reverse从而把教育区块翻转到工作经历之前。可见其实现方式是纯 CSS 顺序翻转而非重新排序数据。2.3 渲染逻辑两段时间线源码第 29-65 行渲染$person.work第 67-104 行渲染$person.education两者共用同一套 竖向时间线 结构每一条记录是一个li左侧是圆点图标工作用公文包 SVG、教育用学士帽 SVG右侧依次展示标题工作为.position教育为.area副标题工作为.company_name教育为.institution时间段date_start–date_end当date_end为空时自动显示Present源码第 49 行{{ i18n present | default Present }}支持国际化覆盖见仓库 i18n/en.yaml正文.summary经$page.RenderString渲染因此支持 Markdown 语法如列表、斜体、链接可选.button提供text和url两个子字段渲染为带下载图标的外部链接按钮如 Read Thesis。三、resume-skills技能分组与进度条resume-skills区块对应源码 modules/blox-tailwind/layouts/partials/blox/resume-skills.html。原文档中它的配置最简- block: resume-skills content: title: Skills Hobbies username: admin design: show_skill_percentage: false3.1 参数语义content.title区块大标题源码第 21 行经markdownify | emojify渲染因此标题里可以写 Markdown 或 emoji。design.show_skill_percentage是否显示百分比进度条。源码第 16 行{{ $show_show_skill_percentage : $block.design.show_skill_percentage | default true }}——默认是true原文档显式设为false是为了隐藏进度条适合不强调掌握程度的简历风格。注意变量名在源码中写为$show_show_skill_percentage多一个 show属源码原有拼写。3.2 数据结构与渲染细节技能数据来自作者页params.skills是一个分组数组每组结构如下示例见 content/authors/admin/_index.md 第 110-142 行skills: - name: Technical Skills items: - name: Python description: percent: 80 icon: code-bracket - name: Hobbies color: #eeac02 color_border: #f0bf23 items: - name: Hiking percent: 60 icon: person-simple-walk组级字段name分组标题、color进度条填充色、color_border进度条边框色默认均为空此时使用主题默认色条目级字段name、description、percent0-100 整数、iconSVG 图标名源码第 38 行{{ $pack : or .icon_pack fas }}支持用icon_pack指定图标库fab/fas/far/fal会被归一化为fa前缀随后经 partials/functions/get_icon.html 渲染为内联图标进度条本体源码第 56-60 行是一个外层skills-wrapper可带border-color内嵌skills-percent的 div宽度由percent计算为百分比背景色取color。只有percent存在且show_skill_percentage为真时才渲染。四、resume-awards奖项卡片列表resume-awards区块对应源码 modules/blox-tailwind/layouts/partials/blox/resume-awards.html原文档配置为- block: resume-awards content: title: Awards username: admin奖项数据来自作者页params.awards字段与含义字段必填说明title是奖项/证书名称awarder是颁发机构如 Coursera、edXdate是颁发日期如2023-11-25url否奖项详情页链接标题将变为可点击链接certificate_url否证书链接渲染为 See certificate 按钮文案可通过 i18nsee_certificate覆盖icon否机构品牌图标按 brands 图标包渲染summary否Markdown 格式的获奖说明源码第 27 行以sort $awards .date_start desc对奖项做降序排序从排序键看设计意图是让最新奖项置顶。渲染时每项是一张卡片rounded-lg shadow展示图标、标题、awarder · 日期日期同样套用design.date_format默认January 2006、摘要与证书按钮。五、resume-languages环形语言进度图resume-languages区块对应源码 modules/blox-tailwind/layouts/partials/blox/resume-languages.html原文档配置- block: resume-languages content: title: Languages username: admin语言数据来自作者页params.languages结构非常简单languages: - name: English percent: 100 - name: Chinese percent: 75 - name: Portuguese percent: 25其渲染逻辑颇具巧思源码第 28-38 行每门语言用一个 SVG 环形进度图表示——底层是灰色背景圆环上层是主题色primary-600圆环通过stroke-dasharray: calc(2 * 22 / 7 * 120)周长 2πr ≈ 2×3.14×120与stroke-dashoffset按percent计算出的偏移量实现按百分比画弧的效果圆环中心叠加{{.percent}}%文字下方显示语言名。该区块不需要任何 design 参数即可工作。六、数据中枢作者页 front matter 全字段四个resume-*Blox 的数据全部集中在 starters/academic-cv/content/authors/admin/_index.md 的 front matter 中。除页面级信息title、role、organizations、profiles、interests等外与本文相关的简历数据字段汇总如下education: - area: PhD Artificial Intelligence # 学位/专业 institution: Stanford University # 学校 date_start: 2016-01-01 date_end: 2020-12-31 # 留空则显示 Present summary: | # 支持 Markdown Thesis on _Why LLMs are awesome_. button: text: Read Thesis url: https://example.com work: - position: Director of Cloud Infrastructure # 职位 company_name: GenCoin # 公司 company_url: # 可选公司链接 company_logo: # 可选品牌 SVG 图标名 date_start: 2021-01-01 date_end: # 留空 在职显示 Present summary: |2- # 多行摘要YAML 块标量 Responsibilities include: - ... skills: # 见第三节 languages: # 见第五节 awards: # 见第四节作者页本身的 front matter 中还支持superuser: true标识站点主用户、highlight_name: true等字段。需要说明的是content/authors/_index.md注意区别于admin/_index.md通过_build.render: never关闭了作者列表页自身的渲染仅将其作为数据容器使用。七、两种渲染引擎的对照Tailwind 版 vs Bootstrap 版本仓库同时维护两套渲染体系理解它们有助于避免配置混淆blox-tailwind 版本文讲解的resume-experience/resume-skills/resume-awards/resume-languages四个 Blox 均位于 modules/blox-tailwind/layouts/partials/blox/数据取自作者页ParamsAcademic CV 起始模板starters/academic-cv默认走这套blox-bootstrap 版旧式experienceBlox 位于 modules/blox-bootstrap/layouts/partials/blocks/experience.html其配置方式不同——数据直接写在区块自身的content.items中含title、company、company_logo、date_start等支持design.columns: 1|2控制列数并按items声明顺序渲染源码注释明确默认使用用户自定义顺序Hugo 不支持对 params 多重排序。如果你的页面配置里写的是block: experience无resume-前缀走的便是 Bootstrap 版写block: resume-experience则走 Tailwind 版。两者字段命名也有差异如companyvscompany_name迁移时需同步修改数据源。八、从零验证本地运行与预览你可以将本仓库视为 Hugo Blox Builder 的源码集直接在 academic-cv 起始模板上体验这份 experience 页面# 克隆仓库本仓库为 HugoBlox/hugo-blox-builder 的镜像 git clone https://gitcode.com/gh_mirrors/hu/kit cd kit/starters/academic-cv # 使用 Hugo 本地预览需 Go 与 Hugo ≥ 0.128 环境模块通过 go.mod 自动拉取 hugo server随后访问http://localhost:1313/experience/即可看到由 4 个 resume Blox 拼装出的简历页。若控制台报错Could not find an author page at /authors/xxx按错误提示检查sections[].content.username与content/authors/下的目录名是否一致即可。修改content/authors/admin/_index.md中的work、education、skills、languages、awards刷新页面即可实时预览变更——这正是 数据与展示分离 带来的迭代效率。小结experience.md用不到 40 行配置就完成了一个完整简历页的组装type: landing声明布局、design.spacing控制节奏、4 个resume-*Blox 各司其职、username串起作者数据源。结合源码可以看到每个参数背后的实现——is_education_first只是一行flex-col-reversedate_format只是time.Format的格式化串Present文案可被 i18n 覆盖技能条与语言环分别由 CSS 宽度与 SVGstroke-dashoffset驱动。掌握这一套 配置即代码 的组装思路后你完全可以在此基础上增删 Blox、调整顺序、自定义图标与配色把简历页扩展成完全贴合个人风格的形态。赞分享静态站点前端开发工具【免费下载链接】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点击查看免费下载相关推荐Hugo Blox Builder 学术简历首页搭建实战逐块解析 academic-cv 模板的 landing 页面配置Hugo Blox Builder 学术简历首页搭建实战逐块解析 academic cv 模板的 landing 页面配置 本文以仓库中 starters b静态站点前端开发工具Hugo Blox 学术简历主题演讲页Event/Talk实战从 Front Matter 到 Reveal 幻灯片Hugo Blox 学术简历主题演讲页Event/Talk实战从 Front Matter 到 Reveal 幻灯片 本文以 starters boots静态站点前端开发工具Flipper Zero 上的 Yahtzee 骰子游戏flipperzero-yatzee 玩法、计分体系与 C 源码实现剖析Flipper Zero 上的 Yahtzee 骰子游戏flipperzero yatzee 玩法、计分体系与 C 源码实现剖析 导读 本文围绕 Flippe静态站点前端开发工具上一篇pry-byebugRuby开发的超级调试利器下一篇动态SVG动画库 AnimatedSvgView - 让你的Android应用更具视觉魅力创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考