重新做人

Published: 五 23 七月 2021

In 日常.

就在这篇里记录下博客改造记录吧😊

pelican

这次用Pelican主要是因为看它自带的主题很舒服(KK说自己改,可是我不会前端啊😭),然后Python写的也比较好修改,于是就入坑了,记录下修改点

1.它的本地图片必须要加{attach}标签,这和编辑器不一致,因此在读文件时加个硬核的过滤,另外为了让小图片默认居中,对这类图片添加了默认的div标签:

--- a /pelican/readers.py
+++ b /pelican-4.6.0/pelican/readers.py
@@ -334,10 +334,8 @@ class MarkdownReader(BaseReader):
self._source_path = source_path
self._md = Markdown(**self.settings['MARKDOWN'])
with pelican_open(source_path) as text:
+            # 修改原始格式为attach格式
+            text = re.sub(r'(!\[.*?\])\(([^{].+?)\)', r'\1({attach}\2)', text)
+            text = re.sub(r'(<img.*?src\s*=\s*)"([\w/.-]+)"', r'\1"{attach}\2"', text, flags=re.I)
+            text = re.sub(r'(<img[^>]*?)(/>|></img>)', r'<div align="center">\1\2</div>', text, flags=re.I) # 添加居中对齐
content = self._md.convert(text)
-
if hasattr(self._md, 'Meta'):
metadata = self._parse_metadata(self._md.Meta)

2.它的图片不会缩放,这里也直接加个硬核的CSS:

--- a /pelican/themes/notmyidea/static/css/main.css
+++ b /pelican-4.6.0/pelican/themes/notmyidea/static/css/main.css
@@ -26,9 +26,6 @@ body {
padding: 0;
text-align: left;
}
+img {
+    width: 100%;
+}

/* Headings */
h1 {font-size: 2em }

语法高亮有的地方会认为是错误,把这种警告删掉:

--- a /pelican/themes/notmyidea/static/css/pygment.css
+++ b /pelican-4.6.0/pelican/themes/notmyidea/static/css/pygment.css
@@ -8,9 +8,9 @@
.err {
- border:1px solid #FF0000;
+ /* border:1px solid #FF0000; */
}

如果不知道某种特殊的代码应该用什么高亮可参考写语法高亮提示pygments-lexer

3.默认最新文章会展开,把它去掉:

--- a/pelican/themes/notmyidea/templates/index.html
+++ b/pelican-4.6.0/pelican/themes/notmyidea/templates/index.html
@@ -5,7 +5,7 @@
{% for article in articles_page.object_list %}

{# First item #}
+        {% if loop.first and not articles_page.has_previous() and false %} {# 此处修改为永假来禁止最新文章全文展开 #}
-        {% if loop.first and not articles_page.has_previous() %}
<aside id="featured" class="body">
<article>

4.添加TOC,使用Markdown扩展可生成目录,但它会直接添加到文章头部:

# from https://cloudbytes.dev/snippets/add-a-table-of-contents-using-markdown-in-pelican
MARKDOWN = {
    "extension_configs": {
        # Needed for code syntax highlighting
        "markdown.extensions.codehilite": {"css_class": "highlight"},
        "markdown.extensions.extra": {},
        "markdown.extensions.meta": {},
        # This is for enabling the TOC generation
        "markdown.extensions.toc": {"title": "TOC"},
    },
    "output_format": "html5",
}

之后可使用extract_toc 将其提取到article.toc里,之后编辑模板可放到合适位置:

{% if article.toc %}
    <nav class="toc">
    {{ article.toc }}
    </nav>
{% endif %}

画图

很多东西避免不了画图,记录下一些作图的语法,一般用drawio就好啦。

时序图

研究了好久还是PlantUML好用

结构关系

很多代码的结构体关系比较复杂,最后决定先用代码处理所需的结构体,再手动修正dot再输出。

制表

markdown本身的表格语法还是蛮简单蛮好用的,但是它不支持单元格合并/添加标题等功能,于是我习惯使用html制表,有时也将markdown的先转成html的表格在添加格式,可使用markdowntohtml。对于复杂格式的表格,可以先使用Excel编辑好,再通过No-Cruft Excel to HTML Table Converter转换。