有些文章的圖片太多，放直排會佔掉很長版面，用details壓起來也不好察覺，所以就想加一個橫向圖片輪播的功能。
這個功能在Blogger叫做燈箱，不過他是全螢幕，我只要文章內裝飾就行，這個圖片輪播的功能便稱作carousel或slideshow。
做出來的效果如下(這是圖片，下面有實際範例)，可設定手動播放、自動滾動、一頁幾張圖片等細部設定，還支援影片喔。
W3C和其他類似教學用純CSS實作圖片輪播的問題在於又臭又長
存成partial也不能傳參數進去(不會寫:P)，CSS還會全域汙染。
Hugo Codex提供的Slider/Carousel 還得另外將使用的圖片寫在yaml，效率太差。
所以就採用將網頁HTML渲染成圖片輪播的方案"Splide.js"。跟Splide類似的方案有"Slick.js"，而Splide.js語法比較簡潔。
Splide.js可以用CND載入，也能直接安裝至網站，我選擇後者。
下載Splide的原始碼，解壓縮。
dist目錄含有Javascript和CSS，將其放到hugo網站目錄下的/static/js。
- Hugo文章插入圖片輪播的語法如下，在Markdown檔案直接輸入。開頭的JS和CSS只要插入一次就夠了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!--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">後面插入圖片語法：
1
2
3
4
5
| <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' );去掉，再將以下作者給的範例函數放到文章末尾，並加上監聽圖片載入完成，才渲染圖片輪播。
1
2
3
4
5
6
7
8
9
10
| <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>
|
- 其他自定義項目和進階範本請參考Splide.js的說明文件。
