实现思路

1.在主页上必须有一个可供点击的相册连接
2.要用 hexo 生成一个photos.html文件
3.photos.html中的图片数据来源?因为这是一个静态页面所有要有一个 json文件
4.json文件中有含有信息,图片的文件名.
5.图片要有一个完整的路径,用github的空间
6.Python脚本剪裁、压缩、上传图片到自定义的github备份仓库中

操作步骤

1.在主页上必须有一个可供点击的连接

BLOG\source目录下创建一个photos目录,目的是存放利用脚本生成的json文件和渲染文件。

配置 Yilia 主题让其显示出来.
yourBlog/themes/yilia/_config.yml文件
添加相册

  相册: /photos/

2.如何生成 photos.html 文件来

github上新建一个仓库,主要用于存储图片,可以通过url访问到,也方便管理,备份图片和其他东西

git clone 到本地,模仿作者的文件目录结构

source文件夹是备份图片,theme是备份yilia配置文件等

min_photos是缩略图文件夹,photos是原图文件夹,blog_photos_copy是渲染文件备份,最后再弄

备份渲染文件,最后再弄

ejs文件是以后要hexo 渲染的文件.

ins.js文件设置自己的东西.

3.修改 ejs 模板文件

3.1 index.ejs文件可以不用修改

3.2 修改 ins.js 文件的 render()函数.这个函数是用来渲染数据的

修改图片的路径地址.minSrc 小图的路径. src 大图的路径.修改为自己的图片路径(github的路径).

  var minSrc = 'https://raw.githubusercontent.com/AomanHao/Blog-Back-Up/master/source/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/AomanHao/Blog-Back-Up/master/source/photos/' + data.link[i];

这个链接不是直接的图片url,是需要点“下载”才能看到的url。

github仓库上传的图片文件

下载选项,看网址

黄色画出了链接网址,路径地址.minSrc 小图的路径. src 大图的路径

我的路径有source/min_photos/source/photos,分别是缩略图(压缩的图快速加载预览)和原图(点击查看图片)

3.3生成 json 文件.

这一步是关键的一步,也是最后一步.先用脚本把图片处理成一套大图和一套小图,
然后上传的七牛或者 github 上再回头生成这个 json文件.
每次更新图片都要执行脚本重新生成 json文件.这个json文件会出现在
yourBlog/source/photos/data.json

4.处理图片

处理脚本试用python语言写的,运行环境也是python

python脚本文件原作者GitHub地址:https://github.com/lawlite19/Blog-Back-Up

下载python2或者3,在cmd运行窗口运行python tool.py

tool.py是运行主函数,ImageProcess图像处理功能函数,包括裁剪、压缩等

git_operation()方法:

如果你把图片上传到你的 github上这个方法就不用更改了.但是要确保在可以push到github的文件夹里,按照之前操作兴建了博客文件备份仓库

handle_photo()方法:
注意: 该脚本对图片的命名规则有要求.
最前面是日期,然后用_进行分隔;后面是图片的描述信息,注意不要包含_和.符号

5.注意事项

5.1
最前面是日期,然后用_进行分隔;后面是图片的描述信息,注意不要包含_和.符号

图片应该这样命名: 2016-10-12_xxx.jpg/png;存放在photos中,然后脚本运行会生成压缩图片,放置在min_photos文件夹中。

5.2

tool.py文件中open里面的设置的是本地博客路径

D:/GitHub/AomanHao.github.io/source/photos/data.json

D:/GitHub/AomanHao.github.io/是你的博客在本地的路径,data.json是图片信息文件

5.3
点开图片可以显示,缩略图不显示

下载empty图,下载地址,直接右键另存,保存为“empty.png”。

在你博客的本地仓库source下新建一个文件夹命名为assets,再在assets下新建一个文件夹命名为img。最后把empty.png放到img里面。

我的目录如下:

结尾:
在github上新建一个仓库,主要用于存储图片,可以通过url访问到,也方便管理
将要放到相册的图片处理成json格式的数据,然后进行访问,这里json的格式需要配合要使用的样式,所以需要处理成特定格式的json数据,下面会给出
图片裁剪,因为相册显示的样式最好是正方形的的图片,这里使用脚本处理一下
图片压缩,相册显示的图片是压缩后的图片,提高加载的速度,打开后的图片是原图。

问题:
当我用中文作为相册名字的时候,无法生成data.json文件,很纳闷,报错 UTF8的编码错误

算了,暂时找不改正的方法,可能是python是2.多的原因吧,我的相片都是用了英文命名

参考文章1
参考文章2
参考文章3

Hexo博客Yilia主题添加相册功能,丰富博客内容,Next等其他主题可以参考的更多相关文章

  1. hexo主题中添加相册功能

    博客已迁移至http://lwzhang.github.io. 基本上所有的hexo主题默认都没有实现相册功能,一方面相册功能的需求较少,毕竟hexo主要是写博客用的:另一方面实现相册功能比较麻烦,比 ...

  2. 如何在Hexo中实现自适应响应式相册功能

    用最清晰简洁的方法整合一个响应式相册 效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架,查看后表示很不错,能满足需要 http://fancyapps.com/fancyb ...

  3. 为CSDN博客添加打赏功能

    随着移动支付在国内的兴起,越来越多的付费内容越多如雨后春笋般的冒了出来.其中以<逻辑思维>.罗振宇.李笑来为主要代表作品和人物. 现在很多博客或者个人网站里面都有打赏功能,这算是对博主的劳 ...

  4. 图像处理控件ImageGear for .NET教程如何为应用程序 添加DICOM功能(2)

    在前面的一些关于图像处理控件ImageGear for .NET文章<图像处理控件ImageGear for .NET教程: 添加DICOM功能(1)>中讲解了如何对应用程序添加DICOM ...

  5. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  6. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  7. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  8. 搭建自己的博客(九):使用shell模式批量添加博客文章并增加分页功能

    想做个博客分页功能,但是没有太多的文章.所以使用shell命令行创建多篇文章. 1.打开pycharm下的terminal终端 python manage.py shell # 打开python终端 ...

  9. 接入gitment为hexo添加评论功能

    title: 接入gitment为hexo添加评论功能 toc: false date: 2018-04-16 10:59:56 categories: methods tags: hexo gitm ...

  10. 【个人博客 hexo】一个小时就搭好属于自己的博客

    对于经常需要发博客的小伙伴来说,拥有一个属于自己的博客网站,听起来是不是很酷. 今天我就来告诉大家,怎么搭建一个属于自己的博客网站,我们需要的就是使用hexo+github来搭建我们自己博客系统. 你 ...

随机推荐

  1. 【SSM项目】尚筹网(二)基于Servlet3.0项目搭建:日志系统以及声明式事务

    1 日志系统 常见的日志系统实现log4j.JUL(jdk自带).log4j2.logback(和SLF4J同一个作者,能够天然衔接),这些实现就类似于java的接口实现,而SLF4J就类似于java ...

  2. Kubernetes入门实践(环境搭建)

    容器技术只是解决了运维部署工作中的一个很小的问题,在现实生产环境中,除了最基本的安装,还会各式各样的需求,比如服务发现.负载均衡.状态监控.健康检查.扩容缩容.应用迁移.高可用等等.这些容器之上的管理 ...

  3. 一文掌握ArrayList和LinkedList源码解读

    大家好,我是Leo! 今天来看一下ArrayList和LinkedList的源码,主要是看一下常用的方法,包括像add.get.remove方法,大部分都是从源码直接解读的,相信大家读完都会有一定收获 ...

  4. vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动

    原因解析: vue项目中,页面/路由跳转后,body 的内联样式变成 overflow:hidden 解决方案: 使用路由守卫,在页面/路由跳转后,将body 的overflow设置为auto src ...

  5. 2022-01-02:给定两个数组A和B,长度都是N, A[i]不可以在A中和其他数交换,只可以选择和B[i]交换(0<=i<n), 你的目的是让A有序,返回你能不能做到。

    2022-01-02:给定两个数组A和B,长度都是N, A[i]不可以在A中和其他数交换,只可以选择和B[i]交换(0<=i<n), 你的目的是让A有序,返回你能不能做到. 答案2022- ...

  6. 500行代码手写docker-以新命名空间运行程序

    (2)500行代码手写docker-以新命名空间运行程序 本系列教程主要是为了弄清楚容器化的原理,纸上得来终觉浅,绝知此事要躬行,理论始终不及动手实践来的深刻,所以这个系列会用go语言实现一个类似do ...

  7. Prompt Engineering优化原则 - 以Webshell代码解释为例

    一.LLM prompt优化原则 本文围绕"PHP代码解释"这一任务,讨论LLM prompt优化原则. 代码样例如下: <?php echo "a5a5aa555 ...

  8. macbook苹果m1芯片训练机器学习、深度学习模型,resnet101在mnist手写数字识别上做加速,torch.device("mps")

    apple的m1芯片比以往cpu芯片在机器学习加速上听说有15倍的提升,也就是可以使用apple mac训练深度学习pytorch模型!!!惊呆了 安装apple m1芯片版本的pytorch 然后使 ...

  9. web自动化07-元素等待

    元素等待   1.什么是元素等待?       在定位页面元素时如果没找到,会在指定时间内一直等待的过程   2.为什么需要元素等待  网络速度慢  电脑配置低  服务器处理请求慢   3.三种元素等 ...

  10. Nginx 反向代理的配置和注意点(成功配置)

    反向代理配置成功 首先,Nginx 和 Java 后端都运行在云服务器的 docker 容器中.ps: 需要确保云服务器端口正常开放,以及两个容器都能被正常的访问. 现在想让 ng 做反向代理达到如下 ...