Showing all articles in a single page

Hi,

How to show all blog posts in a page? I mean a single page which will display all articles/blog posts available in the ghost blog.

What’ll be the code for doing that?

Ghost Version: 3.40.5
Debian 10.7 Stable

This is possible by creating an additional template file in your theme and pointing the routes.yaml file to it.

So, let’s suppose you create the following file in your theme: all-posts.hbs

Containing something similar to this:

{{!< default}}

{{#get "posts" limit="all"}}
    {{#foreach posts}}
        
<article class="{{post_class}}">
  <header class="post-header">
    <h1 class="post-title">{{title}}</h1>
    <section class="post-meta">
      <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">
        {{date format="DD MMMM YYYY"}}
      </time>
      {{tags prefix=" on "}}
    </section>
  </header>
  <section class="post-content">
    {{content}}
  </section>
</article>

    {{/foreach}}
{{/get}}

Now in your routes.yaml set the URL:

## routes.yaml

routes:
  /all-posts/: all-posts

It’s not working. I am using a custom theme, not default one called ‘Casper’.
I have created “all-posts.hbs” under that theme with your given contents and also edited ‘routes.yaml’ file. After that I restart the ghost process:

ghost restart

when I go to localhost:2368/all-posts/
it’s saying 404 Error, page not found.

Here’s my theme tree and the contents of “all-posts.hbs”

That is strange, I tested it here on a local install too and it works.

Are you sure you uploaded the routes.yaml correctly under Settings > Labs > Routes?

Can you share a screenshot of your routes.yaml? Just to check nothing funky is going on in there

Yes, I have edited my current routes.yaml with required line and it saved under /content/settings/ folder.

Here’s the contents of that file:

routes:

collections:

  /:

    permalink: /{slug}/

    template: index

taxonomies:

  tag: /tag/{slug}/

  author: /author/{slug}/

/all-posts: all-posts

Anything wrong here?

One more thing plz. I have tested this page by using custom page template and creating a new page with that template.
Text and headline alignment are not perfectly matching with the screen. Too much aligned to left of the screen. Check screenshot:

How to align those on center?

Yup, you did not follow the YAML syntax requirements. This should do the trick, edit the file, upload it and restart Ghost:

routes:
   /all-posts/: all-posts

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

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

That’s a whole new question.

Text alignment is configured via HTML or CSS. There are so many ways to achieve it:

  • Utilize the dedicated HTML element: <center> your text goes here </center>
  • Set text-align property of the containing element CSS text-align property
  • Set the margin-left and margin-right properties of the containing element
  • Utilize some kind of CSS library that has build in text alignment functions Text · Bootstrap

It solved the issue, many thanks.