欢迎使用 Typecho，顺记主题修改

一直想重建自己的Blog网站，很久了。上次建Blog还是在上大学的时候，那会在Blog上刷题写题解，以及分享生活、吐槽，也有些人访问关注。然而某次忘记续费空间，导致资料全被删除，而我自己也没有备份，自那之后就不再写Blog。
一晃十多年，但我发现我还是比较愿意分享尤其是一些技术交流，所以重建blog的想法油然而生。
本文简单记录和分享一下重建过程。

框架选型

既然是重建，自然首先是Blog平台的选型，首先肯定还是自建，因为这样自由，也不会有奇怪的广告和强制登录，用户体验也会很好。那么用哪个框架，原先是WordPress，但WordPress确实比较臃肿，而且不是原生支持markdown，简单攻略之后，Typecho比较合适。
但是默认主题确实比较朴素，显然不适合我。于是就开始找主题，Typecho的主题还是挺多的，而除了好看之外，我还希望能支持代码高亮和Latex公式，这对写技术文章来说很重要。
MDUI2333这个主题，完善程度很高，而且支持代码高亮和Latex公式，我把它作为修改主题时候的参考= =。至于为什么不选择它，主要是个人风格选择上，我还是比较喜欢Vista/Win7的毛玻璃风格，以及菜单栏在上方而不是右侧好点。
又找了一下，就发现了wehaox的Typecho-Butterfly，主题风格很清新，代码高亮也支持，嗯就是它了。

主题修改

既然是自建站，主题修改是自然的，毕竟个性化嘛。

背景色

首当其冲的便是网站的背景渐变，其实不难找（通过Chrome的F12），在custom.css里，有个#web_bg，就是用来定义背景渐变的。于是就果断调整更换了个自己的背景色。

代码高亮与MathJax

wehaox的主题里，其实已经支持了代码高亮，是个黑色Mac窗口的主题，问题倒不是出在这个风格上，而是评论区无法应用代码高亮（也可能是我打开方式有问题）。总之，经过若干尝试，我发现prism.js怕是用不上了。选择Highlight.js，因为它有一个函数叫highlightAll()，我只需要让它在页面最后运行，就可以高亮全部区域，包括评论区。Highlight.js本身没有行号，不过github上有其他它增加行号的js，一并include即可。
于是在主题的footer.php增加以下几行

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/atom-one-light.css'); ?>">
<script type="text/javascript" src="<?php $this->options->themeUrl('js/highlight.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('js/highlightjs-line-numbers.min.js'); ?>"></script>
<script>hljs.highlightAll();</script>
<script>hljs.initLineNumbersOnLoad();</script>

看起来还可以，不过style.css里确实有hightlightjs的一些设置，为了保持风格统一，同步也进行了一些修改。
MathJax的引入比想象中简单的多，直接在主题的header_com.php里增加以下几行

<!-- MathJax -->
<script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/x-mathjax-config">
      MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },
      "HTML-CSS": { availableFonts: ["TeX"] }
      });
</script>

因为公式默认颜色还是黑色，为了增加辨识度，我在style.css里，增加了.MathJax的颜色设定，尤其考虑了下深浅色模式。

深浅色模式代码高亮底色fix

一切看起来很顺利，不过代码高亮底色在深色模式下，文章主体是正常的，评论区还是浅色的底色，这很不友好。
也是经过了一些尝试，最终决定hardcode，在header_com.php里，修改activateDarkMode和activateLightMode，强制设置他们的背景色，就像这样

var x = document.querySelectorAll(".hljs");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.background = "#e5fdfeb3";
}

这回虽然手动点击切换深浅色，没问题了，但是默认是深色背景的时候，似乎没有生效。
考虑到可能是加载不全的时候，这段代码就已经执行了，导致没有能修改对应的背景色，于是又略微丑陋的在footer.php里，增加了onload时候强制运行相应函数。

<script>
function FixThemeDarkMode () {
  const t = saveToLocal.get("theme"),
          a = <?php $this->options->darkModeSelect() ?> === 4,
          o = <?php $this->options->darkModeSelect() ?> === 1,
          c = <?php $this->options->darkModeSelect() ?> === 2,
          n = !a && !o && !c;
        if (void 0 === t) {
          if (o) activateLightMode();
          else if (a) activateDarkMode();
          else if (n) {
            const e = (new Date).getHours();
            <?php darkTimeFunc() ?> ? activateDarkMode() : activateLightMode()
          }
          window.matchMedia("(prefers-color-scheme: dark)").addListener((e => {
            void 0 === saveToLocal.get("theme") && (e.matches ? activateDarkMode() : activateLightMode())
          }))
        } else "light" === t ? activateLightMode() : activateDarkMode();
};
if(window.addEventListener){
  window.addEventListener('load', FixThemeDarkMode)
}else{
  window.attachEvent('onload', FixThemeDarkMode)
}
</script>

这样在加载时候即便短暂切换不上，最终也应用了深浅色。如果有更好做法欢迎评论。毕竟我的前端开发，基本靠试。

其他修改

其他改动相对比较容易和主要是花时间尝试上，比如光标选择，头像特效取消。然后尝试增加一个类型叫做动态，会有一个小标出现在标题，并且跳转链接的名字也不一样。另外就是评论区，为了更清楚展示这是作者的回复，我把作者名字也高亮成红色了。

小结

整体收工后，感觉效果不错，那便发布吧。
期待在这里和大家分享各种Fantastic Work，这也是本站域名，Title之由来。

感谢两位主题作者贡献的代码，我的修改也放到了Github上，大家有需要可以去参考（对齐原作者的开源协议，是Apache 2.0）。

已有 3 条评论

Typecho

2025-04-19 14:53 回复

欢迎加入 Typecho 大家族

eteced 博主

2025-04-19 15:10 回复

这里测试评论区代码和公式

#include <iostream>
int main() {
     std::cout << "Hello World" << std::endl;
     return 0;
}

公式
$x^2 \geq 0$

eteced_test 访客

2025-04-19 16:17 回复
尝试一下未登录评论。增加了hCaptcha防止机器人，想必阁下应该不会介意。
评论区发代码或者公式，和markdown方式一样，就是三个`写代码，美元符号写公式。
```
def main():
    print("This is A test.");
```
公式
$x_1 \neq 0$
OωO