Isn’t it annoying when you want to find an old post or read something you had seen before, but you cannot because you don’t have the link to visit them?

Some posts hold the value that you can cherish over a long period. In such scenarios, archiving posts come in handy when you suddenly wish to revisit that old post you had seen a while ago.

Here are some more advantages of archiving the posts:

  • It enhances the audience’s engagement with your posts and develops a positive community around your content. 
  • The Archival feature tends to increase the time visitors spend on your website. 
  • You can increase the number of page views on each blog post. 
  • The archiving feature presents you with more opportunities to convert visitors into subscribers or customers.

It’s a win-win feature for owners as well as visitors.

Are you ready to create an archive page for your Ghost Theme?

This article will guide you in creating an archives page for your Ghost Theme, where you can store all your favorite blog posts.

Create a simple archive page 

Navigate to the root folder of your theme and create a new file.

Name it page-archive.hbs as it is a good practice to start from the page.hbs file. Because you might be want the similar design like your existing page layout.

We need to begin the process of creating an archive page by fetching the posts. Use the {{get}} and {{foreach}} helpers for this purpose. 

{{#get "posts" limit="all" order="published_at desc"}}
  <article class="article-wrap">
    {{#foreach posts}}
      <a href="{{url}}" class="archive-post">
        <time datetime="{{date published_at format="YYYY-MM-DD"}}" class="archive-post__date">
          {{date published_at format="DD MMM YYYY"}}
        </time>
        <h2 class="post-title">{{title}}</h2>
      </a>
    {{/foreach}}
  </article>
{{/get}}

While fetching the posts, the limit="all" indicates to the API that we need to collect all the posts. You can also specify a limit. If you do not, then the default limit from the package.json config.posts_per_page is considered.

Then we need to place all the fetched posts inside an article element and loop through them using a {{foreach}} helper class.

Upload your modified theme or restart the Ghost instance and head over to yourwebsite.com/archive to view the list of posts. 

A simple archive post works well when you do not have too many posts. However, in the case of many posts, it might not be the best option. Let us consider another option when there are many posts. 

Create an advanced archive page 

For this scenario, we will start the process by creating a file named archive.hbs in your theme’s root folder. Then we need to alter the routes.yaml file and add a few extra lines to it. You should see the standard taxonomies and collections already present by default. Add a new section under the routes as follows:

You can refer to the above snippet to make sure that your routes.yaml looks the same. However, please note that on your site, there might be some changes depending upon your setup. 

routes:
  /archive/:
    controller: channel
    template: archive

collections:
  /:
    permalink: /{slug}/
    template: index
  
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Once you are through this process, upload the modified file by navigating to Ghost Admin > Settings > Labs. Click on the upload routes.yaml option. 

Now, let us modify the archive.hbs file as follows:

{{!< default}}

<div class="container">
  <h1 class="archive-title">{{t "Archive"}}</h1>
  <div class="archive-description">
    {{#get "posts"}}
      {{t "A collection of {total} posts." total=pagination.total}}
    {{/get}}
  </div>
  
  <div class="content">
    <div class="archive js-post-feed">
      {{#foreach posts}}
        <div class="archive-post-wrap post-year-{{date format="Y"}}"> 
          <div class="archive-post-label m-t m-b-sm fw-600">{{date format="YYYY"}}</div>
          <article class="archive-post">
            <time datetime="{{date published_at format="YYYY-MM-DD"}}"
              class="text-acc-3">{{date published_at format="DD MMM YYYY"}}
            </time>

            <h2 class="archive-post-title">
              <a class="archive-post-link" href="{{url}}">{{title}}</a>
            </h2>
          </article>
        </div>
      {{/foreach}}
    </div>
    {{!-- Pagination --}}
    {{pagination}}
  </div>
</div>

In the first part of the code after the page title, we have an archive excerpt listing of total posts. These posts use pagination.total property in the {{get "posts"}} context.

We have the posts now, and since we have already added /archives/ to the routes.yaml, we don’t need to fetch the posts using {{get}} helper. The posts will be available by default.

The layout of each post is within the {{foreach}} helper. In this case, the post has a date and a title along with elements like .archive-post-wrap and the .archive-post-label. We can use these elements when we need to group the posts according to their date they went live. 

The last part is {{pagination}}. When we paginate the content, we need to facilitate navigation for the users. Pagination helper will be our controller for this purpose.

Final Result

The final result is as follows:

archive page Themeix

You can check our premium ghost themes where have the unique features.

Leave a Comment

No Comment