Smart: A Ghost Theme

Smart is a theme for the open-source CMS, Ghost. It is compatible with >=Ghost v4.

For instructions on how to install or use Ghost, see the official documentation.

Demo

See the theme in action. Screenshots available below.

Download and Install

Download Smart.zip from the Releases page

How to Use This Theme

The instructions below explain features included with this theme that build on Ghost's functionality.

Out of the box, this theme offers the following features:

Performance & accessibility (a11y) forward
Responsive design
Search
Image zoom on posts
Responsive tables on posts
Lazy loaded images
Share bar with ability to copy URL to clipboard
Contact form (with Formspree)
Easy to remove membership functionality
Add extra social media accounts via the second navigation bar
Custom tags page
Dark mode toggle

Configure Your Site

If you're using the membership functionality, it's recommended that you disable the Portal button, as it clashes with the bottom share bar on mobile.
This theme includes a dark and light mode. It will automatically switch depending on the user's preference, as set either in their system or on your site. Currently, Ghost does not support custom theming for their portal UI (which will appear with a white background even when dark mode is active). Therefore, it is recommended that you choose a dark color for your accent color.

Add Search

To enable search, go to your Ghost admin dashboard ("https://yoursite.com/ghost"). In the sidebar, go to Integrations and click "Add Custom Integration." Call it "search" (the name's not important). Copy your Content API key. Click the cogwheel ⚙️ to go to Settings. Go to Code injection. Add the following code to your site header (case sensitive):

<script>const SEARCH_API = 'THE CONTENT API KEY YOU COPIED EARLIER';</script>

Save the code and refresh your site. A search icon should now appear.

Add Social Media Icons to Your Footer

Go to Settings > Navigation. Add additional social media accounts in the Secondary Navigation section. In the fields on the left side, enter the name of the social media service. The social media service name must match the name listed below. On the right side, enter the URL to your social media profile.

Supported Social Media Accounts

Facebook
Github
Gitlab
Instagram
LinkedIn
RSS
Twitch
Twitter
Website (globe icon suitable for representing sources not shown here)
YouTube

Don't see your social media service? Get in touch.

Add a Tags Page

Go to Pages. Add a page called "Tags." You can add a custom cover image and additional text if desired. Ghost will use the custom template to render all your tags in alphabetical order, showing the number of posts for each tag. Tag information is customizable via the Tags menu in the Ghost admin.

Learn more about Tags

Add a Contact Form

Create a Formspree account Ghost doesn't support forms natively. Including a contact form requires the use of a service like Formspree. Once you create your form on Formspree, copy the custom URL for use in step three.
Create a new page for the contact form. You can call it whatever you want.
Add an HTML card to the new page, using the code below. Remember to add the custom URL you copied from Formspree.

<form
  class="sm-form"
  action="ENTER YOUR CUSTOME URL FROM FORMSPREE"
  method="POST"
>
  <label class="sm-form__label" for="name">Name</label>
  <input
    class="sm-form__input"
    id="name"
    name="name"
    type="text"
    required
    autofocus
  />

  <label class="sm-form__label" for="email">Email</label>
  <input class="sm-form__input" id="email" name="email" type="text" required />

  <label class="sm-form__label" for="message">Message</label>
  <textarea
    class="sm-form__input"
    id="message"
    name="message"
    required
  ></textarea>

  <button class="sm-button--color" type="submit" value="Send">Send</button>
</form>

Learn more about integrating Formspree into Ghost

Remove Membership

Remove Sign Up and Sign In buttons by adding this code to your Site Footer. This option is accessible via Settings > Code injection

<script>
    function removeMembership() {
        const memberElements = document.querySelectorAll(".sm-members");
        memberElements.forEach(el => el.remove())
    }

    removeMembership()
</script>

Supported Browsers

This theme supports the last 2 versions of browsers. It does not actively support IE.

fr0gs / smart