本次的个性化设置是添加相册页面,具体效果可以查看我的相册
本篇教程是参考的,不过本人在操作过程中遇到一些问题,在本篇文章会更改

建立Github相册仓库

在本地建立一个git仓库

先在本地建立一个git仓库,用来存放照片

1
2
3
mkdir MyBlog_Images
cd ~/MyBlog_Images
git init

并且在里面新建photosmin_photos两个文件夹
photos文件夹下放一张测试图片,所有的图片需以特定方式命名,格式为:yyyy-mm-dd_PicName.jpg/png/jpeg/gif,例如2000-01-01_test.jpg

在Github创建新仓库

在Github申请一个新的仓库
repo

将本地仓库与Github仓库连接

在终端输入以下命令

1
2
git remote add origin your_repo_address
git push origin master

配置

下载配置文件

这个仓库有需要的所有配置文件,将这个仓库克隆到本地

1
git clone git@github.com:malizhigithub/HexoAlbumData.git

开始配置

tool.pyImageprocessing.py文件放到**~/MyBlog_Images**路径下
打开 tool.py文件,将下面的代码替换掉

1
2
- with open("E://YourBlog/themes/next/source/lib/album/data.json","w") as fp:
+ with open("YourBolgPath/themes/next/source/lib/album/data.json","w") as fp:

并且在YourBolgPath/themes/next/source/lib路径新建album文件夹,在 album文件夹下新建 data.json文件

若你想在相册放置较多格式的图片,可以修改tool.py的代码

1
2
- if fileformat.lower() == "jpg" or fileformat.lower() == "png" or fileformat.lower() == "gif":
+ if fileformat.lower() == "jpg" or fileformat.lower() == "png" or fileformat.lower() == "gif" or fileformat.lower() == "你的照片格式":

tool.py这个脚本默认是将照片进行较大程度的压缩的,可以自行修改 **compress_photo()**函数的以下代码

1
2
3
4
5
6
# 定义压缩比,数值越大,压缩越小
# SIZE_normal = 1.0 1级
# SIZE_small = 1.5 2级
# SIZE_more_small = 2.0 3级
# SIZE_more_small_small = 3.0 4级
compress('压缩等级(1/2/3/4)', des_dir, src_dir, file_list_src)

本人选择不进行压缩,即压缩等级为1

JS&CSS文件夹下的所有文件复制到YourBolgPath/themes/next/source/lib/album
然后再将photoswipe-ui-default.min.jsphotoswipe.min.js两个文件添加到themes/next/source/js/src中。

打开YourBolgPath/themes/next/source/lib/album/ins.js文件,修改以下代码

1
2
3
4
5
var minSrc = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/lizhi/Blog_Album/master/photos/' + data.link[i];
// 替换成下面的代码
var minSrc = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/yougithubname/pathtoyourphotos/photos/' + data.link[i];

确保你的图片地址是正确的,否则不能正常加载图片
测试方法:在Github仓库中打开你的测试图片,并右键选择在新标签页打开图片就可以看到图片的地址
图片的地址一定是以https://raw.githubusercontent.com开头的,如果你看到的是以https://github.com开头的说明是不正确的

YourBolgPath/themes/next/layout/_layout.swighead部分前添加以下代码

1
2
<script src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>

body部分增加下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{% if page.type === "photos" %}
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
{% endif %}

YourBolgPath/themes/next/layout/_scripts/pages/post-details.swig添加下面代码

1
2
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>

若你的主题开启了fancybox功能,则在YourBolgPath/themes/next/layout/_partials/head.swig中添加以下代码,否则不用管

1
2
3
4
5
6
7
8
9
10
11
12
13
14
+{% if page.type === "photos"  %}
+ {% set theme.fancybox = false %}
+{% endif %}
+{% if page.type !== "photos" %}
+ {% set theme.fancybox = true %}
+{% endif %}

{% if theme.fancybox %}
{% set fancybox_css_uri = url_for(theme.vendors._internal + '/fancybox/source/jquery.fancybox.css?v=2.1.5') %}
{% if theme.vendors.fancybox_css %}
{% set fancybox_css_uri = theme.vendors.fancybox_css %}
{% endif %}
<link href="{{ fancybox_css_uri }}" rel="stylesheet" type="text/css" />
{% endif %}

设置photos界面

在终端输入

1
2
cd YourBlogPath
hexo n page photos

打开YourBlogPath/themes/next/_config.yml,在menu中修改以下代码

1
2
3
4
5
6
7
8
menu:
home: / || home
about: /about/ || user
categories: /categories/ || th-list
tags: /tags/ || tags
archives: /archives/ || archive
#schedule: /schedule/ || calendar
+ 相册: /photos || camera

photosindex.md文件添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

---
title: 照片
date: 2018-09-02 21:00:00
type: photos
fancybox: false
comments: true
---
<link rel="stylesheet" href="../lib/album/ins.css">
<link rel="stylesheet" href="../lib/album/photoswipe.css">
<link rel="stylesheet" href="../lib/album/default-skin/default-skin.css">
<div class="photos-btn-wrap">
<a class="photos-btn active" href="javascript:void(0)" target="_blank" rel="external">Photos</a>
</div>
<div class="instagram itemscope">
<a href="http://yourbolg.com" target="_blank" class="open-ins">图片正在加载中…</a>
</div>

<script>
(function() {
var loadScript = function(path) {
var $script = document.createElement('script')
document.getElementsByTagName('body')[0].appendChild($script)
$script.setAttribute('src', path)
}
setTimeout(function() {
loadScript('../lib/album/ins.js')
}, 0)
})()
</script>

测试

在终端输入

1
2
3
4
5
cd ~/MyBlog_Images
python3 tool.py
cd YourBlogPath
hexo g
hexo d

刷新自己的主页,就可以看到相册页面啦~
以后只需要在 ~/MyBlog_Images/photos里面放入图片,并正确命名,执行 python3 tool.py
在自己的本地Blog地址执行

1
2
hexo g
hexo d

就可以更新相册了
有任何疑问可以在下面评论~