前两天在上网的时候，无意中发现了BlogsClub网站，考虑到之前我自己的blog完全无人问津，一点写作的动力都没有。想着加入一下大集体，看看能不能来点正反馈，促使我自己持续的更新（没错，水这篇文章也是这个目的）。不过看着自己原来的小破站，感觉原始的butterfly显示效果不是自己理想的状态，结合现在AI能力这么强，索性让AI辅助我重新美化下自己的小破站。（我就是懒得看技术文档ㄟ( ▔, ▔ )ㄏ）

第一步，就是把我blog地址及Butterfly技术文档地址丢给我的Hermes Agent，然后就只要提问让它修改就行了。由于我不放心自己的主服务器被Hermes玩坏了，所以都靠人工古法ctrl+C+V进行美化。

背景

首先我先需要先调整下原网站的背景颜色，纯白的底显得过于无趣，而且有点刺眼，所以改为我个人更喜欢的米黄色。这样阅读时我是觉得更加舒服。(主题的配置文件中)

1
2
3
theme_color:
  enable: true
  main: "#ece5d5"

字体

底色改好后，又觉得字体效果不是很有个性，而且整体字体偏小，自己阅读不是很喜欢。正巧，在刷其他人博客网站的时候，发现了阿里妈妈方圆体这种字体。一番操作下来，发现网站无法正确显示woff2格式的方圆体，非常奇怪，因为后续把代码的字体也改成了woff2格式的MapleMono，那个字体没任何异常。我推测可能跟可变字体有关系吧。所以最后让AI帮我转换成了TrueType的静态字体了。

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
  font-family: "Alimama FangYuan Ti";
  src: url("/fonts/AlimamaFangYuanTi.ttf") format("truetype");
  font-display: swap;
}
/* 从本站服务器加载 Maple Mono NF CN */
@font-face {
  font-family: "Maple Mono NF CN Web";
  src: url("/fonts/MapleMono-Regular.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

细节

其实一个博客网站，我觉得最重要的就是背景和字体了。这个关乎在整个阅读文章时的体验，而这两个改完后，其余剩下的排版，我反而觉得没那么重要了。简单罗列下我还调整的内容吧。

  • 底栏的背景颜色：在_config.yml中调整了main为米黄色的主题色后，原本底栏的文字因为是白色就很难识别了。于是改成深色背景，这样和主题做个切割，也更有辨识度。

  • 代码块的配色：我个人VSCode里最爱用的就是Monokai Pro配色了，于是直接让codex读取下配色方案，方便我用在博客系统上，效果还是不错的。这个配色方案，我贴在下面，可以自取

    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
    /* Monokai Pro 代码块 */
    #article-container figure.highlight,
    #article-container figure.highlight table,
    #article-container pre,
    #article-container pre code {
      background: #2d2a2e !important;
      color: #fcfcfa;
    }

    /* 行号栏 */
    #article-container figure.highlight .gutter {
      background: #221f22 !important;
    }

    #article-container figure.highlight .gutter pre {
      color: #727072 !important;
    }

    /* 注释 */
    #article-container figure.highlight .comment,
    #article-container figure.highlight .quote {
      color: #727072 !important;
      font-style: italic;
    }

    /* 关键字、标签、删除项 */
    #article-container figure.highlight .keyword,
    #article-container figure.highlight .selector-tag,
    #article-container figure.highlight .meta,
    #article-container figure.highlight .deletion {
      color: #ff6188 !important;
    }

    /* 字符串、属性值 */
    #article-container figure.highlight .string,
    #article-container figure.highlight .regexp,
    #article-container figure.highlight .attribute,
    #article-container figure.highlight .template-variable {
      color: #ffd866 !important;
    }

    /* 函数、类 */
    #article-container figure.highlight .title,
    #article-container figure.highlight .function,
    #article-container figure.highlight .class {
      color: #a9dc76 !important;
    }

    /* 数字、布尔值、常量 */
    #article-container figure.highlight .number,
    #article-container figure.highlight .literal,
    #article-container figure.highlight .built_in,
    #article-container figure.highlight .symbol {
      color: #ab9df2 !important;
    }

    /* 变量、参数、链接 */
    #article-container figure.highlight .variable,
    #article-container figure.highlight .params,
    #article-container figure.highlight .link {
      color: #78dce8 !important;
    }

    /* 标点与普通文本 */
    #article-container figure.highlight .punctuation {
      color: #c1c0c0 !important;
    }

  • 时间线：又是一个由于主题色改为米黄色导致的颜色对比度太低导致看不到时间线了。于是改成一个浅灰色，增加颜色对比度。

总结

以上就是我通过AI的辅助，美化我现在的博客过程了。最后我再放一个非常实用的颜色对比度网站，忘了之前在哪看到收藏的了，用来确认配色方案与可读性非常不错。

WebAIM: Contrast Checker