Der erste Code!

Ich habe mich mal wieder an eine Sprache gewagt, mit der ich mich
lange nicht mehr beschäftigt habe: JavaScript.
Praktischerweise habe ich, durch den fehlenden multilanguage-Support hier, direkt mein erstes Code-Schnipsel.
Und dabei auch noch eine Anleitung zum Einfügen in Blogger.

Zuerst – Das Problem:
Ich will meine Artikel sowohl auf deutsch als auch auf englisch anbieten. Einfach
zwei Posts hintereinander klatschen, kommt für mich natürlich nicht in Frage, daher
brauche ich etwas Dynamik in der Webseite.

Der Plan:
Der User soll für jeden Artikel individuell wählen können, ob er ihn auf deutsch oder
auf englisch lesen will. Also soll sich mit einem Klick auf einen Button oder Link,
der Inhalt der Webseite ändern. (Hallo JavaScript).

Die Lösung:







Wechsle zu Deutsch |
Switch to English

Deutsch

English


Analyse:
Wir haben eine HTML-Seite. Auf dieser Seite sind 2 DIV-Elemente, jeweils eines für
jede Sprache. Sie sind durch ihre id-Attribute eindeutig erkennbar.
Der JavaScript Code wird simpel in eine HTML-Seite eingebettet.
An die Funktion soll das Element übergeben werden, von dem aus
die Funktion aufgerufen wurde. Das ist wichtig, damit man jeden Artikel einzeln
auf DE/EN umstellen kann. Außerdem wird noch übergeben, welche Sprache angezeigt
werden soll. Die Funktion durchläuft alle Kind-Elemente des Eltern-Elements, und
prüft, ob unser div-Element dabei ist (gekennzeichnet durch die id ‚de‘ oder ‚en‘).
Und dann wird schlicht, basierend auf der übergebenen Sprache, das div-Element
angezeigt (style.display = ‚block‘) oder ausgeblendet (style.display=’none‘).

Weiterführend: Implementation in Blogger:
Da wir jeden Artikel einzeln auf deutsch oder englisch umstellen möchten, müssen
unsere Wechsel-Links und Sprachen-DIVs in jedem Post angezeigt werden. Hierzu
bietet sich die Post-Vorlagen von Blogger an:
Dashboard > Einstellungen > Posts und Kommentare > Vorlage veröffentlichen
Hier geben wir einfach die Links und Div-Elemente an:

Wechsle zu Deutsch |
Switch to English

Damit alles korrekt ausgeführt wird, brauchen wir natürlich noch die JavaScript
Funktion. Es wäre Unsinn, die Funktion in jedem Post neu zu deklarieren, also sollte
sie idealerweise nur ein mal deklariert und definiert werden, am besten im Header der Seite.
Um dies zu tun, ändern wir einfach das Template des Blogs.
Dashboard > Vorlage > HTML Bearbeiten > Fortfahren
Fügt man nun einfach das JavaScript im Header ein, wird Blogger eine Fehlermeldung
ausgeben. Daher müssen wir den Inhalt des script-Tags als CDATA einbetten.

Et voilá, unser Script wird in Blogger direkt eingebettet, wir haben eine Post-Vorlage,
nun müssen wir nur die zwei Sprachversionen in die verschiedenen DIVs schreiben.

Ich hoffe das Beispiel hat euch gefallen und hilft euch weiter. Bei Fragen einfach
in die Kommentare schreiben.

Dieser Eintrag wurde veröffentlicht in JS
Bookmarken: Permanent-Link Schreibe einen Kommentar oder hinterlasse einen Trackback: Trackback-URL.
Achtung: Wordpress interpretiert bestimmte Zeichenfolgen als Markup und verändert diese. Nutzt für Programmcode lieber Gist oder PasteBin-Services und verlinkt die Code-Schnipsel.

Post a Comment

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>