Hugo Blox Portfolio 的 Accomplishments 组件：证书与成就时间线配置实战-北京尧图网络

静态站点前端开发工具【免费下载链接】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本仓库中的kit项目允许你用 Markdown 与 YAML 配置块的方式搭建个人网站其中accomplishments组件专门用于在 Portfolio作品集等主题的关于页面中呈现证书、课程与专业成就列表。本文以 starters-bootstrap/portfolio 中的 accomplishments.md 为骨架结合模块源码 accomplishments.html 的渲染逻辑完整讲解如何声明、排序、定制并本地化这一组件读完即可在你的 Portfolio 站点中落地一个带机构图标、日期区间与证书链接的成就时间线。一、组件定位成就区块在 Portfolio 站点中的角色在 Hugo Blox 的页面构建体系中页面由一个个区块block拼装而成。accomplishments是其中的标准区块之一与experience、skills、collection等区块并列源码位于 modules/blox-bootstrap/layouts/partials/blocks/对应的渲染模板是 accomplishments.html早期 v1 版本位于 v1/accomplishments.html两者渲染逻辑一致差异仅在参数读取方式上。Portfolio 起步模板将其组织为独立的内容文件 starters-bootstrap/portfolio/content/about/accomplishments.md并与其他区块文件about.md、education.md、experience.md、contact.md等一起放在content/about/目录下页面加载时按各自的weight决定纵向排列顺序。本文件weight: 40处于关于页面的中段位置。与侧栏型的experience区块不同accomplishments的典型用法是横向呈现一条条卡片式成就记录每张卡片包含机构图标、成就标题、机构名与日期区间并在可选情况下附带详情描述与查看证书链接非常适合展示 MOOC 证书、认证考试、奖学金等不易用传统工作履历表达的成就。二、Front Matter 逐项解读一个区块实例的完整配置该文件是 YAML Front Matter 形式的独立页面区块通过headless: true声明自己不生成独立 URL仅作为页面片段被聚合。逐项说明如下参数示例值作用与取值说明widgetaccomplishments声明使用哪个区块模板渲染。必须与模板文件名对应headlesstrue标记为无头页面headless page不产生独立路由只作为区块被页面引用weight40区块在页面中的出现顺序数值越小越靠前titleAccomplishshy;ments区块标题。shy;是 HTML 软连字符用于在长标题中提供折行点浏览器仅在行尾需要断词时才显示连字符subtitle空标题下方的副标题可留空date_formatJan 2006日期渲染格式遵循 Go 的time包布局语法Jan月份缩写2006四位年份item见下文成就条目列表每个条目一条记录design.columns1区块宽度。1为全宽单列2时模板会给外层容器追加col-lg-8类使其在大屏上收窄为约 2/3 宽度便于与其他区块形成分栏布局区块的三大必填参数是title、organization与date_start这与模板中只对这三个字段无条件渲染的逻辑对应见下文源码分析。date_format未设置时模板会回退到默认值Jan 2006。三、成就条目item字段详解文件中的item是一个列表每一条对应一张成就卡片。以文中的三个示例Coursera 深度学习、edX 区块链、DataCamp 的 R 面向对象编程为参照各字段含义如下字段必填示例值说明title是Neural Networks and Deep Learning成就/课程/证书名称渲染为卡片标题支持 Markdown 与 emojiorganization是Coursera颁发机构名称会显示在日期旁并用于自动推导机构图标文件名见下文date_start是2021-01-25起始日期按date_format格式化后展示条目排序也依赖此字段date_end否2020-12-21或结束日期。留空则只显示起始日期适合持续学习/进行中的成就description否见下文成就详情。支持 Markdown 多行文本可用\|2-前缀编写多行描述organization_url否https://www.edx.org机构链接图标与机构名会被包裹成可点击链接url否成就详情页链接渲染时标题整体变为可点击链接certificate_url否证书在线核验地址。存在时卡片底部会出现See certificate链接icon否v1/旧版支持自定义机构图标名。v2 模板默认由organization自动推导旧版模板 v1/accomplishments.html 中该字段生效关于icon的推导规则源码中有明确实现模板先取item.icon若为空则执行replace (lower .organization) _——即把机构名转小写、空格替换为下划线例如DataCamp→datacampObject-Oriented Programming不会影响机构推导。随后模板尝试从资源中加载media/icons/brands/icon.svg{{- $svg_icon : resources.Get (printf media/icons/brands/%s.svg $icon) -}}也就是说只有存在与机构名对应的 SVG 图标资源时卡片左侧才会显示 56×56 的机构 Logo源码中写死width56 height56并带loadinglazy懒加载找不到对应图标时区块静默降级为无图标布局不会报错其余内容照常渲染。若需自定义图标可向 modules/blox-bootstrap/static/media/icons/brands/如academicons、brands目录放入对应命名的 SVG 文件。四、渲染流程从 YAML 到 HTML 卡片源码级原理区块模板 accomplishments.html 的核心渲染流程可概括为四条链路初始化取当前区块对象$block读取design.columns缺省为1外层容器col-12当列为2时追加col-lg-8第 8–11 行。排序sort $block.content.items .date_start desc第 15 行——所有条目按date_start降序排列即最近的成就显示在最上方无需手工维护顺序新增条目只需追加到列表末尾。卡片渲染每条目生成一个card experience course结构的 Bootstrap 卡片标题、机构名、描述均经过markdownify | emojify管道处理支持在 YAML 中直接写 Markdown 语法和 emoji第 16–54 行。日期与证书链接起始日期通过(time .date_start) | time.Format ($block.content.date_format | default Jan 2006)格式化date_end非空时以–连接区间第 41–44 行。certificate_url非空时卡片底部输出See certificate链接文案取自 i18n 键see_certificate在 i18n/en.yaml 等 30 语言包中均有定义如 i18n/zh.yaml 中为对应中文文案i18n see_certificate | default See certificate保证未命中语言时回退英文第 56–60 行。区块解析入口方面accomplishments与其他区块一并出现在区块类型白名单中parse_block_v2.html 第 98 行将accomplishments与experience、collection、skills等列入$use_cols集合表明该区块参与列宽相关的特殊处理这也是design.columns在该区块中生效的底层原因。两点实用推论从源码结构看想控制宽度只需切换design.columns为1或2无需改动任何模板想让卡片更丰满优先填description与certificate_url它们分别控制正文与底部证书链接的显隐。五、多行描述与复制即用的配置模板成就描述支持 YAML 多行块。文中注释提示使用|2-前缀description: |2- 第一行内容第二行内容|2-的含义是保留换行的字面量块literal block2表示去掉前两格缩进-表示不追加结尾换行。描述文本支持 Markdown如列表、加粗渲染时经markdownify处理。示例中 edX 条目的单行描述Formulated informed blockchain models, hypotheses, and use cases.是最简用法。下面是一份可直接替换的完整模板覆盖全部可选字段--- # An instance of the Accomplishments widget. widget: accomplishments headless: true # Order that this section appears on the page. weight: 40 title: Accomplishshy;ments subtitle: # Date format: Jan 2006 | 2 Jan 2006 | 2006-01-02 等 Go 时间布局 date_format: Jan 2006 item: - certificate_url: https://example.com/cert/123 date_end: date_start: 2024-06-01 description: |2- 完成《示例课程》全部单元并通过结业考试。 * 模块一 * 模块二 organization: Example University organization_url: https://example.edu title: Example Certificate url: https://example.edu/courses/example - certificate_url: date_end: date_start: 2024-01-15 description: organization: Online Academy organization_url: title: Self-paced Learning Track url: design: columns: 1 ---要点提醒title、organization、date_start三字段必须保留date_end留空表示进行中若不确定机构图标是否存在icon字段可省略模板会自动降级为无图标布局。六、部署到页面与 Portfolio 模板的集成方式accomplishments.md是headless: true的页面片段无需在menus.yaml中登记也无需在首页_index.md的sections列表中引用这与 Academic CV 模板在首页聚合区块的方式不同。它通过与about.md、education.md等文件同处 content/about/ 目录由关于页面的列表模板按weight顺序聚合渲染。作为参照academic-cv 模板的首页展示了另一种集成方式在sections列表中显式声明- block: accomplishments并在其content.items中直接内联条目同时可用icon: coursera等字段显式指定图标第 88–129 行。两种方式等价区别仅在于独立文件维护与首页内联维护的组织习惯。若你的站点使用 Hugo Blox Builder 的页面构建器也可在后台拖拽添加该区块后编辑条目。运行依赖方面该模板依赖blox-bootstrap模块Portfolio 模板通过 config/_default/module.yaml 导入github.com/HugoBlox/hugo-blox-builder/modules/blox-bootstrap/v5另导入blox-plugin-netlify用于部署支持站点级日期格式可在 params.yaml 的locale.date_format中设置示例为Jan 2, 2006区块内date_format优先级更高。七、常见定制场景速查修改成就排序无需改顺序模板自动按date_start降序想强制置顶某条可把其date_start设为最新日期。隐藏证书链接将certificate_url置空即可模板中该链接仅在字段非空时输出。让机构名可点击填写organization_url机构名与图标存在时都会被包上链接并以target_blank relnoopener新窗口打开。让成就标题可点击填写url标题整体变为链接。中文化区块内文案如 See certificate由 modules/blox-bootstrap/i18n/ 中的语言包驱动站点启用zh语言后即显示对应中文标题文本Accomplishments请自行替换为如成就与证书等中文标题。宽度调整design.columns取值1全宽或2收窄区块模板会据此决定容器是否附加col-lg-8。多行描述缩进务必使用|2-且保持子项统一缩进否则 YAML 解析会将多行文本误解析为嵌套键。八、小结accomplishments区块是 Hugo Blox Portfolio 站点展示证书与成就的轻量方案声明式 YAML 配置、自动按时间排序、图标自动推导与降级、日期格式化、i18n 文案以及可选的证书/详情链接全部由 blocks/accomplishments.html 一个模板承载。掌握本文所述的字段语义与渲染链路后你既能直接修改 accomplishments.md 填充真实成就也能举一反三地理解其他区块如experience、skills的配置范式进而用纯 Markdown 素材搭建出结构完整的个人作品集站点。赞分享静态站点前端开发工具【免费下载链接】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 Tailwind UI基于 TailwindCSS 的 Hugo 组件化主题框架解析与实战配置Hugo Blox Tailwind UI基于 TailwindCSS 的 Hugo 组件化主题框架解析与实战配置本篇技术指南以仓库中 modules/bl静态站点前端开发工具React Doctor 的 improve-threejs 技能Three.js 与 R3F 应用的帧循环审计与视觉缺陷修复实战React Doctor 的 improve threejs 技能Three.js 与 R3F 应用的帧循环审计与视觉缺陷修复实战 React Doctor静态站点前端开发工具用 Hugo Blox Portfolio Widget 搭建作品集starters-bootstrap/portfolio 配置详解与源码级实现解析用 Hugo Blox Portfolio Widget 搭建作品集starters bootstrap/portfolio 配置详解与源码级实现解析本篇技静态站点前端开发工具上一篇在 mistral.rs 中使用 Lark 文法约束 LLM 输出HTTP 服务器实战指南下一篇Karpenter for AWS 中的 NodeClaim理解节点生命周期的核心资源创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Hugo Blox Portfolio 的 Accomplishments 组件：证书与成就时间线配置实战

相关推荐

通讯优先的CRM系统落地实践：从桌面端到客户档案

MySQL批量删除相同前缀数据表：安全清理与防误删全攻略

Atlas 300V 24G推理加速卡评测：从环境搭建到YOLOv5部署优化

更多资讯

昇腾Atlas 300V部署YOLO：从环境搭建到推理优化全指南

Atlas 300V 24G推理加速卡部署YOLO完整实战指南

TaoToken 统一 Key 接入 Cline：settings.json 配置骨架与报错排查

Atlas 300V推理卡部署YOLO实战：从模型转换到性能优化全流程解析

极大似然估计原理与Python实现：参数估计的关键技术

CC Switch 3.16.1 配置指南：在 codex 中接入 DeepSeek、Kimi、GLM 的 settings.json 骨架与插件验证

今日更新

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

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

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

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？