Hugo | 在文章中插入轮播图片

2021-10-24

1682字

甘普基本变形定律

Hugo

昨天晚上在打bmb，一翻发现截了不少图，于是开始琢磨截图放哪儿——既然不是个人作品展示，那还是有个上下文比较好，在博客里搞个相册孤立放置就还不如去用QQ空间。

但同时，文章里放置大量图片会让阅读体验变得很差，最好还是只占一张图的位置，通过点击或者键盘鼠标进行切换，听起来很熟悉，这个到底叫什么来着……

名字是最短的咒……？

一开始想得特别简单，因为我的灵感之源借鉴之光之一Loveit主题里有这么一句“支持基于lightgallery.js的图片画廊”，我一看“图片画廊”好像是这么回事儿，Readme里第一张图就是想要的效果，感觉直接在主题里引入然后开功能应该就可以了。不就是英文文档嘛，最近Google翻译水平长进不少，没在怕的！

结果文档读着读着好像感觉哪里不对，它这个图片放置的位置是不是有点奇怪……考虑到效果本身没什么稀奇的，我立刻抛弃了它，决定Google一下有没有其他更简单的实现方式。

……好了，问题是，这个效果到底应该搜什么关键字？

搜“画廊”不太对劲，搜“Inline Gallery”没什么结果，搜“图片滚动播放”都是PPT，我又心想，好像PPT也比较像，是不是应该叫幻灯片，搜一搜还真的有人在研究怎么往网页里放幻灯片，高高兴兴点开一看，害，我们想的显然不是一回事儿。

在真正经历之前我也很难想象这件事最大的难度是研究它叫什么。

其实应该叫图片轮播啦

研究明白名字之后事情就变得简单很多了，谷歌里有大量教程，我琢磨了一下实现方式，感觉如果在Hugo博客里用，做一个短代码模板可能比较好，这样在Markdown里写起来干净简单一点，访问位置参数应该就OK。搜了搜有没有现成的轮子，果然不是我一个人这么想过，一种在 MemE 主题中实现轮播图功能的思路这篇就分享了短代码的写法，我在博主分享的基础上稍微修修改改了一点。

{< imgloop "URL1,URL2,URL3,URL4,URL5" >}} //实际使用时在前面多加入一个{

先随便抓几张图看一下效果（注：有5.0微小剧透）

加入的功能分别有：图片无限循环、鼠标滚轮/键盘方向键切换、懒加载和自动调节高度（参考最后一张图）。

步骤一二三

创建短代码模板

在layou/shortcodes文件夹中创建imgloop.html短代码模板，内容如下，相关功能加入参考Swiper3.x文档。

{{ if .Site.Params.enableimgloop }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {{$itItems := split (.Get 0) ","}}
            {{range $itItems }}
            <div class="swiper-slide">
                <img src="{{.}}" alt="">
            </div>
            {{end}}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
     <!-- Initialize Swiper -->
     <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
        //自动调节高度
        autoHeight: true,
        //键盘左右方向键控制
        keyboardControl : true,
        //鼠标滑轮控制
        mousewheelControl : true,
        //自动切换
        //autoplay : 5000,
        //懒加载
        lazyLoading : true,
		lazyLoadingInPrevNext : true,
		//无限循环
		loop : true,
        });
        </script>
{{ end }}

加入一些些CSS

在assets/scss/cutom.scss中加入如下代码：

.swiper-container {
    max-width: 820px;
    margin: 2em auto;

}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        margin: 0 !important;
    }
}

限制了最大宽度（820是试出来的值），原因是如果按照文章原本的写法，会出现一个很奇妙的情况：刚载入时一切正常，刷新后图片突然放大，溢出显示区域，但只要稍微拉一下浏览器窗口大小就又恢复正常。

研究半晌实在百思不得其解，不像是CSS失效，滑动正常肯定不是JS失效，稍微挤压一下中间文章区域就正常了到底是个什么毛病……还好搞不清楚是什么情况不要紧，限制一下最大宽度就能解决这件事，傻人有傻福。

开启配置文件

在config.yaml的params配置下加入enableimgloop: true

TODO LIST

我抄的这篇文章使用的是Swiper3.x版本，想找个时间研究下换成更高级的，可以实现更多（花里胡哨的）效果，比如更方便地分页器换个配色（。

另外的小更新

添加Fancybox

虽然实用意义不大（因为不能放大轮播图片），但找到了一个相对简单（不需要使用短代码方式调用html不用费劲地一张一张修改）的添加图片灯箱方式（对我把原来的photoswipe删了又自己加了一个进去，那人生嘛不就在于折腾……）。

具体添加方式参考：Hugo 使用 Fancybox 实现图片灯箱/放大功能

至于文章中提到的一对空白p标签：目前来看完全没有影响，出问题了再修嘛。

题外话

发现用各个主题的页脚版权信息搜索有时候能搜出来一些好玩儿的，比如今天搜到了这个：FF14 中文化、UI 優化與第三方登入。