Skip to content

05. Layouts and Templates

Jump to bottom
DeepakNess edited this page Aug 6, 2024 · 1 revision

5.1. Base Layout

The base layout (_includes/layouts/base.njk) serves as the foundation for all pages:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if title %}{{ title }} - {% endif %}{{ metadata.title }}</title>
    <meta name="description" content="{% if description %}{{ description }}{% else %}{{ metadata.description }}{% endif %}">
    <meta name="author" content="{{ metadata.author.name }}">
    <meta property="og:title" content="{% if title %}{{ title }} - {% endif %}{{ metadata.title }}">
    <meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ metadata.description }}{% endif %}">
    <meta property="og:type" content="{% if layout == 'layouts/post.njk' %}article{% else %}website{% endif %}">
    <meta property="og:url" content="{{ metadata.url }}{{ page.url }}">
    <meta property="og:site_name" content="{{ metadata.title }}">
    {% if image %}
    <meta property="og:image" content="{{ metadata.url }}{{ image }}">
    {% endif %}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="{{ metadata.author.twitter }}">
    <link rel="canonical" href="{{ metadata.url }}{{ page.url }}">

5.2. Blog Post Layout

Individual blog posts use the _includes/layouts/post.njk layout:

---
layout: layouts/base.njk
---
<article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <header class="mb-8">
        <h1 class="text-3xl font-bold mb-2 text-gray-900">{{ title }}</h1>
        <p class="text-gray-600 mb-4">{{ date | readableDate }}</p>
    </header>

    <div class="prose prose-lg max-w-none content">
        {{ content | safe }}
    </div>
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ title }}",
  "datePublished": "{{ date | dateToRfc3339 }}",
  "dateModified": "{{ date | dateToRfc3339 }}",
  "author": {
    "@type": "Person",
    "name": "{{ metadata.author.name }}"
  },
  "description": "{{ description }}"
}
</script>

5.3. Blog Listing Layout

The blog listing page uses _includes/layouts/blog.njk:

---
layout: layouts/base.njk
title: Blog
permalink: /blog/
---
<h1 class="text-4xl font-bold mb-8">{{ title }}</h1>

<ul class="space-y-6">
{% for post in collections.posts | reverse %}
  <li class="border-b border-gray-200 pb-6">
    <h2 class="text-xl mb-2">
      <a href="{{ post.url }}" class="text-blue-600 hover:text-blue-800 hover:underline">{{ post.data.title }}</a>
    </h2>
    <time datetime="{{ post.date | dateToRfc3339 }}" class="text-sm text-gray-600">
      {{ post.date | readableDate }}
    </time>
  </li>
{% endfor %}
</ul>
Clone this wiki locally