分享美化魔改 Hexo anzhiyu

让anzhiyu主题相册页及子页面支持自定义头图

Kouseki2023-06-092023-10-15

在 2023.06.30 的 commit 中，主题已支持该功能，但配置方式与本文有差异，请留意

主题固然很美丽，但人总会有各种需求，各有所好。折腾劲上来了自然也不会善罢甘休，下面我会分享如何让 anzhiyu 主题的相册页面album支持自定义头部图片。

样式预览

预览页面：点击访问

注意，以下修改包含相册主页面和子页面，子页面可以分别配置头图~

修改相册主页面pug文件

修改 anzhiyu\layout\includes\page\album.pug

#album
-  .author-content.author-content-item.album.single
+  .author-content.author-content-item.album.single(style = `background: url(${theme.album.top_background}) left 28% / cover no-repeat !important;`)
    .card-content
      .author-content-item-tips 相册集
      span.author-content-item-title 这里是我的相册集哦😯
      .content-bottom
        .tips 每一张照片都是一次美好的记忆。

修改相册子页面pug文件

修改 anzhiyu\layout\includes\page\album_detail.pug

#album_detail
  each i in site.data.album
    - let path_name = (is_current(i.path_name)) ? true : false
    - type = i.type
    if (path_name && i.album_list)
-      .author-content.author-content-item.album.single
+      .author-content.author-content-item.album.single(style = `background: url(${i.background}) left 28% / cover no-repeat !important;`)
        .card-content
          .author-content-item-tips 相册集
          span.author-content-item-title=i.class_name
          .content-bottom
            .tips=i.description

当然这里的文案也是可以修改的~按照自己喜好来就好

添加相册主页面头图配置项

在主题配置文件_config.anzhiyu.yml中添加以下配置项

1
2
3

# 相册主页面头图
album:
  top_background: https://img.nahida.fun/2023/01/28/63d439ab3ec60.jpg

添加相册子页面配置项

在你的相册配置文件album.yml中多加一条background

······
- class_name: 清晨&夕阳&美景
  path_name: /worldScenery
  type: 2
  description: 因为到不了世界各地，所以请网友们发来了各地的夕阳与风景🌇。
  cover: https://bu.dusays.com/2023/04/09/64329399d1175.jpg
  rowHeight: 220
  limit: 10
  lazyload: true
  btnLazyload: false
  url: false
+ background: /imgs/bg-main.webp
  album_list:
······