> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog-Vorlagen

> Blog-Listing- und Blogbeitragsvorlagen können verwendet werden, um das Erscheinungsbild des Blogs einer Website anzupassen. 

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Unterstützte Produkte",
    description: "Erfordert eines der folgenden Produkte oder höher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Kostenlos",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Unterstützte Produkte" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="starter" />
</Accordion>

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](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) am Anfang Ihrer Vorlagendatei hinzu. Wenn Sie eine Vorlage verwenden, um beides darzustellen, verwenden Sie eine [if-Anweisung](/cms/reference/hubl/if-statements), die auswertet, ob sich der Benutzer eine Listing-Seite oder einen einzelnen Beitrag anschaut. Wenn Sie die [Layouts des Drag-&-Drop-Design-Managers](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates) 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.

```hubl theme={null}
{% 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-](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#blog-post) und [Listing-Seiten](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#blog-listing) 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](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types) jeweils oben in der entsprechenden Vorlage ein:

* **Vorlage für den Blogbeitrag:** `templateType: blog_post`
* **Vorlage für das Blog-Listing:** `templateType: blog_listing`

<Frame>
  <img src="https://www.hubspot.de/hubfs/Knowledge_Base_2021/Developer/template-annotation-blog-listing.png" alt="Vorlagen-Annotation-Blog-listing" />
</Frame>

Beim Erstellen separater Beitrags- und Listing-Vorlagen ist die `is_listing_view`-Prüfung nicht erforderlich. Stattdessen [wählen Sie manuell separate Vorlagen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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](https://developers.hubspot.de/docs).

### Landing-Page-Vorlage

Die `templateType: blog_listing`-Anmerkung führt dazu, dass die Vorlage in den [Blog-Einstellungen auswählbar ist](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings), 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](https://developers.hubspot.de/docs/guides/cms/content/templates/drag-and-drop/overview) 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](https://github.com/HubSpot/cms-theme-boilerplate/pull/349) finden Sie u. a. Beispiele für Drag-&-Drop-Bereiche.

Die Auflistung von Beiträgen wird von einer [for-Schleife](/cms/reference/hubl/loops) generiert, die Ihre Blogbeiträge durchläuft. `contents` ist eine vordefinierte Content-Sequenz, die alle in diesem Blog enthaltenen Beiträge enthält.

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

<Info>
  Wir empfehlen Ihnen, alle Textzeichenfolgen in Ihrer Blog-Listing-Vorlage über Felder zu steuern. Dies erleichtert die Erstellung [mehrsprachiger](/cms/start-building/features/multi-language-content) Blogs und gibt Content-Schaffenden mehr Kontrolle.
</Info>

## 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](/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop) verwendet. Ein Beispiel hierfür ist das [Listing-Modul für den CMS-Boilerplate-Blog](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module). [](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)

HubSpot bietet zwar [Blog-Einstellungen](https://knowledge.hubspot.com/de/blog/manage-your-blog-template-and-settings#select-your-blog-templates) 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.

<Info>
  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.
</Info>

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.

```hubl theme={null}
{% 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.

```hubl theme={null}
{% 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](/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) 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.

<Info>
  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](/cms/reference/hubl/if-statements#unless-statements) verwenden.
</Info>

```hubl theme={null}
{% 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](https://boilerplate.hubspotcms.com/blog) erhält durch [folgendes Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html) eine einfache Seitennummerierung:

```hubl theme={null}
{% 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](https://boilerplate.hubspotcms.com/blog) werden mit [folgendem Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html) gerendert:

```hubl theme={null}
<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.

```hubl theme={null}
<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](https://boilerplate.hubspotcms.com/blog) für die Schleife werden mit [folgendem Markup](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html) gerendert:

```hubl theme={null}
{% 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

* [Blog-Variablen](/cms/reference/hubl/variables#blog-variables)
* [Blog-Vorlagen](/cms/start-building/building-blocks/templates/blog)
* [HubSpot Theme Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [So erstellen Sie ein Projekt](https://knowledge.hubspot.com/de/blog/create-a-new-blog)
* [Ihren Blog in HubSpot importieren](https://knowledge.hubspot.com/de/blog/import-your-content-into-hubspot)