更换PhotoSwipe插件

在我折腾如何给博客添加PhotoSwipe@5.4.2的时候，我才发现博客自带了PhotoSwipe@4.1.3，我就说怎么出现了CSS样式冲突 ~~（原谅我没仔细看Stack主题的文档）~~ 。不过我并不喜欢4.X版本样式，打算给博客更换为5.X版本，并以Shortcode的形式使用它，方便我维护使用。

删除Stack的PhotoSwipe插件

在/themes/hugo-theme-stack/assets/ts/main.ts内注释两行代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// import StackGallery from "ts/gallery";
import { getColor } from 'ts/color';
import menu from 'ts/menu';
...
const articleContent = document.querySelector('.article-content') as HTMLElement;
if (articleContent) {
    // new StackGallery(articleContent);
    setupSmoothAnchors();
    setupScrollspy();
}

在/themes/hugo-theme-stack/layouts/_default/single.html内注释一行代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{{ define "main" }}
    {{ partial "article/article.html" . }}

    {{ if .Params.links }}
        {{ partial "article/components/links" . }}
    {{ end }}

    {{ partial "article/components/related-content" . }}
     
    {{ if not (eq .Params.comments false) }}
        {{ partial "comments/include" . }}
    {{ end }}

    {{ partialCached "footer/footer" . }}

    {{/* partialCached "article/components/photoswipe" . */}}
{{ end }}

添加新PhotoSwipe插件

在PhotoSwipe的Github页下载最新的Releases包，从中解压出photoswipe-lightbox.esm.min.js、photoswipe.esm.min.js和photoswipe.css这三个文件到/static目录下即可。

PhotoSwipe的Github页：https://github.com/dimsemenov/photoswipe
PhotoSwipe的官方文档：https://photoswipe.com/getting-started

编写Shortcodes

三个文件都添加到静态文件目录后，就可以开始编写自己的Shortcodes了。我参考PhotoSwipe的简单示例教程，并依靠我仅有的前端知识，写出了 ~~（至少）~~ 还能用的一段代码，添加以下文件到/layouts/shortcodes文件夹中：

photoswipe.html，负责初始化PhotoSwipe和配置参数，使用时需要载入一次，具体内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{{ $initialZoomLevel := default "fit" (.Get "initialZoomLevel") }}
{{ $secondaryZoomLevel := default "1" (.Get "secondaryZoomLevel") }}
{{ $maxZoomLevel := default "10" (.Get "maxZoomLevel") }}
{{ $wheelToZoom := default "1" (.Get "wheelToZoom") }}

<div>
  <script type="module">
    import PhotoSwipeLightbox from '/photoswipe-lightbox.esm.min.js';
    const lightbox = new PhotoSwipeLightbox({
      gallery:'.article-content',
      children:'.pswp-image',
      initialZoomLevel: '{{ $initialZoomLevel }}',
      secondaryZoomLevel: '{{ $secondaryZoomLevel }}',
      maxZoomLevel: '{{ $maxZoomLevel }}',
      wheelToZoom: '{{ $wheelToZoom }}',
      pswpModule: () => import('/photoswipe.esm.min.js')
    });
    lightbox.init();
  </script>
  <link rel="stylesheet" href="/photoswipe.css">
</div>

photoswipe-figure.html，使用了<figure>标签显示单张居中的图片，可附带小标题，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ $src := (.Get "src") }}
{{ $width := default "auto" (.Get "width") }}
{{ $height := default "auto" (.Get "height") }}
{{ $alt := (.Get "alt") }}

{{ with .Page.Resources.Get $src }}
<figure>
  <a class="pswp-image" href="{{ .RelPermalink }}" data-pswp-width="{{ .Width }}" data-pswp-height="{{ .Height }}" target="_blank" >
    <img src="{{ .RelPermalink }}" style="width: {{ $width }}; height: {{ $height }}; border-radius: 10px; vertical-align: bottom; " />
  </a>
  {{ if $alt }}<figcaption style="font-size:1.6rem" >{{ $alt }}</figcaption>{{ end }}
</figure>
{{ end }}

photoswipe-flex.html photoswipe-flex-image.html，通过嵌套使用，以Flex布局展示多张图片，展示效果较为美观，这也是我反复折腾改写代码最多的部分，其内容分别如下：

1
2
3


<div style="display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;">
{{ .Inner }}
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{{ $src := (.Get "src") }}
{{ $width := default "30.0%" (.Get "width") }}
{{ $margin := default "1.0%" (.Get "margin") }}

{{ with .Page.Resources.Get $src }}
<div style="width: {{ $width }}; margin: {{$margin}}; ">
  <a class="pswp-image" href="{{ .RelPermalink }}" data-pswp-width="{{ .Width }}" data-pswp-height="{{ .Height }}" target="_blank" style="" >
    <img src="{{ .RelPermalink }}" style="border-radius: 10px; vertical-align: bottom; " />
  </a>
</div>
{{ end }}

效果

带小标题的单图展示

1
2


{{< photoswipe >}}
{{< photoswipe-figure src="P1.jpg" width="30%" alt="你要撞大运咯！" >}}

PS. 点击图片可以放大浏览，试试看。

Flex布局的多图展示

1
2
3
4
5
6
7
8


{{< photoswipe >}}
{{< photoswipe-flex >}}
{{< photoswipe-flex-image src="P2.png" >}}
{{< photoswipe-flex-image src="P3.png" >}}
{{< photoswipe-flex-image src="P4.png" >}}
{{< photoswipe-flex-image src="P5.png" >}}
{{< photoswipe-flex-image src="P6.png" >}}
{{< /photoswipe-flex >}}

PS. 实在找不到相同分辨率的表情包了，直接拿之前的AI生成图凑合着用。在多图放大浏览中，可以左右切换图片。