快轉到主要內容

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

資訊科技 Hugo網站架設 JavaScript Library
✍ 切換正體/簡體字
目錄

有些文章的圖片太多,放直排會佔掉很長版面,用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載入,也能直接安裝至網站,我選擇後者。

  1. 下載 Splide的原始碼,解壓縮。

  2. dist目錄含有Javascript和CSS,將其放到hugo網站目錄下的/static/js

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

  1. 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>
  1. 其中的<li class="splide__slide">就是要輪播的內容,可以是文字,也可以是圖片。並且Splide.js會自動偵測有多少行splide__slide的class。

  2. 例如要輪播三張圖片,就在<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>
  1. 呈現效果
  1. 如果要插入多個圖片輪播,就將每個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>
  1. 其他自定義項目和進階範本請參考 Splide.js的說明文件

相關文章

將suckless.org極簡網頁設計哲學付諸實現,Hugo新增自訂單一HTML頁面
資訊科技 Hugo網站架設 Hugo
用AVIF格式緩解網頁圖片流量過大的問題
資訊科技 Hugo網站架設 Netlify AOMedia Video 1
為何應該用Markdown寫網誌文章?
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。