Chronicles
Ghost theme
Supports Ghost version
3.x, 4.x
.- 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.
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
Chronicles uses search service from SiteSearch360, which is a recommended service by Ghost. To active it, follow these steps:
- 1.
- 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.
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.
- 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.
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.
Last modified 2yr ago