Gonjiam Documentation
Theme installation Theme config options
Third-party scripts
Typekit and Google Fonts Google Analytics Disqus Comments MailChimp
Support

v2.0.1
Last update: 04 Apr 2019

@HauntedThemes HauntedThemes

Theme installation There are 2 ways to install a Ghost theme

Manually upload theme folder inside Ghost

  1. Locate the theme directory within the download files, which can be found at:

    gonjiam-master/gonjiam.

  2. Login to FTP/SFTP of your blog of your provided hosting service.
  3. Navigate to the /content/themes/ directory within your Ghost installation.
  4. Upload the gonjiam directory found in step one into the remote /content/themes/ directory.
  5. Restart Ghost.
  6. Login into your Ghost admin panel. This can be found at yourdomain.com/ghost.
  7. Navigate to the Settings > Design.
  8. In Themes section, click Activate where is says gonjiam.
Or

Upload theme archive from Ghost Dashboard

  1. Login into your Ghost admin panel. This can be found at yourdomain.com/ghost.
  2. Navigate to the Settings > Design.
  3. In Themes section, click Upload and select within the download files:

    gonjiam.zip.

  4. After the theme is uploaded click Activate now.

After activation

  1. Navigate to the Integrations > Custom integrations.
  2. Set name: Haunted Themes
  3. You will need to do 2 more simple steps to authenticate to Ghost Content API.
    1. Copy Content API Key from the integration that you set and put it in: /assets/js/main.js at line 18.
    2. Get the host of your current Ghost instalation. This should be your admin domain. Your admin domain can be different to your main domain. Using the correct domain and protocol are critical to getting consistent behaviour, particularly when dealing with CORS in the browser. All Ghost(Pro) blogs have a *.ghost.io domain as their admin domain and require https. Make sure you remove the last / from the url.

Content API Authentication is mandatory in order to use the theme properly!

Theme config options

These options can be found within the file /assets/js/main.js inside the theme. These are all located on the first section of the file. Replace the current values with your required settings.

Default values 

var config = {
    'share-selected-text': true,
    'load-more': true,
    'infinite-scroll': false,
    'infinite-scroll-step': 999,
    'disqus-shortname': 'hauntedthemes-demo'
};

'share-selected-text'

Has 2 posible options: true or false.
When is set to true a user has the posibility to select a portion of text from a post and share it on Twitter.

'load-more'

Has 2 posible options: true or false.
When is set to true the pagination will be replaced with a load more button.

'infinite-scroll'

Has 2 posible options: true or false.
When is set to true the posts will be automatically loaded when the user scrolls.

'infinite-scroll-step'

Set the number of iteration before the Load more posts button shows. This way the footer doesn't become useless.

'disqus-shortname'

Enter your Disqus account shortname here to enable comments for blog posts.

Posts per page

You can define posts_per_page inside package.json. This will set the number of posts that will load each iteration.

Third-pary scripts

Typekit and Google Fonts

Gonjiam by default uses Google fonts.

  1. Roboto.
    1. Regular
    2. Bold

Gonjiam also has been customized to support these fonts from Typekit:

  1. Azo Sans.
    1. Light
    2. Light Italic
    3. Regular
    4. Italic
    5. Medium
    6. Medium Italic
    7. Bold
    8. Bold Italic

Google Analytics

The first step to setting up tracking is to create an Analytics property. Creating an Analytics property generates a tracking ID and a JavaScript tracking code snippet.
The Javascript code will look something like this:

<!-- Google Analytics -->
<script>  
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Replace UA-XXXXX-Y with your tracking ID.

Then you'll have to put the code inside Ghost:

  1. Navigate to the Settings > Code injection.
  2. Paste your embed code inside Blog Header textarea and click Save.

Disqus Comments

You will need to signup for a Disqus account. Once you have created an account and setup your shortname, enter it into the theme configuration which can be found within the file /assets/js/main.js inside the theme.

You will need to write your shortname right to the 'disqus-shortname' variable.

MailChimp

If you use MailChimp to manage an email subscription list, you can past your embed code into the partials/theme_footer.hbs file. To get the code you should follow the next steps:

  1. Login to your MailChimp dashboard, and navigate to Lists.
  2. Select the mailing list you want to use.
  3. Select Signup Forms -> Embedded Forms.
  4. Choose the Naked style.
  5. Uncheck Include form title, Show interest group fields and Show required field indicators.
  6. Copy the provided embed code. Edit partials/theme_footer.hbs file and replace: 
    {{subscribe_form
    form_class="gh-signin"
    input_class="gh-input"
    button_class="btn"
    placeholder="Your email address"
}}

    with your code.

Support

If you have any questions, bug reports or features requests, please contact us at support@hauntedthemes.com or feel free to chat with us on hauntedthemes.com.