{"id":1968,"date":"2021-10-06T15:34:47","date_gmt":"2021-10-06T13:34:47","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1968"},"modified":"2021-10-06T15:34:47","modified_gmt":"2021-10-06T13:34:47","slug":"html-seite-uebersetzen-mit-translate-js","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/","title":{"rendered":"HTML-Seite \u00fcbersetzen mit translate.js"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/#Einbinden\" >Einbinden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/#Gestaltung_der_HTML-Seite\" >Gestaltung der HTML-Seite<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/#Erstellen_der_Uebersetzung\" >Erstellen der \u00dcbersetzung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/#Dynamische_Sprachumschaltung\" >Dynamische Sprachumschaltung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/1968\/html-seite-uebersetzen-mit-translate-js\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<p>HTML-Seiten \u00fcbersetzen mit JavaScript.<\/p>\n<p><!--more--><\/p>\n<p>F\u00fcr ein paar HTML-Seiten habe ich nach einer M\u00f6glichkeit gesucht, diese mehrsprachig zu gestalten. Ohne CMS und anderen Kram. Ideal w\u00e4re eine L\u00f6sung mit Java-Script und einem zentralen Punkt zur Verwaltung der Texte, z.B. mit JSON. Gibt es auch! Nennt sich <a href=\"https:\/\/github.com\/andydunkel\/translate.js\" target=\"_blank\" rel=\"noopener\">Translate.js und findet sich auf Github<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Einbinden\"><\/span>Einbinden<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im ersten Schritt m\u00fcssen die Java-Script-Dateien einbinden. JQuery, sofern noch nicht vorhanden, und die Datei f\u00fcr die \u00dcbersetzung.<\/p>\n<pre>&lt;script src=&quot;jquery.js&quot;\/&gt;\r\n&lt;script src=&quot;jquery.translate.js&quot;\/&gt;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Gestaltung_der_HTML-Seite\"><\/span>Gestaltung der HTML-Seite<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die HTML-Seite wird nun ganz normal erstellt, bei Texten bzw. Elementen, welche wir \u00fcbersetzen bzw. \u00fcbersetzbar machen wollen, f\u00fcgen wir die Klasse &#8222;trn&#8220; hinzu. <\/p>\n<pre>h1 class=&quot;trn&quot;&gt;Heading 1&lt;\/h2&gt;\r\n&lt;p class=&quot;trn&quot;&gt;Some text&lt;\/p&gt;\r\n \r\n&lt;form&gt;\r\n&lt;label class=&quot;trn&quot;&gt;Form:&lt;\/label&gt;\r\n&lt;select name=&quot;test&quot; size=&quot;4&quot;&gt;\r\n&lt;option class=&quot;trn&quot;&gt;Option without value&lt;\/option&gt;\r\n&lt;option value=&quot;option value&quot; class=&quot;trn&quot;&gt;Option with value&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>Bis auf die Klasse f\u00fcr die zu \u00fcbersetzenden Elemente wird die HTML-Seite normal erstellt, inklusive Texte. Damit haben wir auch gleichen Fallback, falls JavaScript deaktiviert ist.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/trans_1.png\" alt=\"\" width=\"208\" height=\"210\" class=\"alignnone size-full wp-image-1969\" srcset=\"\/wp-content\/uploads\/2021\/10\/trans_1.png 208w, \/wp-content\/uploads\/2021\/10\/trans_1-150x150.png 150w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Erstellen_der_Uebersetzung\"><\/span>Erstellen der \u00dcbersetzung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr die \u00dcbersetzung legen wir ein JSON-Objekt an. Dieses k\u00f6nnen wir in eine extra Datei auslagern oder alternativ auch einfach in unsere HTML-Seite einbauen. <\/p>\n<p>Die Definition unserer \u00dcbersetzung legen wir als JSON-Objekt an.<\/p>\n<pre>var dict = {\r\n  &quot;Heading 1&quot;: {\r\nde: &quot;\u00dcberschrift 1&quot;,\r\nfr: &quot;Titre 1&quot;\r\n  },\r\n  &quot;Some text&quot;: {\r\nde: &quot;Etwas text&quot;,\r\nfr: &quot;Un peu de texte&quot;\r\n  },\r\n  &quot;Form:&quot;: {\r\n     de: &quot;Formular:&quot;,\r\nfr: &quot;Formulaire:&quot;\r\n  },\r\n  &quot;Option without value&quot;: {\r\nde: &quot;Option ohne Wert&quot;,\r\nfr: &quot;Option sans valeur&quot;\r\n  },\r\n  &quot;Option with value&quot;: {\r\nde: &quot;Option mit value&quot;,\r\nfr: &quot;Option avec valeur&quot;\r\n  }\r\n}\r\n}<\/pre>\n<p>Der Aufbau ist simpel, wir nehmen den Originaltext des Elements und f\u00fcgen anschlie\u00dfend die \u00dcbersetzungen mit K\u00fcrzel hinzu. <\/p>\n<p>Anschlie\u00dfend m\u00fcssen wir nun noch die Sprache festlegen. Dies machen wir nach dem Laden des Dokuments mit dem folgenden Aufruf:<\/p>\n<pre>$(function() {\r\nvar translator = $('body').translate({lang: &quot;fr&quot;, t: dict});\r\n});<\/pre>\n<p>Unsere neue Java-Script-Datei binden wir nun noch in unser HTML-Dokument ein.<\/p>\n<p>Hier \u00fcbergeben wir die Sprache und unser JSON-Objekt. Das Ergebnis sollte eine \u00fcbersetzte Seite sein.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/trans_2.png\" alt=\"\" width=\"235\" height=\"203\" class=\"alignnone size-full wp-image-1970\" \/><\/p>\n<p>\u00dcbergeben wir eine Sprache, welche nicht festgelegt ist oder fehlt ein \u00dcbersetzungsstring f\u00fcr die Sprache, bleibt der Default-Text unseres HTML-Dokuments erhalten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dynamische_Sprachumschaltung\"><\/span>Dynamische Sprachumschaltung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Da alles mit JavaScript im Client passiert, l\u00e4sst sich so nat\u00fcrlich auch eine Umschaltung der Sprache zur Laufzeit realisieren, z.B. mit einem Link:<\/p>\n<pre>&lt;a href=&quot;#&quot; onclick=&quot;var translator = $('body').translate({lang: 'de', t: dict});&quot;;&gt;Deutsch&lt;\/a&gt; |\r\n&lt;a href=&quot;#&quot; onclick=&quot;var translator = $('body').translate({lang: 'fr', t: dict});&quot;;&gt;Fran\u00e7ais&lt;\/a&gt; |\r\n&lt;a href=&quot;#&quot; onclick=&quot;var translator = $('body').translate({lang: 'en', t: dict});&quot;;&gt;English&lt;\/a&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2021\/10\/trans_3.png\" alt=\"\" width=\"249\" height=\"220\" class=\"alignnone size-full wp-image-1971\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine kleine unproblematische L\u00f6sung f\u00fcr die einfache \u00dcbersetzung von Webseiten. <\/p>\n<p><a href=\"https:\/\/github.com\/andydunkel\/translate.js\" target=\"_blank\" rel=\"noopener\">Code und Beispiel auf GitHub<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>HTML-Seiten \u00fcbersetzen mit JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5,15],"tags":[4,44],"class_list":["post-1968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","category-javascript","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/583"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}