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

实现思路

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
要为 Hexo 博客添加搜索功能,你可以使用第三方搜索引擎,如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎,提供了易于使用的 API,可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤: 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo Algolia 插件。 ``` npm install hexo-algolia --save ``` 3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件,并填写以下内容: ``` { "applicationID": "YOUR_APP_ID", "apiKey": "YOUR_API_KEY", "indexName": "YOUR_INDEX_NAME" } ``` 将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。 4. 在你的 Hexo 主题添加搜索框和搜索结果页面。 在主题的相应文件中添加以下代码: 搜索框: ```html <form class="search-form" method="get" action="/search/"> <input class="search-input" type="text" placeholder="Search" name="query"> <button class="search-submit" type="submit">Search</button> </form> ``` 搜索结果页面: ```html --- title: "Search Results" layout: "search" --- <section class="search-results"> {% for page in page.posts %} <article class="search-result"> <h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2> <p class="search-result-excerpt">{{ page.excerpt }}</p> </article> {% endfor %} </section> ``` 5. 重新生成站点并上传到你的服务器。 ``` hexo generate ``` 6. 同步你的博客数据到 Algolia 上。 ``` hexo algolia ``` 完成以上步骤后,你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时,将会跳转到搜索结果页面,显示与关键字匹配的文章列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AomanHao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值