Blog Theme Update && Some Random Thoughts

It's been a while since I last updated my blog, so I thought I'd write some random thoughts

Blog Theme Update#

Recently, I took some time out from online classes to make a few updates to my Hexo theme. The main change was to make the homepage look a bit nicer by adding a background image and adjusting the top bar CSS to be transparent, which better suits the image background.

Then I realized that if the top bar remained transparent, it would look awkward when scrolling to the article list, so I added some JavaScript to allow the top bar to switch between transparent and white on its own.

Enabling Progressive JPEG Images#

Progressive Image Conversion#

Because of the aforementioned blog theme update, a large background image needs to be loaded as soon as you enter the blog. If the original linearly loaded jpg images were used, it would create a visually disharmonious effect. So I converted the website's images to support progressive loading using a Python script.

from PIL import Image # pip3 install pillow
 
origin_file_path = './t.jpeg'
progressive_file_path = './o.jpeg'
 
original_image = Image.open(origin_file_path)
original_image.convert('RGB')
original_image.save(progressive_file_path, optimize=True, quality=100, progressive=True)

PNG to JPG Conversion#

I also used a Python script to convert the images to progressive JPEG format.

import os
import cv2
import sys
import numpy as np
from PIL import Image # pip3 install pillow
 
path = "./"
print(path)
 
for filename in os.listdir(path):
    if os.path.splitext(filename)[1] == '.png':
        # print(filename)
        img = cv2.imread(path + filename)
        print(filename.replace(".png",".jpg"))
        newfilename = filename.replace(".png",".jpg")
        # cv2.imshow("Image",img)
        # cv2.waitKey(0)
        cv2.imwrite(path + newfilename,img)
        origin_file_path = path + newfilename
        progressive_file_path = path + newfilename
        original_image = Image.open(origin_file_path)
        original_image.convert('RGB')
        original_image.save(progressive_file_path, optimize=True, quality=100, progressive=True)
        os.remove(path+filename)%

Experience with iconfont#

When I was working on this theme, I had a need for using icon icons. Although fontawesome.com offers a wide variety of icons, it seems that some icons require payment to use. As a (poor) student, this made me a bit uncomfortable. Then I remembered the iconfont icon library developed by Alibaba, and I fell in love with it after using it for the first time.

It not only provides regular icons but also colorful icons, and it's free (for non-commercial use). I love it! The icons used in the blog theme project are from iconfont.

Changing DNS Service Providers#

Previously, I was using NS1's free DNS resolution service. Although it had the function of regional resolution, the effect didn't seem very significant. So I took advantage of Tencent Cloud's promotion and bought a one-year personal professional version (costing -￥36) to try it out. It can differentiate between domestic and overseas resolution and the speed improvement is quite good.

EOF