Demo Blog
Demo Blog
Halyul
I'm your slogan!
为Hexo的Material主题添加总图库以及分图库功能
Posted: Dec 30, 2016
  • Article QR Code
This article was last modified days ago. The content of this post may be outdated!

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

起因

今天将整个[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

Article License: XXX
Article Permalink: https://halyul.github.io/posts/add-gallery/
Article Markdown: https://halyul.github.io/posts/add-gallery/add-gallery.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. 结果
Newer Post
实现主站静态主题更换后,Android手机状态栏随同变色功能
Older Post
你好,Hexo!
Buy me a beer?
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×