本文部分链接或许已经失效；作为补充，请参见 [https://github.com/hifocus/twenty-twenty-style](https://github.com/hifocus/twenty-twenty-style 的内容。

今天换了新主题！之前的 Ultra 主题毕竟是歪果仁写的，完全没有为中文博客优化，而且很多地方也不够完善（其实什么主题都有不够完善的地方的）。因为前两天看见 WordPress 官方出的年度主题二〇二〇（Twenty Twenty）还挺好看的，就打算换上。

今天花了点时间把二〇二〇改好了，这边把改动了的 style.css 和其他加的一些东西放上来（咕咕咕了好久）。子主题是什么不存在的 style.css 看这里：https://huangxin.dev/wp-content/themes/twentytwenty/style.css 如果你也想拥有本站同样的界面，把上面的 style.css 打开，然后全选复制，进入主题编辑器 - style.css 然后替换掉；接下来进入 classes\class-twentytwenty-non-latin-languages.php，删掉 33 至 95 行。但是这不是全部，请看下面。

样式的改动非常粗暴，主要有以下变化：

把各种超大的字体改成差不多合适的大小（也照顾了移动端）
桌面端文章显示区域改成更宽，从 58rem 到 78rem
由于上面那么窄的显示区域实际上是为 WordPress 的文章块编辑器设计的，换言之我这样改动就没办法用块编辑器里的各种特效了；然而我用 markdown 写博文。
改了所有的 font-family，去除了这个主题引入（还是从本地引入的）Inner 字体系列，全部改 Spectre.css 默认的中文简体 font-family；但是优先了思源宋体的权重（稍后需要从 Google Fonts 引入）。代码 monospace 也改了，现在会 fallback 更多的字体。

首页摘要居中

let homepages = [ '/', 'index.html', 'index.htm', 'index.php'];

if (homepages.indexOf(window.location.pathname) == "0") {
let all = document.getElementsByClassName('entry-content');
for (var i = 0; i < all.length; i++) {
all[i].style['text-align'] = 'center';
} }

感谢 @haozi。首先定义 homepages 为数个常见首页写法，然后看 homepages 是否为 window.location.pathname 的第一个，如果是，遍历所有 entry-content 的类名，加上 text-align: center 属性。

其他的改动

在主题的 header.php，你需要从 Google Fonts 引用思源宋体：

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" rel="stylesheet">

放心，Google Fonts 在国内的可访问性非常可以，并且因为加了 display: swap 属性，网页上的字体会首先以本机字体显示，等字体加载完成以后才会替换掉原来的字体。所以不会对速度有任何影响。

在主题的 footer.php，你需要引用 instant.page 库。

<script src="https://cdn.jsdelivr.net/npm/instant.page@3/instantpage.min.js" type="module" defer></script>

instant.page 有利于访客快速加载下一次点击；原理是鼠标移动到超链接上时就直接开始加载，然后点击后再替换页面。

本站会加载 Google Adsense 广告；考虑到用户体验，和相比于桌面端移动端屏蔽广告的困难度，移动端访问本站不会加载 Adsense。通过以下代码实现：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    console.log('is mobile, ads will not load')
    }
else {
    var script = document.createElement('script');
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    document.write(script.outerHTML);   
    }

首页摘要居中

其他的改动

移动端不加载 Google Adsense