Im weiteren verlauf des Tutorials werd ich das Bootstrap-Theme (nicht das Bootstrap2) verwenden.

Mit diesem Theme sieht die Seite so aus:
Screenshot mit boostrap-Theme

Als erstes wollen wir eine Impressum/About-Seite erstellen. Diese soll nicht im Feed der Seite angezigt werden.
Dazu erstellen wir im content-Verzeichnis des Blogs ein Unterverzeichnis mit dem Namen pages.__ Darin erstellen wir dazu eine Datei in unserer bervorzugten Markupsprache. Als Metadaten notwendig ist nur der Titel.
Wir wollen eine Impressum-Seite erstellen und benennen die Datei impressum.md und geben ihr auch diesen Titel.
Wenn wir jetzt die Seite erstellen, erscheint der Link zum Impressum in der Menüleiste.

Ebenfalls in der Menüleiste erscheinen Links zu den Kategorien die wir in den Artikeln angegeben haben, der Link zum Archiv und einer Übersicht aller Tags.

Wenn wir viele Kategorien verwenden, kann es in der Menüleiste schnell recht unübersichtlich werden.
Das erste was wir also machen wollen, ist die Kategorien in der Seitenleiste anzeigen zu lassen. Dazu müssen wir die Vorlagendatei im Template anpassen.

pelican verwendet für die Templates Jinja. Jinja und Template-Engines im allgemeinen erlauben es, HTML-Dateien mit Variablen und Kontrollstrukturen zu versehen. Diese werden dann im Fall von pelican beim erstellen ersetzt und das Ergebnis gespeichert.

Bei Templates wird stark auf die Wiederverwendbarkeit von einzelner Vorlagendateien geachtet. So gibt es z.B. eine Datei für das Grundgerüst in diese werden dann je nach Seite die Template-Dateien für die Startseite oder das Archiv integriert.

Die beiden Navigationen die wir anpassen sollen erscheinen auf allen Seiten, deshalb ist die Datei base.html unser erster Kandidat. Die Datei befindet sich in Verzeichnis templates des Boostrap-Themes. Wir öffnen Sie in einem Editor und ändern als erstes

<ul class="nav">
{% for title, link in MENUITEMS %}
    <li><a href="{{ link }}">{{ title }}</a></li>
{% endfor %}
{% if DISPLAY_PAGES_ON_MENU %}
    {% for page in PAGES %}
        <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
    {% endfor %}
{% endif %}
{% for cat, null in categories %}
    <li {% if cat == category %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
{% endfor %}
</ul>

in

<ul class="nav">
{% for title, link in MENUITEMS %}
    <li><a href="{{ link }}">{{ title }}</a></li>
{% endfor %}
{% if DISPLAY_PAGES_ON_MENU %}
    {% for page in PAGES %}
        <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
    {% endfor %}
{% endif %}
</ul>

Danach müssen wir die Sidebar noch anpassen, damit unsere Kategorien dort erscheinen. Der Code sollte danach wie folgt aussehen.

 :::
<div class="sidebar">
    <div class="well">
        <h3>Kategorien</h3>
        <ul>
        {% for cat, null in categories %}
                <li {% if cat == category %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
        {% endfor %}
        </ul>
        <h3>Blogroll</h3>
        <ul>
            {% for name, link in LINKS %}
            <li><a href="{{ link }}">{{ name }}</a></li>
            {% endfor %}
        </ul>
        <div class="social">
        <h3>Social</h3>
        <ul>
            {% for name, link in SOCIAL %}
            <li><a href="{{ link }}">{{ name }}</a></li>
            {% endfor %}
        </ul>
        </div>
    </div>
  </div>

Danach sollte unsere Seite so aussehen. Wir haben jetzt ein Impressum und die Kategorien erscheinen in der Sidebar.

Screenshot mit boostrap-Theme

Ebenfalls in der Siderbar sind die Bereiche Social und Blogroll. Unter Blogroll versteht man eine Liste von Links auf andere Blogs die man liest. Unter Social werden Links zu den eigenen Profilen auf Social-Media-Plattformen wie Facebook oder Twitter angezeigt.
Beide Linklisten können in der pelicanconf.py konfiguriert werden.

Blogroll
Die Blogroll wird über die LINKS-Einstellung der pelicanconf.py definiert. ::: LINKS = (('Pelican', 'http://getpelican.com/'), ('Python.org', 'http://python.org/'), ('Jinja2', 'http://jinja.pocoo.org/'),)

Diese Liste kann ohne Probleme mit angepasst werden. Ein Link wird dabei immer in der Form ('LINKTEXT', 'LINKZIEL') definiert.

Social
Die Social-Links werden über die SOCIAL-Einstellung ebenfalls in der pelicanconf.py definiert. ::: SOCIAL = (('Twitter: @tekcins', 'https://twitter.com/tekcins'), ('Facebook','https://www.facebook.com/FACEBOOKPROFIL'))

Der Eintrag erfolgt wie bei den Links in der Form ('LINKTEXT', 'LINKZIEL'). Beim erstellen der Seite werden dann allerdings vor diese Links noch die entsprechenden Icons der Netzwerke angezeigt.

Teilen

Comments