Help:Tags

Create a blog tags.

Blog tags are a way to group blog posts in a way, users are able to filter for. Our tags are not like our categories, which can have their own image, description and page. They are created on the fly, when used. They should only consist of a single word.

Code

Below you find the implementation of the layout.

HTML

Term Page Layout

Defined in layouts/tags/term.html.

This code is licensed under the MIT license.

{{/*<!-- 

  Tags Layout
  ===========

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Type: Term

  LAYOUT: /layouts/tags/term.html
  DOCS:   /content/<language>/wiki/Help:Layout_Tags.md

  Description
  -----------

  The term layout page for the blog tags.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->*/}}

{{ define "main" }}

  {{ $blog := where .Site.RegularPages "Section" "blog" }}

  {{ $pages := slice }}


  <!-- Find the blog posts (pages) -->
  {{ range $temp_page :=  (where $blog "Params.tags" "!=" nil) }}
    {{ range $t := .Page.Params.tags }}
      {{ if eq (lower $t) (lower $.Title) }}
        {{ $pages = $pages | append $temp_page }}
      {{ end }}
    {{ end }}
  {{ end }}


  <div class="container">
    <div class="section pt-5">
      <a href="/tags/">&#8592; Back to tags</a>
      <div class="row g-5 justify-content-center">
        <div class="col-md-12 col-lg-9 col-xl-9">
          <h1 class="pb-5 mb-5 fst-italic">
            <i class="fa fa-tags"></i>
            Tag:
            {{ .Title | title }}
          </h1>
          {{ $paginator := .Paginate $pages -}}
          {{ range $paginator.Pages -}}
            {{ partial "main/blog-post-list-layout.html" . -}}
          {{ end }}
          <div class="pagination justify-content-center">
            {{ $.Scratch.Set "paginator" true }}
            {{ template "_internal/pagination.html" . }}
          </div>
        </div>
        {{ partial "main/blog-sidebar.html" . }}
      </div>
    </div>
  </div>
{{ end }}

Terms Page Layout

Defined in layouts/tags/terms.html.

This code is licensed under the MIT license.

{{/*<!-- 

  Tags Layout
  ===========

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Type: Terms

  LAYOUT: /layouts/tags/terms.html
  DOCS:   /content/<language>/wiki/Help:Layout_Tags.md

  Description
  -----------

  The terms layout page for the blog tags.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->*/}}

{{ define "main" }}

  <div class="container">
    <div class="section pt-5">
    <a href="/blog/">&#8592; Back to blog</a>
      <div class="row g-5 justify-content-center">
        <div class="col-md-12 col-lg-9 col-xl-9">
          <h1 class="pb-2 mb-2 fst-italic">
            <i class="fa fa-tags"></i>
            {{ .Title }}
          </h1>
          <p class="lead">{{ .Params.lead | safeHTML }}</p>
          <div class="text-center pb-4 mb-4">{{ .Content }}</div>

          {{ $letters := split "ABCDEFGHIJKLMNOPQRSTUVWXYZ" "" }}

          <ul class="blog-tags">
            {{ range sort .Site.Taxonomies.tags }}
              {{ $firstChar := substr .Page.Title 0 1 | upper }}

              <!-- make sure to only have tags where the first char is a letter -->
              {{ if $firstChar | in $letters }}
                {{ $curLetter := $.Scratch.Get "curLetter" }}
                <!-- if $curLetter is nott set or the letter has changed -->
                {{ if ne $firstChar $curLetter }}
                <!-- end the last ul -->
                  </ul>
                  <!-- update the current letter and print it -->
                  {{ $.Scratch.Set "curLetter" $firstChar }}
                  <h4 class="text-center">{{ $firstChar }}</h4>
                  <hr />
                  <!-- start a new ul -->
                  <ul class="blog-tags">
                {{ end }}


                <li>
                  <a href="{{ .Page.Permalink }}">
                    <i class="fa fa-tags"></i>
                    {{ .Page.Title | title }}
                    <span class="badge text-dark">
                      {{ .Count }}
                    </span>
                  </a>
                </li>
              {{ end }}
            {{ end }}
          </ul>
        </div>
        {{ partial "main/blog-sidebar.html" . }}
      </div>
    </div>
  </div>
{{ end }}

Categories	Contributors
Help, Contribute and Layout	Michael Sasser

Help:Tags

Code #

HTML #

Term Page Layout #

Terms Page Layout #

Categories

Contributors

Code

HTML

Term Page Layout

Terms Page Layout