新建相册

新建相册

引言

  自己写的博客想有一个相册功能，让自己喜欢的图片可以得到统一保存，或者记录自己的生活日常，那么新建一个相册是一个不错的选择，可以先看我的相册效果。

一、新建步骤

（一）添加【相册】菜单

  这里要修改几个文件：

  1.该主题的配置文件_config.yml ，不要跟站点根目录下的同名文件搞混了，在menu下添加以下代码:

Galleries:
    url: /galleries
    icon: fa-photo

  2.该主题的语言配置文件目录 languages下的 default.yml和zh-CN.yml，分别是英文和中文的配置文件，分别添加以下内容：

galleries: galleries

galleries: 相册

  3.该主题目录下layout/_partial/navigation.ejs和layout/_partial/mobile-nav.ejs文件里添加：

    menuMap.set("Galleries", "相册");

  4.至于添加到什么位置，你打开文件就知道了，里面会有类似格式的代码，很容易找到的，做完以上操作后，你就会发现相册的菜单已经出现了。

  5.在站点根目录source下新建galleries目录，然后在该目录下新建index.md，就会生成index.html文件了

（二）生成相册目录和相册列表

  1.在index.md文件里添加以下内容，注意，那几个中划线也不要少了：

---
title: 相册
layout: "galleries"
---

  2.添加自定义CSS样式文件，该主题目录下的source/css里新建gallery.css文件，复制以下css样式进去：

.gallery-wrapper{
  padding-top: 30px;
}
.gallery-wrapper .gallery-box{
  padding: 5px !important;
}

.gallery-wrapper .gallery-item {
  display: block;
  overflow: hidden;
  background-color: #fff;
  padding: 5px;
  padding-bottom: 0;
  position: relative;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}

.gallery-cover-box{
  width: 100%;
  padding-top: 60%;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: center center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.gallery-cover-box .gallery-cover-img {
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.gallery-item .gallery-name{
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #666;
  margin: 0;
}

.waterfall {
  column-count: 3;
  column-gap: 1em;
}
.photo-wrapper{
  padding-top: 20px;
}
.photo-item {
  display: block;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 14px;
  font-size: 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  background: white;
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}
.photo-item img {
  width: 100%;
}
.photo-item .photo-name{
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #dddddd;
}

/*适配移动端布局*/
@media only screen and (max-width: 601px) {
  .waterfall {
    column-count: 2;
    column-gap: 1em;
  }
}

  3.在该主题layout目录下新建galleries.ejs文件，添加以下代码：

<link rel="stylesheet" href="/css/gallery.css">

<%- partial('_partial/bg-cover') %>

<main class="content">
    <div class="container">
        <% if (site.data && site.data.galleries) { %>
        <% var galleries = site.data.galleries; %>
        <div class="gallery-wrapper row">
            <% for (var i = 0, len = galleries.length; i < len; i++) { %>
            <% var gallery = galleries[i]; %>
            <div class="col s6 m4 l4 xl3 gallery-box">
                <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                    <div class="gallery-cover-box" style="background-image: url(http://图片地址.com/<%- gallery.cover%>);">
                    </div>
                    <p class="gallery-name">
                        <%- gallery.name %>
                    </p>
                </a>
            </div>
            <% } %>
        </div>
        <% } %>
    </div>
</main>

  4.同目录下新建gallery.ejs，添加以下代码：

<link rel="stylesheet" href="/css/gallery.css">
<link type="text/css" href="/libs/fancybox/jquery.fancybox.css" rel="stylesheet">
<link type="text/css" href="/libs/justifiedGallery/justifiedGallery.min.css" rel="stylesheet">

<%- partial('_partial/post-cover') %>
<%
let galleries = [];
if (site.data && site.data.galleries) {
    galleries = site.data.galleries;
}
var pageTitle = page.title;
function getCurrentGallery(galleries, pageTitle) {
    for (let i = 0; i < galleries.length; i++) {
        if (galleries[i]['name'] == pageTitle) {
            return galleries[i];
        }
    }
}
var currentGallery = getCurrentGallery(galleries, pageTitle)

var photos = currentGallery.photos;

let imageStr = ''

for (var i = 0, len = photos.length; i < len; i++) {
    var photo = photos[i];

    imageStr += "<a href=\"http://图片地址.com/" + photo + "\"" +
            "     class=\"photo-item\" rel=\"example_group\"" +
            "     data-fancybox=\"images\">" +
            "      <img src=\"http://图片地址.com/" + photo + "\"" +
            "       alt=" + photo + ">\n" +
            "    </a>"

}
%>

<div class="container">
    <div class="photo-wrapper">
        <div class="waterfall" id="mygallery">
            <%- imageStr %>

        </div>
    </div>
</div>


<script src="/libs/fancybox/fancybox.js"></script>
<script src="/libs/justifiedGallery/justifiedGallery.min.js"></script>
<script>

  $("a[rel=example_group]").fancybox();
  $("#mygallery").justifiedGallery({margins: 5, rowHeight: 150});

</script>

  5.以上代码实现的功能呢，就是读取相册配置文件并把相册目录和相册列表都渲染成HTML，用<% %>包起来的代码是ejs语法，调试的话是在本地控制台输出的而不是浏览器，就是你输入hexo s的地方。

（三）制作相册配置文件

  1.在站点目录sources/_data/下新建一个galleries.json的文件，模板如下：

[
  {
    "name": "美女",
    "cover": "美女/IMG_20171109_124516.jpg",
    "description": "2017年记录",
    "photos": [
      "美女/IMG_美女0924_110224.jpg",
      "美女/IMG_美女0924_113412.jpg",
      "美女/IMG_美女1109_124516.jpg",
      "美女/IMG_美女1125_125304.jpg",
      "美女/IMG_美女1126_181605.jpg"
    ]
  },
  {
    "name": "动漫",
    "cover": "动漫/IMG_20181124_125818.jpg",
    "description": "2018年记录",
    "photos": [
      "动漫/IMG_动漫0204_113055.jpg",
      "动漫/IMG_动漫0204_113302.jpg",
      "动漫/IMG_动漫0204_113442.jpg",
      "动漫/IMG_动漫0208_083336.jpg"
    ]
  },
  {
    "name": "游玩",
    "cover": "游玩/IMG_游玩0331_165713_1.jpg",
    "description": "游玩年记录",
    "photos": [
      "游玩/IMG_游玩0118_200104.jpg",
      "游玩/IMG_游玩0118_200120.jpg",
      "游玩/IMG_游玩0118_200456.jpg"
    ]
  }
]

  2.一个包含多个相册的列表JSON，每个相册有以下字段，name是相册标题，cover是封面图片，从相册里随便选一个就行，description是相册介绍，photos是图片列表。图片较少的话手动复制进去就行。

  3.配置文件建好了之后还没完，只剩最后一个步骤了，在galleries下建立对应的相册名称目录和文件，比如我这三个相册需要建 美女、 动漫、游玩、个人四个目录，然后下面再分别新建index.md文件，文件内容为:

---
title: 美女
layout: "gallery"
---

  4.建好相应目录和文件之后，如果你的图片路径也没有错的话，相册目录和列表就都会渲染出来了

二、照片列表的布局选择

  1.上面的博客用的布局都比较简单粗暴，都是固定的大小和宽高比。但是不同的图片有不同的宽高比，用这种模式的话图片有两种显示方式，一是强制缩放到固定的宽高，二是裁切只显示一部分，但是都有缺点，第一个会图片会变形，第二个图片显示不全。那么有没有两全齐美的办法呢？答案是肯定的。首先我选用的是瀑布流布局，用CCS3的新特性实现的，这种模式的特点是等宽布局，固定列数，图片高度自适应。
  2.看起来似乎没什么问题，高端大气上档次，然而做好了我发现图片的排列顺序是这个样子的，是按列竖向排列的，不太符合阅读习惯，PASS。
  3.另外一种布局呢是等高布局，这种布局是等高布局，图片高度一致，宽度自适应，图片托管网站flickr就是用的这种模式，但是用CSS方法是实现不了的，因为每一行最后张图片不一定能正好撑满这一行，需要用js动态设置图片的宽高来实现，上面引用的justifiedGallery插件就是来完成这个的。
  4.下面代码的功能就是初始化这个插件，间距是5px，每一行的高度是150px：

$("#mygallery").justifiedGallery({margins: 5, rowHeight: 150});

  这两种布局呢，上面的代码里都是包含了的。是可以手动切换的。只需要把上面那句代码注释掉就会切换到瀑布流布局，
  当然，你要是对我写的样式不满意的话也可以自己修改代码，边框和文件名都是可以去掉的。

三、结语

  通过新建相册，可以让自己的博文更加具有真实性，是十分值得拥有的，希望能帮到您。
  最后，如果这篇教程能帮到您，请点击最后的 “赏” 字，不管多少都是对我的支持，谢谢！