史诗级退化——全新的博客系统

史诗级退化——全新的博客系统

背景

​ 六月月初换了个新电脑，准备把原来的hexo博客迁移过去，发现重新生成/部署的时候产生了一些问题，正准备全部重新弄一遍。在找主题的时候确犯了强迫症。最后受到https://eklitzke.org/的启发，准备自己手撸一个。反正轮子也造习惯了，不差这一回。

设计

​ 反正是静态博客，也不需要啥后端，于是最后的设计目标就是根据markdown文件生成html文件，然后丢到github-pages上即可，也不刷要啥前端框架，能正常显示文件表格和图像即可。

​ 技术栈的选择。这整个流程最麻烦的一部就是Markdown生成Html，这一步也造轮子属实没必要，于是准备去github上找个开源库，一开始找的是https://github.com/mity/md4c 这个，编译也过了，确实能用，但是很难处理编码问题。最后又仔细想了想，这种工作用不着C/C++这种语言，随便整个脚本就行了。最后我选定了https://python-markdown.github.io/ .果然，python在做这种不怎么需要性能的文本工作确实方便。

​ 简单的设计。由于不想把样式文件硬编码，就准备了一个目标template.html,将css的引用和markdown生成的内容填进去即可：

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    %s
    <title>%s</title>
    <style>

    </style>
</head>
<body>
    <article class="content">
        %s
        <hr>
        <div class="nav-bottom">
            <ul class="nav-list">
                <li class="nav-item"><a href="../index.html">Home</a></li>
                <li class="nav-item"><a href="#">Email</a></li>
                <li class="nav-item"><a href="https://gitHub.com/hhhxiao">GitHub</a></li>
            </ul>
        </div>
    </article>
</body>
<hr>
</html>

就是这么个简单东西，<head>内填上css引用，然后<article>内填上使用python-markdown生成的文本文件即可。

​ 遇到的问题。整个过程遇到的最大问题就是生成的html中引用的css文件始终无法被edge识别，F12按烂了也找不到问题。这里就不得不承认Chrome才是真神了。当我打开chrome后发现css的内容竟然乱码了，这时候检查本地源文件才发现CSS和HTML的文件编码不匹配，而Edge的控制台自作聪明在显示css内容的时候偷偷变了编码。当然最后其实还是我的问题，没想到生成的html文件是utf-16编码的，和utf-8的css不匹配，这才导致了整个问题的产生。

脚本的编写。在核心问题解决后剩下的就是体力活了，整个代码也就不到100行：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
from ftplib import all_errors
import functools
from operator import index
import os
from time import time_ns
from tkinter.messagebox import NO
from turtle import ht
import markdown
import sys
from datetime import datetime


def get_style(paths: list[str]):
    res = ''
    for path in paths:
        res += '<link rel="stylesheet" type="text/css" href="%s">\n' % path
    return res 


def read_file(name:str):
    text = ''
    with open(name, "r", encoding="utf-8") as input_file:
        text = input_file.read()
    return text

def	write_file(path:str,conetent :str):
	with open(path, 'w',encoding='utf-8') as f:
 	   f.write(conetent)

    
def generate_html(input_makrdown:str,style):
    md = markdown.Markdown(extensions = ['meta','extra','codehilite','md4mathjax'])
    content = md.convert(input_makrdown)
    template = read_file('template.html')

    time_meta = md.Meta.get('date')
    time = ''
    if time_meta is not None:
        time = time_meta[0]

    title_meta = md.Meta.get('title')
    title = "Welcome to hhhxiao's blog"
    if time_meta is not None:
        title = title_meta[0]

    return template % (get_style(style) ,title ,content),time
    


def cmp(a,b):
    ta = a['time']
    tb = b['time']
    if ta > tb:
        return -1
    elif ta < tb:
        return 1
    return 0

def process(input_path:str,output_path:str):
    all_files =  os.listdir(input_path)
    markdown_files = [x for x in all_files if x.endswith('.md')]
    indexes = []
    csses = ['styles.css','custom.css']
    for file in markdown_files:
        name = file[:-3]
        markdown_path = input_path +'/'+file
        print(markdown_path)
        html,time = generate_html(read_file(markdown_path),['../style/' + x for x in csses])
        write_file(output_path+'/posts/'+name+'.html',html)
        #index_markdown += '[%s] [%s](./posts/%s.html)\t\n' % (name,name)
        indexes.append({'time':time,'name': name })
    
    indexes = sorted(indexes,key=functools.cmp_to_key(cmp))
    
    index_markdown = "# AGNO3\n Welcome to hhhxiao's blog\n\n"
    for item in indexes:
        index_markdown += '  %s&nbsp;&nbsp;&nbsp;&nbsp;[%s](./posts/%s.html)<br>' % (item['time'],item['name'],item['name'])
    index_html,_ = generate_html(index_markdown,['style/'+x for x in csses])
    write_file(output_path+'/index.html',index_html)



if __name__ == "__main__":
    if len(sys.argv) !=3:
        print("use py gen.py [input folder] [output folder]")
        exit(-1)
    #path = 'D:/blog/source/_posts'
    #output = './outputs'
    process(sys.argv[1],sys.argv[2])

当然目前写的还比较简陋，以后有时间就会慢慢完善。

每次写完后在博客根目录运行python.exe .\gen.py D:\nutSync\Blog\ ..即可生成相关html文件了，然后手动commit加push就能自动部署到github-page上了，还是挺方便的，因为不需要编译前端代码，生成也非常快，至少比我之前的hexo快多了。当然缺点就是自己写的css比较丑，算了凑合看吧，小问题。