有时候专门弄了很大的封面图，并开启了Params.cover.linkFullImages以便能够炫耀一下原始分辨率的惊艳效果。但是PaperMod主题并没有处理这个情况，默认情况下浏览器打开图片，简直是不优雅。所以弄个简单的lightbox效果。还是上一篇《目录放一边》那个大前提：不去覆盖PaperMod模板的原始内容，只在让自由发挥的地方去整，这不是最优解，只为好玩。

思路

  • JavaScript逻辑

    • 使用document.querySelectorAll('.entry-cover a')查找所有.entry-cover内的<a>标签。
    • 使用addEventListener为每个链接添加点击事件监听器。
    • 在点击事件的处理函数中，使用event.preventDefault()阻止链接默认的打开行为。
    • 然后，通过this.href获取链接的href属性值，并调用showImage函数弹出图片，点击覆盖层或关闭按钮时调用hideImage隐藏图片。
    • showImage(imageUrl)函数接收图片链接，将该链接设置为#popupImage的src，并显示#overlay。
    • hideImage()函数隐藏#overlay。

  • CSS样式

    • #overlay弄成一个全屏的浮动层，背景为半透明黑色。默认情况下隐藏（display: none;）。
    • #popupImage显示弹出的图片，限制最大宽度和高度为全屏的90%。
    • .close弄个关闭按钮让人点，点击后会关闭浮动层，其实随便点什么地方都行。

代码

  • 新建assets/css/extended/lightbox.css，添加如下内容：
/* 用于覆盖页面的全屏背景 */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

/* 弹出的图片样式 */
#popupImage {
    max-width: 90%;
    max-height: 90%;
}

/* 关闭按钮样式 */
#overlay .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}
  • 修改layouts/partials/extend_footer.html，添加如下内容：
<div id="imageMask" class="overlay" onclick="hideImage()">
    <span class="close">&times;</span>
    <img id="popupImage" src="" alt="" />
</div>
  • 新建assets/js/popup-image.js，添加如下内容：
document.getElementById('popupImage').addEventListener('click', function (event) {
    event.stopPropagation();
});
document.querySelectorAll(".entry-cover a").forEach(link => {
    link.addEventListener("click", function (event) {
        event.preventDefault();
        showImage(this.href);
    });
});
function showImage(imageUrl) {
    const pic = document.getElementById("popupImage");
    pic.src = imageUrl;
    pic.alt = "不能打开链接";
    document.getElementById("imageMask").style.display = "flex";
}
function hideImage() {
    document.getElementById("imageMask").style.display = "none";
}

如果想把这个效果也增加在通过figure shortcode添加的图片链接之上，把document.querySelectorAll('.entry-cover a')改成document.querySelectorAll('figure a')。

  • 修改layouts/partials/extend_head.html，添加如下内容：
{{- $popupImage := resources.Get "js/popup-image.js" | resources.Minify | slice | resources.Concat "assets/js/popup-image.js" }}
<script defer crossorigin="anonymous" src="{{ $popupImage.RelPermalink }}"></script>