当我们使用hexo博客框架中的yilia主题时,在我们这一博客页面中,原作者Litten并未帮我们添加相册这一功能。这时,如果想让我们的博客拥有相册的功能,就需要我们自行添加改变、添加主题中的相关参数。从网上百度了很多,看了许多的博客,还是遇到了一些坑爬不过去。最终,还是请教了一个小伙伴才得以解决。

一、博客页面添加相册

首先,打开cmd进入blog的source目录下,创建photos文件夹。

1
2
3
4
E:\>cd blog
E:\blog>cd source
E:\blog\source>hexo new page "photos"
INFO Created: E:\blog\source\photos\index.md

删除文件夹中的index.md文件,否则最终生成的是一个单纯的页面。也可以直接进入source文件下创建photos文件夹。

二、创建图片存储仓库

因为,我们的博客是部署到远端,使得每一个人都能够看到,而图片在远端的展示,可借助于图床。所以,我们可以专门在github上创建一个仓库用于存储图片。仓库的创建就不再一一赘述,只需登录自己的github,new repository即可。这里,我的仓库名为blog-Picture.
个人仓库
在创建完远端仓库后,将本地与github上远端仓库关联,这样我们以后才能够将图片推送到远端。
远端仓库与本地仓库关联的方法:
打开博客文件夹,在此根目录下,使用git ,即 git Bush Here,然后输入

$ git clone [email protected]:chemlez/picture-blog.git

其中clone的仓库换成自己的仓库地址。这样便能使本地与远端关联起立。此刻,会产生一个blog-Picture的文件夹,在此文件夹下分别创建min_photos、photos文件夹。其中,在此photos文件夹下存入一张图片,再将整个内容推送至远端。

$ git add .
$ git commit -m “照片存放”
$ git push -u origin master

这个时候本地的内容就被推送到了远端。关于git推送远端的用法,可参照廖雪峰的教程。这样后面我们可以用来查看图片的存入地址,来修改我们的ins.js参数。

三、创建相册布局样式

在一开始的博客主题clone中,主题yilia并没有相册的版块。但作者Litten的博客样式中添加了这一版块。所以,我们可以参照原作者的格式进行相关的修改即可。其中的样式参照这里–样式参考。下载完之后:
1.删除其中所有的.json文件。因为,后面的.json文件是我们自己博客在上传图片时生成的.
2.修改index.ejs。这一步很重要,我自己查百度和相关博文时,都没有提到这一步。将其中的href修改成自己的博客地址。当初我就没有修改,最终,显示出来的永远都是原作者Litten的相册.

1
2
3
   <div class="instagram itemscope">
<a href="https://chemlez.github.io/" target="_blank" class="open-ins">图片正在加载中…</a>
</div>

3.修改ins.js文件里的render()函数,按照上面的注释提醒,进行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 修改这里render()函数:修改图片的路径地址.minSrc 小图的路径. src 大图的路径.修改为自己的图片路径(github的路径)
// https://raw.githubusercontent.com/ChemLez/blog-Picture/master/photos/
// https://raw.githubusercontent.com/ChemLez/blog-Picture/master/min_photos/
var render = function render(res) {
var ulTmpl = "";
for (var j = 0, len2 = res.list.length; j < len2; j++) {
var data = res.list[j].arr;
var liTmpl = "";
for (var i = 0, len = data.link.length; i < len; i++) {
var minSrc = 'https://raw.githubusercontent.com/ChemLez/blog-Picture/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/ChemLez/blog-Picture/master/photos/' + data.link[i];
var type = data.type[i];
var target = src + (type === 'video' ? '.mp4' : '.jpg');
src += '';

这里的地址,就可以查看我们第二步所做的工作。打开github,进入blog-Picture仓库后。点击在第二步中上传的照片。图片然后点击Download,此时的浏览框中的地址就是我们所需要的地址。

四、添加脚本

这里添加的python脚本主要是用于处理图片。脚本下载-下载地址.
因为,当我们点击相册这一页面时,展示在眼前的是一张张缩略图。而当你需要预览具体的某一张图时,其显示的是一张大图。所以,我们的预览图照片大小是经过压缩处理的(使得页面加载快)。当我们具体看某张图片时,再使用原画质的图片。所以,min_photos和photos两个文件夹分别对应着这两种图片。其中,min_photos就是处理过后的压缩图片,而photos就是我们存放的图片。所以,这里的python脚本主要就做着这样的工作。

  1. 将其中的.py文件拷贝至本地仓库blog-Picture文件夹中.
  2. 根据脚本文件,图片的命名规则为:2019-10-21_xxx.jpg/png.
  3. 将图片empty.png下载放入博客目录下的assets/img文件夹中.
  4. 打开tool.py文件,修改def handle_photo():
    1
    with open("E:/blog/source/photos/data.json", "w") as fp:
    将其中的的地址,换成你将要生成data.json的位置,就是在第一步中,我们删除的.json文件夹的目录地址。每次,进行tool.py脚本时,都会产生data.json文件,用于存储我们图片的信息。

五、运行

1.首先将用于测试的图片名改成上述的命名规则的名字,推送至github远端,进行修改.
2.打开终端命令窗口cmd.

1
2
3
4
5
6
7
输入:
cd blog-Picture //用于进入blog-Picture文件夹
python tool.py //python脚本文件的运行
第二句的运行这里可能会报错 `no module named PIL`
然后输入:
pip install pillow
可能出现权限不足的情况,按照下方出现的英文,加上权限进行下载。即:一路按照下方的英文,加权限进行下载.

3.hexo s.预览查看。这里我将video功能隐去了,最初的photos旁边还有一个video功能。

4.在最初的photos下载中,有个videos.ejs文件,如果想引入一些视频,可将其中的链接即src,视频名进行修改.

1
2
3
4
5
6
7
8
9
10
<center>
<h1>指弹_女儿情</h1>
</center>
<hr/>
<center>
<div class="video-container">
<iframe height="80%" width="80%" src="https://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe>
</div>
</center>
<hr/>

如果不想用这一功能,将以下标签注释.

1
<a class="photos-btn" href="/photos/videos.html">Video</a>

六、总结

  1. 每次将需要上传的图片,放入到blog-Picture中的photos文件夹.图片的命名一定要遵循上述说的命名规则.注意:如果想让多张图片归类在页面中的某一个年、月份下,必须使得日期一模一样,只能修改xxx。如果命名中,年、月相同,而日期不同便会在相册页面额外生成一个list,其表头相同。
  2. cmd命令窗口进入blog-Picture,再进行python tool.py,运行脚本.
  3. 将图片推送到github远端仓库,产生链接.
  4. hexo s 进入本地窗口预览,没有问题后:
    1
    2
    3
    hexo clean //清除页面缓存
    hexo g //用于生成改动的文件
    hexo d //部署到远端网站
    最终效果

参考文献

[1] hexo Yilia 主题如何添加相册功能:https://www.jianshu.com/p/a9f309aaa0e0
[2] hexo yilia 主题如何添加相册:https://blog.csdn.net/qq_40651535/article/details/95061281
[3] Hexo+Github实现相册功能:http://lawlite.me/2017/04/13/Hexo-Github%E5%AE%9E%E7%8E%B0%E7%9B%B8%E5%86%8C%E5%8A%9F%E8%83%BD/


Comment