前言

Hugo PaperMod 主題沒有提供圖片放大和畫廊的功能，本篇介紹外掛讓文章的圖片增添效果。

Medium Zoom

GitHub ／ Website

提供圖片放大效果且安裝容易，點擊下方圖片可以看到效果：

202302_02_1920x1200

安裝 Medium Zoom

下載 Github 提供的連結：Minified，並把它放到 /static 資料夾裡面。

修改 /themes/PaperMod/layouts/partials/comments.html，插入以下程式碼：

<script src="{{ .Site.BaseURL }}medium-zoom.min.js"></script>

<script>
const images = Array.from(document.querySelectorAll(".post-content img"));
images.forEach(img => {
  mediumZoom(img, {
    margin: 0, /* The space outside the zoomed image */
    scrollOffset: 40, /* The number of pixels to scroll to close the zoom */
    container: null, /* The viewport to render the zoom in */
    template: null, /* The template element to display on zoom */
    background: "#000"
  });
});
</script>

重新佈署就可以看到效果了。

以上程式碼是針對 PaperMod 的 .post-content img 圖片增加 zoom-in 效果，其他主題可能要另外修改。

GitHub ／ Website

提供多圖片畫廊效果。

從 GitHub 下載 解壓縮放到 /theme/ 並重新命名為 gallery。

修改 Hugo 目錄 config.yaml 的 theme。

theme:
- PaperMod
- gallery #新增 gallery 主題

直接在文章 .md 裡面插入以下程式碼：

{{< gallery match=“gallery/*” sortOrder=“desc” rowHeight=“150” margins=“5” thumbnailResizeOptions=“600x600 q90 Lanczos” showExif=false previewType=“blur” embedPreview=true loadJQuery=true >}}

gallery/* 為畫廊的圖片資料夾位置，依照需求自行修改。

圖片來源

Nikon