Hugo Blox Builder 简历页实战:用 resume 系列 Blox 组装 Experience / Skills / Awards / Languages 履历页面

发布时间:2026/9/25 8:22:53

Hugo Blox Builder 简历页实战:用 resume 系列 Blox 组装 Experience / Skills / Awards / Languages 履历页面 静态站点前端开发工具【免费下载链接】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),仅供参考
延伸阅读

更多相关文章

2026/9/25 8:22:53

LVGL 9.1移植到STM32F103+ST7789完整教程与避坑指南

最近在做一块 1.54 寸 240x240 的 ST7789 彩屏小项目,把 LVGL 9.1 成功跑到了 STM32F103C8T6 上。折腾过程中踩了不少坑,网上能找到的 LVGL 9.x 移植教程又大多停留在 8.x,接口和配置差别不小。这篇笔记就把完整流程捋一遍:从 Kei…

2026/9/25 8:22:53

恶意样本分析实战:从隔离环境搭建到IOC提取的完整流程

开头(约360字)收到一个来路不明的exe,是查杀完就完事,还是打开看看它到底做了什么?这是很多安全从业者、运维和普通用户都绕不开的问题。做病毒程序分析这件事,其实没有想象中那么高门槛,真正需…

2026/9/25 11:38:04

实验室检测报告管理程序:全流程管控与CNAS/CMA合规要点

1. 报告管理程序最容易被忽略,却又是不符合项的重灾区先说个真实场景。我参与过不少实验室的CNAS现场评审和CMA资质认定复查,几乎每一次,评审组长都会翻报告,而且是专门挑那些"看起来没问题"的报告翻。翻完之后的结果很…

2026/9/24 20:24:47

GAMP 5 基于风险的计算机化系统验证:软件分类与审计追踪实践

简介:《A Risk-Based Approach to Compliant GxP Computerized Systems》即业内熟知的GAMP 5指南,面向制药企业质量与IT合规人员、验证工程师及计算机化系统管理者,用于解决GxP法规环境下系统合规性难以科学落地的问题。文档以风险管理为主线…

2026/9/23 12:06:55

安全托管MSSP实战:从静态防御到人机协同的攻防运营与应急响应

简介:这份PPT围绕互联网业务安全托管服务展开,面向企业安全负责人、IT运维人员及关注MSSP/MSS选型的读者,重点回应传统安全过度依赖人工、碎片化静态防御难以对抗产业化攻击等痛点。资源共1个pptx文件,包体约30.63MB,以…

2026/9/25 0:02:35

AI元人文:从工具使用到思维重构的深度探索

最近半年我一直在琢磨一件事:AI元人文到底是什么?说白了,就是“用元视角重新审视人与AI的关系”,也在“探索AI如何反向逼着我们发现自己的思考边界”。标题里的“元探索”,在我看就是一层套一层的追问——当你用AI解决…

2026/9/25 0:02:35

Python+CNN车牌识别实战:从数据预处理到模型训练与部署

简介:基于Python与卷积神经网络的车牌识别项目,面向计算机视觉初学者及智能交通开发者,目标是帮助用户掌握从数据预处理、模型构建到实际部署的完整流程。压缩包共25个文件,包含jpg/png图像样本、py训练脚本、md说明文档、dat数据…

2026/9/25 0:02:35

Vim基础操作全攻略:保存退出、模式切换与高频命令实战

1. 项目概述1.1 核心需求解析今天聊聊Vim。写这个题目的原因是:几乎每个后端开发者、运维人员、数据工程师某天都会遇到一个场景——深夜加班,服务器登录界面只有黑底白字,编辑器只有vi/vim,你必须在五分钟内完成一次配置修改并保…

2026/9/22 16:34:32

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/22 20:01:30

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/22 13:25:41

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑