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

v2.0.1
Last update: 21 Feb 2019

@HauntedThemes Haunted Themes

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:

    haihara-master/haihara.

  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 haihara 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 haihara.
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:

    haihara.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': 3,
    'disqus-shortname': 'hauntedthemes-haihara' // Read below how to set Disqus url for Latest Comments and Popular Threads
};

'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 button shows. This way the footer doesn't become useless.

'disqus-shortname'

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

This variable will not set the Disqus url for Latest Comments and Popular Threads in sidebar.hbs. You will have to manually edit the url for each on in sidebar.hbs at line 38 and 42. Replace hauntedthemes-haihara with the same value that you pu on disqus-shortname.

Disqus need at least 30 minutes to show the comments and posts in the script.

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

Haihara by default uses Google fonts.

  1. Roboto for paragraphs.
  2. Roboto Condensed for headings.
  3. Montserrat for tags.

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

  1. Sofia Pro for paragraphs.
    1. Regular
    2. Regular Italic
    3. Medium
    4. Medium Italic
    5. Bold
    6. Bold Italic
  2. Ropa Soft Pro for headings.
    1. Regular
    2. Italic
    3. Bold
    4. Bold Italic
  3. Dienstag for tags.
    1. Regular
    2. Oblique
    3. Black
    4. Black Oblique

To use the above fonts you have to choose the fonts, create a kit and get the embed code.
Your embed code will look something like this:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Replace xxxxxxx to your kit ID.

After you have your embed code you'll have to:

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

If everything is ok with Typekit fonts you should remove Lora and Cabin fonts from partials/theme_head.hbs. Simply comment or remove the line.

Typekit is a subscription service for fonts. In order to use Typekit fonts you must have a paid account.

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.

This variable will not set the Disqus url for Latest Comments and Popular Threads in sidebar.hbs. You will have to manually edit the url for each on in sidebar.hbs at line 38 and 42. Replace hauntedthemes-haihara with the same value that you pu on disqus-shortname.

Disqus need at least 30 minutes to show the comments and posts in the script.

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.