Hexo内容压缩

Hexo生成的博客静态页面可能存在一个问题:由于主题模版的关系,生成的页面中会有大量空白行。虽然这对浏览器的渲染影响微乎其微,但是让强迫症极为难受。一种解决方法是使用Python对页面进行处理。可以在博客的根目录下(与public文件夹同级)新建以下Python脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env python3

import os

def minify_html(srcPath):
for root, dirs, files in os.walk(srcPath, topdown = True):
for name in files:
if name.find(".html") == -1:
continue
filename = os.path.join(root, name)
with open(filename, "r") as p:
with open(filename + ".tmp", "w") as t:
while True:
l = p.readline()
if not l:
break
l = l.strip()
if l:
t.write(l + "\n")
os.remove(filename)
os.rename(filename + ".tmp", filename)
print("\033[32mINFO\033[0m Minified: \033[35m%s\033[0m" % filename)

minify_html("public")

这样,在每次执行hexo d之前,执行该脚本,就可以上传压缩后的页面了。

如果Hexo博客托管在GitHub Pages等第三方平台上,为了减少页面的加载时间,对图片等内容进行CDN加速是一个不错的方法。当然,还有一个更为直接的方法,那就是通过降低分辨率来减少图片大小。这是压缩图片的脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/usr/bin/env python
#-*- coding:utf-8 -*-
from PIL import Image
import os
import shutil

def compress_image(srcPath, dstPath):
for filename in os.listdir(srcPath):
if not os.path.exists(dstPath):
os.makedirs(dstPath)

srcFile = os.path.join(srcPath, filename)
dstFile = os.path.join(dstPath, filename)
if os.path.isfile(srcFile):
if os.path.isfile(dstFile) or (not srcFile.endswith(".jpg") and not srcFile.endswith(".png")):
continue
if os.path.getsize(srcFile) <= 300000:
shutil.copyfile(srcFile, dstFile)
continue
sImg = Image.open(srcFile)
w, h = sImg.size
dImg = sImg.resize((w * 2 / 3, h * 2 / 3), Image.ANTIALIAS)
dImg.save(dstFile)
print("\033[32mINFO\033[0m Minified: \033[35m%s\033[0m" % dstFile)

elif os.path.isdir(srcFile):
compress_image(srcFile, dstFile)

compress_image("images", "source/images")

在每次执行hexo g之前,在博客的主目录下执行该脚本,就可以将images目录下的高分辨率图片,压缩并存储到source/images目录下。如果要在Markdown文件中插入图片,使用![](//images/2018-07/path/to/your/image)即可。
这里用了递归的写法,有兴趣的话,你也可以使用os.walk()方法改写以上脚本,这可能会更加简洁。


参考文章:
hexo next主题大量空白行问题
python脚本编程:批量压缩图片大小

本文更新于2018年11月15日:
也可以使用官方的插件:hexo-html-minifier
不过这个插件的去除注释功能不太智能,会把<!-- more -->也一并去除,导致Read More功能失效。

本文更新于2018年11月20日:
博主发现了一个不错的工具,涵盖了以上功能:hexo-all-minifier

🍭支持一根棒棒糖!
0%