What’s new in this version?

Ghost v6 compatibility:

All theme warnings are now fixed.

Offline docs:

The theme ZIP file now includes an offline documentation that you can access by opening the file documentation/index.html in your browser.

New grays:

The theme setting Gray scale now includes four new options: Taupe, Mauve, Mist, and Olive. Choose the one that better matches your brand.

New fonts:

The theme setting Body font and Headings font now includes more options: Fira Sans, JetBrains Mono, Merriweather, Merriweather Sans, Noto Sans, Noto Serif, Poppins, and Nunito.

New header style:

We added an alternative header layout that replaces the large search input with membership buttons. You can choose this option in the new theme setting Header style.

Footer columns:

Similar to the header dropdowns, you can now create footer columns using secondary navigation items.

To create a column, add + at the beginning of a secondary navigation item. This item will be used as the column title, and its URL will be ignored.

Then, add items that start with - under it to create links within that column.

Make sure there is no space before the + or - characters.

Items without a prefix will be displayed normally, similar to the previous version.

Custom footer description:

You can now set a custom description for the footer in the theme setting Footer description. Leave this field empty to use the default site description.

Custom footer copyright:

You can now set a custom copyright notice in the theme setting Footer copyright. Leave this field empty to use the default copyright text.

Better social links setup:

• We now support all native social links that were added to Ghost in the latest versions in the global site settings and author profile.
• You can continue using the #social- tags to set links for your other social accounts.
• The #social- tags are now sorted by name. This means that you can now edit the tag’s name to control the order in which the social links are displayed on your site. For example, you can add a number to the tag name (not the slug), like this: #social-01-discord.
• You can now add a link to any social platform, even if Ghost or the theme does not natively support it. Simply create a new #social- tag, set the URL in Meta data > Canonical URL, set the platform name in Meta data > Meta title, upload an SVG icon with a transparent background as the tag image, and finally add the tag to a public page/post.

Native share button:

Posts now support Ghost’s new share feature.

Read more section:

The blog post template now supports a “Read more” section that displays related or latest posts. This feature only works for posts with the internal #blog tag.

Exclude from search:

You can now exclude some posts, tags, or authors from search results by injecting the following code into Settings > Code injection > Site footer and replacing the example slugs with your own.

<script> 
window.Spiritix.excludeFromSearch = {
    posts: [
      "example-post-slug-1",
      "example-post-slug-2",
    ],
    tags: [
      "example-tag-slug-1",
    ],
    authors: [
      "example-author-slug-1",
    ],
  };
</script>

Other improvements:

• The “Page access” setting now works correctly on collection pages. For example, you can restrict access to the blog or roadmap feed to paid members only.
• Better support for the “Show title and feature image” option on collection pages.
• We now automatically adjust certain aspects of the site header (spacing, font size, visibility, …) to prevent layout issues when long navigation labels are used.
• Better support for URL fragments in navigation items.
• Better headings margin when visiting a page with a URL fragment.
• Clicking the TOC’s “On this page” heading now scrolls the page to the top.
• Code blocks now support line highlighting. Add the range between curly braces after the language name in the code block card e.g. JavaScript {2-5}
• Improved the CTA card styles.
• Improved image zoom feature.
• Updated dependencies, fixed bugs, improved accessibility, and made other small design tweaks.

Breaking changes (due to Ghost v6 limits):

• Landing page template: now limited to 100 posts max.
• Course template: limited to 100 posts per module/group (or 100 total if groups are disabled).
• Docs template: limited to 100 posts per group (or 100 total if groups are disabled).

New features:

• New feed template
• New Authors page
• New Tags page
• New Contact page
• New global RSS feed available at /rss/

Improvements:

• Added dark/light mode toggle button to the header
• Added support for all social media icons in the author bio
• Added dark mode support to the search modal
• The docs template search is now scoped and only includes #docs-col and #folders-col posts (can index 1000 posts max)

Fixes:

• Fixed styles for buttons in Safari
• Fixed styles for transparent images
• Fixed styles for navigation items starting with #

Read the full documentation.

• Fixed compatibility with Ghost v5.101.0
• Fixed the date display for Spanish
• Fixed the post primary tag link’s width

New features:

• Landing page videos: You can now add short videos in landing page blocks. Add the internal tag #landing-video, then add a video card to your post content, optionally add a thumbnail to the card and enable loops. You can adjust the video aspect ratio and position using the same tags for images (#landing-img-3-4, #landing-img-left, …). Video embeds are not supported.
• More padding options for landing page blocks: use #landing-padding-md for medium padding, and #landing-padding-sm for smaller padding. Use #landing-no-padding-top to remove top padding, and #landing-no-padding-bottom to remove bottom padding.
• New “Brands” landing block: Add #landing-brands to your landing page post, add a product card to the content, upload the brand logo as the card image (a filter is applied to the image to make it work for both light and dark theme, a monochrome, SVG or transparent PNG is recommended), give the card a title for SEO, and optionally enable the card button to make it clickable. Repeat the process for all the brands, and make sure there is no empty space between the cards.
  To replicate the same style as our demo, remove the post title with #landing-no-title and reduce the padding with #landing-padding-md.
• New option “System” for the “Default color scheme” theme setting: This will make the color scheme match the user’s OS/browser settings, unless they explicitly change it.
• Added support for WhatsApp social icon
• Added support for Dribbble social icon

Improvements:

• Improved Javascript loading time

Fixes:

• Navigation links starting with # are no longer highlighted when visiting the homepage
• Fixed wrong font family on some Ghost cards (Button, Product, NFT, and Header)

Inline code: We changed the inline code styles to have a gray box (like this inline code) instead of visible backticks. If you prefer the previous styles inject the following code into your site header:

<script>
  document.documentElement.classList.remove("has-inline-code-block");
</script>

New features:

• New landing page block type “Blog”: Create a post with the internal tag #landing-blog to show the latest 6 blog posts on your landing page.
• Menu dropdowns: You can now create multiple menu dropdowns for your navigation:
  To create a dropdown, add + to the beginning of a navigation item (the URL for this item is ignored), then follow it with items that start with - (make sure there is no space before the + and - characters).
  You can create multiple dropdowns, each dropdown can include up to 10 inner items.
• New “Tags” page: We added a new minimal archive page for listing all your tags. To enable it create and publish a page with slug tags, then edit your routes config file as follows and upload it to Ghost (make sure the /tags/ page is under routes: and not collections:):

routes:
  /tags/:
    template: tags
    data: page.tags

collections:
  # ...

• Collapsible Table of Contents: Add the internal tag #template-toc-collapsible to your posts to enable it. Using this option, only the first level of headings is visible by default, the second level of headings will appear when you scroll to it. Great for long posts with lots of headings.
• Support for Table of Contents in narrow posts: We added Table of Contents support for narrow post type (post with the internal tag #template-narrow). Add the internal tag #template-toc to your posts to enable it.
• Hide feature image: Add the internal tag #template-no-img to your posts to hide the feature image. Useful for blogs when you want the image to be visible on the listing but not on the post itself.
• Remove the gray background and border from images: If you’re using transparent images and don’t like the gray background and border around your images, you can inject the following code to your site header to remove them:

<script>
    // Remove the gray background from images
    document.documentElement.classList.add("no-img-background");

    // Remove the gray border from images
    document.documentElement.classList.add("no-img-border");
</script>

• Support for multiple blog collections: You can now use the blog template on multiple collections with no problem.
• Support for author bio: Add the internal tag #template-bio to your posts to show the author bio under the post content.

Roadmap date:

• The roadmap posts will now show the “published at” date and author by default.
• On the roadmap page, the cards will not show the date by default. To enable the date, add the internal tag #roadmap-published-at (or #template-published-at) to the roadmap page.

Support for 4:3 image ratio:

• To enable this ratio on the a landing page block add the tag #landing-img-4-3 to each post.
• To enable this ratio on the blog posts add the tag #template-img-4-3 to each post.
• To enable this ratio on the blog page (its own feature image) add the tag #template-img-4-3 to the page.
• To enable this ratio on the blog page cards add the tag #template-cards-img-4-3 to the page.

Disable the image blur effect:

• To disable the image blur effect copy the small script bellow and add it to Settings > Code injection > Site Header (note that the images will be hidden until they finish loading)

<!-- Disable image blur -->
<script>document.documentElement.classList.add('no-img-blur');</script>

To enable it on a blog post, add the internal tag #template-updated-at to the post.

If you like to enable it on the blog list page, add #template-updated-at to the blog page.

At this point, the cards will show the updated at date but they will be out of order (because they’re ordered by published at date), we need to tell Ghost to order the blog collection by updated at date, this requires a small change to the routes file.

Download your current routes file from Settings > Labs > Routes and add order: "updated_at desc" to the blog collection, finally, upload your updated routes file to Ghost.

You can access and download it for free from your customer portal.

IMPORTANT:

• Download your currently active theme as a backup and name it doks-backup.zip
• Before uploading the new zip file, make sure it is named doks.zip just like the first time you uploaded it (not doks_01.zip, not doks_copy.zip, …), otherwise Ghost will consider it a new theme and will reset the theme settings to default.
• This version requires Ghost v5.54.1 or later (it’s already supported if you’re hosting on Ghost(pro))
• If you made changes directly to the theme’s source code, remember to reproduce them on this new version.
• If you’re using a language other than English or French, make sure to translate the new labels.

Breaking changes:

• We removed social media links (Github, Discord, and LinkedIn) from the theme settings.

New features:

• New Roadmap template
• New theme setting “Default color scheme”. Choose your website’s default color scheme.
• New theme setting “Gray scale”. Choose different shades of gray and change the general tone of your website.
• New theme setting “Max navigation items”
• New collapsible doc sections
• New blog template with images
• New blog grid layout
• New animations on the landing page
• Added internal linking between landing page blocks
• New blog post layout “Narrow”
• New blog post layout with table of contents
• Support of comments on doc pages
• Added support for Linkedin, Instagram, Youtube, Telegram, X

Improvements:

• Optimized assets and images loading
• Added dark/light theme toggle to the footer
• Added tags to Changelog
• Added support for the beta editor (Note: Ghost is still actively working on this editor, if you find any issues please report back)

Fixes:

• Small images are now centered in content
• Newsletter form is now hidden when membership is disabled
• Empty paragraphs in content used to be ignored, now they’re not
• Code injection didn’t work before for pages used as data in routes.yaml
• The dark sidebar used to be too dark on light mode, now it’s a little bit lighter.
• Added missing post content CTA translations and improved styles
• All external links in content open in a new tab now
• Full-width cards now take the full width of the page

Read the full documentation.