感想

按照个人经验，写博客一般会经历这些阶段：

直接在新浪博客，CSDN 这样的网站上写
搭建个人博客，从动态博客开始，选一个现成的 CMS
开始用静态博客：更换不同的生成器，更换不同的主题
修改别人的主题
自己从头写一个主题 <-我在这
自己从头写一个静态博客生成器

虽然已经开始觉得 Hugo 的模板引擎不好用了，但我已经完成了主题不用再接触这东西了，就让我停留在这一层吧。

这次说是从头写，但实际上还是把别人的很多东西拼起来再自己发挥一下而已。我是真的学不来 CSS 也无心搞前端，就用 bulma 做了个很简单的主题。并非比前一个别人的主题好看，三段式的布局也很普通，但毕竟是自己写的，我自我感觉还不错。

特色

简洁陋
全局就一个颜色，可以随便定义。剩下都是黑白灰
TOC 支持，从原来我魔改过的主题里照搬过来了
暗色模式支持，目前是直接生成了两个 CSS 文件，以后估计会改
PWA 支持，目前看来没多大用，为了 Lighthouse 跑分更好看

下一步

bulma 作者正在尝试支持 CSS variables，到正式发布时暗色模式的实现会对应修改
还有一个待解决问题，为了确定目录固定到屏幕的时机需要获取高度，现在目录获取自己的offsetTop不准确，没包含上面的header和navbar部分。涉及到前端知识了，我就先能用就行不修了
其他地方应该不会动了，简陋也没办法，就这水平了…
自己设计一个 favicon
之后就专心想着博客的内容了，不再管其他乱七八糟的了

其他

为了显摆主题色可以随意指定，我专门在 demo 网站搞了个定时任务每分钟修改一次颜色。从常用软件里挑出来四个, 这些软件的 logo 里特定的某个色彩比较有存在感。计算生成色彩之间的RGB线性梯度，按照当前分钟取一个颜色出来写到配置里，然后 build 网站。（浏览器里的缓存表示很淦）

发现一个很有用的网站 crontab guru

#!/usr/bin/python3
# change theme color every minute
import os
import random
from datetime import datetime, timedelta, timezone
import toml

# code original from https://gist.github.com/RoboDonut/83ec5909621a6037f275799032e97563
def hex_to_RGB(hex):
    ''' "#FFFFFF" -> [255,255,255] '''
    # Pass 16 to the integer function for change of base
    return [int(hex[i:i + 2], 16) for i in range(1, 6, 2)]

def RGB_to_hex(RGB):
    ''' [255,255,255] -> "#FFFFFF" '''
    # Components need to be integers for hex to make sense
    RGB = [int(x) for x in RGB]
    return f"#{RGB[0]:02x}{RGB[1]:02x}{RGB[2]:02x}"

def linear_gradient(start_hex, finish_hex="#FFFFFF", n=10):
    # Starting and ending colors in RGB form
    s, f = hex_to_RGB(start_hex), hex_to_RGB(finish_hex)
    # Initilize a list of the output colors with the starting color
    RGB_list = [s]
    # Calcuate a color at each evenly spaced value of t from 1 to n
    for t in range(1, n):
        # Interpolate RGB vector for color at the current value of t
        curr_vector = [ int(s[j] + (float(t) / (n - 1)) * (f[j] - s[j])) for j in range(3) ]
        # Add it to our list of output colors
        RGB_list.append(curr_vector)
    return list(map(RGB_to_hex, RGB_list))

# my code start here
# crontab -e and execute this script every minute
CWD = os.path.split(os.path.realpath(__file__))[0]
def hour_to_color(hour):
    COLORS = [
        '#e32428', # weibo red
        '#ff9900', # pornhub orange
        '#fb7299', # bilibili pink
        '#1793d1', # archlinux blue
    ]
    return COLORS[hour % len(COLORS)]

def change_color():
    config_file = CWD + '/config_color.toml'
    utc_now = datetime.utcnow().replace(tzinfo=timezone.utc)
    bj_now = utc_now.astimezone(timezone(timedelta(hours=8)))

    curr_color = hour_to_color(bj_now.hour)
    last_color = hour_to_color(((bj_now - timedelta(hours=1)).hour))
    minute = bj_now.minute
    colors = linear_gradient(last_color, curr_color, 61)
    color = colors[minute]
    print(f'time:{bj_now}, from:{last_color} to:{curr_color} current:{color}')
    try:
        with open(config_file, 'r') as f:
            config = toml.load(f)
        with open(config_file, 'w') as f:
            config['params']['primaryColor'] = color
            toml.dump(config, f)
    except Exception as e:
        print('Change Color Failed')
        print(e)

def hugo_build():
    config_file = CWD + '/config_color.toml'
    cmd = f'/usr/local/bin/hugo --source {CWD} --config {config_file} --minify --gc > /dev/null'
    os.system(cmd)

if __name__ == '__main__':
    change_color()
    hugo_build()

等到 bulma 的 CSS variables 搞完了，这个可以重新写一下搞成 js 实现，实时更新不用重新 build 也不用刷新页面，感觉会很有意思。

关于最近写的一个 Hugo 主题

2020/11/20 ・作品

感想

特色

下一步

其他