用Bootstrap + Masonry + magnific Popup架設個人相簿

Posted by Ian Tsai on Wednesday, May 6, 2020

剛開始架設網站時就決定要在網站內架一個相簿,這篇會分享如何用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步驟的參數

到這步驟頁面應該會呈現如下

範例1

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>

更改完後再看一次效果

範例2

5. 套用magnific Popup

回到photo-signle.html,最下面加上一段script,然後在最外層的div加上class="parent-container"

為了讓圖片有連結,所以在img外加上<a>作為可點擊的連結。

最後為增添一點效果所以在加入titlediv

<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>

最後呈現的效果

範例3 範例4


為了相簿花了一段時間研究,可能某些部分有些遺漏,有問題都歡迎討論,也希望想要在自己網頁上建立相片牆的人,這篇可以幫助到你!!


  • References

  • Magnific Popup Documentation
  • Bootstrap+Masonry」讓網格系統也支援瀑布流排版