12.03.2019 Version 1.1.0

Web-Requests

Anfrage an JSON-Api’s von z.B. Headless-CMS können über zwei Wege realsiert werden:

1. Collections

Dazu wird die config.yml um z.B. folgende Einträge ergänzt:

This:
  Collections:
    - Name: blog
      URL: 'https://HEADLESS-CMS-SERVER.de/api/collections/get/mark2webBlog?token={{ Data.token }}&filter[published]=true&sort[date]=-1'
      NavTemplate:
        EntriesAttribute: entries
        GoTo: '{{ date }}-{{ title }}'
        Navname: '{{ title }}'
        Body: '{{ body }}'
        Template: base_blog_details.html
        DataKey: details
        Hidden: true # hide from nav, but use this feature for rendering detail sites

Der entsprechende Teil im Template sieht dann z.B. wie folgt aus:

{% for e in NavElement.ColMap.blog.entries %}
 <h2>{{ e.title }}</h2>
 ...
 <a href="{{ e.date|add:"-"|add:e.title|slugify }}">mehr lesen</a<
{% endfor }

2. fnRequest Template-Funktion

Das Beispiel aus 1. kannber auch im Template folgendermaßen realisiert werden:

{% for e in fnRequest("https://HEADLESS-CMS-SERVER.de/api/collections/get/mark2webBlog?token="|add:Data.token|add:"&filter[published]=true&sort[date]=-1").entries %}
 <h2>{{ e.title }}</h2>
 ...
 <a href="{{ e.date|add:"-"|add:e.title|slugify }}">mehr lesen</a<
 {{ fnRender("base_blog_details.html", e.date|add:"-"|add:e.title, e, "details", e.body) }}
{% endfor %}

Beachten Sie hier den fnRender() Aufruf. Die Unter-, bzw. Detail-Seiten werden hier über den Aufruf im Template generiert. fnRender() gibt einen leeren String zurück und kann somit an beliebiger Stelle im Template stehen.

Image-Processing

Für die Berechnung unterschiedlicher Bildgrößen wurde der Template-Filter image_process eingeführt:

<img 
  src="{{ Data.background|image_process:"p=fill,w=1440,h=810,q=30" }}" 
  srcset="{{ Data.background|image_process:"p=fill,w=768,h=768,q=30" }} 768w,
          {{ Data.background|image_process:"p=fill,w=1440,h=810,q=30" }} 1440w,
          {{ Data.background|image_process:"p=fill,w=1920,h=1020,q=30" }} 1920w">

Weitere Bearbeitungsmöglichkeiten entnehmen Sie der Dokumentation, die in Kürze folgen wird.

Javascript Filter

Um den Funktionsumfang der Django-Templates zu erweitern, ist es möglich eigene Filter in Javascript zu schreiben. Eigene Filter werden im Ordner templates/filters abgelegt. Die Dateinamen vor dem .js dienen als Filternamen im Template.

Z.B datum.js um das Datumsformat YYYY-MM-DD in DD.MM.YYYY umzuwandeln:

function datum(str, param) {
  /*
  this.context.Meta.Title ist hier z.B. möglich
  */
  return str.replace(/^([0-9]+)[^0-9]+([0-9]+)[^0-9]+([0-9]+).*/, "$3.$2.$1");
}

module.exports = datum;

weitere Template-Filter und -Variablen

Außerdem sind folgende zusätzliche Filter bereits eingebaut:

json Filter

{{ Data|json:"pretty" }}

dump Filter

{{ Data|dump }}

Timestamp Variable

<link rel="stylesheet" type="text/css" href="assets/css/main.css?{{ Timestamp }}">

« zurück

Version 1.1.0 12.03.2019