当我们使用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 git@github.com: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/


博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://chemlez.github.io/2019/08/28/hexo-yilia-%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%9B%B8%E5%86%8C%E5%8A%9F%E8%83%BD/

相关文章

Comment