有些文章的圖片太多,放直排會佔掉很長版面,用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>
- 其他自定義項目和進階範本請參考 Splide.js的說明文件。