Blog-Vorlagen-Markup

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • Content Hub
    • Professional or Enterprise

HubSpot-Blogs bestehen aus Blog-Listing-Seiten und den einzelnen Blog-Beiträgen. Neben dem Listing der einzelnen Blog-Beiträge wird die Blog-Listing-Vorlage auch für die Darstellung der Autoren- und Tag-Listing-Seiten verwendet. Sie können entweder eine einzige Vorlage erstellen, um alle Seiten für Listing- und Blog-Beitragsseiten darzustellen, oder Sie können zwei separate Vorlagen erstellen. 

Im Folgenden erfahren Sie mehr über Blog-Vorlagen-Markup, Vorlagenkomponenten und Anpassungsoptionen.

Listing-Seiten und Beiträge mit einer einzelnen Vorlage darstellen

Um eine einzelne Vorlage zu erstellen, die die Listing- und Beitragsseiten darstellt, fügen Sie die Annotation templateType: blog am Anfang Ihrer Vorlagendatei hinzu. Wenn Sie eine Vorlage verwenden, um beides darzustellen, verwenden Sie eine if-Anweisung, die auswertet, ob sich der Benutzer eine Listing-Seite oder einen einzelnen Beitrag anschaut. Wenn Sie die Layouts des Drag-&-Drop-Design-Managers verwenden, ist diese if-Anweisung in die Benutzeroberfläche von Blog-Inhaltsmodulschaltflächen integriert.

Innerhalb der if-Anweisung schreiben Sie sowohl Ihren Beitrags- als auch Listing-Code.

{% if is_listing_view %} Markup for blog listing template {% else %} Markup for blog post template {% endif %}

Alternativ können Sie auch eine separate Vorlage für Blog-Beiträge und Listing-Seiten verwenden. Dadurch wird Ihr Code übersichtlicher und für den Entwickler leichter lesbar, und die Vorlagen können von Content-Autoren einfacher ausgewählt werden. Die CMS-Boilerplate hat eine separate Listing-Vorlage und Beitragsvorlage. Wenn Sie separate Listing- und Beitragsvorlagen erstellen, ist diese is_listing_view-Prüfung nicht erforderlich, Sie müssen nur sicherstellen, dass Sie die separaten Vorlagen unter „Einstellungen“ > „Website“ > „Blog“ > „Vorlagen“ auswählen. 

Auswahl der Vorlagenoptionen

Blog-Listing für Schleife

Die Auflistung von Beiträgen wird durch eine for-Schleife generiert, die Ihre Blog-Beiträge durchläuft. Contents ist eine vordefinierte Sequenz von Inhalten, die alle in diesem Blog enthaltenen Beiträge enthält.

{% for content in contents %} <div class="post-item"> Post item markup that renders with each iteration. </div> {% endfor %}

Listing-Vorlagen-Markup

Die Inhalte der Boilerplate-Blog-Listing-Seite für die Schleife werden mit folgendem Markup gerendert:

{% for content in contents %} {# On the blog homepage the first post will be featured above older posts #} {% if (loop.first && current_page_num == 1 && !topic) %} <div class="blog-index__post blog-index__post--large"> <a class="blog-index__post-image blog-index__post-image--large" {% if content.featured_image %} style="background-image: url('{{ content.featured_image }}')"; {% endif %} href="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--large"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content }} </div> </div> {% else %} <div class="blog-index__post blog-index__post--small"> <a class="blog-index__post-image blog-index__post-image--small" {% if content.featured_image %} style="background-image: url('{{ content.featured_image }}')"; {% endif %} href="{{ content.absolute_url }}"></a> <div class="blog-index__post-content blog-index__post-content--small"> <h2><a href="{{ content.absolute_url }}">{{ content.name }}</a></h2> {{ content.post_list_content|truncatehtml(100) }} </div> </div> {% endif %} {% endfor %}

if blog_author-Anweisung

Im Standard-Blog-Listing-Markup von HubSpot gibt es eine if blog_author-Anweisung. Diese Anweisung wird als true ausgewertet, wenn Sie sich eine Seite mit Autoren-Listing-Seite ansehen. Eine Autoren-Listing-Seite ist eine Seite mit Beiträgen eines einzelnen Autors. Die Boilerplate-Vorlage enthält den Namen des Autors, seinen Lebenslauf und seine Konten in den sozialen Medien.

{% if blog_author %} <div class="blog-header"> <div class="blog-header__inner"> {% if blog_author.avatar %} <div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div> {% endif %} <h1 class="blog-header__title">{{ blog_author.display_name }}</h1> <h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4> {% if blog_author.has_social_profiles %} <div class="blog-header__author-social-links"> {% if blog_author.website %} <a href="{{ blog_author.website }}" target="_blank"> {% icon name="link" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.facebook %} <a href="{{ blog_author.facebook }}" target="_blank"> {% icon name="facebook-f" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.linkedin %} <a href="{{ blog_author.linkedin }}" target="_blank"> {% icon name="linkedin-in" style="SOLID" width="10" %} </a> {% endif %} {% if blog_author.twitter %} <a href="{{ blog_author.twitter }}" target="_blank"> {% icon name="twitter" style="SOLID" width="10" %} </a> {% endif %} </div> {% endif %} </div> </div> {% else %}

if tag -Anweisung

Zusätzlich zu der if blog_author-Anweisung, die Markup definiert, das nur auf Autoren-Listing-Seiten gerendert werden soll, gibt es eine tag-Variable, die verwendet werden kann, um Code nur auf einer Seite mit Blog-Thema-Listing-Seite zu rendern. Das folgende Beispiel ist ein Snippet, das die Seitentitelvariable verwendet, um den Tag-Namen automatisch am Anfang einer Tag-Listing-Seite zu drucken. Dieses Snippet könnte in den Code Ihres Blog-Listings eingefügt werden.

{% if tag %} <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3> {% endif %}

if not simple_list_page-Anweisung

Innerhalb der for-Schleife gibt es eine if-Anweisung, die festlegt, was in einem einfachen und was in einem regulären Listing dargestellt werden soll.

  • Ein einfaches Listing ist ein Listing aller Ihrer Beiträge und unterstützt keine Seitennummerierung. Das einfache Listing ist von der Blog-Einstellung für das Beitragslimit nicht betroffen und enthält in der Regel nur Links zu den letzten 200 Blog-Beiträgen.
  • Das reguläre Listing durchläuft die in der Beitrags-Listing-Blog-Einstellung angegebene Anzahl von Beiträgen und nummeriert Seiten entsprechend.

Die Adresse Ihrer einfachen Listing-Seite ist die URL Ihres Blogs mit dem Zusatz /all am Ende des Pfades.

Der folgende Code ist eine vereinfachte Version dieser if-Anweisung, die definiert, was in einer einfachen Listing-Seite durchlaufen werden soll. Beachten Sie, dass die if-Anweisung umgekehrte Logik verwendet; daher definiert die else-Anweisung die einfache Listing-Ansicht. Optional können Sie stattdessen eine unless-Anweisung verwenden.

{% if not simple_list_page %} Iterated post markup for regular listing {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %}

Seitennummerierung von Listings

Blog-Listing-Seiten haben eine automatisch generierte Seitennummerierung. Ihre Listing-Vorlage kann Logik enthalten, die es den Besuchern ermöglicht, einfach durch Ihre Blog-Beiträge zu blättern. Der Boilerplate-Blog erhält durch folgendes Markup eine einfache Seitennummerierung:

{% if contents.total_page_count > 1 %} <div class="blog-pagination"> {% set page_list = [-2, -1, 0, 1, 2] %} {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %} {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %} {% elif current_page_num == 2 %}{% set offset = 1 %} {% elif current_page_num == 1 %}{% set offset = 2 %} {% else %}{% set offset = 0 %}{% endif %} <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="{{ blog_page_link(last_page_num) }}"> {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %} Prev </a> {% for page in page_list %} {% set this_page = current_page_num + page + offset %} {% if this_page > 0 and this_page <= contents.total_page_count %} <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a> {% endif %} {% endfor %} <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="{{ blog_page_link(current_page_num + 1) }}"> Next {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %} </a> </div> {% endif %}

Blog-Beitrags-Markup

Alle Blog-Beiträge in einem Blog werden mit einer einzigen Blog-Vorlage erstellt. content ist ein vordefiniertes Datenobjekt, das Informationen zum angeforderten Blog-Beitrag enthält. Boilerplate-Beiträge werden mit folgendem Markup gerendert:

<div class="content-wrapper"> <div class="blog-post"> <h1>{{ content.name }}</h1> <div class="blog-post__meta"> <a href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}"> {{ content.blog_post_author.display_name }} </a> <div class="blog-post__timestamp"> {{ content.publish_date_localized }} </div> </div> <div class="blog-post__body"> {{ content.post_body }} </div> {% if content.tag_list %} <div class="blog-post__tags"> {% icon name="tag" style="SOLID" %} {% for tag in content.tag_list %} <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </div> {% endif %} </div> <div class="blog-comments"> {% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %} </div> </div>

Die Informationen zum Autor des Blog-Beitrags sind ebenfalls in den content-Daten enthalten.

<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}"> <h3>Written by <a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3> <p>{{ content.blog_post_author.bio }}</p> {% if content.blog_post_author.has_social_profiles %} <div class="hs-author-social-section"> <div class="hs-author-social-links"> {% if content.blog_post_author.facebook %} <a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a> {% endif %} {% if content.blog_post_author.linkedin %} <a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a> {% endif %} {% if content.blog_post_author.twitter %} <a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a> {% endif %} {% if content.blog_post_author.google_plus %} <a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a> {% endif %} </div> </div> {% endif %}
War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.