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

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

样式预览

放图片（”C:\Users\gt\Pictures\blog-img\相册主页顶图.png”）
预览页面：点击访问

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

修改相册主页面pug文件

修改 anzhiyu\layout\includes\page\album.pug 每行开头的-表示删除，+表示更改

1
2
3
4
5
6
7
8
#album  
-  - let album_background = page.top_background  
+  .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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#album_detail  
  each i in site.data.album  
    - let path_name = (is_current(i.path_name)) ? true : false  
    - type = i.type  
-   - let album_detail_background = i.top_background  
-   - let album_detail_top_link = i.top_link  
-   - let album_detail_top_btn_text = i.top_btn_text  
    if (path_name && i.album_list)  
+     .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 

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

注意以上两个配置方法，按需添加就可以了，不需要做多余修改~
到此就大功告成了！