This section is dedicated to helping you familiarise yourself with core Chapter theme concepts. We'll get out the Ghost native ones out of the way first and then dive deeper into Chapter's custom ones.

Ghost Concepts

Tags

Chapter Theme relies on internal tags for most of it's functionality. Internal tags in Ghost are any tags starting with # in their name, i.e. #name-chapter-introduction. These tags aren't visible to readers and you can read more about them in the Ghost Manual.

Chapter introduces three new tag types:

• Chapter Name tags: #chapter-name-X...X - has to be 2nd (after primary tag) in the post. This is the tag used to "string together" the chapter items.
• Chapter Order tags: #chapter-order-XXXX - has to be 3rd (after chapter name tag) in the post. This is the tag used to define the order in which the chapters should appear
• Chapter Helper tags, i.e. #chapter-outline-show - they can be placed anywhere in the post and control the appearance of the outline, overriding the global setting. They also apply to pages, allowing you to add outlines to your Ghost Pages.

Templates

Chapter uses Ghost Templates functionality to introduce two new Post Templates:

• Overview
• Item

It's up to you how you want to style and utilise your Overview, Section and Item posts, but this guide and my general recommendation is to use Overview Template for the Overview Post, and Item Template for everything else.

Below you can find the examples of both Overview and Item templates at work: Chapter Overview and then a Chapter Item.

Chapter Concepts

In addition to Ghost's concepts, this theme adds a few more of it's own, let's dig into them a bit deeper here.

Chapter

This is the defining feature of this theme - ability to string together various pieces of content within one "theme" as chapters of one story, regardless of the date of posting, authors or public tags used.

In order to configure a Chapter with structure exactly similar to this Introduction series one would need to create following posts:

What is Chapter? An introduction series | tags: #chapter-order-0000
├── Configuring Chapter | tags: #chapter-order-0100
├── Chapter Fetures | tags: #chapter-order-0200
│   ├── Index page | tags: #chapter-order-0201
│   ├── Post Outline | tags: #chapter-order-0202
│   ├── Editor Snippets | tags: #chapter-order-0203
│   └── Other Features | tags: #chapter-order-0204
├── Customisation Options | tags: #chapter-order-0300
└── Notes | tags: #chapter-order-0400
    ├── Installation & Limitations | tags: #chapter-order-0401
    ├── Resonsive Design | tags: #chapter-order-0402
    └── My wishlist to Ghost | tags: #chapter-order-0403

Overview

Overview is a unique Chapter item. Any Chapter Post with the internal tag #chapter-order-0000 is considered an Overview post, regardless of the Template used.

It's always styled differently in the Chapter Nav Sidebar and it's generally expected that you'll be using it to set scene to the series content you're going to post.

Section

Sections are special Chapter Items that always have 00 as their last 2 digits in the order tag, i.e. #chapter-order-0100. These are expected to be used as mini-summaries for the Chapter, sort of like Acts or Sections.

Item

Finally, items are any Chapter posts that have their order tag set to things that don't end with 00 and aren't 0000, i.e. #chapter-order-0106 or #chapter-order-2439.

Design Considerations

Whenever creating a new Chapter, there are a few things to consider. I would point you towards two here.

Consider spacing out your order tags

Instead of ordering your Chapter items 0101, 0102, 0103 you might want to consider naming them 0101, 0106, 1011 and so on.

Spacing out them in that manner would allow you to easily insert new Chapter items between existing ones later on without reassigning multiple tags.

Using one post in multiple chapters

Whilst theoretically possible, it's not advised to try and work around the current theme settings by adding more internal tags.

The code of the theme looks for the Chapter Name tag in a specific place and it'd be too cumbersome to add multi-Chapter support, due to Ghost severe limitations of their Helpers.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

Chapter theme brings about a set of special features which are aimed at bringing everything together nicely and form a compelling UX.

Index Page

The Index Page can be customised in a variety of ways. It has the following main segments:

• Featured last page
• Sidebar with:
  • Blog details
  • Subscription CTA
  • Featured Posts
  • Tags
  • Recommended Blogs
• More Issues with all latest posts with pagination, all of which can be customised to either show or hide the Feature image

Navigate to the Index Page details to learn more.

Post Outline

Outline provides an intuitive way to navigate long-form content that is interactive, responsive and collapsible, easing the navigation across lengthy or complex pages.

You can read more about Post Outline here.

Editor Snippets

Whilst Ghost's Editor is rather powerful, to my linking it's missing a few important blocks that would really make it shine.

The ability to easily insert HTML, however, means that it's rather easy to add that functionality. This theme comes with a two-column layout and a rich toggle, which combined make it much easier to write involved and compact content.

Navigate over to Editor Snippets page to find out more.

Other Features

Other Quality of Life features include:

• Setting "Previous & Next" navigation contextually to previous and next Chapter Items, instead of the default {{prev}} and {{next}} provided by Ghost
• Ability to copy from code blocks in one click
• Post preview showing number of comments

Get full details on the Other Features you can use.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

Chapters Theme introduces a number of customisation options, as well as exposes the ones from the Dawn theme that it is based off of.

Navigation Layout

The Navigation Layout is controlled via Settings -> Design -> Site wide, the Navigation layout setting.

It has three options:

• Logo on the left
• Logo in the middle
• Stacked

Play around and see which one you like most and which works best for your content and branding!

Dark Mode

The theme further supports the Dark Mode (Inverted colours mode), controlled via Settings -> Design -> Site wide, the Color scheme setting.

It has three options:

• Auto, which uses CSS to determine which theme the user's device is requesting (usually default device-wide setting)
• Light
• Dark

This setting also includes an ability to provide an alternative logo for dark mode:

Attribution

Lastly, it's possible to easily toggle whether Chapter's and Ghost's attribution appears in the bottom-right. I know that I'd turn it off for my site and wanted to make it easily accessible via Settings -> Design -> Site wide, the. Show attribution setting.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

There is a number of notes & limitations for this theme that I'm covering in this Chapter, most importantly:

• Installation & Limitations - Disabling Show portal button is highly recommended. Wide and Full Editor Blocks are rendered no differently to the rest of the content when a Chapter Templates are used, making their width equal
• Responsiveness - a few notes on how Chapter is expected to respond to device and viewport size changes and if what you're observing is by design
• My wishlist to Ghost - a few thoughts on what Ghost could add to make future development of themes like this possible, and maybe integrate some of what's here already into the Ghost itself

This could have been a singular post, but I'll break it up for ease of referencing and to bolster the sidebar to show you how it would look like once filled out.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

This post will be a collection of all Chapter Updates as well as Update Notes.

The Index Page can be customised in a variety of ways. It has the following main segments:

• Featured last page
• Sidebar with:
  • Blog details
  • Subscription CTA
  • Featured Posts
  • Tags
  • Recommended Blogs
• More Issues with all latest posts with pagination, all of which can be customised to either show or hide the Feature image

TODO: IMAGE

There are features allowing you to customise the behaviour:

• Toggling the post preview between "Full" and "Compact", which shows and hides the feature images, if one is present, respectively
• Controlling whether a the last post is featured in a special section
• Switching the "About" section content from site icon to main author icon and back
• Controlling the text of the Call To Action above the Subscription box

Index Page Features

Full and Compact Post Previews

Navigate to Settings -> Design -> Homepage and locate the Preview layout setting.

This setting allows you to toggle between fully-featured post previews with image previews and compact previews featuring only text, see the Full and Compact.

Showcasing a post

Navigate to Settings -> Design -> Homepage and locate the Showcase post and Hode showcase duplicate settings.

This setting allows you to toggle between showcasing the latest post, the latest featured post or no post at all:

Importantly, a subsetting called Hide showcase duplicate helps you prevent a nasty scenario, whereby if you select to Showcase Latest Featured post it's likely that the post itself has not been the latest, which would mean that it'll appear on the page twice.

This setting only has any effect if the Featured showcase option is selected, and here's how it could look without it:

Controlling the CTA text in the Subscription box

Navigate to Settings -> Design -> Homepage and locate the Signup CTA text setting.

Switching the "about" section from site icon to main author

Navigate to Settings -> Design -> Homepage and locate the Show main author on homepage setting.

This setting will replace the site icon, which might be perceived as less personal, with the first author's, presumably the site owner's, profile image.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

The Outline section is controlled via Settings -> Design -> Post , the Show post outline setting.

By default, this only applies to Post entity, not Page. Disabling this setting will disable it in every post.

Furthermore, the outline toggle, found in the bottom of the page, remembers the setting the user has selected and will appear expanded or collapsed based on it's last state, even if you reload the page or navigate to a different page that has an Outline enabled.

However, you can use a special helper tag #chapter-outline-show to both:

• Display the Outline in Pages
• Display the Outline in Posts, even if the global Show post outline setting is disabled

Generally, the Outline has all the features of tocbot as found in it's documentation:

• Automatic navigation to the selected heading
• Automatic collapse/expand based on the current headings in focus
• Ability to ignore certain headings (i.e. ones inside toggles) by adding js-toc-ignore CSS class to the heading element

By default the outline is expanded up to the 3rd layer and captures tags h1, h2, h3, h4, h5 and h6.

You can modify this behaviour in default.hbs file down at the very bottom:

    ...
    
    <script src='{{asset "built/main.min.js"}}'></script>
    
    {{! Initialize Tocbot after you load the script }}
    <script>
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.ch-outline',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.gh-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3, h4, h5, h6',
            // Ensure correct positioning
            hasInnerContainers: true,
            // Non-collapsed levels of headings:
            collapseDepth: 3,
        });
    </script>
    
    {{ghost_foot}}

  </body>
</html>

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

This theme also has a set of pre-defined CSS classes which, if used with the <HTML> Ghost Editor Element, can turn into functional blocks. These include:

Open Me!

And a code block!

💡

And a callout

Live example

This is how the Ghost Page looks for the first segment of the page you've just read:

The content of the HTML blocks is not visible unless it's expanded, which benefits readability.

In order to easily add snippets to your page you can use the /sn command in the Editor:

Two-column layout

The two-column layout consists of three snippets:

• Opening snippet ch-layout-2col--start
• Breaker snippet (between the content of two columns) ch-layout-Ncol--break
• Closing snippet ch-layout-Ncol--end

Naming of the snippets is up to you, but my thinking is that between column layouts, which I can then create more of, the only difference will be in the --start snippet, the other two would apply to any number of columns layout, hence Ncol instead of 2col.

Opening Snippet ch-layout-2col--start

The snippet contains the following HTML:

<div class="ch-layout-2-columns">
  <div class="ch-layout-column ch-nested-content">

Notice the ch-nested-content class. It's used to apply default Ghost styling to elements, ensuring consistent margins.

Breaker snippet ch-layout-Ncol--break

Similarly, just one line to close off the nested-content div and another to open a new one:

</div>
<div class="ch-layout-column ch-nested-content">
    

Closing snippet ch-layout-Ncol--end

And finally, closing off both the second column and the overall element:

  </div>
</div>

Usage

Now, in order to apply this snippet you would use the HTML Element, edit it, then create a snippet and name it:

Once all three are created, you would structure your content like so:

• Opening snippet
• Content for your first column
• Breaker snippet
• Content for your second column
• Closing snippet

Rich Toggle

By default, the Toggle Editor Block only allows us to enter text. That's often inadequate, as you might want to hide away certain details or explanations for a segment of the audience without impeding the flow of the article.

That's where the Rich Toggle with Chapter Theme comes in. It has two snippets:

• Opening snippet ch-toggle--start
• Closing snippet ch-toggle--end

Everything encased between the two will be collapsed and you're free to use any of the available Editor Blocks.

Opening snippet ch-toggle--start

This one is a bit more complex, and there is one element of it that you'll need to modify to change the title of the snippet:

<div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
  <div class="kg-toggle-heading">
    <h4 class="kg-toggle-heading-text js-toc-ignore">
      <span style="white-space: pre-wrap;">Open Me!</span>
    </h4>
    <button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"></path>
      </svg>
    </button>
  </div>
  <div class="kg-toggle-content ch-nested-content">

To dive a bit deeper, the line saying <span style="white-space: pre-wrap;">Open Me!</span> is the one you'd need to change, replacing Open Me! with the text of your choosing.

Closing snippet ch-toggle--end

Much more straightforward, we're just closing off the two div elements we created:

  </div>
</div>

Usage

Similarly to the Two-Column layout, you would need to first create the snippets, and then it can be used as such:

• Opening snippet
• Content of your toggle
• Closing snippet

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

There is a set of other, less significant features implemented within the Chapter theme, detailed below.

Previous & Next Navigation

Ordinarily, Ghost utilises {{prev}} and {{next}} helpers, but they use dates in order to find the previous and next posts respectively.

When using a Chapter Template (either Overview or Item) you would find the Previous and Next posts to be previous and next in the Chapter order, even if they aren't neighbouring the post in question.

In edge cases, when viewing the first and last post in the Chapter, you will be directed to the Primary Tag of the post:

Per-post customisation

Currently limited to #chapter-outline-show, it will be expanded in the future, but the idea of per-post internal tag customisation is to allow you to selectively control the appearance of related posts, comments, outline and other elements.

Available tags:

• #chapter-outline-show added to a Post or Page will render an Outline regardless of the value of the global Show post outline setting, found under Settings -> Design -> Post

Code block copying

Whilst not applicable to everyone, I felt that this was sorely missing. Sadly, the code block code is within the core files and it's not easy to overwrite, but I was able to achieve the desired result with just CSS and JS. For reference, the code lives in the base/post-footer.hbs helper.

Now, any Code Block you paste will have a "copy" icon top-right and a message saying that the content has been copied.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

The Chapter Ghost theme is fully compatible with most features that Ghost provides, to name a few:

• Memberships
• Comments
• Restricted posts
• Recommendations

And so on. However, there is one feature that clashes with the Outline control specifcially and the way I chose to implement it.

Portal Signup Button

Navigating to Settings -> Portal -> Look & feel, locate the Show portal button setting and make sure it's disabled like so:

This won't remove any functionality from the Ghost installation or change the Portal in any way, apart from preventing a floating "Subscribe" button from appearing in the bottom-right of all of your pages, which clashes with the Outline toggle.

Wide and Full content in Chapter Template

Chapters theme relies on the Chapter Overview and Chapter Item templates to add the necessary interface elements. Because of this, we had to restrict the "content" row, meaning that any content that's designated as "wide" or "full" will still be rendered at the same width as "regular" content.

This is an unfortunate but necessary limitation to make the user experience consistent. Consider the following Post, featuring one Wide and one Full image:

And below is the final look & feel of the post with and without a Chapter Template applied:

Hopefully this installation consideration and the singular limitation won't be too inconvenient. And I'm always open for feedback on how that might be improved in the future!

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

During creation of this theme I had to make a number of decisions regarding new elements positioning, behaviour and responsiveness.

I'm going to document some of them here so you'd know what's expected and what can be considered a bug.

Default Ghost Templates and Pages

The default Ghost templates (Narrow, Default, Full, No Image) as well as the Pages with Outline enabled via the use of #chapter-outline-show tag both share the same responsiveness approach.

Extremely Large viewports - 1992px and more

On such devices we're aiming to make the most of the screen space, whilst fully respecting the Wide and Full content embeds.

You can see that the Wide image takes up the entirety of the column from wide-start to wide-end.

In these scenarios the Outline will try to "hug" the right side of the Wide column with a small margin, meaning that Outline content will never overlap with Standard and Wide content.

It will, however, overlap with the Full content blocks, which is inevitable, and sill assume a position on top of them:

Additionally, the Outline Toggle icon, positioned on the bottom in this screenshot, will hug the same "right" side of the Wide column internally as the Outline itself, making it easier to reach and interact with.

This might be slightly clashing with the position of the outline itself but I believe this to be a slightly more optimal UX decision.

Medium viewports - 865px to 1991px

A rather broad range, within which the Outline is going to hug the very end of the container, anchoring itself to full-end.

The Outline Toggle will follow suit, aligning itself with the right side of the Outline, providing a unified navigation experience that is visually aligned.

Small viewports - 864px and less

Once we're below the 865px mark, so 864px and down, the main, wide and full containers collapse into one, leaving the Outline and Toggle hugging the right edge of the container:

Chapter Templates

With the Chapter Templates having an full additional element the positioning becomes slightly trickier. Importantly, there are no significant differences between the Chapter Overview and Chapter Item templates, so the clashing is minimal.

Extremely Large viewports - 1512px and more

This is the most optimal viewport size for the Chapters theme, allowing for most content density with least overlap. With this, the Sidebar will be entirely contained between full-start and main-start and hug the main-start line, limiting it's maximum width to 360px, same as the Outline from the other side.

The Outline will hug the main-end from the right, never expanding beyond 360px width. Both will follow the main content, "sticking" to to the top of the page. The Outline Toggle will hug the main-end from the right, aligning itself with the Outline proper.

This approach clashes slightly with the bottom section (author, comments, etc) and makes it off-center, but provides the best readability and an equal view for all.

Large viewports - 1345px to 1511px

This is a narrow gap, but within it lie many of the most popular viewport sizes. In this mode, the Outline will "undock" from the main-end's right side and will instead start following full-end from the left, overlapping slightly with the content.

Medium viewports - 992px to 1344px

Within Medium viewports, the columns are significantly simplified down to two: before main-start and after it. Chapter navigation will continue to take up most of the left one, whilst content will grow to take up the entirety of what's remaining, with the Outline and Outline Toggle hugging the new full-end, equivalent to main-end

Small viewports - 768px to 991px

On these, the space taken up by sidebar is gradually limited to leave enough for the content, but otherwise it's identical to the Medium viewport:

Extra Small viewports - 767px and less

Lastly, for the extra small viewports, measured at 767px and less, the Sidebar moves over to the top and stays there but is collapsible and scrollable internally. The Outline continues to stay with the content, fixed to the screen:

Closing word

There are a lot of decisions that were made with regard to handling responsiveness. Leaving a single content column with no Wide or Full blocks and surrounding it with equally spaced Sidebar and Outline elements of equal width on larger screens, Outline overlapping content on smaller screens felt like the best way forward.

As always, I'm always open for feedback on how that might be improved in the future!

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

Making this theme was a blast. Generally, I am continuously amazed by the stuff that the Ghost team puts out, and being an advocate for owning (and ideally self-hosting) your data, I find the very existence of Ghost a great boon to the space.

With that said, developing a theme for it was no small undertaking and certainly an exercise in jumping the hoops. I won't go too deep into the details of my perils, but will leave a small wishlist of things, and status thereof, if I made the request, that I'd love to see added to ghost.

Things I'd love to see in Ghost

Allow us to ship custom helpers with themes

Per-post customisation variables

As a theme developer, I'm limited to 20 custom configuration options - it's the things like Post preview layout or Show attribution that can be controlled from the Settings:

Whilst that's all great and works wonders I feel like per-post and per-page customisation is sorely missing, and I had to jump through some hoops to make this exact theme work.

Imagine being able to toggle, per individual post, whether it should show comments? Outline? Or maybe, if it can be made more than Boolean values, even assign.. a chapter name, or order?

Doing it that way instead of relying on internal tags would be a godsend in terms of UX.

Add built-in SSO support

Absence of the feature is still baffling to me. Naturally, a "Magic Link" approach where a person can become a Member is convenient, but it's not anywhere close to being as convenient as the SSO with Google, Facebook or Apple.

I'd love to have a simple, worry-free way to add an Integration to Ghost instead of having to build and host a standalone 3rd party SSO service just to improve the changes of people engaging with my content.

This has been requested five years ago and apparently was even in Beta but never took off the ground?

Third party Single Sign On (SSO)

Do we have any plan to support SSO features in Ghost blog using third party application like keycloak. I wonder if this feature already exist and I am missing it.

Ghost Forumpandeybk

Improve the {{has}} helper to accept visiblity attribute

Currently the only helper that accepts a visiblity attribute is {{foreach}}, as described in Ghost Help. This leads to silly cases where if I need to check if a certain tag, say, #chapter-outline-show is assigned to a post I have to iterate over all tags of the post. And if I want to check the opposite, i.e. if a certain Post does not have a certain tag, my options are more limited still.

As used in the code, {{has}} already accepts a visiblity parameter but it checks the attribute of the context, so if a Post has Visibility set to Members or Paid, but not capable of doing the same for tags.

{{#foreach tags visibility="internal" as |current-tag|}}
    {{#match current-tag.slug "hash-chapter-outline-show"}}
        {{> chapter/outline}}
    {{/match}}
{{/foreach}}

{{#has tag="hash-chapter-outline-show" visibility="internal"}}
    {{> chapter/outline}}
{{/has}

Lift the restrictions off of {{get}} helper parent context access

One of the major issues I ran into was the way Ghost restricts Handlebars from utilising parent contexts in {{get}} requests. I know, rather technical, but you can read more in my post I made on the developer forum:

Escape {{get}} context in Handlebars to reference the post context

I’m working on a theme and want to add advanced tag relevancy functionality with custom ordering using internal tags. I am sadly up against a wall now - either from lack of experience of via the Ghost arbitrary restrictuions. Initially I wanted to create the following {{#get}} expression: {{#get “posts” filter=“tags:{{tags[1].slug}}” include=“tags” order=”{{tags[2].slug}} asc” as |related-posts|}} {{#foreach related-posts}} {{> post-line}} {{/foreach}} {{/get}} This would retu…

Ghost ForumMNeverOff

Big thanks to Cathy from Spectral Web Services, that wrote this excellent blog post addressing the issue and offering a workaround using partials and helpers. Wild stuff though.

Allow expressions in the order attribute for {{get}} helper

Following on from the previous ask, being able to actually construct meaningful queries inside of the order attribute would allow me to sidestep a lot of workarounds and just order the results of the posts using said posts second tag, which would be the #chapter-order-XXXX one:

{{#get "posts" filter="tags:{{tags[1].slug}}" include="tags" order="{{tags[2].slug}} asc" as |related-posts|}}
    {{#foreach related-posts}}
        {{> post-line}}
    {{/foreach}}
{{/get}}

The pseudocode above now has to be replaced with 10 times the lines of code and numerous files.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

Chapter is a Ghost Theme with a sole goal - to make writing, reading and supporting series-based content easy and intuitive - and without relying on Ghost's data-based post sorting. It's inspired by and is based on Dawn and Journal themes in it's layout and functionality.

Chapters

This is the defining feature of this theme - ability to string together various pieces of content within one "theme" as chapters of one story, regardless of the date of posting, authors or public tags used.

You can probably already the main features making it possible:

Nav Sidebar

To navigate across Chapters a sidebar is added to every post that's created using Chapters Overview or Chapters Item Post Template.

Post Outline

Integrating the amazing tocbot we're able to provide the readers an interactive, responsive and collapsible outline to ease navigation across lengthy or complex pages.

Introduction Chapter Overview

I'm going to use the Chapters functionality to walk you through all relevant aspects of the Chapter theme: configuration, features and customisation. I'll dive into it more in their respective posts, but for now I'll provide a brief overview.

Configuring Chapter

This theme introduces three concepts: Chapter Overview, Chapter Section and Chapter Item.

Tags

Each of the Chapter Post Types is represented via a special internal tag:

• #chapter-order-0000 is interpreted as a Chapter Overview and is always put first with special styling in the nav sidebar
• #chapter-order-01XX denotes a Section, meaning it's possible to have up to 99 sections in any given Chapter.
• #chapter-order-XXYY denotes an Item, where XX is any digit and YY isn't 00. Valid examples are #chapter-order-0106 or #chapter-order-2439

Templates

The theme further provides two Templates:

• Overview
• Item

It's up to you how you want to style and utilise your Overview, Section and Item posts, but this guide and my general recommendation is to use Overview Template for the Overview Post, and Item Template for everything else.

Chapter Configuration relies on two sets of internal tags:

• Chapter Name tags: #chapter-name-X...X - has to be 2nd (after primary tag)
• Chapter Order tags: #chapter-order-XXXX - has to be 3rd (after chapter name tag)

In order to configure a Chapter with structure exactly similar to this Introduction series one would need to create following posts:

What is Chapter? An introduction series | tags: #chapter-order-0000
├── Configuring Chapter | tags: #chapter-order-0100
├── Chapter Fetures | tags: #chapter-order-0200
│   ├── Index page | tags: #chapter-order-0201
│   ├── Post Outline | tags: #chapter-order-0202
│   ├── Editor Snippets | tags: #chapter-order-0203
│   └── Other Features | tags: #chapter-order-0204
├── Customisation Options | tags: #chapter-order-0300
└── Notes | tags: #chapter-order-0400
    ├── Installation & Limitations | tags: #chapter-order-0401
    ├── Resonsive Design | tags: #chapter-order-0402
    └── My wishlist to Ghost | tags: #chapter-order-0403

For the avoidance of doubt, here are the tags of this post as well as the Chapter Concepts and Index Page posts found later on.

Special Features

Chapter contains a set of special features that aren't headlining but bring it together nicely to form a compelling UX.

Index Page

The Index Page can be customised in a variety of ways, namely:

• Toggling the post preview between "Full" and "Compact", which shows and hides the feature images, if one is present, respectively
• Controlling whether a the last post is showcased in a special section
• Switching the "About" section content from site icon to main author icon and back

Post Outline

Post outline is available on every Post, assuming it's enabled in settings, and can be added to any Post or Page regardless with a special internal tag: #chapter-outline-show

Editor Snippets

This theme also has a set of pre-defined CSS classes which, if used with the <HTML> Ghost Editor Element, can turn into functional blocks. These include:

Open Me!

<div class="you-can-get-it">
  <span>Treat Yo Self!</span>
</div>

💡

And a callout!

The options are truly limitless!

Other features

Less significant features are included, such as:

• Setting "Previous & Next" navigation contextually to previous and next Chapter Items, instead of the default {{prev}} and {{next}} provided by Ghost
• Ability to copy from code blocks in one click
• Post preview showing number of comments
• And some other, less notable features

Customisation Options

Last but not least, the theme has the following customisation options:

• Setting the inverted theme (dark theme) primary colour, useful to define the shade that works for your brand and readability
• Navigation layout: left, center, stacked
• Colour Scheme: Auto, Light or Dark
• Alternative logo for the Dark (Inverted) scheme
• Call To Action signup test customisation
• Ability to hide attribution to Chapter & Ghost without custom CSS
• Toggling display of author and related posts for all posts

Notes & Limitations

There are a number of notes & limitations for this theme that I'm covering in this Chapter, most importantly:

• Disabling Show portal button is highly recommended. Wide and Full Editor Blocks are rendered no differently to the rest of the content when a Chapter Templates are used, making their width equal
• Responsiveness - a few notes on how Chapter is expected to respond to device and viewport size changes and if what you're observing is by design
• My wishlist to Ghost - a few thoughts on what Ghost could add to make future development of themes like this possible, and maybe integrate some of what's here already into the Ghost itself

Acknowledgements

This theme wouldn't be possible without:

• tocbot by Tim Scanlin for heading outline
• PhotoSwipe by Dmytro Semenov for image lightbox
• This blog post by Cathy from Spectral Web Services, helping me bypass Ghost's silly restrictions on {{#get}} (see my query for details)
• Ghost, NPM, Gulp, VSCode and a bunch of other tooling used to build the theme.

Settings for this Post

To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.

Chapter 1.5.0 brings about a few quality of life changes and visual bug fixes.

Improvements

Anchor Link Copying

I have added an ability to copy anchor links both in the post preview and in the post itself, cleverly excluding the links within the Advanced Toggle Snippet. The scroll to said links is also smooth:

Video borders rounding

Made sure that <video> container elements follow consistent border-radius values across the board.

Issues fixed

Adjusted Advanced Toggle margins

I ensured that the first element, whichever it is, within an Advanced toggle has a 1 rem top margin, preventing it from sticking to the heading.

Markdown tables wrapping

With 1.5.0 the tables would try their best to fit to their width without adding a horizontal scroll, even if that means that individual table cells have to wrap their contents.

Chapter 1.4.10 is a first step towards batter colour usage:

• Dedicated surface areas: page nav, outline, bookmarks and other card elements
• Better delineation of segments between heading, body and footer
• A separate, concise variables space that is then used to override Ghost's consistently