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"
投币支持一下吧