hexo网页相册页面的制作

最新推荐文章于 2024-06-25 19:36:27 发布

hehung

最新推荐文章于 2024-06-25 19:36:27 发布

阅读量3.5k

点赞数 3

分类专栏： hexo

本文链接：https://blog.csdn.net/hehung/article/details/103547450

版权

本文详细介绍了如何在基于Matery主题的Hexo博客中创建相册展示页面和照片显示页面，包括新建相册和照片页面、创建JSON文件、编辑页面代码、添加加密功能以及在导航栏中加入相册按钮。提供了具体的操作步骤和代码示例，并展示了最终的显示效果。

摘要由CSDN通过智能技术生成

有些时候希望在网页中嵌入一些生活中的照片，需要我们自己制作一个照片显示的页面，该文章基于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;