Hexo|升级关于页(About)生涯卡片

agsd2026-02-112026-02-13

本文记录了针对 Hexo 博客 AnZhiYu 主题“关于”页面（About）中“生涯卡片”模块的定制化修改过程。原主题的生涯列表较为简洁，仅支持纯色圆点与文本。本次修改旨在实现以下需求：

支持图片图标：将原本的纯色圆点替换为可自定义的图片。
样式增强：增大图标与字体尺寸，增加行间距，提升视觉冲击力。
交互优化：增加图标悬停放大动画，并支持点击图标跳转外链。

效果预览

1. 修改模板文件 (`about.pug`)

首先需要修改页面的结构模板，使其能够读取并在 YAML 配置中定义的图片路径和跳转链接。

文件路径：themes/anzhiyu/layout/includes/page/about.pug

找到 .careers-group 相关的代码块，将其替换为以下逻辑：

.careers-group
  if crrList
    each career in crrList
      .career-item
        //- 定义样式变量，优先使用 icon 图片，如果没有则回退到 color 纯色
        - var circleStyle = `background: ${career.icon ? `url(${url_for(career.icon)}) center center / cover no-repeat` : (career.color ? career.color : "#357ef5")}`
        
        //- 如果配置了 href，则渲染为 a 标签，否则为普通 div
        if career.href
          a.circle(href=career.href, target="_blank", style=circleStyle)
        else
          .circle(style=circleStyle)
          
        .name=career.desc
  else
    .careers-none

修改解析：

引入了 circleStyle 变量，通过三元运算符判断是否使用 icon 图片背景。
增加了 career.href 判断，实现点击跳转功能。

2. 调整样式文件 (`about.styl`)

接下来调整 CSS 样式，控制元素的大小、间距以及动画效果。

文件路径：themes/anzhiyu/source/css/_page/about.styl

查找 .author-content-item.careers 下的相关样式并进行修改：

/* 增加列表项之间的间距 */
.author-content-item.careers .career-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 12px 0; /*设置上下间距*/
}

/* 调整图标/圆点尺寸及动画 */
.author-content-item.careers .career-item .circle {
  width: 48px;  /* 增大尺寸 */
  height: 48px;
  margin-right: 16px;
  border-radius: 50%;
  transition: transform 0.3s; /* 添加过渡动画 */
  cursor: pointer; /* 鼠标变为手型 */
}

/* 悬停放大效果 */
.author-content-item.careers .career-item .circle:hover {
  transform: scale(1.2);
}

/* 调整文字样式 */
.author-content-item.careers .career-item .name {
  color: var(--anzhiyu-secondtext);
  font-size: 24px; /* 增大字号 */
  font-weight: bold; /* 加粗 */
}

3. 配置数据文件 (`about.yml`)

最后，在数据文件中添加图片路径和链接即可生效。

文件路径：source/_data/about.yml

careers:
  tips: 生涯
  title: 稳步前行
  list:
    - desc: 某某大学
      color: "#357ef5"
      icon: /img/university_logo.png   # [新增] 图片路径
      href: https://www.university.edu # [新增] 跳转链接
      
    - desc: 某某中学
      color: "#ff0000"                 # 未设置 icon 时显示此颜色