Hexo+Github实现相册功能

今天药忘吃喽~ 2022-02-15 00:19 328阅读 0赞

*  最终效果请看这里：[https://javacfox.github.io/photos/][https_javacfox.github.io_photos]
 *  本文参考了Lawlite大神的实现方法，如果想看具体原理，请访问：[http://lawlite.me/][http_lawlite.me]

# 一、具体实现流程 #

## 1、github操作 ##

*  在github上新建一个仓库，用于存储相册
 *  github的相关命令操作，请参考：[https://blog.csdn.net/weixin\_43935907/article/details/89469444][https_blog.csdn.net_weixin_43935907_article_details_89469444]

## 2、博客操作 ##

*  进入到你的博客目录下执行 hexo new page “photos”,就会出现一个这样的新目录,这个photos目录在source文件下，[删除里面的文件index.md][index.md]
 *  配置yilia主题让其显示出来

menu:
      主页: /
      随笔: /tags/随笔/
      相册: /photos/

*  生成photos.html文件,具体怎么生成的我也不是很清楚，不知道就先模仿别人吧：[https://github.com/litten/BlogBackup][https_github.com_litten_BlogBackup] ，把图片中的那些文件复制到/source/photos文件夹下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70]
 *  修改 ins.js 文件的 render()函数.这个函数是用来渲染数据的  
    修改图片的路径地址.minSrc 小图的路径. src 大图的路径.修改为自己的图片路径(七牛的, github的路径)

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/javacfox/Blog_Back_Up/master/min_photos/' + data.link[i];
              var src = 'https://raw.githubusercontent.com/javacfox/Blog_Back_Up/master/photos/' + data.link[i];

值得注意的是这里的地址是图片的下载地址，不是图片的存储地址，比如我的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 1]  
点击download后地址栏的地址

*  然后把tool.py和ImageProcess.py文件复制到博客根目录下

这两个文件主要实现了如下几个功能：
    1.裁剪图片
    2.压缩图片
    3.github提交
    4.json数据处理

*  由于需要执行python语言，需要安装Python环境，[下载地址][Link 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 2]  
    下载完成后，直接点击安装，把自动配置环境变量勾选上，完成后就可以执行python脚本
 *  在博客根目录下创建photos文件夹和min\_photos文件夹  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 3]  
    到这里为止基本上完成了所有的准备工作，接下来我们试一下吧！

## 3.上传图片操作 ##

*  将图片存入博客目录下的photos文件夹中,图片名字格式为:xxxx-xx-xx\_xxxx.jpg/png 比如2019-04-23\_小编.jpg
 *  代开cmd，cd到博客目录下，执行如下命令

> py tool.py

这里有一个坑，python [too.py][] 命令的时候出现no module named PIL错误，出现这错误的原因是: PIL模块找不到,PIL 模块已经过时了.

解决办法：执行下面命令

> pip install pillow

*  图片准备好了，然后开始生成photos.html

> hexo clean
    > hexo g
    > hexo s
    访问本地http://localhost:4000，检查是否成功
    > crtl c
    > y
    > hexo d

[https_javacfox.github.io_photos]: https://javacfox.github.io/photos/
[http_lawlite.me]: http://lawlite.me/
[https_blog.csdn.net_weixin_43935907_article_details_89469444]: https://blog.csdn.net/weixin_43935907/article/details/89469444
[index.md]: http://xn--index-ln2h32ql98bk75ao98cutke1c.md
[https_github.com_litten_BlogBackup]: https://github.com/litten/BlogBackup
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70]: /images/20220215/8ec7b5bb74404b508104430ab9452b07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 1]: /images/20220215/b69b8d14cd10484bb78ede4c078c21c8.png
[Link 1]: https://www.python.org/downloads/release/python-352/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 2]: /images/20220215/457ab4473a554e09bc4ae69a2918adce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkwNw_size_16_color_FFFFFF_t_70 3]: /images/20220215/1bf81b2c30884700a0c33162949b0dc8.png
[too.py]: http://too.py