Zum Hauptinhalt springen
Letzte Änderung: 2. Dezember 2025

Unterstützte Produkte

Erfordert eines der folgenden Produkte oder höher.
Marketing HubMarketing Hub -Professional
Content HubContent Hub -Starter
HubSpot-Blogs bestehen aus Blog-Listing-Seiten und den einzelnen Blogbeiträgen. Neben dem Listing der einzelnen Blogbeiträ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 Blogbeitragsseiten darzustellen, oder Sie können zwei separate Vorlagen erstellen. Im Folgenden erfahren Sie mehr über Blog-Vorlagen-Markup, Vorlagenkomponenten und Anpassungsoptionen.

​
Eiine gemeinschaftlich nutzbare Vorlage für die Listing- und Post-Seiten erstellen

Um eine einzelne Vorlage zu erstellen, die die Listing- und Beitragsseiten darstellt, fügen Sie die templateType: blog-Annotation 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. Mit der if is_listing_view-Anweisung können Sie Ihren Post- und Listing-Code separat schreiben. 
{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

​
Separate Listings und Beitragsvorlagen erstellen

Alternativ können Sie auch separate Vorlagen für Blogbeitrag- und Listing-Seiten festlegen, um Ihren Code sauberer und für Entwicklerteams lesbarer zu machen und gleichzeitig die Vorlagenauswahl für Content-Autor zu erleichtern. Anstatt die templateType: blog-Anmerkung am Anfang jeder Vorlage zu verwenden, fügen Sie die folgenden Anmerkungen jeweils oben in der entsprechenden Vorlage ein:
  • Vorlage für den Blogbeitrag: templateType: blog_post
  • Vorlage für das Blog-Listing: templateType: blog_listing
Vorlagen-Annotation-Blog-listing
Beim Erstellen separater Beitrags- und Listing-Vorlagen ist die is_listing_view-Prüfung nicht erforderlich. Stattdessen wählen Sie manuell separate Vorlagen in den Blog-Einstellungen des Accounts aus. Sie können auch eine vorhandene einheitliche Blog-Vorlage migrieren, um daraus entweder eine Blogbeitrag- oder Blog-Listing-Vorlage zu machen.

​
Landing-Page-Vorlage

Die templateType: blog_listing-Anmerkung führt dazu, dass die Vorlage in den Blog-Einstellungen auswählbar ist, insbesondere für die Listing-Ansicht. Mit diesem Vorlagentyp können Content-Autor auch im Seiten-Editor die Listing-Seite bearbeiten. Durch die Einbeziehung von Drag-&-Drop-Bereichen in die Vorlage lassen sich Module im Seiten-Editor hinzufügen und entfernen, wie dies bei anderen CMS-Seiten der Fall ist. In den CMS-Boilerplate-Blogvorlagen finden Sie u. a. Beispiele für Drag-&-Drop-Bereiche. Die Auflistung von Beiträgen wird von einer for-Schleife generiert, die Ihre Blogbeiträge durchläuft. contents ist eine vordefinierte Content-Sequenz, 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 %}
Wir empfehlen Ihnen, alle Textzeichenfolgen in Ihrer Blog-Listing-Vorlage über Felder zu steuern. Dies erleichtert die Erstellung mehrsprachiger Blogs und gibt Content-Schaffenden mehr Kontrolle.

​
Ein Blog-Listing-Modul erstellen

Sie können es Content-Autoren ermöglichen, Module am Rand der Blog-Listing-Inhaltezu platzieren, z. B. an den Seiten oder ganz oben und unten. Um dies zu aktivieren, empfiehlt es sich, ein Blog-Listing-Modul zu erstellen, das ein Blog-Listing für Schleifen verwendet. Ein Beispiel hierfür ist das Listing-Modul für den CMS-Boilerplate-Blog. HubSpot bietet zwar Blog-Einstellungen für die Anzeige von Zusammenfassungen und die Verwendung von Feature-Bildern, Sie können diese Funktionen aber auch in Ihr Modul integrieren. Dies ermöglicht es Content-Autoren, diese Funktionen innerhalb des Seiten-Editors und nicht in den Blog-Einstellungen festzulegen.

​
Blog-Autor-, Tag- und einfache Listing-Seiten

Neben den Blogbeitrags- und Blog-Listing-Seiten verfügen HubSpot-Blogs auch über Seiten für Blog-Autoren, Blogbeitrag-Tags und einfache Listings. Diese zusätzlichen Seiten verwenden dieselbe Vorlage wie die Blog-Listing-Seite, um Content zu rendern.
Da die Vorlage der Listing-Seite auch von der Blog-Autor-, Tag- und einfachen Listing-Seite genutzt wird, gelten an der Vorlage veröffentlichte Updates auch für diese Seiten.
Um das Layout dieser Seiten einzeln zu konfigurieren, können Sie if-Anweisungen verwenden, um Content je nach Seitentyp bedingt zu rendern.

​
Ifblog_author

Im standardmäßigen Blog-Listing-Markup von HubSpot gibt es eine if blog_author-Anweisung. Diese Anweisung wird als ‚true‘ gewertet, wenn man die Seite eines Autors aufruft, auf der die vom Autor veröffentlichten Beiträge aufgelistet sind. Die Boilerplate-Vorlage enthält den Namen des Autors, seinen Lebenslauf und seine Social-Media-Konten. 
{% 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="https://developers.hubspot.de/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://developers.hubspot.de/docs{{ blog_author.facebook }}" target="_blank">
              {% icon name="facebook-f" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.linkedin %}
            <a href="https://developers.hubspot.de/docs{{ blog_author.linkedin }}" target="_blank">
              {% icon name="linkedin-in" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.twitter %}
            <a href="https://developers.hubspot.de/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

​
If-Tag

Sie können eine if tag-Anweisung verwenden, um nur Code auf einer Seite zum Blogthemen-Listing zu rendern, die Besucher sehen können, wenn sie auf Ihrer Website auf ein Blogthema klicken. Das folgende Beispiel ist ein Snippet, das die Seitentitelvariable verwendet, um den Tag-Namen automatisch am Anfang einer Tag-Listing-Seite zu drucken. 
{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

​
If notsimple_list_page

Es gibt zwei Typen von Blog-Listing-Seiten, die gerendert werden können, um Listings von Blogbeiträgen anzuzeigen: die reguläre Listing-Seite und eine einfache Listing-Seite: – Das reguläre Listing durchläuft die in der Beitrags-Listing-Blog-Einstellung angegebene Anzahl von Beiträgen und nummeriert Seiten entsprechend.
  • 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 Blogbeiträgen. Die Adresse Ihrer einfachen Listing-Seite ist die URL Ihres Blogs mit dem Zusatz /all am Ende des Pfades.
Sie können eine if not simple_list_page-Anweisung verwenden, um zu bestimmen, was in einem einfachen und was in einem regulären Listing dargestellt werden soll. Eine vereinfachte Version dieser Anweisung finden Sie weiter unten.
Beachten Sie bitte, dass die if-Anweisung umgekehrte Logik verwendet, was bedeutet, dass mit else die einfache Listing-Ansicht definiert wird. 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="https://developers.hubspot.de/docs{{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 Blogbeiträ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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

​
Blog-Vorlagen-Markup

Unten sehen Sie das Boilerplate-Markup für die Blogbeitrag- und Blog-Listing-Seitenvorlagen. Sie können dieses Markup auch in der CMS-Boilerplate auf GitHub anzeigen, wie in den einzelnen Abschnitten aufgeführt.

​
Blog-Vorlagen-Markup

Alle Blogbeiträge in einem Blog werden mit einer einzigen Blogvorlage erstellt. Content ist ein vordefiniertes Objekt von Daten, das Informationen zum angeforderten Blogbeitrag 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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 Blogbeitrags 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ 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 %}

​
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="https://developers.hubspot.de/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://developers.hubspot.de/docs{{ 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="https://developers.hubspot.de/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://developers.hubspot.de/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

​
Verwandte Ressourcen