剛開始架設網站時就決定要在網站內架一個相簿,這篇會分享如何用Bootstrap+Masonry+magnificPopup建構屬於你自己的相片牆
當初試了滿多種方法,從一開始硬去寫到使用modal+carousel,最後使用Bootstrap+Masonry+magnificPopup才達到我想要的效果。 之後可能還是會加上輪播功能,但我們得先有相簿,才有辦法輪播XD
那我們就開始吧!
以下都以我這個主題為例子,中間會給一些註解方便大家閱讀
-
事前準備
因為我們是建立在Hugo的網站上,所以我們得先把這個相簿的連結按鈕、content資料夾及html layout準備好
0-1. 連結按鈕
連結的部分就不在多說,去header裡面複製一個就可以了,按自己喜好做設定!
0-2. content folder
複製about的資料夾,裡面會有一個_index.md
的檔案。
若沒有about,可以找一個適合的複製來使用
.
|- content
|- about
|- _index.md
|- blog
|- photograph (new)
|- _index.md (new)
(只列出會用到的資料夾路徑)
0-3. html layout
以我的為例子,我是將about的layout複製一份,改名叫photograph,然後一樣放到layout的資料夾下,與about同層, 啟動server後你會發現photograph跟about頁面會一樣,這樣就算準備完成了。
.
|-layout
|- _default
|- photo-single.html (new)
|- about
|- list.html
|- partials
|- head.html
|- photograph (new)
|- list.html (new)
(只列出會用到的資料夾路徑)
**基本上about是一頁式的網頁,但我們想要的可以用不同的md檔去呈現不同篇的照片,所以這個部分需要做改寫。
0. 新增測試照片的markdown
在photograph/
底下新增幾個markdown的檔案作為等等要呈現的照片範例,參數設定如下(可以行更改)
+++
title = "日本 明治神宮"
date = "2017-10-09"
cover = "image_url"
+++
-
開始製作
1. _partials/head.html引入js, css
<link rel="stylesheet" href="../css/magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
magnific的js, css可以到here下載
2. 改寫photograph/list.html
找到<div id="content">
,這裡面就是連接/content/photograph/_index.md
的內文所呈現的區塊
<main id="site-main">
<article class="post">
<header>
<div class="title">
{{ if $.Scratch.Get "h1" }}
<h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
{{ $.Scratch.Set "h1" false }}
{{ else }}
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ end }}
{{ with .Description }}<p>{{ . }}</p>{{ end }}
</div>
</header>
<div id="content">
{{ .Content }}
</div>
</article>
</main>
在
<div id="content">
{{ .Content }}
</div>
前面或後面加上(.Content為呈現_index.md的內文,若是不想要的話可以刪除或註解掉)
<div class="container">
<div class="row">
{{ range (where .Site.RegularPages "Section" "photograph")}} <!-- 註1 -->
<div class="col-md-3">
<div>
{{ .Render "photo-single" }} <!-- 註2 -->
</div>
</div>
{{ end }}
</div>
</div>
註1:這行事hugo的語法,抓取所有photpgraph下的.md檔案。(Section就是content內的分類)
註2:.Render為將頁面倒到指定頁面,但一定要在layout/_default
路徑下的頁面才有作用
3. 撰寫photo-single.html
寫入
<div>
<img src="{{ .Params.cover }}" alt="" class="img-responsive"> <!-- 註3 -->
</div>
註1:.Params.cover就是對應到第0步驟的參數
到這步驟頁面應該會呈現如下
4. 套用masonry
在photograph/list.html最下面加上這段script
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <!-- 這如果剛剛有引入就不需要寫 -->
<script>
$(function(){
$('.masonry').masonry({
itemSelector: '.item'
})
});
</script>
然後將masonry, item分別加入class內
<div class="container">
<div class="row masonry">
{{ range (where .Site.RegularPages "Section" "photograph")}}
<div class="col-md-3 item">
<div class="shadow photo-div">
{{ .Render "photo-single" }}
</div>
</div>
{{ end }}
</div>
</div>
更改完後再看一次效果
5. 套用magnific Popup
回到photo-signle.html
,最下面加上一段script,然後在最外層的div
加上class="parent-container"
。
為了讓圖片有連結,所以在img
外加上<a>
作為可點擊的連結。
最後為增添一點效果所以在加入title
的div
。
<div class="parent-container">
<a href="{{ .Params.cover }}"><img src="{{ .Params.cover }}" alt="" class="img-responsive"></a>
<div style="text-align:center; padding: 15px;">{{ .Params.Title }}</div>
</div>
<script>
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'image'
});
</script>
最後呈現的效果
為了相簿花了一段時間研究,可能某些部分有些遺漏,有問題都歡迎討論,也希望想要在自己網頁上建立相片牆的人,這篇可以幫助到你!!
-
References
- Magnific Popup Documentation
- Bootstrap+Masonry」讓網格系統也支援瀑布流排版