Link

Das Objekt link kann nicht eigenständig aufgerufen werden. Sie muss innerhalb einer Linkliste aufgerufen werden.

Das Objekt link hat die folgenden Attribute:

Inhalt

Gibt true zurück, wenn das Link-Objekt aktiv ist, oder false, wenn das Link-Objekt inaktiv ist.

Ein Link gilt als aktiv, wenn die Ressource, auf die er verweist, Teil der URL-Struktur ist. Wenn die aktuelle Seite zum Beispiel /blogs/news/snowfall heißt, sind die folgenden Links aktiv:

  • /blogs/news, wobei die Ressource der Blog ist
  • /blogs/news/snowfall, wobei die Ressource der Blog-Artikel ist

In Anbetracht des Verhaltens von link. active können mehrere Links in einem Menü gleichzeitig link. active und true haben, auch wenn sie unterschiedliche Werte für link. url haben.

Die Eigenschaft link. active ist nützlich für Menüdesigns, die hervorheben, wenn die Navigationskategorien der obersten Ebene angezeigt werden. Ein Beispiel hierfür wäre ein Menü, das den Link zum Blog "News" hervorhebt, wenn ein Artikel aus diesem Blog gelesen wird.

More examples

Wenn Sie sich auf einer Sammlungsseite befinden, die mit Tags gefiltert ist, dann gibt ein Link, der auf die ungefilterte Sammlungsseite zeigt, immer noch true für link. active zurück. Wenn zum Beispiel die URL collections/men/boots lautet, sind die folgenden Links aktiv:

  • collections/men, wobei die Ressource die Sammlung ist
  • collections/men/boots, wobei die Ressource die gefilterte Sammlung ist

Wenn Sie sich auf einer Produktseite befinden, die sammlungsfähig ist, gibt link. active true sowohl für die sammlungsfähige Produkt-URL als auch für die sammlungsunabhängige URL zurück. Wenn zum Beispiel die URL /products/awesome-product lautet, sind die folgenden Links aktiv:

  • /products/awesome-product
  • /collections/awesome-collection/products/awesome-product
  • /collections/all/products/awesome-product

Ähnlich wie link. active, gibt aber true zurück, wenn ein untergeordneter Link des übergeordneten Links aktiv ist, oder false, wenn keine untergeordneten Links des übergeordneten Links aktiv sind.

Dieses Beispiel zeigt den Liquid-Code und die Ausgabe, wenn die Seite "Montreal" auf einer Website aufgerufen wird. Die Beispiel-Website hat die folgende Hauptmenüstruktur:

Hauptmenü
  └ Zuhause
  └ Über Uns
    └ Orte
      └ Lübeck
      └ Hannover
{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_active: {{ link.child_active }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_active: {{ sub_link.child_active }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: active: {{ sub_sub_link.active }}
    {% endfor %}
  {% endfor %}
{% endfor %}
Hauptmenü

Zuhause: child_active: false
Über Uns: child_active: true
  In the news: child_active: false
  Orte: child_active: true
    Lübeck: active: true
    Hannover: active: false

Gibt true zurück, wenn der mit link verknüpfte Seiteninhalt als übereinstimmend mit der aktuellen Seite angesehen wird. Gibt false zurück, wenn der Inhalt als nicht übereinstimmend angesehen wird.

Das folgende Beispiel zeigt den Liquid-Code und die Ausgabe, wenn die Seite /collections/winter aufgerufen wird. Die Beispiel-Website enthält eine Linkliste mit den folgenden drei Links:

  • Sommerkollektion, /collections/summer
  • Winterkollektion, /collections/winter
  • Alle Produkte, /collections/all
{% for link in linklists.main.links %}
  <a href="{{ link.url }}" {% if link.current %}aria-current="page" class="highlight" endif %}>
   {{ link.title }}
  </a>
{% endfor %}
<a href="/Sammlungen/sommer">Sommer collection</a>
<a href="/Sammlungen/winter" aria-current="page" class="highlight">Winter collection</a>
<a href="/Sammlungen/all">Alle Produkte</a>

Die Eigenschaft link. current identifiziert keine exakten URL-Übereinstimmungen zwischen der URL der aktuellen Seite und einem link. url wert. Es gibt zwei wichtige Verhaltensweisen, auf die Sie achten sollten:

  • link. current ignoriert URL-Parameter
  • link. current behandelt Produkt-URLs und sammlungsspezifische Produkt-URLs als übereinstimmenden Seiteninhalt

Ignoring URL parameters

Wenn die aktuelle URL der Seite /collections/winter?sort_by=price_ascending, dann ist link. current true für einen Link mit einem link. url von /collections/winter.

Dieses Verhalten ist nützlich, weil ein Sammlungslink, der in einem Menü hervorgehoben ist, hervorgehoben bleiben sollte, nachdem die Sammlung neu geordnet wurde.

Handling collection-aware product URLs

Wenn die aktuelle Seiten-URL /products/wool-gloves lautet, gibt link. current true auf den folgenden link Objekten zurück:

  • /collections/gloves/products/wool-gloves
  • /products/wool-gloves

Dieses Verhalten ist nützlich, um zuverlässig zu erkennen, wann sich ein Produkt, das gerade angezeigt wird, in einem Menü befindet. Der Inhalt der Produktseite ist oft weitgehend identisch, unabhängig davon, ob der Link sammlungsfähig ist.

Gibt true zurück, wenn ein untergeordneter Link ein link Objekt mit link. current gleich true. Gibt false zurück, wenn keine untergeordneten Links ein link Objekt mit link. current gleich true haben.

Dieses Beispiel zeigt den Liquid-Code und die Ausgabe, wenn die Seite "Montreal" auf einer Website aufgerufen wird. Die Beispiel-Website hat die folgende Hauptmenüstruktur:

Hauptmenü
  └ Zuhause
  └ Über Uns
    └ Orte
      └ Lübeck
      └ Hannover
{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_current: {{ link.child_current }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_current: {{ sub_link.child_current }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: current: {{ sub_sub_link.current }}
    {% endfor %}
  {% endfor %}
{% endfor %}
Hauptmenü

Zuhause: child_current: false
Über Uns: child_current: true
  In the news: child_current: false
  Orte: child_current: true
    Lübeck: current: true
    Hannover: current: false

Gibt die Anzahl der verschachtelten Ebenen zurück, die ein Link enthält.

Ein Beispiel ist die folgende Hauptmenüstruktur:

Hauptmenü
  └ Zuhause
  └ Über Uns
    └ Orte
      └ Lübeck
      └ Hannover

Der folgende Liquid-Code:

{% assign menu = linklists.main-menu %}

{{ menu.title }}: {{ menu.levels }}
{% for link in menu.links %}
  {{ link.title }}: {{ link.levels }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: {{ sub_link.levels }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: {{ sub_sub_link.levels }}
    {% endfor %}
  {% endfor %}
{% endfor %}

ergibt die folgende Ausgabe (aus Platzgründen editiert):

Hauptmenü: 3
  Zuhause: 0
  Über Uns: 2
    Orte: 1
      Lübeck: 0
      Hannover: 0

Gibt ein Array mit den untergeordneten Links zurück, die mit dem übergeordneten Link verknüpft sind.

Gibt die mit dem Link verbundene Variable zurück. Die möglichen Typen sind:

  • produkt
  • sammlung
  • seite
  • blog

Über link. object können Sie auf jedes der Attribute zugreifen, die in den drei oben genannten Variablen verfügbar sind.

 <!-- If the product links to a product mit einer price of €10 -->
{{ link.object.price | money }}
€10

Gibt den Titel des Links zurück.

Gibt den Typ des Links zurück. Die möglichen Werte sind:

  • blog_link: wenn der Link auf ein Blog verweist
  • catalog_link: wenn der Link auf die Katalogseite verweist /collections/all
  • collection_link: wenn der Link auf eine Sammlung verweist
  • collections_link: wenn der Link auf die Seite mit der Sammlungsliste verweist /collections
  • frontpage_link: wenn der Link auf die Homepage verweist /
  • http_link: wenn der Link auf eine externe Webseite oder eine Typ- oder Herstellersammlung verweist (z. B. /collections/types?q=Pants)
  • page_link: wenn der Link auf eine Seite verweist
  • policy_link: wenn der Link auf eine Policy-Seite verweist /policies
  • product_link: wenn der Link auf eine Produktseite verweist
  • search_link: wenn der Link auf die Suchseite verweist /search

Gibt die URL des Links zurück.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.