Shuttle

Ghost theme

About

Supports Ghost version 4.x

Theme Installation

Follow these steps to install your theme on Ghost:

Login to your ghost admin dashboard (example.com/ghost).
Click the settings icon at the bottom of the left-hand side.
Go to Themes and click Upload a theme.
Select the theme file.
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 v12 or v14 installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of nodejs on your machine.)

Once you have nodejs 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

Memberships

Shuttle theme has full support for members feature of Ghost.

To enable a custom subscription plans page similar to the one created here, open up your Ghost dashboard and upload the custom routes.yaml file present in the theme folder. Once the file is uploaded you can visit /membership/ to see the page.

Search

To activate the search follow these steps:

Step 1: Edit default.hbs file

Open up the default.hbs file in theme.

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

let siteSearch = new GhostSearch({
    key: '2225101d563aedec7edd20f7ce', // This is just a demo key. Replace the key with a real one. See Step 3.
    host: 'https://shuttle.stylesheets.dev', // This is just a demo host. Replace the host with a real one. See Step 3.
    input: searchInputField,
    results: resultsContainer
});

Update the values in key and host. To get the key and host values, you need to create a custom integration in Ghost. Once you create it, you'd get the Content API Key, and API URL.

Step 2: Edit header.hbs file

Open up the partials/header.hbs file and uncomment the following lines of code

{{!-- Search: Mobile --}}
{{!-- 
<button onclick="toggleSearch()" class="header-search icon">
	{{> "icons/search"}}
</button>
--}}

{{!-- Search: Desktop --}}
{{!-- 
<div class="search">
	<button onclick="toggleSearchInNav()" class="icon">
		{{> "icons/search"}}
	</button>
	<input id="nav-search-field" class="" placeholder="Search" autocomplete="off" />
	<div class="nav-search-results" id="nav-search-results"></div>
</div> 
--}}

That's it. You can now zip the theme folder and upload it to your site.

Editor's Pick Section

The featured posts will be shown in the editor's pick section.

Note: Editors' Pick section will remain invisible if you have no featured posts.

Disqus Comments

To enable disqus comments on the theme, follow these steps:

Open up the post.hbs file in any text editor.
Look for the comments section.

Add the following code snippet in the comments section.

   <h1 class="comments-header">Comments</h1>
   <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>

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

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.