Jinja-Vorlage – Kurze Einführung und KOSTENLOSE Beispiele

Hallo Coder,

Dieser Artikel ist eine kurze Einführung in Flaschen-/Jinja-Vorlagen system, eine moderne und Designer-freundliche Sprache für Python. Jinja wird stark in populären Frameworks wie Flask und Django verwendet und basierend auf den Ähnlichkeiten mit anderen Engines (Blade, Liquid, Nunjunks) kann jedes hier vorgestellte Jinja-Projekt mit ein wenig Arbeit in Nodejs oder Php verwendet werden.
Um diesen Artikel nützlich zu machen, werde ich ein paar kostenlose Beispiele bereitstellen, die eingebaut sind Jinja zusätzlich zu modernen UI-Kits, die unter freizügigen Lizenzen veröffentlicht wurden.


Danke fürs Lesen! Die relevanten Links sind:


Jinja-Vorlage – Pixel-Benutzeroberfläche, kostenloses Jinja-Projekt, bereitgestellt von AppSeed.


Jinja ist eine Bibliothek für Python, die von beliebten Web-Frameworks wie Flask und Django verwendet wird, um HTML-Seiten auf sichere und effiziente Weise bereitzustellen. Die Verwendung einer Template-Engine ist eine gängige Praxis in der Webentwicklung, unabhängig von der Sprache oder dem Framework, das zum Codieren der Webanwendung verwendet wird.

Jinja-Umgebung

Da es sich um eine Python-Bibliothek handelt, erfordert Jinja, dass Python installiert und über das Terminal verwendet werden kann. Wir können die Python-Installation durch Eingabe überprüfen python --version. Sobald wir sicher sind, dass Python installiert ist, kann Jinja über installiert werden PIPder offizielle Paketmanager für Python:

$ pip install jinja2

Das einfachste Jinja-Code-Snippet könnte das folgende sein:

>>> from jinja2 import Template
>>> t = Template("Jinja {{ token }}!")
>>> t.render(token="works")
u'Jinja works!'

Gründe/Vorteile der Verwendung einer Template-Engine

Arbeite weniger

Jinja ermöglicht es uns, Komponenten (auch bekannt als allgemeine HTML-Chunks) in vielen Seiten und Kontexten mit geringfügigen Änderungen wiederzuverwenden. Stellen Sie sich vor, wir haben eine Fußzeile mit einigen Links und Kontaktinformationen, die allen Seiten in einer Webanwendung gemeinsam sind. Mit Jinja können wir eine separate Datei mit dem Namen definieren footer.html und wir können es mit einem einfachen Include wiederverwenden:


footer.html Definition

<footer class="footer">
    <div class=" container-fluid ">
        <span>
            &copy; YourCompany;
        </span>
        
        <span>
            Contact: bill [ @ ] microsoft.com
        </span>
    </div>
</footer>

footer.html Verwendung auf einer letzten Seite:

<head>
  <title>
    Jinja Template - Cheat Sheet | Dev.to
  </title>
</head>
<body>
    <div class="content">
        Some cool content
    </div>
    
     
    {% include 'footer.html' %}    

</body>
</html>

Vorlagenvererbung

Vererbung bedeutet im Jinja-Kontext, a zu definieren base template die die Grundstruktur aller nachfolgenden Child-Templates definiert. Diese Master-Vorlage kann sein inherited über extends Anweisung zum Erstellen von Variationen (neue Seiten).

Eine echte Probe

Übergeordnetes HTML – gespeichert als base.html

<html>
  <head>
    <title>My Jinja {% block title %}{% endblock %} </title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      { block content }{ endblock }
      <br>
    </div>
  </body>
</html>

Die Child-Vorlage – gespeichert als child.html

{ extends "base.html" }

{ block title } MySample { endblock }

{ block content }
  Cool content here
{ endblock }

Wenn Jinja lädt child.htmldas { extends } Block informiert die Engine, um die zusammenzuführen base.html Vorlage mit den bereitgestellten Inhalten von child.html.

  • { block title } wird Meine Probe
  • { block content } wird Cooler Inhalt hier

Generiertes HTML

<html>
  <head>
    <title>My Jinja MySample</title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      Cool content here
      <br>
    </div>
  </body>
</html>

Jinja – Listen rendern

Jinja unterstützt Kontrollstrukturen wie if/else, for loops Listen und Wörterbücher zu manipulieren.

Listendefinition


users = ['user1','user2', 'user3']

Jinja-Codeausschnitt

<h1>Members</h1>
<ul>
{% for user in users %}
  <li>{{ user }}</li>
{% endfor %}
</ul>

Generiertes HTML

<h1>Members</h1>
<ul>
  <li>user1</li>
  <li>user2</li>
  <li>user3</li>
</ul>

For Schleifen können mit einem einfachen auf Leerheit überprüft werden elsewie nachstehend:

Jinja-Codeausschnitt

<ul>
{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
</ul>

Generiertes HTML

<h1>Members</h1>
<ul>
  <li>no users found</li>
</ul>

Jinja – HTML-Escapezeichen

Escaping ist nützlich, wenn HTML generiert wird und der eingefügte Inhalt möglicherweise enthält >, <, &oder ". Das Entkommen in Jinja funktioniert, indem die Variable durch den |e-Filter geleitet wird:

Jinja-Codeausschnitt

{{ content|e }} 

Jinja-Filter

Filterabschnitte ermöglichen die Anwendung regulärer Jinja-Filter auf einen Block von Vorlagendaten – die Syntax:

Jinja-Codeausschnitt

{% filter upper %}
    uppercase me
{% endfilter %}

Generiertes HTML

UPPERCASE ME

Jinja Math

Mit Jinja können Sie Werte berechnen. Hier sind einige Beispiele:

{{ 1 + 1 }} will render 1
{{ 1 / 2 }} will render 0.5
{{ 11 % 7 }} will render 4

Wenn dies Jinja-Vorlage Spickzettel hört sich nach etwas an, das Sie in Ihrer Entwicklung verwenden können. Wir können mit echten Beispielen fortfahren, die auf topmodernen und kostenlosen UI-Kits codiert sind.


Pixel-UI ist ein kostenloses, voll reaktionsfähiges und modernes Bootstrap 4 UI Kit, mit dem Sie kreative und professionelle Websites erstellen können. Verwenden Sie unsere Komponenten und Abschnitte, wechseln Sie einige Sass-Variablen, um Seiten so zu erstellen und anzuordnen, dass sie Ihren Anforderungen am besten entsprechen.
Pixel ist eine Premium-Erweiterung des berühmten Bootstrap CSS Framework mit Preiskarten, Profilkarten, Zeitleisten und vielem mehr. Alle Komponenten werden so erstellt, dass sie so weit wie möglich den WCAG 2.1-Standards entsprechen.


Template Jinja2 Theme – Vorlagenprojekt bereitgestellt von AppSeed.


Datta Able Lite (kostenlose Version), entworfen von CodedThemes, ist jetzt in Flask Framework verfügbar. Das Datta-fähige Rendering ist in allen gängigen Browsern schnell. Es wird durch eine gute Punktzahl in Google Page Speed, Pingdom, GT Metrix geleitet. Code über w3-Validatoren mit allen w3-Standards übergeben. Dieses Admin-Panel reagiert vollständig und wurde auf allen Retina-Geräten getestet.


Template Jinja2 Theme Datta Able – Vorlagenprojekt bereitgestellt von AppSeed.


Open-Source Flask Bootstrap 5 Seed-Projekt, das mit Authentifizierung, ORM und Bereitstellungsskripten auf einem modernen jQuery-freien Design erstellt wurde – Volt Dashboard. Diese Dashboard-Vorlage basiert auf Bootstrap, dem weltweit beliebtesten Framework zum Erstellen reaktionsschneller, Mobile-First-Websites.


Jinja-Vorlage - Volt-Dashboard.


Mit der vollen Leistung von Jinja können wir Zeit gewinnen und die von Webprojekten verwalteten HTML-Dateien faktorisieren. Die Wiederverwendung von Komponenten, die dynamische Informationsinjektion, die aus der Datenbank geladen oder vom Benutzer bereitgestellt wird, kann uns helfen, unsere Projekte schneller zu liefern.

Weitere Ressourcen zu Thing Amazing Template Engine finden Sie über die Links:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *