Chronicles

Ghost theme

About

Supports Ghost version 3.x, 4.x.

Theme Installation

• Log in to the Ghost dashboard of your blog by visiting yourblog.com/ghost.

• Go to Design in the sidebar, and upload your theme there.

• Once uploaded. Click on Activate now button to activate the theme immediately or Close if you want to activate it later.

Theme Development

The theme uses Gulp and Node.js for development purposes. You'll need Node.js v10.15.0 installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of node on your machine.)

Once you have node installed, run the following commands from the theme root directory.

# To install node modules
npm install

# To compile and watch for changes in SCSS and JS files
npm run dev

Now you can edit the SCSS and JS files in /assets/src/ , which will be compiled to /assets/built/ automatically.

To generate a production ready theme zip file, run the following command. It will minify all the CSS & JS files and package the theme into dist/<theme-name>.zip .

# To generate production ready theme zip file.
# check the /dist folder after completion. 
npm run build

Activate Search

Chronicles uses search service from SiteSearch360, which is a recommended service by Ghost. To active it, follow these steps:

1. Signup at SiteSearch360, and add your blog.
2. Open the default.hbs file present in theme.

   1. Look for the following code snippet at the end of the file:

      {{!-- Remove this comment to activate search
      
      <script type="text/javascript">
          var ss360Config = {
              siteId: "<YOUR-SITE-ID-HERE>",
              searchBox: {
                  selector: "input#search-field"
              }
          }
      </script>
      <script src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js" async></script>
      <!-- End of Site Search 360 Scripts -->
      
      Remove this comment to activate search --}} 

   2. Remove the comments (i.e. line 1 and 14 shown above.)

   3. Add your Site Id.

   4. Save the file.

3. Go to partials/header.hbs file and make the following changes:

   1. Look for the following line:

      {{!-- {{> "search"}} --}} 

   2. Remove the comments by deleting the {{!-- and --}}.

   3. Save the file.

4. Go to partials/floating-header.hbs file and make the following changes:

   1. Look for the following line:

      {{!-- {{> "search"}} --}} 

   2. Remove the comments by deleting the {{!-- and --}}.

   3. Save the file.

5. Done! Zip the theme folder and upload it to your site.

Editor's Pick Section

To add a post in the editors pick section, you need to add the internal tag #editors-pick to the post.

Note: Editors Pick section will remain invisible if it has no posts.

Activate Disqus Comments

1. Open up the post.hbs file in any text editor.

2. Look for the comments section.

3. Add the following code snippet in the comments section.

      <section class="post-comments">
        <div id="disqus_thread"></div>
        <script>
            var disqus_config = function () {
                this.page.url = '{{url absolute="true"}}';
                this.page.identifier = 'ghost-{{comment_id}}';
            };
            (function() {
                var d = document, s = d.createElement('script');
                s.src = 'https://<YOUR DISQUS SHORTNAME>.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
            })();
        </script>
      </section>

4. Don't forget to modify the s.src = 'https://<YOUR SITE'S DISQUS SHORTNAME>.disqus.com/embed.js'; to your disqus url.

5. Done! Zip the theme folder and upload it your site.

Add Social Media Icons

Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files.

In Footer.hbs

<a href="" target="_blank">
   {{> "icons/dribbble"}}
</a>

In Author.hbs

<a class="link-with-svg" href="" target="_blank" rel="noopener">
      <span class="link-svg">
      {{> "icons/dribbble"}}
      </span>
      <span class="link-text">Dribbble</span>
</a>

Icons for Behance, Dribbble, 500px, Github, Gmail, Instagram, Linkedin, Medium, Pinterest, Reddit, RSS, Tumblr, & Youtube are included in the theme. If you require more icons, you may visit Simple Icons and download the required icons.

Links

Demo / Purchase