Halyul的博客
Halyul的博客
Halyul
I'm your slogan!
为Hexo的Material主题添加总图库以及分图库功能
编写时间: 12月 30, 2016
  • 文章二维码
这篇文章最后修改于 天之前。 本页内容可能已经过时!

嗯现在博客换了主题这个用不上了惹。

起因

今天将整个[Material主题][1]研究了一遍,发现了这个主题自带图库,然而这个图库只能支持一个相册,想将相册分类是不可能的,故而稍加研究,自己添加了这个功能。

总图库由友情链接页面修改得来,子图库则为原图库页面。
[1]: https://material.vss.im/ “Material主题”

经过

添加总图库

加入总图库入口

在主题文件夹下的_config.yml找到pages项,插入一行:图库: "/galleries/"

其中图库galleries可修改。

然后,在博客主目录的source文件夹中新建一个同名文件夹。

例如我的文件夹名称为galleries。

并新建一个index.md文件,加入以下代码:

---
title: 图库
date: 2016/12/30
layout: galleries
---

title 为网页标题,图库可修改,galleries可修改,但必须与上面的一致。

再新建一个_data文件夹(不可改名)

添加代码

进入主题文件夹的layout文件夹中,打开post.ejs文件,找一个自己喜欢的位置,添加下面的代码。


<% }="" else="" if(page.layout="=" "galleries")="" {="" %="">
<%- partial("_widget="" page-galleries")="" %="">

其中第二行中galleries以及第三行的page-galleries可以修改。

然后在_widget文件夹中复制page-links.ejs文件一份,重命名为page-galleries.ejs,打开并找到第83、84、86、87、89行的
site.data.links,替换为site.data.galleries
,以及第87行avatar替换为pic

galleriespic可修改。

添加子图库

加入子图库入口1

进入博客主目录的source/_data文件夹中,新建一个galleries.yml文件,加入以下代码

Name:
    link: http://example.com/gallery1
    pic: http://example.com/pic.png
    descr: "这是一个描述"

Name修改为你的子图库名称,gallery1为你的子图库名称(中文未测试,这个名称后面会用到),pic为缩略图。

添加代码

进入主题文件夹的layout文件夹中,打开layout.ejs文件,在

<% }="" else="" {="" %="">

前添加以下代码


<% }="" else="" if(page.layout="=" "gallery1")="" {="" %="">
<%- partial("_widget="" page-gallery1")="" %="">

进入_widget文件夹中复制page-gallery.ejs文件一份,重命名为page-gallery1.ejs,打开并找到第25、26、28、30行
site.data.gallery,替换为site.data.gallery1

gallery1均可修改,但必须与上面的一致。

加入子图库入口2

在博客主目录的source文件夹中新建一个gallery1文件夹,并新建一个index.md文件,加入以下代码:

---
title: 子图库
date: 2016/12/30
layout: gallery1
---

title 为网页标题及页面左下角标题,子图库可修改,galleries可修改,但必须与上面的一致。

进入_data文件夹,新建一个gallery1.yml文件,加入以下代码:

Name:
    full_link: http://example.com/pic1.png
    thumb_link: http://example.com/pic1-thumb.png
    descr: "这是一个描述"

Name修改为你的一张照片名称,full_link为你的照片的连接,thumb_link为该照片的缩略图。添加多张图片,只需要根据上面的格式重复填写即可。

结果

到这里完成了,自己去看看效果吧!
我的效果如下:

![总图库效果][2]

![子图库效果][3]
[2]: https://img.halyul.com/images/2017/03/15/o_1b7vimbuo745scekls1vj81b8ba.png
[3]: https://img.halyul.com/images/2017/03/15/o_1b7vimqhl7oj112vsjg5pn7vfa.png

本文许可协议: XXX
本文永久链接:https://blog.halyul.com/posts/add-gallery (copy)/
本文Markdown:https://blog.halyul.com/posts/add-gallery (copy)/add-gallery (copy).md
  1. 1. 起因
  2. 2. 经过
    1. 2.1. 添加总图库
      1. 2.1.1. 加入总图库入口
      2. 2.1.2. 添加代码
    2. 2.2. 添加子图库
      1. 2.2.1. 加入子图库入口1
      2. 2.2.2. 添加代码
      3. 2.2.3. 加入子图库入口2
  3. 3. 结果
新的文章
实现主站静态主题更换后,Android手机状态栏随同变色功能
旧的文章
为Hexo的Material主题添加总图库以及分图库功能
你的浏览器已经过气辣!

赶紧升级浏览器来访问本站吧!现在就去

×