Anleitung: Einfache multilinguale Webs

Nogga · **Posted:** Sat Jan 06, 2007 5:53 pm

Hallo,

da die Frage immer wieder auftaucht und ich das Ganze bereits mehrmals gelöst habe (mit Bordmitteln) möchte ich hier nun meine (sicherlich nicht 100% perfekte, aber durchaus annehmbare) Lösung vorstellen.

Die Seite besitzt momentan nur 2 Sprachen, aber ist - zumindest technisch - nicht auf eine Maximalanzahl beschränkt.

Genutzt werden außer dem Menumanager keine weiteren Plugins, welche aber wenn gewünscht auch nicht schwierig einzusetzen sein sollten. Im Zweifallsfalle das Plugin immer in mehreren Ausführungen (für jede Sprache) duplizieren.

Nun aber zur eigentlichen Anleitung (aus dem Gedächtnis - ich habe die Lösung bereits vor etwa einem halben Jahr erstellt).

Kurz zur angewandten Technik:
Da ich ein zwei-stufiges Menüsystem (also oben im Header die Hauptkategorien und links die Unterpunkte zu den entsprechenden Seiten) bestand die Disziplin darin dies ebenfalls in diesem System abzubilden.
Ich habe mich dazu entschieden SectionHeaders für Sprachen zu missbrauchen und die entsprechende Lösung sind dann so aus (die Hierarchie):

(siehe angehängten Screenshot)

Die Section Headers leiten die einzelnen Sprachen ein (also de für deutsch, en für englisch). Der Vorteil dieser Lösung ist zudem, dass man bei pretty-urls dann auch die entsprechende Sprache in der URL hat (z.B. http://www.ritenetworking.de/de/dienstleistungen/ für die deutsche Seite Dienstleistungen).

Wichtig ist auch, dass der Seitenname (nicht Titel) natürlich bei jeder Seite anders sein muss, das kann man dann entweder über angehängte Länderkürzel lösen: start_de, start_en, etc., was aber ansichts der pretty url (oben angedeutet) dann wieder doof aussieht, da das Länderkürzel zwei mal in der URL wäre. Dementsprechend solltet Ihr glückliche Seitennamen wählen: start/home für die Startseite de/en oder z.B. dienstleistungen/services, usw.

Die Seiten selbst können natürlich auf beliebigen Templates basieren. Optimalerweise natürlich für jede Sprache ein separates Template, falls man hard-codierten Text im Template hat (z.B. ein Link zum Impressum, bzw. analog im Englischen zum Impress).

Ein deutsches Template sähe dann so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
  <head>
    <title>{title} - {sitename}</title>
    <meta http-equiv="content-language" content="de" />
    {metadata}
    {stylesheet}
  </head>
  <body>
    <div id="overall">
      <div id="header">
        <div id="top_menu">
          {cms_module module='menumanager' template='TopMenu' start_level="2" number_of_levels="1"}
        </div>
      </div>
      <div id="page" class="clearfix">     
        <div id="left_col">
          <div id="logo_block">
            <p><img src="img/logo.gif" width="140" height="108" alt="Logo" /></p>
          </div>
          <div id="language_block">         
            <p>
              {cms_selflink page="startseite" image="img/lang_de.gif" text="Deutsch" imageonly=1}
              {cms_selflink page="home" image="img/lang_en.gif" text="English" imageonly=1}
            </p>
          </div>
          <div id="left_menu">
            {cms_module module='menumanager' template='LeftMenu' start_level="3"}
          </div>
        </div>        
        <div id="content_col">         
          <div id="front_box">
            {random_blob prefix='deTopBox'}  
          </div>
          <div id="content">
             <div class="content_block">
               {content}
             </div>
          </div>
        </div>       
      </div>
      {html_blob name='deFooter'}
    </div>
  </body>
</html>

Bemerkenswert an diesem Template ist zunächst, dass es im Prinzip für alle Sprachen geeignet ist. Dadurch, dass wir dem Topmenü-Menumanager sagen, dass er nur den zweiten Level anzeigen soll (also alles unter de, bzw. en) und auch nur ein weiteres Level (also unsere Hauptkategorien Dienstleistungen, etc.) sucht er sich automatisch, je nachdem ob er gerade in der deutschen (alles unter dem de-Zweig) oder in der englischen Hierarchie (alles unter dem en-Zweig) ist die passende Menü heraus.

Der Language Block ist in diesem Fall ebenfalls simpel aufgebaut - er verweist eben auf die deutsche (startseite) oder eben auf die englische (home) Startseite. Bei einem Klick passiert genau der oben erwähnte Effekt.

Ein Hinweis: Ein Verhalten, dass er immer genau das anderssprachige Pendant zur gerade aktiven Seite aufruft (also bei einem Besuch von Dienstleistungen und anschließendem Klick der Aufruf der Seite Services) ist weder machbar noch wirklich sinnvoll, da es ja nie garantiert ist (und auch nur in den seltensten Fällen praktikabel) genau die gleichen Inhalte in _allen_ Sprachen zur Verfügung zu stellen.

Und zuletzt das linke Menü (LeftMenu) es verhält sich im Prinzip genau wie das TopMenu nur dass eben statt dem 2. Level alles unterhalb des dritten Levels angezeigt wird. Ebenfalls im gerade aktiven Sprachzweig.

Und nun abschließend noch die entsprechenden Menu-Manager-Templates. Dies sind im Prinzip die ganz normalen Templates nur abgespeckt um die Anzeige der Section Headers (sonst würden wir diese am Ende noch sehen...). Also in diesem Fall:

TopMenu:

Code:

{if $count > 0}
<ul>
  {foreach from=$nodelist item=node}
    {if $node->depth > $node->prevdepth}
      {repeat string="<ul>" times=$node->depth-$node->prevdepth}
    {elseif $node->depth < $node->prevdepth}
      {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
      </li>
    {elseif $node->index > 0}
      </li>
    {/if}

    {if $node->current == true}
      <li><a href="{$node->url}"><span>{$node->menutext}</span></a>
    {elseif $node->type == 'sectionheader'}
      <li><a href="{$node->url}"><span>{$node->menutext}</span></a>
    {else}
      <li><a href="{$node->url}"><span>{$node->menutext}</span></a>
    {/if}
  {/foreach}
  
  {repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

LeftMenu:

Code:

{if $count > 0}
<ul>
  {foreach from=$nodelist item=node}
    {if $node->depth > $node->prevdepth}
      {repeat string="<ul>" times=$node->depth-$node->prevdepth}
    {elseif $node->depth < $node->prevdepth}
      {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
      </li>
    {elseif $node->index > 0}
      </li>
    {/if}

    {if $node->current == true}
      <li><a href="{$node->url}">  {$node->menutext} </a>
    {elseif $node->type == 'sectionheader'}
      <li>   {$node->menutext}
    {else}
      <li><a href="{$node->url}">  {$node->menutext} </a>
    {/if}
  {/foreach}
  
  {repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

So das war's vorerst - eventuell werde ich das Ganze noch erweitern um eine kleine Anleitung wieder man die Suche ebenfalls multilingual gestaltet - sofern ich mal Zeit finde.

Anmerkung: Das News-Modul funktioniert ebenfalls multilingual (indem ich die Kategorien dazu missbrauche) - das kommt ggf. auch noch nach!

Das entsprechende Endprodukt könnt Ihr unter http://www.ritenetworking.de bestaunen

- dort ist jedoch die englische Sprache noch ausgeblendet aufgrund von Zeitmangels *gg*

Aber Ihr könnt versichert sein, dass es funktioniert

UPDATE: multilinguale News über Kategorien

Wie gewünscht und ebenfalls relativ einfach umgesetzt:

Einfach für jede Sprache eine entsprechende Kategorie in den News erstellen und dann entsprechend auf den News-Seiten die Newsblöcke mit Filter auf die Kategorie anlegen:

Code:

{cms_module module="news" number="10" category="German" makerssbutton="true"} Neuigkeiten
{cms_module module="news" number="10" category="German"}

Für die deutsche Sprache - für jede andere Sprache entsprechend die Kategorie anpassen.

Fragen werden hier gerne beantwortet!

Und jetzt geht's zum Raclette-Essen - bin eingeladen

)

[gelöscht durch Administrator]

cyberman · **Posted:** Mon Jan 08, 2007 5:26 am

Besten Dank für die ausführliche Erläuterung - hast dir das Raclette-Essen verdient

...

swgreed · **Posted:** Wed Jan 10, 2007 9:45 am

Nogga wrote:

Anmerkung: Das News-Modul funktioniert ebenfalls multilingual (indem ich die Kategorien dazu missbrauche) - das kommt ggf. auch noch nach!

Sehr schöne Anleitung!

Die Sache mit den News ist sicherlich noch interessant, da es in der Standardinstallation ein nur "entweder/oder" zu geben scheint, was die ausgewählte Sprache angeht.

Nogga · **Posted:** Thu Jan 11, 2007 10:47 am

Ist drin!

moonie · **Posted:** Thu Mar 01, 2007 12:21 pm

Tolle Anleitung, Nogga! Damit verhinderst Du grad ne schlaflose Nacht bei mir

Ich habe mich für ein Projekt zuerst mit dem MLE-Modul rumgeschlagen, dann aber schnell festgestellt dass ich die Seite wohl nicht so realisieren kann wie sie sein sollte (oder ich hab alles falsch verstanden..):
- pretty url's mit unterschiedlichen Seiten-alias per Sprache
- unterschiedliche Templates per Sprache
- real-time Sprach-switcher auf allen Seiten

Mit Deinem Lösungsansatz klappt fast alles, dass der Sprach-switch halt "nur" auf die Startseite leitet, damit kann ich leben.

Nogga · **Posted:** Thu Mar 01, 2007 12:49 pm

Die Umleitung auf die Startseite macht ja eigentlich auch Sinn.

Bedenkt man z.B. dass man die Webseiten nur teilweise übersetzt hat, bzw. manche Themenbereiche nicht in allen Sprachen existieren würde ein Switch in einer solchen Begebenheit ins Nirwana führen...

Freut mich, dass es geholfen hat - vielleicht wird der Post ja irgendwann sticky ::)

cyberman · **Posted:** Thu Mar 01, 2007 2:26 pm

Nogga wrote:

vielleicht wird der Post ja irgendwann sticky ::)

Das lässt sich einrichten

...

moonie · **Posted:** Wed Mar 07, 2007 12:39 pm

Hm ein letztes Problemchen bleibt und ich habe keine Antwort gefunden auf dem Forum. Eventuell kriegt das jemand von euch ganz schnell hin..

Kann ich die News-Kategorien im 'Detail-Template' irgendwie herauslesen? Ich möchte nämlich im News-Detail-Template pro Sprache einen anderen "zurück" Link darstellen (z.B. mit {$return_url} kommt da natürlich immer nur "Zurück").
Also so etwas wie {if category="de"}zurück {else if}retour möcht ich erzielen. Nur leider habe ich null Ahnung wie ich das auslesen könnte?

cyberman · **Posted:** Wed Mar 07, 2007 1:01 pm

moonie wrote:

Nur leider habe ich null Ahnung wie ich das auslesen könnte?

Sämtliche auf einer Seite verfügbaren Smarty-Variablen lassen sich mit dem Tag get_template_vars anzeigen.

Wenn du Noggas News-Beispiel nimmst, liesse sich evtl. category als Trigger verwenden ...

moonie · **Posted:** Wed Mar 07, 2007 2:34 pm

Vielen Dank für den Tipp mit den get_template_vars, Cyberman, damit klappts!

Leider gab die Ausgabe der Variablen keine Kategorie zurück, dafür hab ich aber page_name als Variable entdeckt. Ich habs jetzt z.B. über {if $page_name == "aktuelles"} gelöst, und es funktioniert.

Danke für Deine Hilfe!

cyberman · **Posted:** Fri Jul 06, 2007 3:03 pm

Einen interessanten Thread zu diesem Thema gibts auch hier (in englisch)

http://forum.cmsmadesimple.org/index.ph ... 756.0.html

cyberman · **Posted:** Wed Aug 15, 2007 10:43 am

Wie man Benutzer in Abhängigkeit von der im Browser des Besuchers eingestellten Sprache weiterleiten kann, gibt es hier zu lesen (in englisch)

http://forum.cmsmadesimple.org/index.ph ... 805.0.html

faglork · **Joined:** Fri Mar 03, 2006 1:32 pm **Posts:** 490

Moin!

Entschuldigt wenn ich den Thread mal wieder ausgrabe, aber mir ist nicht ganz klar wie nun eigentlich die Hierarchie aussieht (der erwähnte Screenshot fehlt). Wo befindet siche die Startseite und was befindet sich da drauf?

Und vor allem: welche Funktion haben die Trenner? Und warum ein extra Menü-Template zum ausblender der Section header - das kann man doch im Backend einstellen?

Servus,
Alex

markus · **Joined:** Mon Dec 17, 2007 4:13 pm **Posts:** 101

hallo, als aufgabe muss ich jetzt zu einer deutsche seite noch eine englische und französische seite erstellen. aber ich kann dem ganzen hier nicht so ganz folgen.
ich dachte das ich einfach für jede sprache ein thema erstelle und das nur ein gewsses menü abgefragt wird.
wer hätte noch lösungen am start?

cyberman · **Posted:** Mon Dec 14, 2009 7:50 am

Kannst du dein Nichtverstehen genauer beschreiben? Wo genau ist dein Problem? Was ist nicht verständlich?

Entweder verwendest du die inoffizielle MLE-Lösung oder ein 2stufiges Menü. Das top-menü verwendest du als Auswahl-Menü für die Sprache (number_of_levels='!') und das Submenü enthält dann die jeweilige Sprache. Die Struktur ist ganz simple:

1. DE
1.1 Start
...
2. EN
2.1 Home
...
3. FR
3.1 Démarrer
...

Das Submenü startest du mit dem Parameter start_level='2'.

Anleitung: Einfache multilinguale Webs

Who is online