Menu
Article Ghost

Ghost 完美渲染 Mermaid 图表与国内 CDN 加速

Gloary Lei

• 3 min read

Ghost 是一款极简且优雅的博客平台，但对于开发者而言，默认配置往往缺少两个关键能力：原生图表渲染能力以及国内网络环境下的静态资源访问稳定性。

本文将分享我们在实战中总结的两个终极解决方案。

一、 让 Ghost 完美支持 Mermaid 流程图

Ghost 的编辑器默认将 mermaid 代码块视为普通文本。虽然可以通过 Code Injection 引入库，但往往会遇到**“文字截断”、“溢出边框”或“排版错乱”**的问题。

这是因为 Ghost 主题的 CSS（特别是行高和字体设置）经常与 Mermaid 的计算逻辑冲突。

解决方案：强力修正版代码注入

我们需要在引入 Mermaid 的同时，强制关闭 HTML 标签渲染（改用纯 SVG 文本），并重置相关 CSS。

操作步骤：

  1. 进入 Ghost 后台 -> Settings -> Code injection。
  2. 在 Site Footer 中粘贴以下代码：
<!-- 引入 Mermaid 核心库 (使用 unpkg 源，国内访问更稳) -->
<script type="module">
    import mermaid from 'https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({ 
        startOnLoad: false,
        theme: 'base', // 使用基础主题，减少样式干扰
        themeVariables: {
            fontFamily: 'arial, sans-serif',
            fontSize: '16px'
        },
        flowchart: {
            // 【关键设置】关闭 HTML 标签渲染
            // 强制 Mermaid 使用 SVG 绘制文字，彻底解决 Ghost 主题导致的文字被切断问题
            htmlLabels: false, 
            curve: 'basis'
        }
    });

    document.addEventListener('DOMContentLoaded', async () => {
        // 等待页面完全加载，防止布局抖动
        await new Promise(r => setTimeout(r, 500));

        const elements = document.querySelectorAll('.language-mermaid');

        for (const element of elements) {
            const graphDefinition = element.innerText;
            
            // 创建容器
            const newDiv = document.createElement('div');
            newDiv.className = 'mermaid-diagram';
            
            try {
                // 渲染图表
                const { svg } = await mermaid.render('graphDiv' + Date.now(), graphDefinition);
                newDiv.innerHTML = svg;
                // 替换原代码块
                element.parentNode.replaceWith(newDiv);
            } catch (error) {
                console.error('Mermaid 渲染失败:', error);
            }
        }
    });
</script>

<!-- CSS 样式重置 -->
<style>
    /* 防止 SVG 被压缩或变形 */
    .mermaid-diagram svg {
        max-width: 100% !important;
        height: auto !important;
        background-color: white; /* 避免透明背景下的字体干扰 */
        padding: 10px;
        border-radius: 8px;
    }
</style>
备选方案：如果你的图表极其复杂，或者上述脚本依然不满足需求，建议使用 Mermaid Live Editor 生成图片后，通过 /image 插入。

二、 解决 ERR_CONNECTION_TIMED_OUT (国内 CDN 加速)

问题现象

部署在国内服务器的 Ghost，打开文章或后台时，浏览器控制台经常报错：

GET https://cdn.jsdelivr.net/ghost/portal@~2.51/... net::ERR_CONNECTION_TIMED_OUT

这会导致搜索框失效、会员订阅 (Portal) 按钮不显示以及评论区无法加载。原因是 Ghost 默认使用的 jsdelivr 在国内访问极其不稳定。

解决方案：修改配置文件

我们需要将 CDN 源替换为国内访问友好的 unpkg。

1. 修改配置文件
SSH 登录服务器，找到 Ghost 配置文件（通常是 /var/www/ghost/config.production.json），在 JSON 对象中添加或修改以下三项：

{
  "url": "https://your-blog.com",
  "server": { ... },
  
  // --- 添加以下配置 ---
  "portal": {
    "url": "https://unpkg.com/@tryghost/portal@~2.51/umd/portal.min.js"
  },
  "sodoSearch": {
    "url": "https://unpkg.com/@tryghost/sodo-search@~1.8/umd/sodo-search.min.js"
  },
  "comments": {
    "url": "https://unpkg.com/@tryghost/comments-ui@~1.2/umd/comments-ui.min.js"
  },
  // ------------------
  
  "database": { ... }
}

2. 重启服务
保存文件后，重启 Ghost 使配置生效：

ghost restart

总结

通过以上两步调整，你的 Ghost 博客不仅能原生支持技术流程图，还能在国内网络环境下拥有秒开的加载速度。

Share