Auden Documentation

Install Theme

• Log in to your publication admin section at yourblog.com/ghost/signin
• Go to Settings > Design from the admin menu
• Under the Themes section click Upload a theme
• Click inside the upload box to select a Auden.zip, or drag-and-drop the Auden.zip into the upload box
• If you want to activate the theme immediately click Activate Now or Close if you want to do it later

Publication Settings

Some basic settings for your publication:

Language

To set the publication language follow the steps below.

• Log in to your publication admin section at yourblog.com/ghost/signin
• Go to General from the admin menu
• Under Publication Language, click Expand and set the language/locale to be used on the site. The default is set to English (en).

• Click Save settings

Language Code Reference

Icon

To Upload a new icon follow these steps:

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Design under the settings menu.
• Under Brand > Publication icon, click Upload Image and select your icon
• Finally click Save settings

Logo

To Upload a new logo follow these steps:

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Design under the settings menu.
• Under Brand > Publication logo, click Upload Image and select your logo
• Finally click Save settings

Cover

To Upload a new cover image follow these steps:

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Design under the settings menu.
• Under Brand > Publication cover, click Upload Image and select your cover image
• Finally click Save settings

Navigation

To add menu items to your publication, follow the steps below.

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Navigation and enter a label for the menu item in the label field
• In the URL field, enter the destination for the menu item to link

• Click Save

Members

Auden completely supports the Ghost Members feature. To activate the feature follow the steps below.

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Settings > Membership.
• Set the Subscription access and other settings made available by Ghost

Besides this configuration, you also have to upload the routes.yaml file (you can find it in the root folder of the theme).

To access the overview of members click Members from the admin menu.

Routes

Routing is the system which maps URL patterns to data and templates within Ghost. Routing for members is not added by default, so an upload is needed. Basic configuration with member features enabled:

routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account

collections:
  /:
    permalink: /{slug}/
    type: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Integrations

You can access Integrations in the admin section. Integrations can be used to connect built-in or custom functions to Ghost. How to create a custom integration:

• Log in to your publication admin section at yourblog.com/ghost/signin
• Click Settings > Integrations.
• Under Custom Integrations, click Add custom integration
• Provide a name for it
• Add description
• Content API Key is generated, which will be needed by the custom function to access Ghost data.

Customization

Custom Theme Settings

The settings are split in 2 categories (Site-wide, Post) Here are the available settings:

• Site-wide settings
  • Secondary color - you can change the secondary color (primary color is under the Brand settings -> Accent color)
  • Default color scheme - it can be System(default), Light and Dark
  • Typography - There are 5 different fonts you can select
  • Use portal links - You can opt for the Portal "sign in" and "sign up" popups, or dedicated pages from the theme
  • Search url - Paste here your Custom Integration API Url (more about the search)
  • Search key - Paste here your Custom Integration Content API Key
  • Search in content - enable search in content
  • Enable scroll to top - enable scroll to top button
• Homepage settings
  • Homepage featured on top - you can set whether the latest featured post appears on the top or simply the latest post
  • Homepage layout - change the layout from having grid with sidebar, list with sidebar or simply a grid of posts
  • Homepage topics - display the tags or not (tags with the most posts)
  • Sidebar banner - add a banner to the sidebar
  • Sidebar banner link - add a banner link
• Post settings
  • Enable image lightbox - enable the image lightbox in posts
  • Enable progress bar - enable the progress bar in posts
  • Open external links in new tab - Enable opening external links in a new tab

Content API

As mentioned in the Requirements section, this theme uses the Content API v3, so in order to take advantage of all the theme features make sure the Content API v3 is used, this is set in the theme by default.

You can check this in the theme's package.json file:

{
  "name": "...",
  "description": "...",
  "demo": "...",
  "version": "...",
  "engines": {
    "ghost": ">=4.0.0",
    "ghost-api": "v4"
  },
  ...
}

Posts Per Page

From Ghost 1.0 the "Posts per page" settings was moved from the Ghost Admin to the theme. You can set it in the package.json of the theme:

"config": {
  "posts_per_page": 10
}

For Auden the default value is 10, you can change it to any suitable value.

Ghost Search

Native search functionality is integrated with version v2.8.0, this works out of the box, no configuration needed.

Auden uses the Ghost Search Plugin.

Please refer to the official guide on how to create a custom integration.

• Copy the API URL from your Custom Integration and paste it in the Search url field in the Custom Theme Settings(Site-wide) area.
• Copy the Content API Key from your Custom Integration and paste it in the Search key field in the Custom Theme Settings(Site-wide) area.
• Enable or disable the Search in content (in case you have a lot of posts, this might affect performance)

Other possible options to add Search to Ghost CMS Themes.

Google Fonts

Auden comes with Google Fonts integrated, using the following fonts:

• Poppins
• Open Sans
• Playfair display

In order to change the fonts you have to change the default.hbs file.

<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>
<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>
<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>

{{! No Js }}
<noscript>
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'
  />
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap'
  />
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'
  />
</noscript>

Go to Google Fonts and choose the font and styles you would like. Then click Embed and copy the link provided and replace the current one in default.hbs.

Then open settings.css file located in assets/css/settings folder. Replace the font setting with your new font:

--font-family-serif: 'Playfair Display', Times, Georgia, serif;
--font-family-sans-serif: 'Poppins', Tahoma, Arial, sans-serif;
--font-family-secondary: 'Open Sans', Tahoma, Arial, sans-serif;

Build the assets (check theme development) and everything sould be ready.

Ceck out this tutorial for a more detailed guide about Google Fonts with Ghost.

Post Templates

Auden comes with 3 different post templates:

• post.hbs default (with sidebar)
• custom-no-sidebar.hbs with no sidebar
• custom-with-table-of-contents with table of contents

When a new post is created, automatically the default post template is assigned. You can change it by going to Post Settings, and under the Template section select the template you would like for the post.

Static Pages

Besides having posts, you can also create pages. For this:

• Log in to your publication admin section at yourblog.com/ghost/signin
• Go to Manage > Pages.
• Click New page.
• Add the page name (which will be the slug/url for the page as well).
• Add content for the page.
• Click Publish.

Custom Pages

Auden comes with several custom pages by default:

• Contact Page
• Tags Page
• Authors Page
• Membership
• Archive

To add the page to the navigation, please check the Navigation section above.

Contact Page

To create the Contact page, do as follows:

• Create a new page and call it Contact.
• Make sure the Page URL is contact.
• Click Publish.

There is a contact form included, which requires you to create a formspree account and after you have created your form, copy the endpoint and add it to the action attribute. The link should look like this:

https://formspree.io/f/moqppoep

Open page-contact.hbs in the root folder of the theme and replace the action value with your formspree link.

<form
  action="https://formspree.io/f/moqppoep"
  id="contact-form"
  class="contact-form"
  method="post"
></form>

You can also replace the form with your own if you have one.

Tags Page

To create the Tags page, do as follows:

• Create a new page and call it Tags.
• Make sure the Page URL is tags.
• Click Publish.

Authors Page

To create the Authors page, do as follows:

• Create a new page and call it Authors.
• Make sure the Page URL is authors.
• Click Publish.

Membership Page

To create the Membership page, do as follows:

• Create a new page and call it Membership.
• Make sure the Page URL is membership.
• Click Publish.

Archive Page

To create the Archive page (this will list all posts), do as follows:

• Create a new page and call it Archive.
• Make sure the Page URL is archive.
• Click Publish.

Translation

Auden supports Ghost i18n and it comes with translations for the following languages:

• en for English
• de for German
• fr for French
• es for Spanish
• it for Italian
• pr for Portuguese

To change the publication language to one of the available languages check out this guide.

Editing the translations

The translation files are stored in the locales folder within the theme folder.

|-- locales
|   |-- de.json
| |__en.json
| |__es.json
| |__fr.json

Open up the file for the language you want to edit. Example en.json:

{
  "load_more_posts": "Load more posts",
  "load_comments": "Load comments",
  "send": "Send",
  ...
}

Each line consist of a key-value pair.

"key": "value"

The key is on the left side and it should not be changed (it's the same in all the files) and right value which you can adapt if necessary.

Adding a new language

To add a new language you have to create a new translation file with the language code of the desired language.

For example if you want to create new translation for Hungarian language you have to create hu.json within the locales folder.

And add the translations for each key value.

For more details check the Official Ghost Documentation.

Social Media Links

The social media links are stored in a partial file partials/social-media.hbs.

Ghost supports Facebook and Twitter social accounts, to change them do the following

• Log in to your publication admin section at yourblog.com/ghost/signin
• Go to General from the admin menu
• Click Expand under Social Accounts, and enter the URLs for your Facebook and Twitter.
• Click Save settings

To edit the other social links follow the steps below. Open up the social-media.hbs file and change the href value to your profile's URL for that specific social platform.

  ...
  {{!-- Instagram --}}
  <a class="social-links__item instagram"
     href="https://instagram.com" target="_blank" title="Instagram" aria-label="Instagram">
    {{>icon name="instagram"}}
  </a>
  ...
</div>

For example to change the Instagram link, you have to change the existing href value:

href="https://instagram.com"

Add your instagram account link, example:

href="https://instagram.com/bright_themes"

Comments

Auden supports the native Ghost comments.

Additionally, Auden comes with Cove and Disqus.

The 3 post post layouts the theme comes with:

• post.hbs
• custom-no-sidebar.hbs
• custom-with-table-of-contents.hbs

In thess files the {{comments}} helper is used and you can change to {{> cove_comments.hbs}} or {{> disqus_comments}} instead.

Cove

Cove is a commenting platform built on top of Ghost’s Memberships feature.

For the comments to work, you have to create an account at cove.chat and change the cove_comments.hbs file in the partials folder:

 <script>
  const Cove = {
    publication: "your_cove_chat_publication_id",
    contentId: "{{id}}",
    memberId: "{{@member.uuid}}",
    memberEmail: "{{@member.email}}"
  }
</script>

Replace the value for the publication with the one from your Cove account.

Disqus

Auden comes with Disqus comments as well.

Make sure you have registered your website with Disqus and you know your disqus_shortname.

Open theme-config.hbs file located in partials folder. Change the biron-demo value to match your Disqus account shortname.

<script>
  ...
  // Basic Config
  const config = {
    ...
    /* Replace 'biron-demo' with your disqus account shortname */
    disqus_shortname: 'biron-demo'
  }
</script>

That's all, Disqus comments should work now.

If you don't want disqus comments to show delete the disqus_comments.hbs file located in the partials folder. And delete the following section from post.hbs, custom-no-sidebar.hbs, custom-with-table-of-contents.hbs files located in the root folder of the theme:

{{!-- Include Comments --}}
{{> disqus_comments}}

Google Analytics

To add Google Analytics to Ghost follow this tutorial from our blog.

Progressive Web App

Progressive Web Apps allow your website to be installed by anyone, anywhere, on any device with a single codebase.

To customize the appearance you have to change the following files.

• default.hbs
• manifest.webmanifest

In the default.hbs this is the relevant section for PWA.

{{! PWA }}
<link rel='manifest' href='{{asset "manifest.webmanifest"}}' />
<meta name='theme-color' content='#e50b4f' />
<link rel='apple-touch-icon' href='/assets/icon-192x192.png' />

Change the theme-color content for your primary color and replace the icon-192x192.png with your own icon (it must be 192x192 pixels).

Next open the manifest.webmanifest file:

{
  "name": "Auden Ghost Theme",
  "short_name": "Auden",
  "description": "Auden - a Magazine & Membership Ghost Theme",
  "lang": "en",
  "start_url": "/",
  "background_color": "#ffffff",
  "display": "standalone",
  "theme_color": "#e50b4f",
  "icons": [
    {
      "src": "/assets/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/assets/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/assets/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Replace all the relevant information like name, short_name and description. Also replace all the icons with your own.

That's it, the rest is taken care of.

Visit our blog post for more information about Progressive Web App for Ghost Themes.

Sidebar banner

The advertisement section is part of the partials/sidebar.hbs file. To activate it, just create an internal tag called #sidebar-ad.

The tag image will be displayed in the sidebar and the description is used as the URL for the link element.

Additionally, for the advertisement to show up in an individual post, you have to assign the #sidebar-ad tag to it.

With version v2.6.0 the banner can be changed from the Admin settings. Go to Settings > Design > Homepage and upload an image for the Sidebar banner and provide a link for this using the Sidebar banner link box.

Theme Development

Auden is developer friendly, if you need to make advanced customization you will take advantage of the Gulp tasks that are set up for compiling Javascript and PostCSS.

All the assets are combined and minified for better speed and performance. In order to customize the theme make sure you have Node.js and npm installed.

Run the following commands in the Auden theme directory:

npm install

This will install all the dependencies for the theme

Then run:

gulp

This will compile PostCSS and javascript and will watch for changes. So when you edit .hbs, .css or .js file the change will trigger the gulp watch task and this will compile the assets with your changes.

If you want to compile css or javascript separately, you can run:

gulp css

For compiling CSS files.

Or:

gulp js

For compiling javascript files.

You also have the option to use Code Injection to do customizations. For example if you want to change the brand color of the theme, add the following code in the Blog Header section.

body {
  --color-brand-1: pink;
}

Credits

Auden uses the following packages/plguins:

• Prism.js - Syntax Highlighter
• FitVids - Responsive video embeds
• Lazyload - Lazy loading images
• Ghost Search - Ghost search plugin
• Tocbot - Generate Table of Contents
• fslightbox - Image Lightbox
• Google Fonts
• Feather Icons - Icon pack
• Unsplash - Images

Images are not included in the download files!

Support

Don't hesitate to reach out if you need help or have any suggestions.

Contact - Feedback