Ghost 1.x环境中加载prism.js失败问题求助

针对你遇到的情况——已经搞定模板布局但Prism.js始终无法正常加载，结合你的文件结构（default.hbs、partials/loaders/load-prism.js，Prism文件存放在assets目录），我整理了几个关键排查点和解决方案：

1. 确认Prism文件的引用路径是否正确 #

Ghost的模板系统有特定的资源引用规则，不能直接用相对路径调用assets目录下的文件，必须使用内置的{{asset}}助手来生成正确的资源URL。

打开partials/loaders/load-prism.js，确保你的引用代码是这样的：

<!-- 加载Prism.css -->
<link rel="stylesheet" href="{{asset "prism.css"}}">

<!-- 加载Prism.js -->
<script src="{{asset "prism.js"}}"></script>

如果直接写src="assets/prism.js"，Ghost的路由机制会导致资源找不到，出现404错误，这是最常见的问题。

2. 检查load-prism partial的引入位置 #

你需要在default.hbs的合适位置引入这个partial，推荐放在</body>标签前，这样能确保DOM完全加载后再加载Prism.js，避免因DOM未就绪导致的高亮失效。

在default.hbs中添加引用：

<!-- 页面内容 -->

{{> loaders/load-prism}}
</body>
</html>

注意partial的引用路径是loaders/load-prism（因为它在partials/loaders/目录下），不要写错路径。

3. 确保Prism完成初始化 #

仅仅加载Prism的JS和CSS文件还不够，需要主动触发高亮方法。在load-prism.js的末尾添加初始化代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 高亮所有代码块
  Prism.highlightAll();
});
</script>

如果你的文章中有动态加载的代码块（比如异步加载内容），还可以调用Prism.highlightAllUnder(document.body)来重新高亮。

4. 排查浏览器控制台的报错信息 #

打开浏览器的开发者工具（F12），切换到Console标签，看看有没有以下类型的错误：

• 404错误：说明Prism文件的路径还是错了，回到第一步重新检查{{asset}}的使用
• Prism is not defined：说明Prism.js还没加载完成就执行了初始化代码，调整partial的引入位置到页面底部
• 其他语法错误：检查你自己添加的初始化代码有没有拼写错误

5. 清理Ghost缓存或重启服务 #

Ghost会缓存静态资源和模板文件，有时候修改后不会立即生效。你可以：

• 重启Ghost服务（命令行执行ghost restart）
• 在资源URL后添加版本号参数，比如{{asset "prism.js?v=1.0.1"}}，强制浏览器刷新缓存

按照以上步骤排查，应该就能解决Prism.js加载失败的问题了。

内容的提问来源于stack exchange，提问作者DenCowboy