Create Ghost Theme from scratch - Part 2: Navigation Bar and Pagination

In part 1 of this tutorial, we learned to create a simple Ghost theme from scratch. In this post, we'll learn how to add a dynamic navigation bar and pagination to the theme.

Create Ghost Theme from scratch - Part 2: Navigation Bar and Pagination

In part 1 of this tutorial, we learned to create a simple Ghost theme from scratch. In this post, we'll learn how to add a dynamic navigation bar and pagination to the theme.

If you are new to Ghost theme development, please read part 1 of this tutorial first.

Developing a Ghost Theme from scratch
If you know HTML, CSS and JavaScript, you can create beautiful themes for your Ghost blog. In this post, we will see how to create a Ghost theme from scratch.

Add Navigation Bar

Ghost allows you to create custom navigation menus so that you can define a clear structure for the blog.

Create navigation menu in Ghost

Here's an example of a custom navigation menu.

A navigation bar

The {{navigation}} helper

Themes can use the {{navigation}} helper to add support for custom navigation menu. You can simply add this helper to the pages in which you want to display the navigation bar. The navigation helper by default, uses a pre-defined HTML template to create navigation bar.

Example:

<ul class="nav">
    <li class="nav-home nav-current"><a href="/">Home</a></li>
    <li class="nav-about"><a href="/about">About</a></li>
    <li class="nav-contact"><a href="/contact">Contact</a></li>
</ul>

Add navigation support to the theme

To add custom navigation menu support to our theme, add the {{navigation}} just below the <body> tag in default.hbs . We can use the navigation helper in any templates we add.

Adding navigation helper to default.hbs will make the nav bar visible on all pages.
<body class="{{body_class}}">

    {{"navigation"}}

    {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
    {{{body}}}

   
    <div class="card">
        <div class="card-footer text-muted">
            
            &copy; {{date format="YYYY"}} {{@site.title}}
        </div>
    </div>
    {{ghost_foot}}
</body>

Navigate to the home page of the blog and you will notice a simple navigation bar displayed at the top of the page.

A custom navigation bar

This looks like a 100 years old nav bar. Isn't it? So let's override the default template and create a custom design.

Use a custom template

First, create a directory named partials in the root folder of the theme. This we where we keep the reusable parts of our theme.

To use a custom template for the navigation bar, we should add a new file named navigation.hbs to the partials folder and add the following code to it.

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <div class="nav navbar-nav">
        {{#foreach navigation}}
        <a class="nav-item nav-link {{#if current}}active{{/if}}" href="{{url absolute="true"}}">{{label}}</a>
        {{/foreach}}
    </div>
</nav>
Please note that the name of the file should be navigation.hbs. If this file exists, Ghost will load it instead of the default template.

Reload the page to see our custom navbar.

A custom navigation bar

This look much better now.

Display logo

The navigation menu we created simply displays some pages to which the user can navigate to. We can further customize the navigation bar by adding a logo or description of the blog.

To display logo of the blog, modify the content of navigation.hbs as shown below.

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">
        <img src="{{@site.logo}}" alt="{{@site.title}}" style="height: 30px; max-width: 150px;">
    </a>
    <div class="nav navbar-nav">
        {{#foreach navigation}}
        <a class="nav-item nav-link {{#if current}}active{{/if}}" href="{{url absolute="true"}}">{{label}}</a>
        {{/foreach}}
    </div>
</nav>

Now the navigation bar will look similar to this.

A custom navigation bar with logo

Pagination

Similar to navigation bar, Pagination is also templated-based. Ghost has a default template for pagination.

This is the default pagination of Ghost for pagination.

<nav class="pagination" role="navigation">
    {{#if prev}}
        <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
    {{/if}}
    <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
        <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>
    {{/if}}
</nav>

While creating the theme, we've configured it to display ten posts per page. A fresh installation of Ghost has only seven published posts. Therefore, either add new posts to the blog from the admin dashboard or configure the theme to display five posts per page so we can see how pagination works.

To change the number of posts displayed per page, open package.json file in the root folder of the template and modify the config section as:

    "config": {
        "posts_per_page": 5,
        "image_sizes": {}
    }

And restart the ghost instance by running ghost restart.

Add pagination to theme

To add pagination support to the theme, open index.hbs and add {{pagination}} helper just above the <main> tag.

{{!< default}}
<main id="site-main">
    <div class="container">

        <div>
            {{#foreach posts}}
                {{!-- Code removed for brevity --}}
            {{/foreach}}
        </div>
        {{pagination}}
    </div>
</main>

Visit the blog on your browser and scroll to the bottom of the page to see the changes.

Ghost pagination

We can also use a custom template for pagination by creating a file named pagination.hbs in the partials folder.

Here's an example.

partials/pagination.hbs

<ul class="pagination">
    {{#if prev}}
    <li class="page-item"><a class="page-link" href="{{page_url prev}}">&larr; Newer posts</a></li>
    {{/if}}
    <li class="page-item page-link">Page {{page}} of {{pages}} pages</li>
    {{#if next}}
    <li class="page-item"><a class="page-link" href="{{page_url next}}">Older posts &rarr;</a></li>
    {{/if}}
</ul>

This is what we've done.

Ghost custom pagination

Pagination helpers

Ghost offers a few helpers that can be used only in the context of pagination.

  • {{page_url}} - accepts prev, next and $number to link to a particular page.
  • {{page}} - outputs the current page number.
  • {{pages}} - outputs the total number of pages.

Share Tweet Send
0 Comments
Loading...