Naoto Docs

Introduction

Since this is a Ghost theme documentation, you are assumed to have a basic knowledge of the Ghost CMS.

If you're starting with Ghost, it is best to see the guides in the official Ghost Help Center – check this out, and you'll have all the available information.

Getting Started

Welcome

The Naoto theme concept is built for flexibility and easy customization. It leverages existing Ghost features of tags & pages to help you customize your own Ghost site from the Ghost admin interface.

The theme offers these key features:

• Customizable homepage with multiple section components
• Landing page builder using section components
• Resource template for useful listings
• Blog template with horizontal tag navigation
• Linktree-like template for featured links
• Series template for linear reading experiences
• Event calendar
• Light and dark mode
• Beautiful color presets
• Multiple blog posts layouts with table of content support

Install Theme

Upload Zip File

To begin, unzip the downloaded package by double-clicking it on a Mac or by right-clicking and selecting "Extract All" on Windows.

Inside the new Naoto folder, you will find the Naoto.zip theme files.

Step-by-Step to Upload the Theme to Your Website

1. Log in to your Ghost website admin (example.com/ghost).
2. Click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Design & branding > Theme > Change theme.
4. Click Upload theme and select the Naoto.zip theme file.
5. Once uploaded, click Activate now to activate the theme.

Upload Routes.yaml

The routes.yaml is required if you want to show the following pages:

1. Blog
2. Tags
3. Archive

If you don't want any page above, you can skip this step.

Step-by-Step to Upload the routes file:

1. Unzip the Naoto.zip theme file.
2. In your Ghost admin, click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Labs and click Open.
4. Click the Upload routes YAML button.
5. Select and upload the routes.yaml file inside the theme folder.
6. Done.

Import demo content (optional)

Demo content accelerates your theme setup by providing a fully configured example of the theme's capabilities. Instead of building from scratch, you'll have working examples of content structures, internal tags that showcase best practices for your theme's features.

Before importing demo content, export your existing content as a backup.

To import the demo content:

1. Navigate to Settings > Advanced > Import/Export
2. Under Import, upload the demo-content.json file from your theme directory
3. The demo content includes all pages and posts on the demo site.

To manage demo content:

1. Go to Pages/Posts
2. Filter by the Demo tag
3. Edit or replace the content with your own

The demo content provides a foundation to understand the theme's structure and capabilities. You can modify, remove, or expand upon these sections using the theme's built-in components and layouts.

Import Internal Tags (Optional)

This step is to import all the available tags we will use to create content on the homepage.

After importing tags, you can select them from Ghost admin without worrying about typo mistakes that can cause the theme to not work as expected.

Step-by-Step to Import Internal Tags:

1. In your Ghost admin, go to Settings > Advanced > Import/Export.
2. Under Export, click Export content. This ensures you have a full backup of your current data. Once done, proceed to the next step.
3. Under Import, click Universal import.
4. Select and upload the internal-tags.json file from the unzipped theme folder.
5. Now, navigate to the Tags page within your admin panel to view all available tags under Internal tags.
6. That's all for the theme installation!

General Settings

Colors

The theme supports changing the Accent color and offers different color combinations.

Set Accent Color

The Accent color is the primary color used throughout your publication theme in buttons, social sharing hovers, etc. You can change the theme Accent color from the Ghost admin.

Change the Accent color from the admin Settings > Design & Branding > Customize > Brand > Accent color.

Preset Color Combinations

The theme provides different color combinations. Choose the one that fits your style:

• Default
• Onyx
• Rust
• Fossil
• Mint
• Ember
• Ice
• Maelstrom

Step-by-Step to Choose Your Preferred Color Combination:

1. Change the Accent color from the admin Settings > Design & Branding > Customize > Site Wide.
2. Click on Color combinations and select your color combination.
3. Preview and Save.

Light / Dark Mode

You can easily switch between light, dark, system, or user-defined modes directly from your Ghost admin panel.

The theme supports:

• Light
• Dark
• System-based
• User defined

Step-by-Step to Customize

1. Go to Settings > Design & branding > Site wide from the admin menu
2. Choose a preferred mode by clicking on Appearance
3. Click Save

Typography

Depending on the selected option, this setting will change the heading and body text fonts.

Custom Fonts

Ghost provides built-in custom font functionality, allowing users to select heading and body fonts from a curated list directly in the admin interface.

Step-by-Step to Change Fonts:

1. Go to Settings > Design & branding > Customize > Brand
2. Under Typography, select:
   • Title font for headings
   • Body font for main text
3. Click Save

Host your own Fonts

You can change any font from the Ghost admin interface using Code Injection and Google Fonts, or your own font. For example, if you want to use "Inter" and "EB Garamond" fonts from Google Fonts, your code in Code Injection will be:

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&family=Inter:wght@400;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-base: 'Inter', sans-serif;
    --font-serif: 'EB Garamond', serif;
  }
</style>

You can also use your custom local font by including it in your theme with a code editor. This technique is more advanced but allows you to add 'your own' fonts.

Check out the detailed guide to add your own fonts

Header Navigation

Step-by-Step to Add an Item to Header Navigation:

1. Go to Settings > Navigation > Primary Navigation.
2. Type the page's name in the label field as you'd like it to appear on your menu.
3. Click on the item's URL. The blog URL will already be auto-populated.
4. When satisfied with your page configurations, click the Save button.

Header Profile image

Header profile displays Publication logo from Settings → Design & branding → Brand

Header Tagline

The tagline is shown under the name, you can change it at Settings → Design & branding → Theme → Tagline text

Header Call-to-Action Buttons

You can add your own CTA text and link in the header. If you leave it empty, the button will be hidden.

1. Go to Settings > Design & branding > Theme
2. Scroll to Navigation buttons:
   • Add the text to Header action text. Leave it empty if you want to hide it.
   • Add link to Header action link

Example configurations:

• Contact button:
  • Text: "Contact Us"
  • Link: "/contact"
• External link:
  • Text: "View Pricing"
  • Link: "https://example.com/pricing"

White Logo on Dark Mode

If you use a black logo image and enable dark mode, you would need your logo visible when users enable dark mode.

You can use Code injection and insert this CSS to support different logo color on light/dark mode

<style>
:root[data-theme=dark] .gh-head-logo-wrapper img {
    filter: invert(100%);
}
</style>

Footer

Like the header, you can add the footer navigation links from the Ghost Admin Settings > Navigation > Secondary

To group footer items into different groups, add # before the name.

Customize Footer with background image

1. Log in to your Ghost Admin dashboard.
2. Click New page to create a new page.
3. Add a feature image. It will be used as the background
4. [⭐️ Important] Add the tag #footer in the Tags input
5. Publish.

Homepage

Homepage sections

The Naoto theme is designed for flexibility and easy customization, allowing you to build a dynamic homepage using Ghost's built-in features. You can manage your homepage sections directly from the Ghost admin interface, no coding required!

After uploading the theme and uploading the routes.yaml file, the homepage is up with two default sections: Hero (simple version) and Blog. If they are all you need, you can skip this section.

But if you want to add more sections to the homepage, do follow the guide below.

How it works

The Naoto theme homepage is built from pages that you create in Ghost admin. Each section is controlled by:

1. Special tags - Internal tags that define what type of section it is
2. Configuration setting - Controls which sections actually appear on your homepage
3. Publish dates - Determines the order of sections

List of sections and its slug

Notes on using internal tags:

• In the page editor, find the Tags field and type the tag (e.g., #section-addons)
• You can easily see the pattern between tag name and its slug. Tags with # prefix are added a label hash- before the name
• It only works when the tag is the first one
• Internal tags start with a # and are not visible to visitors, so your site is clean from search engines.

Arrange Section Order

The order of homepage sections is determined by the publish date of each page, older pages show first. To change the order:

1. Go to Pages in Ghost admin.
2. Click on the page of the section page you want to move.
3. In Page settings, adjust the Publish date. Older dates appear first.
4. Click Update to save changes.

Sections Configuration

You can control which sections appear on the homepage from the theme settings.

You can easily add/remove section showings on the homepage. You can do that from Theme's Settings at Settings → Design & branding → Customize → Theme → Homepage sections

Default Section

Homepage sections contains a comma-separated list of section tags that controls what appears on your homepage.

By default, the theme displays Showcases, Custom posts and latest Now section, beside two permanent Hero and Blog sections.

hash-section-showcases,hash-section-static-text,hash-section-logos

Adding a Section

Add the section tag to the Homepage sections:

hash-section-showcases,hash-section-static-text,hash-section-logos,hash-section-testimonials

↳ Added Testimonials section

Removing a Section

Delete the section tag from the Homepage sections:

hash-section-showcases,hash-section-static-text

↳ Removed Logos section

Hero Section

The hero section is permanently set to the top section of the homepage.

The theme supports both simple and extensive text with reveal animation on scroll, giving you more flexibility for your homepage introduction.

Default option

By default, the theme shows the Site title and description from General settings in the hero.

Step-by-Step to change default option

1. Log in to your Ghost Admin dashboard.
2. Go to Settings → General settings → Title & description → Edit
3. Edit Site title and Site description to change the content.
4. Save and refresh the homepage

Extensive option

For more extensive hero text with formatting options and animation.

Step-by-Step to use Extensive option

1. Log in to your Ghost Admin dashboard.
2. Click on Pages in the left sidebar.
3. Click New page to create a new page.
4. Add your hero text content in the editor. You can:
   • Format text with bold, italic, or other styles
   • Add multiple paragraphs, headings, images, etc.
   • Include links or other content elements
5. Add the tag #home-intro to the page (important!)
   • Click the settings icon (⚙️) in the top right
   • Go to the "Tags" section
   • Type and select #home-intro
6. To add reveal animation, add the second additional tag #animate to the Tags section
7. Publish the page when you're done.

Hero Actions

Choosing to show social links, subscription box or just nothing.

Step-by-Step to set hero action

1. Log in to your Ghost Admin dashboard.
2. Go to Settings → Site → Design & branding → Customize
3. Go to Theme tab and find the Homepage section.
4. Locate the Hero actions dropdown, select the option you want
   1. Social links: show the author's Social Links
   2. Subscription form: show the subscription box
   3. None: No action shown
5. Save and refresh the homepage

Edit Author Social Links

1. In the Ghost Admin Settings, go to Staff and select the primary author whose social links you want to display. (Note: The primary author is the first author added in the Authors field of the #section-hero page we created above)
2. Add your social profiles (such as Website, Twitter, Facebook, LinkedIn, Bluesky, Threads, Mastodon, TikTok, YouTube, Instagram) in the corresponding fields.
3. Save your changes.

Blog Feed Section

The blog section will contain the latest posts that you published and a shortcut link to go to the /blog page.

By default, the blog section is shown right under the hero section. You can change the section name in the Settings (Settings → Site → Design & branding → Theme → Feed title).

But if you want to easily change the order of the blog section to any position, follow these steps:

Step-by-Step to Add the Blog Section

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. From the Page settings, ensure that the Page URL setting is blog. This is the most important step.
4. Publish and open the homepage to check.

Different Post Styles

Naoto supports different post styles and different featured image aspect ratios.

You can set your favorite style at Ghost admin > Settings > Design & branding > Homepage > Feed layout and Feed image orientation for the post image ratio (Landscape, Square, Portrait).

The post style will be applied across the site, including the homepage, blog, and related posts under the post detail page.

Post styles

Exclude Posts from Blog Feed on Homepage

Control which posts appear on your homepage feed by excluding specific tags.

Step-by-Step to Exclude Posts

1. Go to Settings > Design & branding > Theme
2. Find Excluded tags
3. Enter tag slugs separated by commas (e.g., internal,draft,private)
4. Click Save

Posts with these tags won't appear in the homepage feed but remain accessible via direct links or tag pages.

Custom Posts Row Sections

This section allows you to display a row of specific posts filtered by a tag on your homepage.

Step-by-Step to Add Posts Row Sections on Homepage

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage.
3. In Page settings, add #section-custom-posts to the Tags input.
4. In Template dropdown, choose Page Custom Posts (This will create a new page showing those posts)
5. Click on X Card and add the tag slug of the posts you want to show in this row on the Homepage. i.e. putting newsletter if you want to show posts that are tagged as Newsletter
6. Publish and preview it on your homepage.

Logos Section

Sometimes you want to show some kind of social proof, and a logo board can help achieve that.

Step-by-Step to Add Logo Board

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the homepage.
3. Upload all logos you want to show on the homepage. Note: Don't add any line breaks above, between, or after the Images. It will create some odd alignment.
4. In the Page Setting sidebar, add a tag named: #section-logos.
5. Publish and check your homepage.

☝️ If you want to hide the section title, add #no-title tag.

Showcase Section

Highlight showcase items, such as portfolio pieces, case studies, or featured projects.

Step-by-Step to Add Showcase Section on Homepage

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-showcase to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific Pages for this section. i.e. putting works if you want to show pages that are tagged as Works
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page.
6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
7. Publish.

Now the showcase section is visible on the homepage. Next, to add content for that section.

Add Showcase Items

Step-by-Step to Add Showcase Items

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as eyebrow sub-header (above the title), and featured image.
3. Tag the page with the tag you used in the X description field in the showcase section page above (e.g. Works)
4. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
5. (Optional) If you want to use the video as the thumbnail, paste the video URL to Facebook card → Facebook description
6. Publish.
7. Repeat the same steps to create different content blocks for the showcase section.

Change Showcase Layout

For the showcase card, the theme provides some showcase item layout options.

1. Go to Ghost admin > Settings > Design & branding > Theme > Showcase card style
2. Select your choice.
3. Save.

Blocks Sections

Display a grid of blocks, such as products, features, or services.

Setup Blocks Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-blocks to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting goods,health,food if you want to show pages that are tagged as Goods, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. ​6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
6. Publish.

☝️ To find the exact tag slug, go to Tags in the Ghost admin home, click on the tag name, then copy the text in the Slug field.

Repeat these two steps to create different blocks sections on the homepage. You can have as many resource sections as you want.

Add Blocks Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Blocks Vertical Section

Show blocks in a vertical (column) layout, ideal for books or vertical image lists.

Setup Blocks Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-blocks-vertical to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting book,health,food if you want to show pages that are tagged as Book, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. ​6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
6. Publish.

Add Blocks Vertical Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Addons Section

Showcase a grid of add-ons, plugins, or resources you want to highlight. Great for listing tools, downloads, or partner products.

Setup Blocks Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-addons to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting book,health,food if you want to show pages that are tagged as Book, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. ​6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
6. Publish.

Add Addons Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Testimonials Section

Display testimonials from your users, clients, or partners.

To add a testimonials section, create a new page, give it a title, then add an internal tag #section-testimonials in the page settings.

Step-by-Step to Add Testimonial Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-testimonials to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the details:
   • Title is the testimonial main text.
   • Description shows a person's name and job title.
   • Image as a profile picture.
   • Stars as a rating.
6. Add more Product cards to add more testimonials.
7. Publish.

Static Text Section

The static text section is useful for adding custom text on the homepage, such as your services, working principles, or values.

Step-by-Step to Add Static Text Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-static-text to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

☝️ If you want to hide the section title, add #no-title tag.

If you want to create multiple sections using Static text, create a new page and repeat the same steps above.

Static Banner Section

If you prefer to show static images instead of text, you can use the static banner section.

Step-by-Step to Add Banner Text Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-static-banner to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

☝️ If you want to hide the section title, add #no-title tag.

Experiences Section

List your work experiences, milestones, or career highlights.

Step-by-Step to Add Experiences Section

1. In Ghost admin, create a new Page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-experiences to the Tags input.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

Now Section

Display the latest post tagged as "Now" or any custom tag — perfect for sharing what you're currently focused on.

Step-by-Step to Add Now Section

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage.
3. [⭐️ Important] Add #section-now to the Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the post you want to show as the content. This will 'filter' specific pages for this section. i.e. putting now if you want to show pages that are tagged as Now
5. If you want to create separate page showing Showcase content, select Page Now in Template — the View all link will lead to this page. ​6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags

Publish.

Now you need to add Now content:

Step-by-Step to Add Now Content

1. In the Ghost admin page, go to Posts > click on New posts.
2. Give it any title and add your content (Now section won't display Post title)
3. Tag the posts with the tag you used in the X description field in the Now section page above (e.g. Now)
4. Publish.
5. Repeat the same steps to create different content blocks for the showcase section.

The latest post tagged with "Now" will be displayed in this section.

Custom Content Section

This section allows you to display any custom content of a specific page on the homepage.

Step-by-Step to Add Custom Content Section

1. In Ghost admin, create a new Page.
   1. Give it a title; this title won't be shown on the homepage.
2. Add #section-custom-content to the Tags input.
3. Publish.

Event Calendar Section

This section shows a list of upcoming events with dates.

Step-by-Step to Add Event Calendar Section

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-events to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific Pages for this section. i.e. putting event if you want to show pages that are tagged as Event
5. If you want to create separate page showings Showcase content, select Page Collection in Template — the View all link will lead to this page.
6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
7. Publish.

Now you need to add Event content:

Step-by-Step to Add Event Content

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as eyebrow sub-header (above the title).
3. ​Choose event dates by using the Publish date. Since Ghost doesn't support future dates, use this data to display event dates. We only show the date and month, so to show a "future date", use the date from the past year. Example: today is Jul 29, 2025. You have an event in Aug 2, 2025. To show that date, select Aug 2, 2024 as the Publish date.
   • If you upload a feature image, it will replace the date as the thumbnail.
4. Tag the page with the tag you used in the X description field in the Event page above (e.g. Event).
5. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
6. Publish.
7. Repeat the same steps to create different content blocks for the showcase section.

Other Customizations

Hide Section Title

If you want to hide the section title, add #no-title to the Tags input.

Hide Section Link

If you want to hide the link section, add #no-link to the Tags input.

Other Pages

Blog Page

A blog page displays all your posts in Ghost.

☝️ Important: Ensure you upload the routes.yaml file.

If you've already created a blog section on the homepage, you can skip this step to create a blog page.

Step-by-Step to Create the Blog Page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Blog').
3. Add a description or feature image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is blog.
6. Click Publish.

Now you have a blog page with the URL yourblog.com/blog.

Blog Category Navigation

By default, the blog category navigation shows the top 5 tags sorted by the number of posts for each tag. You can also define which tags you want to display in the header.

Step-by-Step to Add Custom Items on the Category Header

1. From Ghost admin, go to Settings > Design & Branding > Theme.
2. In Blog category navigation, enter the slugs for each tag, separated by commas without any whitespace (e.g., design,code,mindset).
3. Click Save.

Blog featured post type

You have the option to show Featured posts carousel or just hide it.

Step-by-Step to update Featured Post row:

1. From Ghost admin, go to Settings > Design & Branding > Theme.
2. In Blog featured post type, select an option to show/hide it
3. Click Save.

Collection Template

This template lets you create a custom page that shows your own content at the top, followed by a section that automatically displays all pages tagged with one or more tags you specify.

This is perfect for building a focused collection, such as a resource list, a collection of case studies, or a single-topic showcase.

Step-by-Step to Create a Collection Page:

1. Create a new page in Ghost admin (Pages > New page).
2. Add your main content in the editor. This will appear at the top of your landing page.
3. In the Page settings (top right corner):
   • Tags: Use one of those tags to set the style for the content item: #section-addons, #section-blocks, #section-blocks-vertical
   • Template: Select Page Collection from the Template dropdown.
   • Twitter Description: Enter one or more tags (comma-separated) you want to show for the section below your main content. For example, entering resources,downloads will show all pages tagged with either resources or downloads.
4. (Optional): You can set the Page access to public or Member only to define who can see the collection.
5. Publish your page.

You can create as many collections as you want with the same steps.

Landing Page Template

This template lets you create a custom page that shows different sections like we show on the home page.

This is perfect for building focused landing pages, such as a resource list, a collection of case studies, or a multi-topic showcase.

List of applicable sections and its slug for Landing Page Template

Step-by-Step to Create a Landing Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add your main content in the editor. This will appear at the top of your landing page.
3. In the Page settings (top right corner):
   • Template: Select Page Landing Page from the Template dropdown.
   • Twitter Description: Enter one or more tags (comma-separated) of sections you want to show. For example, entering hash-section-addons,hash-section-blocks will show two sections that the pages tagged with either hash-section-addons or hash-section-blocks.
4. (Optional): You can set the Page access to public or Member only to define who can see the collection.
5. Publish your page.

You can create as many collections as you want with the same steps.

Linktree Template

Create a Linktree-style page that acts as a personal or brand profile with quick links, social icons, and your latest post. This is perfect for sharing on social media profiles or as a simple landing page.

Step-by-Step to Create a Linktree page

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "Links" or your name).
3. Add a custom excerpt for a short description or tagline (optional).
4. Add your main content in the editor. This can include links, buttons, or any text you want to show.
5. Set a feature image if you want a background image for the page (optional).
6. In Page settings, set the Template to Page Linktree.
7. Publish your page.

Series Template

Showcase a series or collection of posts grouped by a tag. This template displays a table of contents and expands each post in full, making it ideal for tutorials, mini-courses, or serialized content.

Step-by-Step to Create a Series Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "My Series" or the name of your collection).
3. Add an introduction or overview in the content editor (optional).
4. In Page settings:
   • Set the Template to Page Series.
   • In X Description, enter the tag slug that all posts in your series will use (e.g., my-series).
5. Publish your page.
6. Tag each post you want to include in the series with the same tag you entered in X Description.

Following these steps, the page will display all the posts tagged as my-series and sort them by publish time, oldest first.

Timeline Template

Similar to Series Template, but this template shows the newest posts first, without a Table of Content. It's ideal for showing your milestones by time for timelines.

Step-by-Step to Create a Timeline Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "My Timeline" or the name of your collection).
3. Add an introduction or overview in the content editor (optional).
4. In Page settings:
   • Set the Template to Page Timeline.
   • In X Description, enter the tag slug that all posts in your series will use (e.g., timeline).
5. Publish your page.
6. Tag each post you want to include in the timeline with the same tag you entered in X Description.

Following these steps, the page will display all the posts tagged as timeline and sort them by publish time, newest first.

Now Template

Now is a nice place for you to show what this person is focused on at this point in their life.

It's inspired by nownownow.com projects. But we treat it differently by showing the whole history of the page, not just the latest update.

Step-by-Step to use Now template

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "Now" or the name of your collection).
3. In Page settings:
   • Set the Template to Page Now.
   • In X Description, enter the tag slug that all posts in your series will use (e.g., now).
4. Publish your page.
5. Tag each post you want to include in the Now page with the same tag you entered in X Description. The Now Template doesn't show individual post titles

Following these steps, the page will display all the posts tagged as now and sort them by publish time, newest first.

Post Templates

The theme provides different post templates:

1. Default
2. Wide featured image
3. Full featured image
4. No featured image
5. Split Narrow
6. Split Wide

To choose which template to use when you publish a post:

1. In the post editor page, click the icon in the top right corner to open the Post settings.
2. Find the Template selector and choose the style you want for your post.

Post Page Options

The theme supports other customizations:

1. Hide/Show author
2. Hide/Show social sharing buttons

Step-by-Step to Customize Post Options

1. Go to Settings > Design & branding > Theme > Post
2. Toggle on/off each option to show/hide them from the Post page
3. Click Save

Contact Page

To provide a way for your readers to contact you, create a contact page using Formspree.

Step-by-Step:

1. Create a new page and give it a title (e.g., 'Contact').
2. Add a feature photo (optional) and choose a layout from the Template option.
3. Choose any template; a special template named "Page" is available under the template option. You can choose any other template as well.
4. Add your content and the contact form code using Formspree. See the code example below.
5. Click Publish.
6. To add the page to the navigation, refer to the Navigation section.

<form id="fs-form" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/{your_form_id}" method="post">
  <fieldset id="fs-form-inputs">
    <label for="full-name">Your name</label>
    <input type="text" name="name" id="full-name" placeholder="e.g. John" required>
    <label for="email-address">Email address</label>
    <input type="email" name="_replyto" id="email-address" placeholder="[email protected]" required>
    <label for="message">Message</label>
    <textarea rows="9" name="message" id="message" placeholder="Your message…" required></textarea>
    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
  </fieldset>
  <input type="submit" class="button button-primary" value="Send">
</form>

Dark Page

Besides supporting a light/dark theme for the entire website, this theme allows setting specific pages to dark mode.

For instance, if your default theme is light, but you want certain pages (e.g., Gallery page) to be dark, you can achieve this.

Step-by-Step:

1. In the Ghost admin, go to any page or post you want to set to dark mode.
2. Open the Page/Post settings panel.
3. In the Tags input, add the tag #dark.
4. Click Update.

Custom Settings

Table of Content

You can add a table of contents (TOC) to any post. Add this HTML code to your post.

<aside class="toc-container">
    <div class="toc-sidebar">
        <h4>On this page</h4>
        <div class="toc"></div>
    </div>
</aside>

Step-by-Step

1. Create a new post and write your post
2. Right under the title, add an HTML card
3. Insert the code above. You might want to change the TOC's header text. Maybe you call it Table of Contents.
4. Publish and review it

Note: If you don't want a title (e.g., On this page), remove it from the HTML code you see above.

Posts Per Page

By default, the homepage, author's, and tag's page display a maximum of 20 posts per page, but you can change this number.

Step-by-Step

1. You'll need to open the theme's package.json file in your code editor and find the following:

"config": {
    ...
    "posts_per_page": 20
    ...
}

2. Change the value of the 20 to the expected value.
3. Save your package.json file in root folder.

Google Analytics

To integrate Google Analytics, I recommend using the Google Analytics integration by Ghost.

Syntax Highlighting

You can add a fenced code block by placing triple backticks ``` before and after the code block. For example:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following gray look:

To highlight a code block, add a language alias like css or js to the code block. For example, the CSS code in the previous example will wrap between ```css and ``` as follows:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following colored look:

To add inline code, wrap the text between two backticks "`".

Prism

The theme ships with Prism.js, a lightweight, robust, and elegant syntax highlighter.

The initial Prism package includes some languages, like Markup, CSS, C-like, and JavaScript.

You can add support for more languages by adding the Prism autoloader script, which will automatically load the languages you need. Add the following script to the website admin Code Injection (Site Footer) to do this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Click Save.

Responsive Tables

The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.

By default, the table adapts to the window width. If you have a table that is too wide, it will display a horizontal scroll bar when needed.

Step-by-Step

1. To add a responsive table, use the Markdown card.
2. Add the markdown to create a table. To generate a table, you can use the tool Markdown Tables Generator. Below is an example

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |

Subscription Form

Subscription is placed at the bottom of the post page and on the homepage next to the Latest post area.

You can change the subscription box's title from the Ghost Admin.

Two subscription boxes use the same copy. When you change the text, it will change in both places.

Step-by-Step

1. Go to Settings > Design & branding > Homepage in Ghost Admin
2. Change the copy in Email signup text input.
3. Finally, click Save.

Comments / Member Discussion

The theme comes with Ghost Native Comments integration. You can turn the comments on from your Ghost admin Settings > Membership > Access > Edit > Commenting.

Languages

The theme is fully translatable by enabling a publication language in the settings of the Ghost Admin. Before that, you must prepare your language file.

Step-by-Step

1. Inside the ../locales/ folder, add target language files for each translatable language used on your site. For example, fr.json is for French, and pl.json is for Polish. A valid language code must be used.
2. Translate the sentences used in the theme inside your new language files, for example, in en.json:

{
    "Subscribe": "Subscribe",
    "Sign in ": "Sign in",
    "Account": "Account",
    ...
}

3. And edited to translate into French for fr.json:

{
    "Subscribe": "S'abonner",
    "Sign in ": "Se connecter",
    "Account": "Compte",
    ...
}

4. Upload a theme with a new language file.
5. Go to the General settings in the Ghost Admin.
6. At the top of the page, you'll see the Publication info section
7. Enter the correct language code into your Publication language settings menu.
8. Finally, click Save to activate.

Note: Reactivate the translation file. If you edited the active language, you must restart Ghost to make the changes effective. Alternatively, enter another language code and click Save to activate, then switch back to your code.

Advanced Settings

Editing a Theme's Code

You will encounter information about editing theme files in many places in this documentation.

To edit files, you will need to unzip the theme archive – at this point, you will have access to the necessary files indicated in the theme documentation.

Edit HTML

Step-by-Step

1. To edit your theme files, download a copy of the theme. For this purpose, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Use the Advanced dropdown menu in the upper right corner to download your theme, then unzip the theme locally.
3. Once the theme is unzipped, the files can be edited using a code editor – make the changes indicated in the theme documentation.

You can edit files using applications (code editor) such as Sublime Text, Visual Studio Code or Brackets. Using native text editors like TextEdit on macOS may add formatting that may cause the theme to work incorrectly.

4. After changing the theme code, re-zip the theme directory to upload it back to Ghost.

To create a zip archive on a macOS, right-click on the theme folder to view the context menu. Then, click the Compress option. On Windows, right-click on the theme folder, select Send to, and then select Compressed (zipped) folder.

5. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
6. Click the Upload theme button in the upper right corner.
7. Once uploaded, click Activate to activate the theme on your site.

Edit CSS

The best way to change the CSS is to use Ghost's built-in Code injection, the change will be applied right after you save the change.

If you need a more powerful way to change the CSS, you can edit it in the theme file. But it would need more technical setup. Follow this guide on How to apply CSS changes in your Ghost theme

If you're only looking to make minor updates to a theme, code injection may be enough.

Code Injection

Another choice for customization is to use the Ghost Code Injection settings in Ghost admin.

For a CSS example, you can use the code in the Site Header section to change the title color and font size.

<style>
  .gh-head-title {
    color: #4550E5;
    font-size: 32px;
  }
</style>

Check out How to use Code Injection Ghost guide for more information.

Theme Deploy with GitHub Actions

Naoto comes integrated with the Deploy Ghost Theme Github action. The purpose of the GitHub action is to take the theme from the GitHub repo and send it to your website.

Follow this guide to add GitHub actions Streamline the deployment of your Ghost theme using GitHub Action.

Congratulations on setting up your Naoto theme! We hope this documentation has been helpful in getting you started with creating a beautiful and functional website.

Naoto is designed to be flexible and easy to customize, offering a wide range of options to make your site unique. With its modular homepage sections, diverse page templates, and extensive customization options, you have everything you need to create a professional online presence.