这几天把博客的 Argon 主题做了一轮集中维护：方向不是“换一个新主题”，而是在保留 WordPress 和 Argon 功能体系的前提下，把它往更适合技术笔记、AI 实验记录和工业软件工程内容的方向收敛。
核心目标有三个：第一，视觉上从偏文艺的暗色个人博客，调整成更克制的深蓝黑技术博客；第二，代码阅读体验要更稳定，尤其是字体、语法高亮、复制和全屏；第三，所有改动都要可回滚、可验证，避免在生产站上做不可控的大改。
为什么还继续改 Argon
Argon 不是一个很“干净”的静态博客主题。它包含 PJAX、代码高亮、行号、复制、全屏、评论、点赞、暗色模式、目录、侧栏组件和大量前端脚本。缺点是页面源码和资源加载会比较复杂；优点是功能完整，适合继续维护。
所以这次的策略不是重写主题，而是做一层明确的维护性改造：小步修改、每次验证、Git 提交、必要时可以直接 revert。
这轮主要改了什么
- 首页和归档页视觉重构：收敛卡片圆角，降低背景噪音，统一深蓝黑和 cyan 蓝的视觉系统。
- 导航波浪线修正：保留正常 hover/current 效果，但修掉文章页“专题”父级导航误激活的问题。
- 字体加载优化：继续使用站点自定义的 13.woff2，但增加 subset 字体预加载，避免首屏等字体太久。
- 代码块体验整理：保留折行、复制、全屏三个真正常用的按钮，去掉容易错位的行号相关 UI。
- 代码字体和颜色：参考烧饼博客的 Berkeley Mono 字体栈和 Gruvbox 风格语法颜色，但不照搬它的代码块容器背景。
- Bash 代码高亮补丁：修复简单 shell 命令块看起来没有高亮的问题，例如
sudo apt update。 - 文章底部清理：隐藏多余作者卡片、头像和邮箱区域，保留更清晰的版权信息。
- 点赞 nonce 修复：修掉安全加固后点赞接口缺少参数的问题。
视觉方向：AI / 工业技术博客
我希望这个博客更像一个工程师的技术档案，而不是泛泛的暗黑主题。最终选择的是深空黑灰背景、低透明度网格、AI cyan 蓝作为主强调色，辅以少量工业橙。卡片圆角收敛到 16px 左右，边框用冷色低透明度线条，减少之前黄、绿、蓝紫混用带来的噪音。
:root {
--mrcxy-accent: #38bdf8;
--mrcxy-card-radius: 16px;
--mrcxy-card-border: rgba(148, 163, 184, .18);
}
body.home .post,
body.archive .post,
body.search .post {
border: 1px solid var(--mrcxy-card-border);
border-radius: var(--mrcxy-card-radius);
background: linear-gradient(145deg, rgba(15, 23, 42, .88), rgba(8, 12, 16, .96));
box-shadow: 0 16px 48px rgba(2, 8, 23, .28);
}这类 CSS 不是为了炫技，而是为了让阅读重心回到标题、摘要和代码本身。技术博客的 UI 不应该抢内容的注意力。
代码块：只复制“字体和高亮”，不复制整个容器
这次有一个很明确的边界：参考烧饼博客的代码字体和语法颜色，但不照搬它的代码块背景、边框、圆角和阴影。因为两个站点的整体视觉系统不同，完整复制容器会破坏本站已有的深蓝黑风格。
:root {
--mrcxy-code-font: "Berkeley Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
code[hljs-codeblock-inner],
pre.hljs-codeblock code,
.post-content pre code {
font-family: var(--mrcxy-code-font) !important;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag { color: #fb4934 !important; }
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-addition,
.hljs-variable { color: #b8bb26 !important; }
.hljs-number,
.hljs-regexp,
.hljs-built_in,
.hljs-attr { color: #d3869b !important; }
.hljs-comment,
.hljs-quote,
.hljs-meta { color: #928374 !important; }
.hljs-function,
.hljs-name,
.hljs-class { color: #fabd2f !important; }这样做的好处是，代码本身获得了更好的识别度，同时保留了本站原来的代码卡片层级。后续如果要继续调整，也只需要维护 token 颜色和字体栈，不会牵连整个代码块布局。
为什么 Bash 命令看起来“没有高亮”
像下面这种代码块，在很多 highlight.js 主题里本来就很容易看起来像纯文本：
sudo apt update
sudo apt upgrade -y
sudo reboot原因是它没有字符串、函数、注释这类容易被识别的 token。highlight.js 可能已经执行了，但输出里没有足够的 span.hljs-*，视觉上就像没有高亮。
我的处理方式是在 highlight.js 执行之后、生成行号之前，加一个很窄的 Bash 增强函数，只处理 language-bash 和 language-shell，给常见命令、参数和变量补上已有的 hljs class。
function mrcxyEnhanceBashHighlight(block){
if (!block || !block.className || !/language-(bash|shell)|bbashb|bshellb/.test(block.className)){
return;
}
if ($(block).find("span[class^=hljs-], span[class*=" hljs-"]").length > 0){
return;
}
let html = $(block).html();
const commandRe = /(^|[n;&|]s*)(sudo|apt|apt-get|reboot|lspci|egrep|grep|uname|pciutils|nvidia-smi)(?=s|$)/g;
const optionRe = /(s)(-{1,2}[A-Za-z0-9][A-Za-z0-9-]*)(?=s|$)/g;
const variableRe = /($([^)]+)|$[A-Za-z_][A-Za-z0-9_]*)/g;
html = html
.replace(commandRe, "$1<span class="hljs-built_in">$2</span>")
.replace(optionRe, "$1<span class="hljs-attr">$2</span>")
.replace(variableRe, "<span class="hljs-variable">$1</span>");
$(block).html(html);
}这个补丁的重点是“窄”：它不是重新写一个语法高亮器，只是修正常见 shell snippet 的观感。
字体：保留 13.woff2，但让首屏更快
字体这块走过一次弯路：直接退回系统字体虽然快，但会丢掉站点原来的气质。最后的方案是继续使用 13.woff2，同时生成一个较小的 13-subset.woff2 作为首屏优先字体，全量字体作为兜底。
<link rel="preload"
href="/wp-content/themes/argon/fonts/13-subset.woff2"
as="font"
type="font/woff2"
crossorigin
fetchpriority="high">
<style id="mrcxy-13-font-face">
@font-face {
font-family: "btfFontSubset";
src: url("/wp-content/themes/argon/fonts/13-subset.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "btfFont";
src: url("https://static.mrcxy.com/wp-content/themes/argon/fonts/13.woff2") format("woff2");
font-display: swap;
}
</style>这样首屏可以更快进入可读状态，完整字体也仍然保留。对中文博客来说，字体体验和加载速度之间需要折中，而不是简单地“全量自定义字体”或“全部系统字体”。
一些实际踩坑
- Argon 的功能很多：不要只看 CSS，PJAX、脚本缓存、行号插件都会影响最终效果。
- 代码块行号和字体容易打架：换等宽字体后，行号和代码行可能出现视觉偏移。最后选择隐藏行号，保留复制和全屏。
- 缓存会误导判断：改 JS 后必须确认前台加载的是带新版本号的脚本，否则浏览器可能还在用旧文件。
- 不要大范围重写 style.css：旧主题文件可能有混合换行，普通文本写入容易制造几千行无意义 diff。
- WordPress 不会像静态站那么干净：REST、emoji、oEmbed、插件脚本、主题脚本都会出现在页面里，优化要分阶段做。
后续更新记录
后续如果继续调整主题，我会把重要变更补到这里，而不是每次都单独写一篇。
- 2026-07-17：整理首页/归档视觉、字体加载、代码块字体与语法高亮、外链波浪线、文章底部信息、Bash 高亮补丁。
- 2026-07-17：关闭
WP User Profile Avatar插件自动追加的文章作者卡片，只保留主题自己的版权声明和原文链接。
总结
这轮改造的重点不是“把博客做得更花”，而是让它更像一个长期维护的工程笔记系统：视觉克制、代码好读、问题可复现、改动可回滚。对一个技术博客来说，这比换一个更酷的新主题更重要。