有些时候希望在网页中嵌入一些生活中的照片，需要我们自己制作一个照片显示的页面，该文章基于matery主题添加照片显示的页面，支持相册以及照片显示，和相册内容加密等。
该相册页面是基于matery主题完成的，不同的主题可以方式不一样，但是原理是一样的，根据自己的实际情况进行修改即可。
具体显示效果请到我的个人blog进行查看：https://hehung.top
点我进行跳转
创建相册显示页面与照片显示页面
新建相册页面
首先需要在hexo的source文件夹下面新建一个相册显示的页面，可以使用下面的语法语法进行新建一个页面。
hexo new page gallery
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhto7IpE-1576384415025)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/1.jpg “gallery文件夹”)]
然后打开hexo文件夹下面的source文件夹，可以看到里面有一个index.md文件，打开该文件，输入如下的内容：
---
title: gallery
date: 2019-11-30 16:00:17
type: "gallery"
layout: "gallery"
---
PS：gallery就是等会需要进行编辑的ejs文件的名字，标题改成你期望在网页中显示的名字，可以改成“相册”
新建相片显示页面
上面的步骤只是创建了一个相册的显示页面，我们期望通过这个相册页面点进去查看我们的照片，所以还需要创建一个相片的显示页面，创建步骤如下所示：
这个与上面创建新的页面的时候有一点区别。
打开hexo的source文件下的gallery文件夹（也就是刚才创建的那个相册的页面），在里面新建几个文件夹，你虚妄有几个相册就创建几个文件夹，我这里创建了三个。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nN5UcyvQ-1576384415026)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/2.jpg “创建相片页面文件夹”)]
然后打开每个新建的文件夹，在每个文件夹里面新建文件index.md，在这个里面加入新的内容，如下所示，具体细节根据实际情况修改：
---
title: 韩国之行
date: 2019-12-7 23:00:17
type: "galleries"
layout: "galleries"
password:
---
PS:galleries是显示相册的主题页面，等会需要进行编辑，显示相片的页面都是用这个type和layout，title是相册名，password是加密，乳沟你有私密相片不希望陌生人看到可以进行加密，之后只有输入了密码才能看到，后面会讲到如何实现
现在前期的准备工作都做完了，看是进行相册主题的编写了。
新建json文件
打开hexo下面的source的_data文件夹，新建一个文件名字叫做：gallery.json，这个在后面会用到。
现在可以现在网上找一些照片进行测试，比如百度图片。在网上找的照片电机右键，复制图片链接即可使用了。
打开新建的文件，输入如下内容：
[
{
"name": "",
"cover": "",
"description": "",
"url_name": "",
"album": [
{
"img_url": "",
"title": "",
"describe": ""
},
{
"img_url": "",
"title": "",
"describe": ""
}
]
},
{
"name": "",
"cover": "",
"description": "",
"url_name": "",
"album": [
{
"img_url": "",
"title": "",
"describe": ""
},
{
"img_url": "",
"title": "",
"describe": ""
}
]
},
{
"name": "",
"cover": "",
"description": "",
"url_name": "",
"album": [
{
"img_url": "",
"title": "",
"describe": ""
},
{
"img_url": "",
"title": "",
"describe": ""
}
]
}
]
json文件内容解析
- "name":相册名字 - "cover":相册封面 - "description":相册的描述 - "url_name":相册名字，这个名字需要与你的网页名字一样，便于后面编程的时候进行判断 - "album":照片的数组，数组里面的内容根据你的相片的数量决定，不一定是两个，可以任意多个 - "img_url":照片的链接 - "title":照片标题，没有使用，留作备用 - "describe":照片描述，没有使用，留作备用PS: 你们在测试的时候可以在百度找一些照片的链接使用
创建照片的json
因为我们的网站是存放在github上面的，同时是轻量级的静态网站，空间有限，所以像照片这个大内存的文件一般都是存在云平台的，使用将相应的链接放在json文件里面，通过解析json文件就可以访问了。
我的照片都是存在网阿里云的OSS里面的，
编辑相册和照片显示页面
在主题的source的layout文件夹下新建一个文件 gallery.ejs 和 galleries.ejs。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ln9GGcOQ-1576384415027)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/3.jpg “新建ejs文件”)]
PS：
- gallery.ejs： 相册页面
- galleries.ejs：照片内容页面
编辑相册页面
打开gallery.ejs
输入一下内容：
<%- partial('_partial/bg-cover') %>
<!-- Created by hehung on 20191208 -- >
<!-- 增加相册显示的特效样式 -->
<style>
.text_des{
position: absolute;
width: 92%;
height: 100%;
top: 0;
color: #000;
/* opacity: 0; */
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: 1px;
}
/*大屏幕下(桌面类)的样式*/
@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;
}
.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.5;
transform: scale(1.05);
}
.img-item a:hover .text_des{
/* opacity: 1; */
transform: scale(1.05);
}
.img-item a:hover .animate-text{
transform: translateX(0);
opacity: 1;
}
}
/*小屏幕下(桌面类)的样式*/
@media only screen and (max-width: 992px) {
.img-item a img{
opacity: 0.75;
}
.animate-text {
opacity: 1;
}
}
</style>
<main class="content">
<div class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align">
<i class="<%- theme.gallery.icon %>"></i>
<%- theme.gallery.title %>
</div>
<div class="my-gallery">
<div class="row">
<!-- <li class="grid-sizer"></li> --><!-- for Masonry column width -->
<% 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" data-aos="zoom-in-up">
<div class="img-item">
<a href="./<%- photo.url_name %>">
<img src="/medias/loading.gif" data-src="<%- photo.cover %>" class="responsive-img" alt="img"+<%- i %> />
<div class="text_des">
<% if (photo.name || photo.description){ %>
<h3 class="animate-text"><%- photo.name %></h3>
<p class="animate-text"><%- photo.description %></p>
<% } %>
</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>
代码分析
CSS代码就不用分析了吧，这里面是对相册页面的装饰。
后面的script里面的内容是为了实现懒加载，在这里需要在你们的medias文件夹下面放入一个用于懒加载的图片loading.gif。
可以实现懒加载功能。
上面的代码中使用了_config.yml里面的内容，这个里面的内容也是我新加的。
# 增加了图片页面
gallery:
title: 我的相册 #标题
icon: fa fa-images #这个显示相册页面的图标
icon2: fa fa-image #这个显示自己的具体相册里面的相册的图标
PhotoVerifyPassword:
enable: true
promptMessage: 该相册已加密，请输入密码访问
errorMessage: 密码错误，将返回主页！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hP7hA6sI-1576384415027)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/4.jpg “添加内容”)]
其实这个代码没有多少解释的很简单，都能看懂。
照片显示页面代码编辑
打开新建的文件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.3s ease-in-out;
}
.my-gallery .photo:hover img {
opacity: 0.6;
transform: scale(1.05);
}
</style>
<main class="content">
<div class="container chip-container">
<div class="card">
<div class="card-content">
<div class="tag-title center-align">
<i class="<%- theme.gallery.icon2 %>"></i>
<%- page.title %>
</div>
<!-- 相册 -->
<section class="gallery">
<div id="myGallery" class="my-gallery">
<div class="row">
<% 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]; %>
<div class="photo col s12 m6 l4" data-aos="fade-up">
<a href="<%- my_album.img_url %>" data-caption="<%- my_album.title %>">
<img class="mat" src="/medias/loading.gif" data-src="<%- my_album.img_url %>" alt="img"+<%- i %> >
</a>
</div>
<% } %>
<% } %>
</div>
</div>
</section>
</div>
</div>
</div>
<script>
baguetteBox.run('.gallery', {
// 配置参数
buttons:Boolean,//是否显示导航按钮。
noScrollbars:true,//是否在显示时隐藏滚动条。
titleTag:true,//是否使用图片上的title属性作为图片标题
async:false,//是否异步加载文件。
/*
afterShow:function(){//显示遮罩层之后的回调函数。
$(".pressing").fadeIn();
},
afterHide:function(){//隐藏遮罩层之后的回调函数。
$(".pressing").fadeOut();
}
//preload:5 预加载多少个文件。
// onChange: function(currentIndex, imagesCount){} 图片改变时的回调函数
// overlayBackgroundColor:'rgba(0,0,0,0.8)' 遮罩层的背景颜色
*/
});
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>
代码解析
最上面的代码时加密代码，可以实现加密功能，但是加密是进行SHA256加密的，所以在加密前需要先将你的密码转换成SHA256格式然后输入到最上面的创建相片页面的index.md的password里面。
至于SHA256加密，在网上一搜就有了。
PS：在相片显示的页面有放大功能，就是点击图片，可以放大显示，本来想直接使用该主题知道的 lightgallery.js 来实现的，但是由于图片比较多，每张图片比较大，使用lightgallery打开的时候会很卡，所以我在网站找到了另外一个js文件，可以进行放大显示，而且不卡。
可以点击此处下载：点我下载
我将这两个文件放在了主题的如下的路径：source\libs\MyGallery
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74mmrZOD-1576384415027)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/6.jpg “MyGallery”)]
同时在_config.yml文件里面加入js和css的路径。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZrvLzaP-1576384415027)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/7.jpg “加载路径”)]
在主题导航栏加入相册按钮
我将相册按钮加载了about下面，这个位置根据实际情况进行添加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cvk753Lw-1576384415028)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/8.jpg “相册按钮”)]
显示效果
只有加密效果可以自己去试一下，我已经测试过了，可以正常使用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZK2K4M8u-1576384415028)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/9.jpg “相册页面效果”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMlAaQTG-1576384415028)(https://hehung-blog-respurces.oss-cn-beijing.aliyuncs.com/add_album_paper/99.jpg “相片页面的效果”)]
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
