Ich teile meine Implementierung integrierter Tags zum Bilden von Breadcrumb mit Unterstützung für schema.org-Markup sowie Unterstützung für Bootstrap-CSS.
Diese Tags wurden geschrieben, um die Website-Entwicklung zu beschleunigen. Die Arbeit schreitet jetzt viel schneller voran, da der Code kompakter ist, und es ist viel einfacher, Fehler im Breadcrumb-Markup zu beheben, da Sie den Code jetzt nur noch an einer Stelle korrigieren müssen.
Nehmen wir an, Sie haben einen Anwendungskern, der für einige allgemeine Funktionen verantwortlich ist, und er hat ein template_tags -Verzeichnis mit einer core.py -Datei, um alle integrierten Tags zu generieren. Fügen Sie 3 Include-Tags und ein einfaches Tag hinzu, um 4 Breadcrumb-Komponenten zu bilden.
- breadcrumb_schema - aktuelles Schema aus schema.org-Markup speichern
- breadcrumb_home - um den Stamm der Seite zu bilden
- breadcrumb_item - zum Bilden von Elementen des Seitenstrukturbaums
- breadcrumb_active - um das Element der aktuellen Seite der Website zu bilden
core.py
Sehen Sie sich den Inhalt der Python-Datei mit diesen Tags an.
# -*- coding: utf-8 -*-
from django import template
register = template.Library()
@register.simple_tag
def breadcrumb_schema():
return "http://schema.org/BreadcrumbList"
@register.inclusion_tag('core/breadcrumb_home.html')
def breadcrumb_home(url='/', title=''):
return {
'url': url,
'title': title
}
@register.inclusion_tag('core/breadcrumb_item.html')
def breadcrumb_item(url, title, position):
return {
'url': url,
'title': title,
'position': position
}
@register.inclusion_tag('core/breadcrumb_active.html')
def breadcrumb_active(url, title, position):
return {
'url': url,
'title': title,
'position': position
}
Wenn mit dem Tag breadcrumb_schema() alles klar ist, gibt es einfach die Markup-Schema-Definition zurück, dann gibt es weitere Fragen mit anderen Tags.
Das gesamte Markup wird aus drei Hauptparametern gebildet:
- URL - Link zur Produktseite
- Titel - Seitentitel
- position - alle Elemente im Markup müssen nummeriert werden. Zum Beispiel 0, 1, 2, 3 usw.
Für breadcrumb_home() füge ich keine Position hinzu, weil es keinen Sinn macht, es wird immer Position 0 sein. Außerdem gibt es in meinem Fall anstelle eines Titels ein Symbol, also wird die Vorlage es tun unterschiedlich aussehen. ein.
Bei den anderen beiden Tags müssen wir die Position angeben.
Vorlagen
Ich werde sofort eine Reservierung über das Home-Symbol vornehmen. Ich verwende das Material Design Icons -Paket, daher wird es ein span -Tag mit mdi mdi-home geben. Klassen.
breadcrumb_home.html
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ url }}">
<span class="mdi mdi-home">
<span class="d-none" itemprop="name">{{ title }}</span>
</span>
</a>
<meta itemprop="position" content="1" />
</li>
breadcrumb_item.html
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ url }}">
<span itemprop="name">{{ title }}</span>
</a>
<meta itemprop="position" content="{{ position }}" />
</li>
breadcrumb_active.html
<li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<link itemprop="item" href="{{ url }}">
<span itemprop="name">{{ title }}</span>
<meta itemprop="position" content="{{ position }}" />
</li>
Anwenden von Tags in einer Vorlage
Nun, ich werde ein Stück Code aus der Artikelvorlage geben, wo es unter Kampfbedingungen verwendet wird.
{% extends 'home/base.html' %}
{% load core %}
<ul class="breadcrumb bg-light" itemscope itemtype="{% breadcrumb_schema %}">
{% url 'home:index' as home_index_url %}
{% breadcrumb_home home_index_url 'EVILEG' %}
{% url 'knowledge:index' as knowledge_index_url %}
{% breadcrumb_item knowledge_index_url _('Articles') 2 %}
{% breadcrumb_item article.section.get_absolute_url article.section.title 3 %}
{% breadcrumb_active article.get_absolute_url article.title 4 %}
</ul>
Fazit
Stellen Sie sich nun vor, dass Sie anstelle dieser 9 Zeilen in der Artikelvorlage jede Komponente für das richtige Markup schreiben müssten. Die Anzahl der Codezeilen würde sich verdreifachen, und mit der Zunahme dieser monotonen Funktionalität wird es schwieriger, den Site-Code zu warten und schnell zu beheben.
