骚男的相册集 - 每一张照片都是一次美好的记忆 - 常规

骚男的相册集 - 每一张照片都是一次美好的记忆

欢迎来到骚男的相册集！这里记录着每一次美好的回忆。每一张照片都是一次美好的记忆，记录着生活中的点点滴滴。点击图片进入相册，了解更多关于我的故事。

如何添加背景图片

该代码是一个相册页面的模板，用于展示一个动态背景图片的相册页面，并展示多个相册及其封面图片和详细信息。

变量 album_background 用于存储 page.top_background 的值。
HTML 结构以一个类名为 author-content author-content-item album single 的 div 元素开始。style 属性根据 album_background 的值进行条件设置，决定相册的背景图片。
在 div 元素内部，有一个类名为 card-content 的 div 元素，包含相册的内容。
相册标题和描述分别使用 author-content-item-tips 和 author-content-item-title 元素显示。
相册的描述之后是一个 content-bottom 的 div 元素，包含相册的标题或信息。
banner-button-group 的 div 元素包含一个链接到 /about/ 页面的链接，包含一个向右箭头图标和文字 “关于我”。
card-album 的 div 元素包含一个循环，遍历 site.data.album 中的数据。
对于 site.data.album 中的每个项目，都会创建一个 card 元素。这个卡片代表集合中的一个相册。
每个卡片都会显示一个图像缩略图 (.card_cover) 和其他内容 (.card__content)，例如相册的类别和标题。

页面功能

动态背景图片：根据 album_background 的值设置相册的背景图片。
相册展示：循环展示 site.data.album 中的每个相册，包含封面图片和标题。
关于我链接：点击 “关于我” 按钮跳转到 /about/ 页面。

代码示例

<!-- album_background 的值来自 page.top_background -->
<div class='author-content author-content-item album single' style='${album_background ? `background: url(${album_background}) top / cover no-repeat;` : ''}'></div>

<!-- 相册内容 -->
<div class='card-content'>
  <div class='author-content-item-tips'>相册集</div>
  <span class='author-content-item-title'>这里是骚男的相册集哦😯</span>
  <div class='content-bottom'>
    <div class='tips'>每一张照片都是一次美好的记忆。</div>
  </div>
  <div class='banner-button-group'>
    <a class='banner-button' onclick='pjax.loadUrl('/about/')'>
      <i class='anzhiyufont anzhiyu-icon-arrow-circle-right' style='font-size: 1.5rem'></i>
      <span class='banner-button-text'>关于我</span>
    </a>
  </div>
</div>

<!-- 相册列表 -->
<div class='card-album'>
  <!-- 循环遍历 site.data.album 中的每个相册 -->
  <% each i in site.data.album %>
  <div class='card' onclick='pjax.loadUrl('${i.path_name}')'>
    <img class='card_cover' src='${i.cover}'/>
    <div class='card__content'>
      <p class='card__category'>${i.class_name}</p>
      <h3 class='card__heading'>${i.description}</h3>
    </div>
  </div>
  <% } %>
</div>