Blogging

How to break up long blog post into sections

Adam

17 Jul 2025 • 6 min read

With Ghost CMS, do you have any strategy or method to divide up a very long post into sections or pages. I have once blog post that is almost a 300 minute read. And to get to the bottom of the post you have to keep scrolling for a long time. I'm curious what to content authors do in this situation?

ChatGPT-4o said:
Great question — and wow, 300 minutes is massive (that's about 60,000–75,000 words — longer than most novellas 📚). Ghost CMS wasn't originally designed for ultra-long posts like that, but there are smart strategies you can apply to make it manageable, engaging, and scroll-friendly:

💡 Strategies to Break Up Long Posts in Ghost CMS

Ghost supports custom HTML/Markdown, so you can build an in-page Table of Contents (TOC) using anchor links.

Example:

### Table of Contents - [Intro](#intro)
- [Part 1: Origins](#origins)
- [Part 2: Deep Dive](#deep-dive)
- [Part 3: Conclusion](#conclusion)

## <a id="intro"></a>Intro
...

🔧 Bonus Tools:

Use a TOC generator like https://toc-generator.com/
Ghost + Koenig editor supports HTML cards to insert clean anchor links visually

2. Split into a Series of Linked Posts

Instead of one mega-post, break it into a series (like a multi-part ebook):

Structure:

Post 1: “Title – Part 1: [Intro + Section A]”
Post 2: “Title – Part 2: [Section B + C]”
...
Link them at the top and bottom with Next / Previous links or a series index.

✅ Pros: Easier to load, more shareable, better for SEO
🚫 Cons: Breaks the full continuity unless summarized well

3. Use Expandable Sections (with HTML/JS)

Ghost supports HTML blocks, so you can create collapsible content blocks for each section.

Example (basic HTML):

<details>
<summary>Click to expand: Chapter 1 – The Beginning</summary>
<p>Full content of chapter...</p>
</details>

✅ Pros: Keeps all content on one page, but easier to scan
🚫 Cons: Requires custom styling for a nice UX

4. Create a Dedicated "Reader Mode" Layout (Theme Hack)

If you’re using a custom Ghost theme, you can:

Build a special template for “long-form” posts
Add paginated rendering ({{#foreach}} with custom logic)
Include TOC and breadcrumbs at top/bottom of each page

This is more advanced, but ideal if you're going to host long AI conversations regularly.

5. Embed PDF or External Reader for Superlong Posts

When it gets truly massive (like your 300-minute post), consider:

Exporting as a readable PDF
Embedding that inside the post (<iframe>, Scribd, Google Drive viewer, etc.)

This gives users the option to:

Read online, or
Download and read on a Kindle-style reader

6. Add a “Jump to Bottom” / “Jump to Top” Button

Helpful for users to navigate mega-posts quickly. You can add this via:

<a href="#bottom">Jump to Bottom 🔽</a>

...

<a id="bottom"></a>

Or with JS + CSS floating buttons.

🧠 What Other Content Creators Do

Medium and Substack writers rarely go beyond 3,000 words without breaking into parts
Technical writers (e.g., in Notion, Dev.to) often use collapsible summaries and jump links
Web fiction authors use chapter-based navigation
Scientific blogs break posts into parts with backlinks to a master index

🚀 My Recommended Approach (For You)

Since you're dealing with AI chats and likely using Ghost's Koenig editor:

🔹 Split into a Series + In-Page TOC + Expandable Sections

Use Koenig to break it into chapters
Add anchor links for each section
Optional: collapse some sections with <details> blocks
Add Next/Previous navigation between parts

I can help you generate a code snippet or block template for your long posts if you want a reusable system.

Want me to create an HTML TOC template or collapsible section builder for Ghost now?

You said:

yes

ChatGPT said:

Perfect — here’s a reusable, copy-paste-friendly solution to handle super long Ghost posts using:

✅ Anchor-based Table of Contents (TOC)
✅ Collapsible content blocks
✅ Clean style with no plugins needed

🧩 STEP 1: Add This HTML TOC Template (Top of Your Post)

Paste this at the top using an HTML Card in the Koenig editor:

<h2>📚 Table of Contents</h2>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#part1">Part 1: Origins</a></li>
<li><a href="#part2">Part 2: Deep Dive</a></li>
<li><a href="#part3">Part 3: Insights</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<hr>

🪜 STEP 2: Use These Anchors in Each Section

Paste this HTML card at the beginning of each section:

<h2 id="part1">Part 1: Origins</h2>

Do this for each anchor (like id="intro", id="part2", etc.) to match your TOC links.

📦 STEP 3: Use Collapsible Sections (Optional)

Add a collapsible block for long parts. Insert this in an HTML Card where needed:

<details>
<summary><strong>Click to expand Part 2: Deep Dive 🔍</strong></summary>
<p>
Your long text here... you can paste multiple paragraphs. This works great for dialogue-style AI chats or logs.
</p>
</details>

You can have multiple collapsible blocks per post.

🖼️ BONUS: Sticky Back-to-Top Button (Optional Fancy)

Paste this near the bottom or inside each section:

<p><a href="#top">🔝 Back to Top</a></p>

And at the top of your post:

<a id="top"></a>

🌙 Clean Styling Suggestions (Optional CSS)

Ghost doesn’t let you inject custom styles in each post, but if you control your theme, add this to your CSS:

details summary {
cursor: pointer;
padding: 0.5em;
background-color: #1e1e1e;
color: #eee;
border: 1px solid #444;
border-radius: 5px;
font-size: 1.1em;
}
details[open] summary {
background-color: #292929;
}
details p {
padding: 1em;
background: #121212;
border: 1px solid #333;
border-top: none;
margin-top: -10px;
}

Let me know if you want a Ghost-specific “long read” theme variant or a helper script that automatically creates the TOC based on headers!

You said:

i'd like that. show me

ChatGPT said:

Awesome! Here's a Ghost-friendly auto-generated Table of Contents script that you can paste into your theme or inject site-wide via Code Injection (Ghost Admin → Settings → Code Injection → Site Footer).

This version:

Automatically detects all h2 headers in a post
Builds a clean Table of Contents
Inserts it at the top of the post
Adds smooth scrolling
Works with Koenig editor posts, no plugins needed

Go to Ghost Admin → Settings → Code Injection → Site Footer, then paste:

<script> document.addEventListener("DOMContentLoaded", function () {
const article = document.querySelector(".gh-content");
if (!article) return;

const headers = article.querySelectorAll("h2");
if (headers.length < 2) return; // Don't generate TOC unless multiple sections const tocWrapper = document.createElement("div");
tocWrapper.style.background = "#111";
tocWrapper.style.color = "#eee";
tocWrapper.style.padding = "1em";
tocWrapper.style.border = "1px solid #333";
tocWrapper.style.borderRadius = "10px";
tocWrapper.style.marginBottom = "2em";

const tocTitle = document.createElement("h2");
tocTitle.textContent = "📚 Table of Contents";
tocTitle.style.marginTop = "0";
tocWrapper.appendChild(tocTitle);

const tocList = document.createElement("ul");
tocList.style.listStyle = "none";
tocList.style.padding = "0";

headers.forEach((header, i) => {
// Assign an ID if it doesn't have one if (!header.id) header.id = "section-" + (i + 1);

const li = document.createElement("li");
const a = document.createElement("a");
a.href = "#" + header.id;
a.textContent = header.textContent;
a.style.color = "#9cf";
a.style.textDecoration = "none";
a.style.display = "block";
a.style.padding = "0.2em 0";
a.style.transition = "all 0.2s";
a.onmouseover = () => a.style.color = "#6df";
a.onmouseout = () => a.style.color = "#9cf";
li.appendChild(a);
tocList.appendChild(li);
});

tocWrapper.appendChild(tocList);

// Insert at the top of the post content article.insertBefore(tocWrapper, article.firstChild);

// Optional: Smooth scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
const target = document.querySelector(this.getAttribute("href"));
if (target) {
e.preventDefault();
window.scrollTo({
top: target.offsetTop - 20,
behavior: "smooth"
});
}
});
});
});
</script>

🧪 How It Works

Detects all <h2> tags inside the post body
Assigns IDs like #section-1, #section-2, etc.
Adds a clickable TOC above your post
Includes subtle styling to match a dark theme
Adds smooth scroll behavior to internal links

🧰 Optional Styling (Can go in theme CSS or Header Injection)

<style> /* Optional: highlight anchor targets */ :target {
scroll-margin-top: 70px;
animation: flash-bg 1s ease;
}
@keyframes flash-bg {
0% { background-color: rgba(255,255,100,0.2); }
100% { background-color: transparent; }
}
</style>

✅ Final Result

When a user visits your super-long post, they’ll immediately see a clean TOC, clickable links, and it will scroll smoothly to the selected section.

How to break up long blog post into sections

Adam

💡 Strategies to Break Up Long Posts in Ghost CMS

1. Use Anchor-Based In-Page Navigation (Table of Contents)

Example:

2. Split into a Series of Linked Posts

Structure:

3. Use Expandable Sections (with HTML/JS)

Example (basic HTML):

4. Create a Dedicated "Reader Mode" Layout (Theme Hack)

5. Embed PDF or External Reader for Superlong Posts

6. Add a “Jump to Bottom” / “Jump to Top” Button

🧠 What Other Content Creators Do

🚀 My Recommended Approach (For You)

You said:

ChatGPT said:

🧩 STEP 1: Add This HTML TOC Template (Top of Your Post)

🪜 STEP 2: Use These Anchors in Each Section

📦 STEP 3: Use Collapsible Sections (Optional)

🖼️ BONUS: Sticky Back-to-Top Button (Optional Fancy)

🌙 Clean Styling Suggestions (Optional CSS)

You said:

ChatGPT said:

✅ STEP 1: Inject This Script in the Footer

🧪 How It Works

🧰 Optional Styling (Can go in theme CSS or Header Injection)

✅ Final Result