如何在HugoBlox成员个人资料中添加自定义技能模块

核心问题原因 #

你之前用官方技能块教程操作时，是把技能块加到了团队页面的全局blocks配置里，所以会显示在页面底部。要给单个成员加专属技能，得把技能数据和成员个人资料绑定，渲染在成员的单独页面里。

具体实现步骤 #

方法一：修改成员资料模板（推荐） #

1. 找到成员页面模板文件
   找到Hugo项目里的成员详情页模板，路径一般是layouts/people/single.html（如果用主题的话，建议复制主题里的对应文件到项目根目录的layouts/people下修改，避免主题更新覆盖）。

2. 在模板中添加技能渲染代码
   在模板里合适的位置（比如个人简介之后、联系方式之前）插入以下Hugo模板代码，用来读取并渲染成员的技能数据：

   {{ if .Params.skills }}
   <section class="py-3">
     <h3 class="h4 mb-3">技能</h3>
     <div class="row g-3">
       {{ range .Params.skills }}
       <div class="col-md-6">
         <div class="d-flex justify-content-between align-items-center mb-1">
           <span class="fw-bold">{{ .name }}</span>
           <span>{{ .level }}%</span>
         </div>
         <div class="progress" style="height: 8px;">
           <div class="progress-bar" role="progressbar" style="width: {{ .level }}%" aria-valuenow="{{ .level }}" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
       {{ end }}
     </div>
   </section>
   {{ end }}
   

   这段代码用了Bootstrap进度条样式，和HugoBlox的风格更统一。

3. 给成员添加技能数据
   打开每个成员的资料文件（路径content/people/xxx.md），在YAML开头配置里添加skills字段，比如：

   title: 张三
   role: 讲师
   skills:
     - name: 课程设计
       level: 95
     - name: 互动教学
       level: 90
     - name: Python编程
       level: 85
   

方法二：用自定义短代码（无需改模板） #

如果不想修改模板，可以自定义一个短代码，直接在成员的markdown内容里插入技能块：

1. 创建技能短代码
   在项目根目录的layouts/shortcodes下新建member-skills.html文件，内容如下：

   {{ $skills := .Inner | yaml.Unmarshal }}
   <section class="py-3">
     <h3 class="h4 mb-3">技能</h3>
     <div class="row g-3">
       {{ range $skills }}
       <div class="col-md-6">
         <div class="d-flex justify-content-between align-items-center mb-1">
           <span class="fw-bold">{{ .name }}</span>
           <span>{{ .level }}%</span>
         </div>
         <div class="progress" style="height: 8px;">
           <div class="progress-bar" role="progressbar" style="width: {{ .level }}%" aria-valuenow="{{ .level }}" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
       </div>
       {{ end }}
     </div>
   </section>
   

2. 在成员资料中使用短代码
   在成员的markdown文件的正文部分，插入短代码并填写技能数据：

   {{< member-skills >}}
   - name: 教学技能
     level: 90
   - name: 数据分析
     level: 80
   {{< /member-skills >}}
   

验证效果 #

修改完成后，运行hugo server启动本地服务器，打开任意成员的个人资料页，就能看到专属的技能块显示在页面内了。

内容的提问来源于stack exchange，提问作者BaRud