当我们使用hexo博客框架中的yilia主题时,在我们这一博客页面中,原作者Litten并未帮我们添加相册这一功能。这时,如果想让我们的博客拥有相册的功能,就需要我们自行添加改变、添加主题中的相关参数。从网上百度了很多,看了许多的博客,还是遇到了一些坑爬不过去。最终,还是请教了一个小伙伴才得以解决。
一、博客页面添加相册
首先,打开cmd进入blog的source目录下,创建photos文件夹。
E:\>cd blogE:\blog>cd sourceE:\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@: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的相册.
<div class="instagram itemscope"><a href="https://chemlez.github.io/" target="_blank" class="open-ins">图片正在加载中…</a></div>
3.修改ins.js文件里的render()函数,按照上面的注释提醒,进行修改。
// 修改这里render()函数:修改图片的路径地址.minSrc 小图的路径. src 大图的路径.修改为自己的图片路径(github的路径)// /ChemLez/blog-Picture/master/photos/// /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 = '/ChemLez/blog-Picture/master/min_photos/' + data.link[i];var src = '/ChemLez/blog-Picture/master/photos/' + data.link[i];var type = data.type[i];var target = src + (type === 'video' ? '.mp4' : '.jpg');src += '';
这里的地址,就可以查看我们第二步所做的工作。打开github,进入blog-Picture仓库后。点击在第二步中上传的照片。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bdkhuj0-1584275848077)(//08/29/mqaudA.png)]然后点击Download,此时的浏览框中的地址就是我们所需要的地址。
四、添加脚本
这里添加的python脚本主要是用于处理图片。脚本下载-下载地址.
因为,当我们点击相册这一页面时,展示在眼前的是一张张缩略图。而当你需要预览具体的某一张图时,其显示的是一张大图。所以,我们的预览图照片大小是经过压缩处理的(使得页面加载快)。当我们具体看某张图片时,再使用原画质的图片。所以,min_photos和photos两个文件夹分别对应着这两种图片。其中,min_photos就是处理过后的压缩图片,而photos就是我们存放的图片。所以,这里的python脚本主要就做着这样的工作。
将其中的.py文件拷贝至本地仓库blog-Picture文件夹中.根据脚本文件,图片的命名规则为:-10-21_xxx.jpg/png.将图片empty.png下载放入博客目录下的assets/img文件夹中.打开tool.py文件,修改def handle_photo():
with open("E:/blog/source/photos/data.json", "w") as fp:
将其中的的地址,换成你将要生成data.json的位置,就是在第一步中,我们删除的.json文件夹的目录地址。每次,进行tool.py脚本时,都会产生data.json文件,用于存储我们图片的信息。
五、运行
1.首先将用于测试的图片名改成上述的命名规则的名字,推送至github远端,进行修改.
2.打开终端命令窗口cmd.
输入:cd blog-Picture //用于进入blog-Picture文件夹python tool.py //python脚本文件的运行第二句的运行这里可能会报错 `no module named PIL`然后输入:pip install pillow可能出现权限不足的情况,按照下方出现的英文,加上权限进行下载。即:一路按照下方的英文,加权限进行下载.
3.hexo s.预览查看。这里我将video功能隐去了,最初的photos旁边还有一个video功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pzWVIDQ-1584275848078)(//08/29/mq6fkF.png)]
4.在最初的photos下载中,有个videos.ejs文件,如果想引入一些视频,可将其中的链接即src,视频名进行修改.
<center><h1>指弹_女儿情</h1></center><hr/><center><div class="video-container"><iframe height="80%" width="80%" src="/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe></div></center><hr/>
如果不想用这一功能,将以下标签注释.
<a class="photos-btn" href="/photos/videos.html">Video</a>
六、总结
每次将需要上传的图片,放入到blog-Picture中的photos文件夹.图片的命名一定要遵循上述说的命名规则.注意:如果想让多张图片归类在页面中的某一个年、月份下,必须使得日期一模一样,只能修改xxx。如果命名中,年、月相同,而日期不同便会在相册页面额外生成一个list,其表头相同。cmd命令窗口进入blog-Picture,再进行python tool.py,运行脚本.将图片推送到github远端仓库,产生链接.hexo s 进入本地窗口预览,没有问题后:hexo clean //清除页面缓存hexo g //用于生成改动的文件hexo d //部署到远端网站
最终效果
参考文献
[1] hexo Yilia 主题如何添加相册功能:/p/a9f309aaa0e0
[2] hexo yilia 主题如何添加相册:/qq_40651535/article/details/95061281
[3] Hexo+Github实现相册功能:http://lawlite.me//04/13/Hexo-Github%E5%AE%9E%E7%8E%B0%E7%9B%B8%E5%86%8C%E5%8A%9F%E8%83%BD/