Build your own Substack with Nikko.Explore
Themes

Theme Info

Name: Nikko
Description: a Newsletter Ghost Theme
Released: 2021-06-10
Creator: Biron Themes

Requirements

Ghost version: 4.0 or higher
Ghost Content API: v4

Content API

As mentioned in the Requirements section, this theme uses the Content API v4, so to take advantage of all the theme features make sure the Content API v4 is used, this is set in the theme by default.

You can check this in the theme's package.json file:

{
  "name": "...",
  "description": "...",
  "demo": "...",
  "version": "...",
  "engines": {
    "ghost": ">=4.0.0",
    "ghost-api": "v4"
  },
  ...

Install Theme

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to Settings > Design from the admin menu
  • Under the Themes section click Upload a theme
  • Click inside the upload box to select a nikko.zip, or drag-and-drop the nikko.zip into the upload box
  • If you want to activate the theme immediately click Activate Now or Close if you want to do it later

Publication Settings

Some basic settings for your publication:

Language

To set the publication language follow the steps below.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to General from the admin menu
  • Under Publication Language, click Expand and set the language/locale to be used on the site. The default is set to English (en).

Publication Language

  • Click Save settings

Language Code Reference


Icon

To upload a new icon follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under the Publication icon, click Upload Image and select your icon
  • Finally, click Save settings

To Upload a new logo follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under Publication logo, click Upload Image and select your logo
  • Finally, click Save settings

Cover

To upload a new cover image follow these steps:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click General under the settings menu.
  • Under Publication cover, click Upload Image and select your cover image
  • Finally, click Save settings

To add menu items to your publication, follow the steps below.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Design from the admin menu
  • Under Navigation, enter a label for the menu item in the label field
  • In the URL field, enter the destination for the menu item to link

Ghost Blog Navigation

  • Click Save

As of Ghost v3 there is also secondary navigation and it can be found in the same path as the normal navigation, under the Secondary Navigation.


Members

Nikko completely supports the Ghost Members feature. Starting with Ghost v4 this feature is enabled by default.

Within the members the following settings are available:

  • Portal settings - Portal related settings
  • Subscription access - define whether signup is open, invite-only, or not possible at all
  • Default post access - Define the default post access. Can be: Public, Members only, Paid-members only
  • Connect to stripe - where you have to configure the connection to your stripe account to be able to accept/process payments.
  • Membership tiers - you can define the monthly and yearly price for full access to your publication.
  • Email newsletter settings - for sending emails for member signup/sign in, you have to provide the Mailgun configuration ( GhostPro users do not have to configure it)
Don't forget to upload the routes.yaml file, which can be found in the root directory of the theme.

To access the overview of members click Members from the admin menu.


Portal

By default, Nikko comes with individual pages in support of the member's feature, however, if you prefer the Portal for handling members, go to Members > Portal settings, click on Customize and under the links section you should have the following:

Members

You will need to update where the signin, signup and account links point to. There are two possibilities either update the link from the portal or to add the corresponding data attribute. The following files have to be edited:

  1. partials/header.hbs
  • add data-portal="account" after href="/account/"
    • href="/account/" data-portal="account"
  • add data-portal="signin" after href="/signin/"
    • href="/signin/" data-portal="signin"
  • add data-portal="signup" after href="/signup/"
    • href="/signup/" data-portal="signup"
  1. partials/mobile-user-menu.hbs
  • add data-portal="account" after href="/account/"
    • href="/account/" data-portal="account"
  • add data-portal="signin" after href="/signin/"
    • href="/signin/" data-portal="signin"
  • add data-portal="signup" after href="/signup/"
    • href="/signup/" data-portal="signup"
  1. partials/pricing-free.hbs
  • add data-portal="signup/free" after href="/signup/"
    • href="/signup/" data-portal="signup/free"
  1. partials/content-cta.hbs
  • add data-portal="signin" after href="/signin/"
    • href="/signin/" data-portal="signin"
  • add data-portal="signup" after href="/signup/"
    • href="/signup/" data-portal="signup"

Routes

Routing is the system that maps URL patterns to data and templates within Ghost. To enable signin, signup, and account pages you need to upload the routes.yaml file.

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Settings > Labs.
  • Click on Upload routes YAML button and select the file from the root folder of the theme.

Basic configuration with member features enabled:

routes:
  # Members
  /signup/: 
    template: members/signup
    data: page.signup # When active data will be taken from the  "/signup/" page
  /signin/: 
    template: members/signin
    data: page.signin # When active data will be taken from the  "/signin/" page
  /account/: 
    template: members/account 
    data: page.account # When active data will be taken from the  "/account/" page
  /membership/:
    template: members/membership
    data: page.membership # When active data will be taken from the  "/membership/" page
  
  # Pages
  /archive/:
    controller: channel
    template: archive
    data: page.archive # When active data will be taken from the  "/archive/" page
  /authors/:
    template: authors
    data: page.authors # When active data will be taken from the  "/authors/" page
  /tags/:
    template: tags
    data: page.tags # When active data will be taken from the  "/tags/" page

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: tags:-hash-hide
  
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

As the comment says, when the data property is active means that those routes take data from the corresponding page from the Admin.

Important to note that if the data property is active and the page set does not exist the routing will fail.

Integrations

You can access Integrations in the admin section. Integrations can be used to connect built-in or custom functions to Ghost. How to create a custom integration:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Click Settings > Integrations.
  • Under Custom Integrations, click Add custom integration
  • Provide a name for it
  • Add description
  • Content API Key is generated, which will be needed by the custom function to access Ghost data.

Post Templates

Nikko comes with 5 different post templates:

  • post.hbs - default
  • custom-with-sidebar.hbs - post with sidebar
  • custom-with-table-of-contents.hbs - post with table of contents
  • custom-with-background-image.hbs - post with hero and image as the background
  • custom with-full-width-image.hbs - post with a full-width image (limited to site width)

When a new post is created, automatically the default post template is assigned. You can change it by going to Post Settings, and under the Template section select the template you would like for the post.


Static Pages

Besides having posts, you can also create pages. For this:

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to Manage > Pages.
  • Click New page.
  • Add the page name (which will be the slug/URL for the page as well).
  • Add content for the page.
  • Click Publish.

Customization

The basic customization you can do for the theme is available through the theme-config.hbs file, located in the partials folder.

theme-config.hbs

In this file you will find a config array where you can change the following options:

  • GHOST_URL - set your ghost URL here (will be used for the search)
  • GHOST_KEY - set the Content API Key here from a custom integration (will be used for the search)
  • GHOST_VERSION - set the Ghost Content API version (by default it's v4)
  • GHOST_SEARCH_LIMIT - Search result limit
  • GHOST_SEARCH_IN_CONTENT - Enable or disable searching in post content (by default search is in title and tags)
  • DEFAULT_COLOR_SCHEME - set the default color scheme
    • preference - will detect the user preference (os color scheme)
    • light - the light theme will be set as default, until the user changes it
    • dark - the dark theme will be set as default, until the user changes it
  • ENABLE_FLOATING_HEADER - enable/disable the floating header
    • true - header will disappear when scrolling down and will be pinned when scrolling up
    • false - header will be sticky all the time
  • ENABLE_IMAGE_LIGHTBOX - enable or disable the image lightbox on posts. Possible values:
    • true - image lightbox will be enabled
    • false - image lightbox will be disabled
  • ENABLE_PWA - enable or disable Progressive web app functionality. Check the progressive web app section in the documentation to see what you have to add for this to work. Possible values:
    • true - enabled
    • false - disabled
  • DISQUS_SHORTNAME - set your own disqus_shortname here
  • COVE_ID - if you are using Cove, set your cove id here

You can either change the theme-config.hbs file or you can also use the Ghost Admin to change these values. In Ghost Admin go to Code Injection then in the Site Header section you can change the config like this:

<script>
  CONFIG.ENABLE_FLOATING_HEADER = true;
  CONFIG.GHOST_SEARCH_LIMIT = 5;
  CONFIG.IMAGE_LIGHTBOX = false;
</script>

Besides the CONFIG array you can also change some global css properties:

  • --global-theme-notifications - enable or disable the theme notifications(for signin/signup/subscribe events). Possible values:
    • none - disable
    • flex - enable
  • --global-theme-toggle - enable or disable the theme toggle. Possible values:
    • none - disable
    • flex - enable
  • --global-search - enable or disable the search. Possible values:
    • none - disable
    • flex - enable
  • --global-max-width - Set the site max width. Ex 1280px
  • --global-content-width - Set the post content max width. Ex 40rem
  • --global-radius - Set the radius of the UI elements. Ex 5px
  • --global-header-height - Set the height of the header. Ex 80px
  • --global-progress-bar - enable or disable the progress bar. Possible values:
    • visible - enable
    • hidden - disable
  • --global-scroll-top - enable or disable the scroll top icon/function. Possible values:
    • visible - enable
    • hidden - disable

To change these values you can either change the theme-config.hbs file or you can use the Ghost Admin (go to Code Injection then in the Site Header)

<style>
  body {
    --global-max-width: 1400px;
    --global-radius: 20px;
    --global-header-height: 100px;
  }
</style>

CSS properties

If you need heavy customization regarding styling it's a good approach to check out the theme-development section, on the other hand, if you would like to change some colors and other minor settings, you can also do that from theme-config.hbs or the Ghost Admin.

To overwrite the primary color in Ghost Admin goes to Code Injection then in the Site Header section, add these lines:

<style>
  body {
    --color-primary: #123456; //add your color here
  }
</style>

To check out all other properties you can overwrite here open the _settings.css file in the assets/css/settings directory.

Posts Per Page

You can set it in the package.json of the theme:

"config": {
  "posts_per_page": 12
}

For Nikko the default value is 12, you can change it to any suitable value.


Create a new custom integration and update the theme-config.hbs file.

Nikko uses the Ghost Search Plugin.

To activate the search and make it work, you need to edit the theme-config.hbs file (in the partials folder):

<script>
  ...
  let CONFIG = {
    ...

    /* Replace it with your domain: ghost_host: 'https://yoursite.domain' */
    GHOST_HOST: 'http://localhost:3368',

    /* Settings > Integrations > New Custom Integration. Copy Content API Key. Replace ghost_key below. */
    GHOST_KEY: '55a4116f266aa7f13f51a90d72',

    /* Search result limit */
    GHOST_SEARCH_LIMIT: 8,

    /* Enable/disable Search in post content */
    GHOST_SEARCH_IN_CONTENT: false,

    ...
  }
</script>

You will have to replace the GHOST_HOST and GHOST_KEY values.

  • GHOST_HOST should be the domain of your blog (ex. 'https://example.com').
  • GHOST_KEY has to be generated by creating a custom integration in the admin panel.
    • Create a new custom integration and name it Ghost Search
    • Copy the generated Content API key
    • Add this key in theme-config.hbs in the GHOST_KEY section.
  • GHOST_SEARCH_LIMIT You can change the maximum limit of search result, which by default is set to 8.
  • GHOST_SEARCH_IN_CONTENT You can also enable search in the post content, as by default the search is performed in title and tags.
Make sure your URL doesn't end with a /.

Other possible options to add Search to Ghost CMS Themes.


Google Fonts

Nikko comes with Google Fonts integrated, using the 'Inter' font. To change the fonts you have to change the default.hbs file.

<link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" 
      as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin>

{{!-- No Js --}}
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</noscript>

Go to Google Fonts and choose the font and styles you would like. Then click Embed and copy the link provided and replace the current one in default.hbs.

Then you have to overwrite the settings in CSS, here you have two options:

  1. Code injection

Overwrite the font setting in Ghost Admin. Go to Code Injection then in the Site Header section add these lines:

<style>
  body {
    --font-sans: 'your font name';
  }
</style>
  1. Modify the CSS file

Open settings.css file located in assets/css/settings folder. Replace the font setting with your new font:

--font-sans: 'Inter';

Build the assets (check theme development) and everything should be ready.

Check out this tutorial for a more detailed guide about Google Fonts with Ghost.


Home Page

The home page is customizable, if you want to make changes to the layout you have to change the index.hbs file.

Nikko comes with 4 different home layouts:

  • index.hbs - hero CTA for subscription, a two-column layout formed by posts and sidebar, a list of authors and tags
  • index2.hbs - personal profile style, content from a custom page (using internal tag #profile), a list of tags
  • index3.hbs - featured posts slider, a 3 column post-card layout, a list of authors and tags
  • index4.hbs - intro overlay, featured posts slider, a simple one-column layout formed by posts, a list of tags

If you want to set one of the alternatives as your default home page, open the file copy the code and paste it into index.hbs replacing the current code.

If you use the featured section and want to remove the featured posts from the rest of the home page, you can do that by modifying the routes.yaml file. More specifically the collections section, adding the filter:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: featured:false

The postcard appearance can be adjusted with several properties that can be passed to the post-card.hbs helper:

{{> post-card 
  show_img=true    
  show_access=false
  show_excerpt=true
  is_reversed=false
  class="col"
}}
  • show_img - to show/hide the image of the postcard
  • show_access - to show/hide the access level of the post (Public, Members, Paid Members)
  • show_excerpt - to show/hide the excerpt
  • is_reversed - to have a reversed style card
  • class - to pass any other class to the post-card (col - will modify the postcard layout to be column-based)
Personal home page

If you opt for this home page (index2.hbs) then the most important thing is to create a new page where the data for the home page will be taken from.

Add #profile tag to the created page.

On the page, the hero section will take the following data from the created page:

  • feature_image - page image will be used as the main image of the hero section
  • title - the title of the page will be displayed in the hero section
  • custom_excerpt - the excerpt will be used as the description right before the subscribe form
  • content - the content of the page will be displayed after the hero section.

The hero-profile.hbs partial is used to render the personal hero section.

The content from the demo:

<!-- Stats section -->
<div class="row m-b">
  <div class="col-xs-12 col-sm-6 col-md-3 m-b">
	<div class="stat flex flex-col flex-cc text-center radius p bg-acc-1 h-100">
        <div class="stat_count text-20 fw-800 text-gradient">10+</div>
        <div class="stat_text text-acc-3">Years of experience.</div>
    </div>
  </div>
    
  <div class="col-xs-12 col-sm-6 col-md-3 m-b">
	<div class="stat flex flex-col flex-cc text-center radius p bg-acc-1 h-100">
        <div class="stat_count text-20 fw-800 text-gradient">80+</div>
        <div class="stat_text text-acc-3">Successful projects.</div>
    </div>
  </div>
    
  <div class="col-xs-12 col-sm-6 col-md-3 m-b">
	<div class="stat flex flex-col flex-cc text-center radius p bg-acc-1 h-100">
        <div class="stat_count text-20 fw-800 text-gradient">50+</div>
        <div class="stat_text text-acc-3">Satisfied customers.</div>
    </div>
  </div>
    
  <div class="col-xs-12 col-sm-6 col-md-3 m-b">
	<div class="stat flex flex-col flex-cc text-center radius p bg-acc-1 h-100">
        <div class="stat_count text-20 fw-800 text-gradient">100%</div>
        <div class="stat_text text-acc-3">Professional & dedicated.</div>
    </div>
  </div>
</div>



<!-- What I do section -->
<div class="section__title m-b">What I do</div>
<div class="row m-b">
    <div class="col-xs-12 col-md-4 m-b">
       	<div class="card flex flex-col p-lg h-100">
            <h3 class="card__title">UX/UI Design  🎨</h3>
            <div class="card__description flex-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. 
            </div>
            <a href="https://nikko.bironthemes.com/" class="card__cta btn btn--xs">Read more</a>
        </div>
    </div>
    
    <div class="col-xs-12 col-md-4 m-b">
		<div class="card flex flex-col p-lg h-100">
            <h3 class="card__title">Web Development  πŸ–₯️</h3>
            <div class="card__description flex-1">
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <a href="https://nikko.bironthemes.com/" class="card__cta btn btn--xs">Read more</a>
        </div>
    </div>
    
    <div class="col-xs-12 col-md-4 m-b">
		<div class="card flex flex-col p-lg h-100">
            <h3 class="card__title">Ghost Themes  πŸ‘»</h3>
            <div class="card__description flex-1">
                Gravida rutrum quisque non tellus orci ac auctor. Consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat. Aliquet nec ullamcorper sit amet risus. Amet tellus cras adipiscing.
            </div>
            <a href="https://nikko.bironthemes.com/" class="card__cta btn btn--xs">Read more</a>
        </div>
    </div>
</div>



<!-- About me section -->
<div class="section__title m-b">About me</div>
<div class="row">
    <div class="col-xs-12 col-md-6 m-b-lg">
    <p class="p-lg bg-acc-1 text-acc-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <p class="p-lg bg-acc-1 text-acc-2 m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
</div>
    <div class="col-xs-12 col-md-6">
        <details>
  <summary>1. Velit aliquet sagittis id consectetur purus?</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim enim sit amet venenatis urna.</p>
</details>
        
        <details>
  <summary>2. Ornare lectus sit amet est placerat in egestas?</summary>
  <p>Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Platea dictumst quisque sagittis purus. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. </p>
</details>
        
        <details>
  <summary>3. Euismod elementum nisi quis eleifend quam?</summary>
  <p>Ornare lectus sit amet est placerat in egestas erat imperdiet. Enim nunc faucibus a pellentesque. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus.</p>
</details>
        
        <details class="m-b-0">
  <summary>4. Morbi non arcu risus quis varius quam quisque?</summary>
  <p>Feugiat in fermentum posuere urna nec tincidunt praesent semper. Tortor id aliquet lectus proin. Sit amet commodo nulla facilisi. Eros donec ac odio tempor orci dapibus.</p>
</details>
    </div>
</div>

Home page hero

The hero-cta.hbs partial is used to render the hero section on the default home page.

If you are looking to change the content of the hero section you have to adapt the text in the file, which is in the partials directory. You can change the appearance of the section with some parameters that the helper comes with:

{{> hero-cta 
  show_img=true 
  img_bg=true
  class="bg-gradient"
  form_class="is-joined"
}}
  • show_img - show an image or not (image is the site cover)
  • img_bg - should the image be a background (cover)
  • class - pass any other class to the hero (such as a background)

The section also contains the subscribe form to sign up as a member.


To change the content of the sidebar you have to edit the sidebar.hbs file in the partials folder. By default the theme contains the following sections:

  • subscribe/upgrade section (on posts only)
  • featured posts (on posts only)
  • latest posts - sorted by published date (on posts only)

Custom Pages

Nikko comes with several custom pages by default:

  • Tags Page
  • Authors Page
  • Archive Page
  • Membership Page

To add these pages to the navigation, please check the Navigation section above.

Important: To activate these pages, first upload the routes.yaml file. Check out the routes section for more info.
Tags Page

To create the Tags page, do as follows:

  • Create a new page and call it Tags.
  • Make sure the Page URL is tags.
  • Click Publish.
Authors Page

To create the Authors page, do as follows:

  • Create a new page and call it Authors.
  • Make sure the Page URL is authors.
  • Click Publish.
Archive Page

The archive page will list all posts starting from the latest, grouped by year. To create the Archive page, do as follows:

  • Create a new page and call it Archive.
  • Make sure the Page URL is archive.
  • Click Publish.
Membership Page

To create the Membership page, do as follows:

  • Create a new page and call it Membership.
  • Make sure the Page URL is membership.
  • Click Publish.

Translation

Nikko supports Ghost i18n and it comes with translations for the following languages:

  • en for English
  • de for German
  • fr for French
  • es for Spanish
  • it for Italian
  • pr for Portuguese

To change the publication language to one of the available languages check out this guide.

Editing the translations

The translation files are stored in the locales a folder within the theme directory.

|-- locales
|   |-- de.json
| |__en.json
| |__es.json
| |__fr.json

Open up the file for the language you want to edit. Example en.json:

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

Each line consists of a key-value pair.

"key": "value"

The key is on the left side and it should not be changed (it's the same in all the files) and the right value which you can adapt if necessary.

If you have suggestions to improve the translations or adding a new language, drop us a line.

Adding a new language

To add a new language you have to create a new translation file with the language code of the desired language.

For example, if you want to create a new translation for the Hungarian language you have to create hu.json within the locales folder.

And add the translations for each key value.

For more details check the Official Ghost Documentation.


The social media links are stored in a partial file partials/social-links.hbs.

Ghost supports Facebook and Twitter social accounts, to change them do the following

  • Log in to your publication admin section at yourblog.com/ghost/signin
  • Go to General from the admin menu
  • Click Expand under Social Accounts, and enter the URLs for your Facebook and Twitter.
  • Click Save settings

To edit the other social links follow the steps below. Open up the social-links.hbs file and change the href value to your profile's URL for that specific social platform.

  ...
  {{!-- Instagram --}}
  <a class="social-links__item instagram"
     href="https://instagram.com" target="_blank" title="Instagram" aria-label="Instagram">
    {{>icon name="instagram"}}
  </a>
  ...
</div>

For example, to change the Instagram link, you have to change the existing href value:

href="https://instagram.com"

Add your instagram account link, for example:

href="https://instagram.com/bironthemes"

Comments

Nikko comes with Cove and Disqus. To change the default comment system you will have to adapt the comments.hbs file in the partials directory. In this file, the cove_comments are included using {{> comments-cove.hbs}} you can change that to {{> comments-disqus.hbs}} switch to Disqus instead.

Cove

Cove is a commenting platform built on top of Ghost’s Memberships feature.

For the comments to work, you have to create an account at cove.chat and change the theme-config.hbs file in the partials folder:

  ...
  // Basic Config
  let CONFIG = {
    ...
    /* To use Cove, replace the below id with your cove publication id*/
    COVE_ID: '9a56f94608ec8169ab6bb8asfdsffa'
    ...
  }
</script>

Replace the value for the COVE_ID with the one from your Cove account.

Disqus

Nikko comes with Disqus comments as well.

Make sure you have registered your website with Disqus and you know your disqus_shortname.

Open theme-config.hbs file located in partials folder. Change the biron-demo value to match your Disqus account shortname.

<script>
  ...
  // Basic Config
  let CONFIG = {
    ...
    /* Replace 'biron-demo' with your disqus account shortname */
    DISQUS_SHORTNAME: 'biron-demo',
    ...
  }
</script>

That's all, Disqus comments should work now.

If you don't want comments at all you have to delete the following line from the default post template as well as the custom post template files:

{{!-- Include Comments --}}
{{> comments}}
If you want to remove the comment for a specific post you can add #nocomment tag to that post.

Icons

All icons used in the theme are SVG icons, sourced from assets/icons/icon-sprite.svg file.

There is an icon.hbs partial to help to add icons. This partial has to be called with the icon name, size. Example:

{{>icon name="user" size="sm"}}

This means that it is expected that in the icon-sprite.svg there is section with id #user containing the SVG code for the user icon:

<symbol id="user" viewBox="0 0 24 24">
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  <circle cx="12" cy="7" r="4"></circle>
</symbol>

If you want to add new icons, you can go to tabler icons, select the icon you want to add copy the code and open the icon-sprite.svg. Create a new <symbol> with the relevant id and inside add the code.

The id of the `symbol` should be used when you are using the icon partial

Syntax highlighting

Nikko comes with built-in syntax highlight functionality, provided by Prism.js. To optimize this integration and not load the script and style all the time, you can activate it using an internal tag.

If needed the integration can be changed or extended to other languages or prism tools(default.hbs):

{{!-- Syntax highlighting plugin - can be activated using #syntax-highlight internal tag --}}
{{#post}}
  {{#has tag="#syntax-highlight"}}
    {{!-- Preloading --}}
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" as="style">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" as="script">

    {{!-- Script and style --}}
    <link rel="preload stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
      as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin/>
    <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
  {{/has}}
{{/post}}
Add the #syntax-highlight tag to any post to activate the code highlighting.

Google Analytics

To add Google Analytics to Ghost follow this tutorial from our blog.


Progressive Web App

Progressive Web Apps allow your website to be installed by anyone, anywhere, on any device with a single codebase.

To enable this feature, you have to change the theme-config.hbs:

<script>
  ...
  // Basic Config
  let CONFIG = {
    ...
    /* Enable PWA - Progressive Web App */
    ENABLE_PWA: true,
    ...
  }
</script>

Set the ENABLE_PWA to true.

You have to upload three icons in the assets folder:

  • icon-48x48.png - icon must be of size 48x48px
  • icon-192x192.png - icon must be of size 192x192px
  • icon-512x512.png - icon must be of size 512x512px

In the default.hbs uncomment the code right below the {{!-- PWA --}}:

{{!-- PWA --}}
{{!-- <meta name="theme-color" content="{{@site.accent_color}}">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="{{asset 'icon-192x192.png'}}"> --}}

Next, open the manifest.webmanifest file:

{
  "name":"Nikko Ghost Theme",
  "short_name":"Nikko",
  "description":"Nikko - Newsletter Ghost Theme",
  "lang":"en",
  "start_url":"/",
  "background_color":"#ffffff",
  "display":"standalone",
  "theme_color":"#f05942",
  "icons":[
     {
        "src":"/assets/icon-48x48.png",
        "sizes":"48x48",
        "type":"image/png"
     },
     {
      "src": "/assets/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/assets/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any maskable"
    }
  ]
}

Replace all the relevant information like name, short_name and description. Make sure the icon names are correctly linked.

Create a new page with URL: /offline/

That's it.

Visit our blog post for more information about Progressive Web App for Ghost Themes.


Theme Development

Nikko is developer-friendly, if you need to make advanced customization you will take advantage of the Gulp tasks that are set up for compiling Javascript and PostCSS.

All the assets are combined and minified for better speed and performance. To customize the theme make sure you have Node.js and npm installed.

Tutorial on How to Install Ghost.

Run the following commands in the Nikko theme directory:

npm install

This will install all the dependencies for the theme

Then run:

gulp

This will compile PostCSS and javascript and will watch for changes. So when you edit .hbs, .css or .js file the change will trigger the gulp watch task and this will compile the assets with your changes.

If you want to compile CSS or javascript separately, you can run:

gulp css

For compiling CSS files.

Or:

gulp js

For compiling javascript files.

You also have the option to use Code Injection to do customizations. For example, if you want to change the brand color of the theme, add the following code in the Blog Header section.

body {
    --color-primary: pink;
}

Credits

Nikko uses the following packages/plugins:

Images are not included in the download files!


Support

Don't hesitate to contact us if you have any suggestion or need help.

Contact

Change Log

v1.1.0 - 23 Jul 2021
✨ added the announcement feature
✨ added new CONFIG option to open external links in posts in a new tab
✨ added support for feature_image caption & alt
✨ improved theme notifications
πŸ› fixed image cards with links (also image gallery)

New files:
[+] assets/css/components/_announcement.css
[*] partials/announcement.hbs

Changed files:
[*] partials/theme-config.hbs
[*] partials/notifications.hbs
[*] partials/subscribe-form.hbs
[*] partials/post-card.hbs
[*] partials/post-hero.hbs
[*] default.hbs

[*] assets/css/elements/_input.css
[*] assets/css/components/_hero.css
[*] assets/css/components/_toc.css
[*] assets/css/components/_notification.css
[*] assets/css/components/_menu.css
[*] assets/css/components/_ghost-components.css
[*] assets/css/app.css
[*] assets/js/script.js

[*] locales/de.json
[*] locales/en.json
[*] locales/es.json
[*] locales/fr.json
[*] locales/pt.json
[*] locales/it.json
[*] locales/tr.json

[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.js (generated file)
[*] package.json
v1.0.2 - 7 Jul 2021
πŸ› switched to icon sprite instead of individual icons (for ghost 4.9.0 compatibilty)
πŸ› fixed a small bug for search bar input (when higher rounding is set)
πŸ› improved header menu styling
πŸ› fixed post-access-cta width
πŸ› switched hero subscribe behavior (from "subscribe" to "signup")

New files:
[+] assets/icons/icon-sprite.svg

Changed files:
[*] partials/hero-cta.hbs
[*] partials/icon.hbs

[*] assets/css/components/_ghost-components.css
[*] assets/css/components/_header.css
[*] assets/css/components/_icons.css
[*] assets/css/components/_post.css
[*] assets/css/components/_search.css

[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.js (generated file)
[*] package.json

Deleted files:
[-] partials/icons/* (the icons directory in partials)
v1.0.1 - 22 Jun 2021
πŸ› fixed post-card tag - reading time spacing
πŸ› fixed sidebar subscribe radius behavior
πŸ› fixed list spacing in below headings
πŸ› fixed with sidebar template border
πŸ› set theme notifications on by default

Changed files:
[*] custom-with-sidebar.hbs
[*] partials/post-card.hbs
[*] partials/theme-config.hbs

[*] assets/css/components/_post.css
[*] assets/css/components/_sidebar.css
[*] assets/css/components/_states.css

[*] assets/dist/app.min.css (generated file)
[*] assets/dist/app.min.js (generated file)
[*] package.json
v1.0.0 - 10 Jun 2021
[+] Initial release