Für eine optimale Darstellung aktivieren Sie bitte JavaScript.

Recent Posts Widget

 ·  ☕ 2 Min. Lesezeit  ·  ✍️ Rüdiger Küpper

Recent Posts Widget für die Sidebar

In meinen Blogs hatte ich immer ein Widgets für die letzte Posts. Das habe ich gerade auch für das Hugo CMS erstellt.

Im Theme unter Layouts -> Partials -> Widgets habe ich eine Datei lastposts.html erstellt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{{ if .Site.Params.widgets.recent_posts }}
  <div class="panel panel-default sidebar-menu">
    <div class="panel-heading">
      <h3 class="panel-title">Letzte Artikel</h3>
    </div>

    <div class="panel-body">
      <ul class="nav nav-pills nav-stacked">
      {{ $count := .Site.Params.widgets.recent_posts }}
      {{ range first $count .Pages }}
        <li><a href="{{ .Permalink }}">{{ .Name }}</a></li>
      {{ end }}
      </ul>
    </div>
  </div>
{{ end }}

Die Zeilen 1, 9-12 und 16 sind markiert. Das sind Zeilen die das Widget steuern bzw. die Anzahl an konfigurierten letzten Posts ausgeben.

  • Zeile 1 überprüft ob das Widget aktiv ist.
  • Zeile 9 setzt die Variable $count auf die konfiguriere Anzahl der posts
  • Zeile 10 bis 12 durchläuft die letzte $count Posts und zeigt sie an.

Das funktioniert auf der Startseite gut, aber in den Artikeln bleibt die Liste leer.

Also wurde jetzt noch folgender Code ersetzt:

1
2
3
4
{{ $count := .Site.Params.widgets.recent_posts }}
{{ range first $count .Pages }}
  <li><a href="{{ .Permalink }}">{{ .Name }}</a></li>
{{ end }}

Durch:

1
2
3
4
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ range first $count $pages }}
<li><a href="{{ .Permalink }}">{{ .Name }}</a></li>
{{ end }}

Jetzt wird das Widget auf allen Seiten befüllt.

Konfiguration des Widget

Das Widget kann in der config.toml konfiguriert werden.

157
158
159
160
161
162
163
164
...
# Enable and disable widgets for the right sidebar
[params.widgets]
    categories = true
    tags = true
    search = true
    recent_posts = 10
...

Das Widget kann mit false deaktiviert werden.
Die Anzahl kann frei gewählt werden.

Inhalt teilen auf:

Rüdiger Küpper
ERSTELLT VON
Rüdiger Küpper
DevOps Engineer