hexo网页相册页面的制作

旧书制作复古相册：将书籍内页撕下，粘贴成新的相册封面和内页。 #生活技巧# #居家生活技巧# #收纳整理建议# #旧物改造再利用#

有些时候希望在网页中嵌入一些生活中的照片，需要我们自己制作一个照片显示的页面，该文章基于matery主题添加照片显示的页面，支持相册以及照片显示，和相册内容加密等。

该相册页面是基于matery主题完成的，不同的主题可以方式不一样，但是原理是一样的，根据自己的实际情况进行修改即可。

具体显示效果请到我的个人blog进行查看：https://hehung.top
点我进行跳转

创建相册显示页面与照片显示页面

新建相册页面

首先需要在hexo的source文件夹下面新建一个相册显示的页面，可以使用下面的语法语法进行新建一个页面。

hexo new page gallery 1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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" --- 1234567

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

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": ""}]} ]

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

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;

12345678910111213141516171819

网址：hexo网页相册页面的制作 https://www.yuejiaxmz.com/news/view/386922

相关内容

diy相册怎么制作 diy相册内页设计图片
DIY手工相册制作全攻略：打造独一无二的个性相册
「自动化控制制作」自动化控制制作公司黄页
网页版远程控制
html网页制作——HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
豆包AI网页版
访问页面不存在
网店店铺首页
网络安全知识手册——生活篇（3页）
洗护页面

随便看看