Multilingual website and site navigation in Domino
I continued the rework on my Tangosite. The rounded corners idea was dumped in favour of a much more simple concept, using only one background image (seen here on the right). I added my favorite colour orange to the greys and reds.
After much hesitation, I also decided to make the website multilingual after all. This makes the application a lot more complex and all work has to be done once for each language. In my case, this doubles the work. Anyhow, it's a challenge.
Multilingual pagenames
As explained in a previous post, all the documents are served from one view, here 'archive', in my Tangosite 'pub', short for 'public' or 'published'. The pagename is unique for each document. For this blog it's the date in ISO format, followed by a number of descriptive words glued together with dashes. It all ends with '.html'. This is all done to be nice for search engines: they look at the first 70 characters of the page URL and see the dash as a delimiter. Meaningful keywords in the URL are awarded!
All that is needed to make this multilingual is adding the 2 character language code to the beginning of the pagename, e.g: en-2007-05-19-multilingual-site.html.
Multilingual navigation
To look up the navigation, I use a second view, which I often call 'index' or 'lookup'. This has three columns:
- vKey: categorized, the lookup key
- vSort: sorted, the sort order
- vValue: the value to retrieve
The navigation items are documents which double up as menu items. The top items have as key: the language+'-nav', as sort value: a sequence number, e.g. '01' and the value retrieved is the key, followed by '~' and the listitem with the hyperlink. The language is retrieved from a cookie. Together with a clever calculation to set the active menu-item, this gives the following code:
Incoming valueen-home|<li><a href="/*/nlaunch">Today</a></li>
en-article|<li><a href="/*/pub/en-article">Articles</a></li>
en-multimedia|<li><a href="/*/pub/en-multimedia">Multimedia</a></li>
en-lyrics|<li><a href="/*/pub/en-lyrics">Lyrics</a></li>
en-press|<li><a href="/*/pub/en-press">Press</a></li>
en-links|<li><a href="/*/pub/en-links">Elsewhere</a></li>
a:=@DbLookup(""; ""; "(vLookup)"; UserLanguage+"-nav"; 3);
@If(@IsError(a); @Return(@Text(a))+": "+UserLanguage+"-nav"; "");
c:=@Middle(@Implode(a; "~"); TopNavActive+"|"; "~");
d:=@ReplaceSubstring(a; c; @ReplaceSubstring(c; "<a"; "<a class=\"on\""));
e:=@Word(d; "|"; 2);
f:=@ReplaceSubstring(e; "/*/"; DbPath);
@Implode("<ul id=\"nav\" class=\"nav\">":f:"</ul>"; @NewLine)
<ul id="nav" class="nav">
<li><a class="on" href="/tango/nlaunch">Today</a></li>
<li><a href="/tango/pub/en-article">Articles</a></li>
<li><a href="/tango/pub/en-multimedia">Multimedia</a></li>
<li><a href="/tango/pub/en-lyrics">Lyrics</a></li>
<li><a href="/tango/pub/en-press">Press</a></li>
<li><a href="/tango/pub/en-links">Elsewhere</a></li>
</ul>
The language cookie
The language is set in a cookie when the user lands on the specific language homepage. The cookie formula:
CookieForever:="; expires=Fri, 1 Jan 2106 11:00:00 UTC; path=/;";
@SetHTTPHeader("Set-Cookie"; "lang="+DocLanguage+CookieForever)
And the formula to retrieve the language from the cookie:
@If(form="Homepage"; @Return(DocLanguage); "");
a:=@Middle(HTTP_Cookie+";"; "lang="; ";");
@If(a=""; "en"; a)
If the form is 'Homepage', then it has set the cookie to the DocLanguage of that page. Since HTTP_Cookie gets me the old value, in this case I have to take the language from the document instead.
The homepage
I am using my favorite method of opening a Notes database on the web: a dummy Navigator with a $$NavigatorTemplate Form. On this launch page, I have to lookup everything according to the user language. Since the navigation elements already do this, this leaves me to lookup the content in the correct language. To do this, I can use my 'lookup' view. The value retrieved is the HTML content:
a:=@DbLookup(""; ""; "(vLookup)"; UserLanguage+"-home"; 3);
@If(@IsError(a); @Text(a); @ReplaceSubstring(a; "/*/"; DbPath))
Note that all references to elements in the database are stored with the path '/*/' and are replaced by the real path, contained in the field 'DbPath', just before rendering.
Coming next
Lots of things to do: menu-items can have a sublevel, displayed as tabs like on the homepage. Furthermore, I didn't do the metadata yet. But a big upcoming challenge will be the previous/next navigation both on documents as on views. Also, finding a way of storing and retrieving common translations for 'previous', 'next', 'search', etc.
You can follow the progress: the rework on my Tangosite.
Comments
To add a comment, log in or register as new user. It's free and safe.