Grav um eigene Templates erweitern

Ich erstelle gerade noch einen weiteren Bereich für das Blog, um Artikel zu sammeln, die als Nachschlagewerk für häufig von mir erwähnte Anwendungen/Techniken dienen sollen (z.B. SaltStack). So muss ich die dann nicht immer im eigentlich Blogpost erklären oder auf uralte Postings verlinken. Der Bereich wird essentials heißen.

Ich möchte auf den entsprechenden Seiten immer eine Sidebar haben, sowie ein paar wiederkehrende Infos, wie z.B. die Projektseite der erwähnten Anwendung, und/oder das GitHub-Repo. Das Standardtemplate hat zwar eine Sidebar, aber die ist natürlich schon für mein Blog konfiguriert. Außerdem nutze ich das Admin-Plugin für Grav und möchte die Felder für die URL der Projekt-/GitHub-Seite auch dort komfortabel befüllen können.

Um die Felder hinzuzufügen benötigt man zunächst ein Unterverzeichnis blueprints im Theme-Verzeichnis:

mkdir /var/www/html/user/theme/mytheme/blueprints/

In dem Verzeichnis erstellt man nun eine YAML-Datei, in der die neuen Felder definiert werden:

title: Essentials Content
@extends:
  type: default
  contexts: blueprints://essentials

form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        content:
          type: tab

          fields:
            header.custom.description:
              type: text
              label: description

            header.custom.website:
              type: text
              label: website

            header.custom.documentation:
              type: text
              label: documentation

            header.custom.github:
              type: text
              label: github

            header.custom.download:
              type: text
              label: download

            header.custom.license:
              type: select
              size: long
              label: license
              options:
                default: None
                BSD-3-Clause: BSD
                Apache-2.0: Apache 2.0
                AGPL-3.0: AGPL 3.0
                GPL-2.0: GPL 2.0
                GPL-3.0: GPL 3.0
                LGPL-2.1: LGPL 2.1
                LGPL-3.0: LGPL 3.0
                MIT: MIT
                PHP-3.0: PHP 3.0
                Python-2.0: Python 2.0
                MPL-1.0: MPL 1.0
                MPL-1.1: MPL 1.1
                MPL-2.0: MPL 2.0

Die weiteren Felder werden einfach an den Tab Content im Adminbereich angehängt, sofern man für die Seite den Typ essentials auswählt.

Eine Liste der möglichen Elemente findet sich in der Grav-Dokumentation unter:

Fehlt noch das passende Template, dieses wird einfach in der Datei /var/www/html/user/theme/mytheme/templates/essentials.html.twig definiert:

{% embed 'partials/base.html.twig' %}
{% block content %}
<div class="content-wrapper blog-content-list grid pure-g">
  <div id="listing" class="block pure-u-2-3 h-feed">
    {{ page.content }}
  </div>

  <div id="sidebar" class="block size-1-3 pure-u-1-3">
    {% if config.get('plugins.page-toc.active') or attribute(page.header, 'page-toc').active %}
    <div class="page-toc">
        {% set table_of_contents = toc(page.content) %}
        {% if table_of_contents is not empty %}
        <h4>{{ 'TOC.TABLE_OF_CONTENTS'|t  }}</h4>
        {{ table_of_contents }}
        {% endif %}
    </div>
    {% endif %}

    {% if page.header.custom.description %}
    <div class="page-desc">
      <h4>{{ 'ESSENTIALS.DESC'|t }}</h4>
      <span>{{ page.header.custom.description }}</span>
    </div>
    {% endif %}

    <div class="page-links">
      <h4>{{ 'ESSENTIALS.LINKS'|t }}</h4>
      <table>
        {% if page.header.custom.website %}
        <tr>
          <td>Website&nbsp;<i class="fa fa-external-link"> </i></td><td><a href="{{ page.header.custom.website }}" target="_blank">{{ page.header.custom.website|replace({'https://': '','http://': ''}) }}</a></td>
        </tr>
        {% endif %}
        {% if page.header.custom.documentation %}
        <tr>
          <td>Doku&nbsp;<i class="fa fa-book"> </i></td><td><a href="{{ page.header.custom.documentation }}" target="_blank">{{ page.header.custom.documentation|replace({'https://': '','http://': ''})|split('/')[0] }}</a></td>
        </tr>
        {% endif %}
        {% if page.header.custom.download %}
        <tr>
          <td>Download&nbsp;<i class="fa fa-download"> </i></td><td><a href="{{ page.header.custom.download }}" target="_blank">{{ page.header.custom.download|replace({'https://': '','http://': ''})|split('/')[0] }}</a></td>
        </tr>
        {% endif %}
        {% if page.header.custom.github %}
        <tr>
          <td>GitHub&nbsp;<i class="fa fa-code"> </i></td><td><a href="https://github.com/{{ page.header.custom.github }}" target="_blank">{{ page.header.custom.github }}</a></td>
        </tr>
        {% endif %}
        {% if page.header.custom.license and page.header.custom.license != 'default' %}
        <tr>
          <td>License&nbsp;<i class="fa fa-creative-commons"> </i></td><td><a href="https://opensource.org/licenses/{{ page.header.custom.license }}" target="_blank">{{ page.header.custom.license|replace({'-': ' '}) }}</a></td>
        </tr>
        {% endif %}
      </table>
    </div>
  </div>
</div>
{% endblock %}
{% endembed %}

Das Ergebnis kann man sich u.a. hier anschauen: https://www.21x9.org/de/essentials/saltstack

Tags: grav template custom fields