Hexo | 修改 Gallery 全流程记录

为便于自己对本博客的维护和更新，将 Gallery 页面的大幅改动记录在此，为以后的内容提供参考。

主要改动内容：

修改 page-template.ejs 的内容，为 Gallery 页面单独去除圆角背景板
修改 photo-album.ejs 的内容，为 Gallery 页面添加标题、副标题
通过 css 注入，修改页面排版、图片放大效果等细节内容
修改字体加载逻辑，优化字体显示速度（详见文章《Hexo | 博客网站字体加载缓慢问题解决方案》）

修改 page-template.ejs

page-template.ejs 位置：

1	node_modules\hexo-theme-keep\layout\_template\page-template.ejs

在 line 19 添加

1	if (current_page_data) { keep_container = '' }

使得 keep_container 为空，进而不渲染圆角背景板。

修改 photo-album.ejs

photo-album.ejs 位置：

1	node_modules\hexo-theme-keep\layout\_template\photo-album.ejs

在代码开头前添加

<div class="photo-album-header">
    <h1 class="gallery-title">Gallery</h1>
    <h2 class="gallery-subtitle">Explore the beauty captured in moments.</h2>
</div>

从而显示标题和副标题内容。

修改 css 内容

添加一个 gallery.css，在 hexo 的主题 yml 配置文件中，找到 inject 栏，填入 gallery.css

inject:
  enable: true
  css:
    -
      - /css/gallery.css
    # - ...

在 gallery.css 文件中添加各种详细内容：


/* 标题部分 */
    /* 父容器样式 */
    .photo-album-header {
        margin-top: 120px; /* 顶部间距 */
        text-align: center; /* 内容居中 */
        margin-bottom: 160px; /* 标题与图片之间的间距 */
    }

    /* 标题样式 */
    .gallery-title {
        font-size: 48px; /* 字体大小 */
        font-weight: 600; /* 字体加粗 */
        font-family: 'NOTO_SERIF'; /* 字体样式 */
        font-style: italic;
        color: #000000; /* 字体颜色 */
        letter-spacing: 2px; /* 字间距 */
        margin: 0; /* 去掉默认的外边距 */
        line-height: 1.2; /* 行高 */
    }

    /* 副标题样式 */
    .gallery-subtitle {
        font-size: 16px; /* 字体大小 */
        font-weight: 400; /* 正常粗细 */
        font-family: 'NOTO_SERIF'; /* 字体，可更换 */
        font-style: italic;
        color: #666; /* 字体颜色（灰色） */
        margin: 6px 0 0; /* 与主标题间距 */
        line-height: 1.5; /* 行高 */
        text-transform: none; /* 保持正常大小写 */
        letter-spacing: 0.5px; /* 字间距 */
    }

/* 图片部分 */
    /* 图片方角 */
    .page-template-container .photo-album-box img.photo {
        border-radius: 0rem;
    }

    /* 图片放大遮罩 */
    .zoom-in-image-mask.show {
        background: rgba(255, 255, 255, 1);
        visibility: visible;
    }

    /* 图片动画 */
    .zoom-in-image-mask .zoom-in-image {
        transition: transform 0.3s cubic-bezier(0.08, 0.93, 0.37, 0.99) !important;
    }