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

1682字

昨天晚上在打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.yamlparams配置下加入enableimgloop: true


TODO LIST

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


另外的小更新

添加Fancybox

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

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

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


题外话

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