喜迎
春节

关于给hexo博客增加相册页面(实现瀑布流相册,实现加密相册)


前言: 本文是关于给自己的博客网站添加一个相册页面,并且实现瀑布流相册效果,基于matery主题,其他主题亦可参考。

相册页面
相册图片展示页面

新建相册页面

  1. 在站点的source文件夹下面新建一个gallery相册页面。
    hexo new page gallery
    
  2. 打开新建的gallery文件夹,里面会有一个index.md文件,设置index.md文件内容。
---
title: gallery
date: 2020-10-05 12:00:00
type: "gallery"
layout: "gallery"
---

新建相册图片展示页面

  1. 在gallery文件夹(也就是刚才创建的那个文件),可以在里面新建一些文件夹,也就是相册文件夹。例如:

  2. 然后在新建的相册文件夹里,分别在每个文件夹里新建文件index.md,例如:

    并分别设置每个index.md文件内容:

---
title: 峨眉山之行
date: 2020-10-02 23:00:17
type: "galleries"
layout: "galleries"
password: 
---

实现加密相册

注意:此处的galleries代表接下里要新增的galleries.ejs文件,而password是给相册设置访问密码。

在上面index.md文件中,可以实现加密功能,加密使用SHA256加密,所以在加密前需要先将你的密码转换成SHA256格式然后输入到最上面的创建相片页面的index.md的password里面。至于SHA256加密,请自行网上搜索在线生成,例如: http://www.ttmd5.com/hash.php?type=9

编辑主题导航栏加入相册按钮

在站点主题_config.yml文件下menu菜单下新增gallery页面。
这应是第一步做的事,新建页面后应该立即添加,因为很容易忘却。

# 配置菜单导航的名称、路径和图标icon.
menu:
  gallery
    url: /gallery

新建相册的json文件

  1. 同样在站点的source文件夹下面新建一个gallery.json文件。
    设置文件内容:(以我的为例,使用时修改成自己的)
    这里图片是放在图床上的,可自定义修改图片链接。

     [
       {
       "name": "峨眉山之行",
       "cover": "https://i.loli.net/2020/10/05/kBcvAf7INgMLaem.jpg",
       "date": "2017-10",
       "description": "峨眉山之行",
       "url_name": "峨眉山之行",
       "album": [
           {
               "img_url": "https://i.loli.net/2020/10/05/qtOevHpw5XImS1J.jpg",
               "title": "峨眉山之行",
               "describe": "峨眉山之行"
           },
           {
               "img_url": "https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg",
               "title": "峨眉山之行",
               "describe": "峨眉山之行"
           },
           {
               "img_url": "https://i.loli.net/2020/10/05/4acvniMKTx8euqp.jpg",
               "title": "峨眉山之行",
               "describe": "峨眉山之行"
           }
         ]
       }
     ]
    
注意:设置该json文件里的url_name属性值时,url_name属性值必须和对应相册文件里的index.md文件的title属性值一样。
所以建议,除了describe值自定义,其他属性值一律采用和title值一样的。

编辑相册及图片展示页面

在站点主题文件夹下layout文件夹下新建文件 gallery.ejsgalleries.ejs

  • gallery.ejs: 相册页面
  • galleries.ejs:相册图片展示页面

编辑相册页面gallery.ejs

编辑gallery.ejs内容:
以下是我的源代码,若同样主题,即可直接复制,其他主题可做参考,根据需要修改即可使用。

<%- partial('_partial/bg-cover') %>
<!-- 增加相册显示的特效样式 -->
<style>
    .photo {
        padding: 0 40px!important;
        display: inline-block;
        position: relative;
        transition: all .6s;
    }
    .biaotiss {
        padding: 8px 10px;
        color: #4c4c4e;
        text-align: center;
        font-weight: 400;
        font-size: 18px;
    }
    .img-item {
        padding: .2rem;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 1px 2px 2px 0 #aaa;
        transition: all .4s cubic-bezier(.63,.15,.03,1.12);
        margin-bottom: 20px;
    }
    .photo:nth-child(odd) {
        transform: rotateZ(-5deg);
    }    
    .photo:nth-child(even) {
        transform: rotateZ(5deg);
    }
    .text_des{
        position: absolute;
        width: 92%;
        height: 100%;
        top: 0;
        color: #000;
        overflow: hidden;
    }
    .text_des h3{
        margin: 5px 0 8px 0px;
        right: 40px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.7rem;
        position: absolute;
        top: 10%;
        font-style: italic;
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
        /*transform: translateX(200px);  */
    }
    .text_des p{
        left: 15px;
        position: absolute;
        top: 50%;
    /*    transform: translateX(-200px); 
        transition-delay: 0.2s;    */
    }
    .my-gallery .photo img {
        border-radius: 10px;
        height: 240px;
    }
    .card .card-content {
        padding: 24px 24px 24px 24px;
    }
    .miaoshus {
        padding: 20px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 95%;
        background: #fbfbfb50;
        border-radius: 10px;
        font-size: 16px;
        margin: 12px auto;
    }
    body.dark .miaoshus {
        background: 0 0;
        border: 1px dashed #888;
    }
    .img-item {
            transition: all 0.4s ease-out;
        }
        .img-item a img{
            opacity: 1;
            transition: all 0.4s ease-out;
        }
        .img-item a:hover img{
            opacity: 0.8;
        }   
        .biaotiss {
            font-family: MV Boli;
        }   
        .miaoshus .title {
        font-family: MV Boli;
    } 
    /*大屏幕下(桌面类)的样式*/
    @media only screen and (min-width: 993px) {
        .text_des h3{
            transform: translateX(200px);
        }
        .text_des p{
            transform: translateX(-200px); 
            transition-delay: 0.2s;
        }
        .animate-text {
            opacity: 0;
            transition: all 0.6s ease-in-out; 
        }
    }
    /*小屏幕下(桌面类)的样式*/
    @media only screen and (max-width: 500px) {
        .my-gallery .photo img {
            height: 186px;
        }
    }

</style>
<main class="content">
    <div class="container chip-container">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <div class="miaoshus">
                        <div class="title center-align">“ <%- theme.gallery.title %> ”</div>
                        “ 这里有光影流年,还有两朵穿衣裳的云,相拥在明天的河岸。”                      
                    </div>
                </div>
                <div class="my-gallery">
                    <div class="row">
                    <% if (site.data && site.data.gallery) { %>
                        <% var gallery = site.data.gallery; %>
                        <% for (var i = 0, len = gallery.length; i < len; i++) { %>
                            <% var photo = gallery[i]; %>
                            <% if (photo.cover){ %>
                            <div class="photo col s12 m6 l4">
                                <div class="img-item">
                                    <a href="./<%- photo.url_name %>">
                                        <img src="/medias/loading.svg" data-src="<%- photo.cover %>" class="responsive-img" alt="img"+<%- i %> />
                                        <div class="biaotiss">“ <%- photo.name %> ”<br>“ <%- photo.date %> ”</div>
                                    </a>
                                </div>                              
                            </div>
                            <% } %>
                        <% } %>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
    <script>
        start()
            $(window).on('scroll', function(){
            start();
        })
        function start(){
              //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
            $('.container img').not('[data-isLoaded]').each(function(){
                var $node = $(this)
                if( isShow($node) ){
                    loadImg($node);
                }
            });
        }
        //判断一个元素是不是出现在窗口(视野)
        function isShow($node){
            return $node.offset().top <= $(window).height() + $(window).scrollTop();
        }
        //加载图片
        function loadImg($img){
        //.attr(值)
        //.attr(属性名称,值)
            $img.attr('src', $img.attr('data-src')); //把data-src的值 赋值给src
            $img.attr('data-isLoaded', 1);//已加载的图片做标记
        }
    </script>
</main>

编辑相册图片展示页面galleries.ejs

编辑galleries.ejs内容:
以下是我的源代码,若同样主题,即可直接复制,其他主题可做参考,根据需要修改即可使用。

<!-- 加密功能 -->
<% if (theme.PhotoVerifyPassword.enable) { %>
    <script src="<%- theme.libs.js.crypto %>"></script>
    <script>
        (function() {
            let pwd = '<%- page.password %>';

            if (pwd && pwd.length > 0) {
                if (pwd !== CryptoJS.SHA256(prompt('<%- theme.PhotoVerifyPassword.promptMessage %>')).toString(CryptoJS.enc.Hex)) {
                    alert('<%- theme.PhotoVerifyPassword.errorMessage %>');
                    location.href = '<%- url_for("/")  %>';
                }
            }
        })();
    </script>
<% } %>

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

<link rel="stylesheet" href="<%- theme.libs.css.baguetteBoxCss %>">
<!-- 该主题自带的lightGallery.js在图片多的时候会很卡,所以弃用,使用了一个我在网上找的baguetteBox,很轻量级,就是功能少了点 -->
<script src="<%- theme.libs.js.baguetteBoxJs %>"></script> 
<style>    
    .my-gallery .photo img {
        transition: all 0.6s ease-in-out; 
    }     
    .my-gallery .photo:hover img {
        opacity: 0.6;
        transform: scale(1.05);
    }      
    .my-gallery {
        margin: 20px auto;
    }   
    .miaoshus .title {
        font-family: MV Boli;
    }
    .miaoshus {
        padding: 20px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 75%;
        background: #fbfbfb50;
        border-radius: 10px;
        font-size: 16px;
        margin: 24px auto 12px;

    }
    body.dark .miaoshus {
        background: 0 0;
        border: 1px dashed #888;
    }
    body {
        overflow: visible!important;
    }
    .box {
            position: relative;
        }
    .box img {
        width: 350px;
        vertical-align: top;
        padding: 8px;
        border-radius: 10px;
        transition: all 0.5s;
    }
    .box img:hover {
        transform: scale(1.05);
    }
    .page-footer {
        display: none
    }
    body {
        overflow-y: visible!important;
    }
    header {
        background-color: #000;
    }
    .biaotiss {
            font-family: MV Boli;
        }   
    @media only screen and (max-width: 1058px) {
        .box {
            margin-left: 145px;
        }
    }
    @media only screen and (max-width: 770px) {
        .box {
            margin-left: 15px;
        }
    }
    @media only screen and (max-width: 500px) {
        #previous-button, #next-button {
            display: none;
        }
    }
    @media only screen and (max-width: 380px) {
        .box {
            margin-left: -5px;
        }
    }
    @media only screen and (max-width: 323px) {
        .box img {
            width: 296px;
            left: 0;
        }
    }
</style>

<div class="tag-title center-align">
    <div class="miaoshus">
        <div class="title center-align">
            “ <% if (is_home() && config.subtitle && config.subtitle.length > 0) { %>
                <%= config.subtitle %>
            <% } else { %>
                <%= page.title %>
            <% } %> ”
        </div>
        “ <%- theme.gallery.title %> ”
        “ 这里有光影流年,还有两朵穿衣裳的云,相拥在明天的河岸。”
    </div>
</div>

<!-- 相册 -->
<section class="gallery">
    <div id="myGallery" class="my-gallery">
        <div class="row">
            <div class="box">
            <% if (site.data && site.data.gallery) { %>
                <% var galleries = site.data.gallery; 
                    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.album;
                %>
                <% for (var i = 0, len = photos.length; i < len; i++) { %>
                    <% var my_album = photos[i]; %>                   
                        <a href="<%- my_album.img_url %>" data-caption="<%- my_album.title %>">
                            <img class="mat" src="/medias/loading.svg" data-src="<%- my_album.img_url %>" alt="img"+<%- i %> >
                        </a>                   
                <% } %>
            <% } %>
        </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $('.mat').outerWidth(); // 200
        waterfallHandler();
        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);
            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }
            // 遍历所有图片进行定位处理
            $.each($('.mat'), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });
                heightArr[minIndex] += itemHeight;
            });
        }
        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>
<script>
    baguetteBox.run('.gallery', {
        // 配置参数
        buttons:Boolean,//是否显示导航按钮。
        noScrollbars:true,//是否在显示时隐藏滚动条。
        titleTag:true,//是否使用图片上的title属性作为图片标题
        async:false,//是否异步加载文件。
    });

    start()
        $(window).on('scroll', function(){
        start();
    })

    function start(){
          //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
        $('.gallery img').not('[data-isLoaded]').each(function(){
            var $node = $(this)
            if( isShow($node) ){
                loadImg($node);
            }
        });
    }

    //判断一个元素是不是出现在窗口(视野)
    function isShow($node){
        return $node.offset().top <= $(window).height() + $(window).scrollTop();
    }
    //加载图片
    function loadImg($img){
    //.attr(值)
    //.attr(属性名称,值)
        $img.attr('src', $img.attr('data-src')); //把data-src的值 赋值给src
        $img.attr('data-isLoaded', 1);//已加载的图片做标记
    }
</script>
  • 为了实现懒加载,在这里需要在站点主题文件夹下的medias文件夹下面放入一个用于懒加载的图片loading.svg ,这里你可以直接使用我的加载svg,地址https://nekodeng.gitee.io/medias/loading.svg

编辑主题_config.yml文件内容

在站点主题_config.yml文件下新增以下内容

# 增加了图片页面
gallery: 
  title: 光影流年   #标题
  icon: fa         #这个显示相册页面的图标
  icon2: fa        #这个显示自己的具体相册里面的相册的图标

PhotoVerifyPassword:
  enable: true
  promptMessage: 该相册已加密,请输入密码访问
  errorMessage: 密码错误,将返回主页!
  • 最后,完成,引用我的相册页面dec来结束:
  • “ 光影流年 ”
  • “ 这里有光影流年,还有两朵穿衣裳的云,相拥在明天的河岸。”

文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评论
 上一篇
关于给hexo博客增加随笔页面(并对页面仿信纸作业纸样式修饰)
关于给hexo博客增加随笔页面(并对页面仿信纸作业纸样式修饰)
前言: 本文是给hexo博客增加随笔页面,并对页面仿信纸作业纸样式修饰,基于matery主题,其他主题亦可参考。 至于为什么要写本文,是因为有一天,突然有了一个想法,想把以前初高中写的那些作文,整理一下,上传到博客网站,无论是对于风花雪月
下一篇 
Vue-知识点详解
Vue-知识点详解
前言: Vue.js 是什么?为什么这么火?这么多人使用?优缺点有哪些? Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层
2020-10-03
  目录