之前想说除了写点东西外，也能放些自己觉得不错的照片（自己拍的）到blog上就完美了，网上看着教程搬砖搞了一下午算是弄了个样子出来（笑哭😂）。
如果还没有搭建hexo-next主题的可以参考
主要部分
- 相册图片应该存储在哪里（这里我们放在github上）、图片裁剪处理（别人用python写好的😝）
- 在next主题中进行相关的配置和实现。
具体步骤
第一步
- 使用github创建一个新项目（作为相册存储及处理的仓库），本文项目名统一为album (自己取名都行)，并clone到本地
- 在项目album目录下建立两个特点名称的文件夹：
- min_photos (空即可)
- photos（添加自己的美图，图片命名规则：yyyy-mm-dd_filename.jpg/png）filename里面不能有” _ “
继续在album项目目录下添加如下两个python文件用于图片处理的：
ImageProcess.py
tool.py- tool.py 文件修改为博客位置：with open(“My_Blog_PATH/themes/next/source/lib/album/data.json”,”w”) as fp: json.dump(final_dict, fp, ensure_ascii=False)
- 在个人博客项目中的/themes/next/source/lib/ 下建立一个文件夹album。（目的是存储图片的链接）
终端执行 python3 tool.py 失败的话可能要安装Pillow
python3 -m pip install Pillow
成功的话输出如下：
This program helps compress many image files
you can choose which scale you want to compress your img(jpg/png/etc)
1) normal compress(4M to 1M around)
2) small compress(4M to 500K around)
3) smaller compress(4M to 300K around)
(若min_photos文件夹出现了图片即处理成功，同时在/themes/next/source/lib/album/路径下出现data.json文件）
第一步end
第二步
- 在自己的博客根目录下执行：hexo n page photos
- 在theme/next/_config.yml配置文件中menu选项添加photos：相册:/photos/ || camera
- 在根目录下 source/photos 文件夹中的index.md 替换为index.md(注意要修改里面博客地址为自己的博客地址)
添加一系列文件
在在themes/next/source/lib/album/下添加文件 修改ins.js文件中121和122行图片的路径：
例如:https://raw.githubusercontent.com/你的github名称/存图片的存库名称/master/min_photos/
例如:https://raw.githubusercontent.com/你的github名称/存图片的存库名称/master/photos/(注意：域名是固定的https://raw.githubusercontent.com)
配置文件代码
- 在文件next/layout/_layout.swig的head标签添加对js文件引用：
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>
- 在文件next/layout/_layout.swig的head标签添加对js文件引用：
- 在文件next/layout/_layout.swig的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 %}
第二步end
提交博客修改：
hexo clean
hexo g
hexo d
最后可以看看效果了。
