AI摘要
Typecho Handsome v10.1.0主题代码高亮与统计图失效,因CDN地址失效。修复方法是修改CDN.php,更新highlight和echart字段至正确的jsDelivr路径。
问题现象
博客文章中的代码块没有任何高亮效果,所有代码都以纯文本显示。
排查过程
1. 确认高亮方案
Handsome 主题使用的是 highlight.js 动态加载方案:
- 在
libs/CDN.php中定义了 8 个 CDN 源(BOOT / BAIDU / SINA / QINIU / JSDELIVR / CAT / BY / LOCAL) - 通过
component/header.php输出到前端LocalConst.HIGHLIGHT_CDN assets/js/core.min.js中的handsome_content.highlight()方法负责动态加载 JS 和 CSS
加载逻辑如下(core.min.js):
// 加载 CSS
handsome_util.addStyle(HIGHLIGHT_CDN + "/styles/" + styleName + ".css", ...)
// 加载 JS
handsome_util.addScript(HIGHLIGHT_CDN + "/highlight.min.js", ..., function() {
// 高亮代码块
hljs.highlightBlock(element)
})2. 发现 CDN 地址已失效
检查页面实际加载情况,CDN 地址返回 404:
https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/10.7.3/highlight.min.js路径中的 expire-1-M 表明这是字节跳动的临时过期 CDN 节点,现已失效。
3. 翻车经历:npm 路径不能直接用
最初尝试使用 jsDelivr npm 源:
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.3/lib/highlight.min.js"></script>但 lib/ 目录下的是 CommonJS 模块(含 require() 调用),不能在浏览器中直接运行。这是 Node.js 环境用的包,不是浏览器构建版。
修复方案
正确的 CDN 地址
highlight.js 的官方浏览器构建版发布在独立的 cdn-release 仓库,jsDelivr 地址格式为:
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@版本号/build当前主题用的是 v10.7.3,所以基础路径为:
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build代码拼接后得到完整的可访问文件:
| 文件 | 完整 URL |
|---|---|
| JS | .../build/highlight.min.js ✅ |
| CSS dracula 主题 | .../build/styles/dracula.min.css ✅ |
| CSS github 主题 | .../build/styles/github.min.css ✅ |
修改文件
只改一个文件:usr/themes/handsome/libs/CDN.php
找到 全部 8 个 CDN 配置中的 "highlight" 字段,将值替换为:
"highlight": "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build"顶部统计图修复
也同样是相同问题
usr/themes/handsome/libs/CDN.php找到 全部 8 个 CDN 配置中的 "echart" 字段,将值替换为:
"echart": "https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist"
