Dark Forest von Web-Programmierung, oder wie wir mehrsprachige Website gemacht haben

9 März 2018

Middleread

Um uns als wettbewerbsfähige Einheit zu deklarieren, studieren wir neue Technologien und wenden sie in der Praxis an. Bei der Entwicklung unserer Website wurde beschlossen, Jekyll auszuprobieren.

Jekyll ist ein Static Site Generator, der das Hosting auf Github Pages unterstützt. In Ruby implementiert. Dieser Generator verfügt über alle Voraussetzungen zum Erstellen einer grundlegenden Logik zum Anzeigen von Informationen auf den Seiten sowie zum Platzieren dieser Seiten auf der Website. Seine Hauptaufgabe besteht darin, einen statischen Blog zu generieren.

Aber wir gingen nicht standardisiert vor und stellten uns den folgenden Aktionsplan vor: eine Teamseite mit Informationen über Projekte, die Zusammensetzung des Teams, die Offenlegung unserer Projektpolitik und all dies in drei Sprachen zu erstellen (Mehrsprachig).

Mehrsprachig

Multilanguage kann ganz einfach organisiert werden, wenn Sie alle Dateien in einem Unterordner mit dem Sprachflag (ru, en) www.site.ru/ru/страница ablegen. Aber eine andere Herangehensweise war erforderlich, nämlich die russische Sprache sollte die wichtigste sein, und en und de waren zweitrangig. Die Frage wurde mit dem Variablen Permalink gelöst. Jekyll behandelt Dateien als statische und dynamische Dateien, die einfach übertragen werden, wenn sie im selben Verzeichnis generiert werden, und in Dynamic werden die Daten durch YAML und Liquid ersetzt. Jede dynamische Datei enthält zu Beginn eine Konstruktion:

---
#Hier sind die Variablen Yaml
---

Die Permalink-Variable ist verantwortlich für das Layout der Seite nach der Generierung. Damit können Dateien mit Übersetzungen in einem Unterverzeichnis en und de gerendert werden.

Es sollte beachtet werden, dass wir in jeder Datei eine variable language hinzugefügt haben, um die Sprache anzugeben. (siehe Beispiele unten)

Das Wechseln von Sprachen erfolgt ebenfalls mit Jekyll. Auf den Schaltflächen ru / en / de sammelt er Links, die zur selben Datei der gewünschten Sprache führen. Dementsprechend kehrt der Benutzer beim Umschalten der Sprache nicht auf die Hauptseite zurück und muss nicht nach dem suchen, was er bereits hatte. Die Verknüpfung ist wie folgt:

Für RU:

<a href ="{{ site.baseurl }}{{ page.handle }}">

Für EN:

<a href ="{{ site.baseurl }}/en{{ page.handle }}">

Ähnlich für DE.

handle - die Variable, die jeder Datei hinzugefügt wird, speichert ihren Pfad zur Datei, ohne eine Sprache anzugeben.

baseurl - die Variable, die die URL in dem Hauptverzeichnis enthält, in dem sich die Site befindet, wird in der _config.yml-Datei installiert. In unserem Fall war es nicht notwendig, es zu benutzen.

Aber wenn wir einen separaten Blog über jekyll machen würden, dann wäre in dieser Variable etwas im Spirit /blog geschrieben.

Benutzererfahrung

Im Laufe der Arbeit wurde klar, dass der Benutzer, um zwischen den Projekten wechseln zu können, jedes Mal auf die Listenseite gehen und nach dem nächsten oder vorherigen Projekt suchen müsste. Beurteilen Sie selbst - nicht sehr praktisch. Wir entschieden uns dafür, Schaltflächen hinzuzufügen, sodass der Benutzer nacheinander durch die Projekte blättern konnte, ohne abgelenkt zu werden. Und dann stellte sich die Frage, wie man einen Link zum nächsten und vorherigen Projekt nur mit Jekyll sammeln kann. In diesem Tool für Posts ist diese Funktion standardmäßig, aber nicht für Sammlungen. Die Lösung erwies sich als einfach, obwohl sie mehr Verarbeitungszeit benötigt:

{% if page.collection == 'cases' %}
#Überprüfen wir, ob die Seite in der Sammlung "Projekte" enthalten ist
{% assign items = site.cases | where: "language", page.language %}
#Erstellen wir ein Array mit nur Seiten der Sprache, die sich auf der geöffneten Seite befindet
{% endif %}
{% for item in items %}
#Blättern wir durch das Array mit Seiten
{% if item.title == page.title %}
#Wenn titel übereinstimmt, haben wir das Projekt gefunden, das jetzt geöffnet ist
{% assign previous = forloop.index0 | minus: 1 %}
#Fügen wir der Variablen den Index der vorherigen Seite hinzu
{% if previous >= 0 %}
#Wir überprüfen, dass der Index der vorherigen Seite nicht unter Null liegt
<a href="{{ items[previous].url | prepend: site.baseurl }}">
{% endif %} 
#Verlinken wir auf das vorherige Projekt
#prepend vorher items[previous].url fügen eine baseurl hinzu
#Ähnlich gemacht für das "nächste" Projekt
{% assign next = forloop.index0 | plus: 1 %}
{% if next < forloop.length %} #Der Index muss kleiner als die Länge des Arrays sein
<a href="{{ items[next].url | prepend: site.baseurl }}">
{% endif %}
{% endif %} #Ende des Überprüfungsblocks item.title == page.title
{% endfor %} #Ende des Zyklus blockieren item in items

Übersetzungen aller Schaltflächen werden im Verzeichnis _data vorgenommen und zur Vereinfachung in _data unterteilt. Die Datei sieht so aus:

case_button_see:
  ru: Посмотреть
  en: Look
  de: Anblicken

Angezeigt:

<a>{{ site.data.translate.index_cases_button[page.language] }}</a>

Semmelbröse

Wir haben uns auch dazu entschlossen, dem Nutzer seinen Standort auf der Website anzuzeigen, nämlich breadcrumbs.

Jekyll unterstützt Sammlungen, die sich in _collection befinden, standardmäßig wird es für Postsverwendet, wir haben eine weitere Sammlung von cases (Projekten) hinzugefügt. Innerhalb jeder Sammlung gibt es eine Aufschlüsselung in Sprachen. Auf der Ausgabeseite der Liste der Projekte oder Posts werden nur diejenigen angezeigt, die dieselbe Sprache wie die ausgewählte Sprache haben.

Beispiel:

{% assign cases = site.cases | where: "language", page.language %}
{% for case in cases %}
{% include card_case.html %} # Ausgabe der Projektkarte
{% endfor %}

Breadcrumbs für die Seiten werden in eine separate Datei breadcrumbs.html (ermöglicht es, sie in den Seitencode einzufügen) platziert und wie folgt implementiert:

{% assign pages = site.pages | where: "language", page.language %}
{% for object in pages %}
{% if object.layout == 'index' %}
# Die erste Seite zeigt die Startseite derselben Sprache an
<a class="breadcrumb-item" href="{{ site.baseurl }}{{ object.url }}">{{ object.caption }}</a>
# Caption - die Variable, die zu Dateien hinzugefügt wird, enthält den Titel der Seite in der ausgewählten Sprache, weil Titel wird für Meta-Tags verwendet
{% endif %}
# Als nächstes prüfen Sie, ob diese Seite zu einer Sammlung gehört
{% if object.layout == page.collection %}
{% if object.layout == page.collection %}
##Layout - eine Standardvariable, enthält eine Angabe, welche Vorlage für diese Datei verwendet werden soll, die Vorlagen sind in _layouts.
# Beachten Sie, dass der Name der Ausgabeschablone für alle Projekte mit dem Namen der Sammlung übereinstimmt, in der sie gespeichert sind
<a class="breadcrumb-item" href="{{ site.baseurl }}{{ object.url }}">{{ object.caption }}</a>
{% endif %}
{% endfor %} # Ende des Zyklus object in pages
# Das letzte Element zeigt die aktuell geöffnete Seite an
<span class="breadcrumb-item active">{{ page.caption }}</span>

Manchmal kann es notwendig sein, unter bestimmten Bedingungen ein ganzes Stück HTML-Code auszugeben, in unserem Fall nur für russische Segmentseiten, kann dieser modifizierte Jekyll auch machen. Beispiel:

{% if page.language == 'ru' %}
<p><input type="checkbox" name="agree" checked="checked">
Я согласен с <a href="/assets/docs/policy-for-personal-data-processing.pdf">обработкой персональных данных</a>
</p>
{% endif %}

Dieser Code gibt eine Bestätigung für die Verarbeitung personenbezogener Daten nur auf Seiten mit russischer Sprache aus.

Eine weitere interessante Funktion beim Arbeiten mit Daten ist die Möglichkeit, Ihre Daten von Jekyll zu Javascript hinzuzufügen.

Fügen Sie am Anfang der Datei die Konstruktion hinzu.

---
---

Die Datei danach wird dynamisch und Jekyll prüft sie auf das Vorhandensein von Liquid-Einfügungen

Anwendungsbeispiel:

const error = {{ site.data.modal.error | jsonify }};
#
# site.data.modal.error - директория _data файл modal.yml массив error:
#
# error:
#   ru: Ошибка
#   en: Error
#

Es speichert es in der Variablen js, und es bleibt nur übrig, den Wert durch Ersetzen eines Index oder eines Schlüssels zu erhalten. Zum Beispiel die Sprache der Seite:

const lang = document.querySelector('html').getAttribute('lang');
# <html lang="de"> //Dies ist der Anfang jeder Seite
document.innerHTML = error[lang];

Auf diese Weise können Sie Texte übersetzen, die von Skripten ausgegeben werden.

Jekyll und ist einfach genug, aber es schließt seine Einzigartigkeit nicht aus. Wenn die Standardfunktionalität nicht ausreicht, können Sie das fertige Plug-in installieren oder es selbst schreiben und in die Baugruppe einbinden. Es ist ideal für kleine Websites, ohne eine Datenbank zu verwenden. Sehr praktisch mit einer kleinen Menge an Informationen. Es wird eine ausgezeichnete Lösung sein, um eine persönliche Blog- oder Visitenkarte-Seite zu erstellen. Von den Minuspunkten her stelle ich fest, dass Sie, wenn Sie Dateien ändern, die gesamte Site neu zusammenstellen und für das Hosting neu laden müssen. Wenn Sie ein Hosting mit dem Unix-System verwenden, können Sie jekyll direkt auf dem Hosting ausführen. Es erfordert Kenntnisse eines fortgeschrittenen Benutzers: Verbindung zum Hosting per ftp, Suche und Bearbeitung der gewünschten Datei, Remontage der Site. Leider fehlt es an einem administrativen Panel. Aber, wenn Sie in diesem Bereich mindestens ein wenig kenntnisreich sind, dann werden Sie nicht schwierig sein, stattdessen werden Sie eine einfache Seite, einen schnellen Download bekommen, Suchmaschinen werden sich freuen, und Sie sind mit neuen Kunden glücklich.

Die Autoren des Artikels:
Alexander Vlasov Alexander Vlasov