List Templates

A list template is used to render multiple pieces of content in a single HTML file. Essentially, it is used to generate all index.html pages for the site (although optionally a different template can be used to render a static homepage).

For example, suppose I want a standard blog where the index page for the site (let’s say http://example.com/) lists all my blog posts in a paginated fashion. I also want a review section, separate from my blog that’ll store my movies reviews. I want that to have a listing too. I will structure my content as follows:

content
- Post 1.md
- Post 2.md
- Post 3.md
- Post 4.md
- review
--- Review 1.md
--- Review 2.md
--- Review 3.md

This will lead to the site structure below:

http://example.com/index.html             // auto-generated
http://example.com/post-1.html
http://example.com/post-2.html
http://example.com/post-3.html
http://example.com/post-4.html
http://example.com/review/index.html      // auto-generated
http://example.com/review/review-1.html
http://example.com/review/review-2.html
http://example.com/review/review-3.html

To render the main site index page (http://example.com/index.html), Aoife will use the default layouts/list.html template file. To render the listing for the reviews, Aoife will first try to use layouts/review/list.html. If that file doesn’t exist then Aoife will default to layouts/list.html. This allows themes to style the listing of sections differently.

Example list template file

The example list.html template file below is used to generate the listing of posts on my personal blog:

{{partial header} }

  <div class="row">
    <div class="col-12">
      {{foreach} }
        <article class="list">
          <h3 class="post-title">
            <a href="http://aoife.io/docs/list-templates.html">{{title} }</a>
            <span class="separator"> · </span>{{date.longMonth} } {{date.day} }, {{date.year} }
          </h3>
        </article>
      {{endeach} }
    </div><!--/.col-12-->
  </div><!--/.row-->
  <div class="row">
    <div class="col-12">
      <div class="list-navigation">
        <a class="prev-page" href="{{prevPage} }">← Previous</a>
        <a class="next-page" href="{{nextPage} }">Next →</a>
      </div><!--/.list-navigation-->
    </div><!--/.col-12-->
  </div><!--/.row-->
</main>
</div><!--/.container data-sticky-wrap-->

{{partial footer} }

This is rendered as below:

Blog Listing

Modified: Dec 8, 2016 at 21:36:54

Aoife v0.9.0 documentation