如何在 Ghost 博客中添加类似 Word 的左侧固定目录（纯干货）
当我们在 Ghost 博客中撰写长文时，一个类似 Word 导航窗格的目录能极大提升读者的阅读体验。本文将分享如何通过 Code Injection（代码注入） 快速实现一个完全静止、不随点击乱跳、长标题自动换行的优雅左侧悬浮目录。
实现效果
- 完全固定： 目录稳居文章左侧，只有正文跟随鼠标滚动。
- 绝对静止： 修复了常见插件点击目录项时，目录自身会产生二次跳动的痛点。
- 清晰完整： 长标题自动换行显示，绝不裁剪文字。
- 移动端友好： 在手机或平板等小屏幕上自动隐藏，防止遮挡正文。
部署步骤
无需修改任何主题源文件，只需登录 Ghost 后台，进入 Settings -> Code Injection（代码注入），将以下两段代码全选覆盖粘贴即可。
1. 注入到 【Site Header】
在 Site Header 框中复制并完全粘贴以下代码（包含 Tocbot 官方样式与自定义微调 CSS）：
HTML
<!-- 1. 引入 Tocbot 的基础样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css">
<!-- 2. 微调 CSS：保留流畅，修复跳动，文字全显 -->
<style>
/* 核心布局，确保定位准确 */
.gh-canvas, .article-canvas, .gh-content {
position: relative;
}
/* 左侧目录悬浮窗格 */
.custom-toc {
position: fixed;
top: 100px; /* 距离屏幕顶部的高度 */
left: 40px; /* 距离浏览器左侧的距离 */
width: 260px; /* 目录宽度 */
max-height: 85vh; /* 最大高度为屏幕的 85%，防止溢出 */
/* 核心控制：禁止整个目录区在点击时产生的内部跳动 */
overflow-y: hidden;
z-index: 10;
font-size: 1.4rem;
padding: 10px;
}
/* 在手机/平板上隐藏目录，防止遮挡正文 */
@media (max-width: 1200px) {
.custom-toc {
display: none;
}
}
/* 基础列表样式清理 */
.toc-list {
list-style: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
/* 子标题（H3）缩进 */
.toc-list .toc-list {
padding-left: 15px !important;
}
/* 标题文字完全显示 */
.toc-link {
display: block;
padding: 6px 0;
color: #555 !important;
text-decoration: none !important;
transition: color 0.2s ease;
/* 允许长标题正常换行显示，决不裁剪 */
white-space: normal !important;
word-wrap: break-word;
}
/* 鼠标悬停效果 */
.toc-link:hover {
color: #111 !important;
}
/* 当前阅读位置的高亮样式 */
.is-active-link {
font-weight: 600 !important;
color: #FF1A75 !important; /* 激活时的高亮颜色 */
}
</style>
2. 注入到 【Site Footer】
在 Site Footer 框中复制并完全粘贴以下代码（引入 JS 脚本并进行核心参数配置）：
HTML
<!-- 1. 引入 Tocbot 脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<!-- 2. 初始化脚本：禁用目录内部滚动，彻底解决跳动 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// 动态在页面中创建目录容器
const tocContainer = document.createElement('aside');
tocContainer.className = 'custom-toc js-toc';
// 自动兼容多个常用 Ghost 主题的正文 class 容器
const contentArea = document.querySelector('.gh-content') || document.querySelector('.article-body') || document.querySelector('.post-content');
if (contentArea) {
// 将目录动态挂载到页面中
contentArea.appendChild(tocContainer);
// 初始化 Tocbot 插件
tocbot.init({
tocSelector: '.js-toc',
contentSelector: '.gh-content, .article-body, .post-content',
headingSelector: 'h2, h3', /* 默认抓取二级和三级标题 */
hasInnerContainers: true,
scrollSmooth: true, /* 点击跳转时保持平滑滚动 */
headingsOffset: 100, /* 跳转后的顶部留白距离 */
/* 【核心调优】设置为 false，Tocbot 将不再尝试同步滚动目录区域，
配合 CSS 彻底解决了点击目录时、目录栏本身乱跳的体验问题。 */
disableTocScrollSync: true
});
}
});
</script>
避坑提示与个性化微调
- 重叠问题： 如果你的 Ghost 主题正文比较宽，导致左侧目录与正文文字重叠，可以尝试修改
Site Header中的left: 40px;（往左调小或往右调大），或者将width: 260px;调小。 - 高亮颜色： 如果你想换掉那个粉红色的高亮，可以直接在样式中搜索
.is-active-link，把color: #FF1A75;改成符合你网站主色调的十六进制颜色（例如蓝色#2196F3）。
