用Splide.js給Hugo網頁加上圖片輪播 (Image Carousel)

有些文章的圖片太多，放直排會佔掉很長版面，用details壓起來也不好察覺，所以就想加一個橫向圖片輪播的功能。

這個功能在Blogger叫做燈箱，不過他是全螢幕，我只要文章內裝飾就行，這個圖片輪播的功能便稱作carousel或slideshow。

做出來的效果如下(這是圖片，下面有實際範例)，可設定手動播放、自動滾動、一頁幾張圖片等細部設定，還支援影片喔。

1. 嘗試過的方案
#

W3C和其他類似教學用純CSS實作圖片輪播的問題在於又臭又長

存成partial也不能傳參數進去(不會寫:P)，CSS還會全域汙染。

Hugo Codex提供的 Slider/Carousel 還得另外將使用的圖片寫在yaml，效率太差。

所以就採用將網頁HTML渲染成圖片輪播的方案"Splide.js"。跟Splide類似的方案有"Slick.js"，而Splide.js語法比較簡潔。

2. 安裝Splide.js
#

Splide.js可以用CDN載入，也能直接安裝至網站，我選擇後者。

下載 Splide的原始碼，解壓縮。
dist目錄含有Javascript和CSS，將其放到hugo網站目錄下的/static/js。

3. 文章嵌入圖片輪播圖
#

Hugo文章插入圖片輪播的語法如下，在Markdown檔案直接輸入。開頭的JS和CSS只要插入一次就夠了。

<!--JS路徑-->
<script src="/js/splide/dist/js/splide.min.js"></script>

<!--選擇要使用的CSS主題-->
<link rel="stylesheet" href="/js/splide/dist/css/themes/splide-skyblue.min.css">

<!--建立Splide。data-splide設定參數為播放到最後就退回第一張，並每次顯示一張圖片。-->
<div class="splide" role="group" aria-label="Splide" data-splide='{"type":"loop","perPage":1}'>
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
		</ul>
  </div>
</div>

<script>
  new Splide( '.splide' ).mount();
</script>

其中的<li class="splide__slide">就是要輪播的內容，可以是文字，也可以是圖片。並且Splide.js會自動偵測有多少行splide__slide的class。
例如要輪播三張圖片，就在<li class="splide__slide">後面插入圖片語法：

<ul class="splide__list">
            <li class="splide__slide"><img src=https://i.imgur.com/V0KTWAZ.png></li>
			<li class="splide__slide"><img src=https://i.imgur.com/9B8KBob.jpg></li>
			<li class="splide__slide"><img src=https://i.imgur.com/3XFQVrD.jpg></li>
		</ul>

呈現效果

如果要插入多個圖片輪播，就將每個Splide class末尾的new Splide( '.splide' );去掉，再將以下作者給的範例函數放到文章末尾，並加上監聽圖片載入完成，才渲染圖片輪播。

<script>
var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0; i <= elms.length; i++ ) {
  new Splide( elms[ i ] ).mount();
}
document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' );
    splide.mount();
  } );
</script>