心得分享。我已經不止一次提到 Wikidot 這個網站,這回要用一個搞不好會變成安全問題的特色來實踐一下中英文對映網站的功能。
創用 CC (我現在服務的單位) 將在明年一月舉辦「資訊時代之亞洲與公眾創用」國際研討會,這個研討會全程將用英文進行,所以網站一開始也全是英文;後來因為某些原因、我們還需要一個中文站,於是我又另外用 Wikidot 申請了一個。
問題來了,怎麼做出方便的中英文對照功能呢?我很想讓它像 Wikipedia 一樣、能自動連到某頁的其他語言版本,不過 Wikidot 好像沒有 (也應該不會有) 這樣的東西。一開始沒細細研究,就只粗淺地先放個連結、連到另一個語言版的首頁,不過這個想法我還沒有放棄、所以有先刻意地讓兩邊語言的網頁名稱「同步」。 (反正 Wikidot 也不能用中文網頁名稱 XDD) 這意思就是:「英文站的 program 一頁、其中文版亦名為 program。」 有了這樣的前提,其實剩下的對一般網頁來說就很簡單,只要寫個 JavaScript、讓連結連到不同 location.hostname 上的相同 pathname 網頁即可。
不過,這畢竟是用別人的服務,Wikidot 雖然可以插入 JavaScript,但限定使用某些服務的程式碼、其他一律不理,這麼一來我就沒辦法很方便地處理這個問題。好在,Wikidot 可以插入任何 iframe,這樣就容易啦!我上傳了一個檔案,重點內容如下:
<script type="text/javascript">
window.onload = function (){
var thelink = document.getElementById("tozh");
thelink.href="http://meeting.creativecommons.org.tw"+window.top.location.pathname;
thelink.target ="_top";
}
</script>
... (中略)
<a href="http://acia2008.creativecommons.org.tw/" id="tozh">中文版</a>
程式的部份簡單到爆,只有兩件事情有另外考量:
- 為了沒開 JavaScript 的朋友,不用假連結 (javascript:;)
- 為了讓 Firefox 能以中鍵開新分頁,後來決定 JavaScript 的作用必須是替換連結的 href,而不是自己開啟網頁。
好,所以我只要把這玩意放進 nav:top 裡就可以在上方的導覽列中出現了:
[[embed]]
<iframe style="border: 0pt none ; margin: 0pt; padding: 0pt; overflow: hidden; width: 6em; height: 1.4em;" src="http://meeting.creativecommons.org.tw/local--files/nav:top/en-zh.htm"></iframe>
[[/embed]]
這些 CSS 值基本上是測試來的... 反而是測這些花了比較多時間 =.= 另外在頁面自訂的 CSS 裡也還有相應的東西要加:
#top-bar p{
margin: 0pt; padding: 0pt; display: inline; float: left;
}
上面那些主要是配合導覽列的樣式而寫。一切完成後就有個方便的切換連結可以用了,中文版網站也可以如法炮製一番。
說可能會有安全問題... mmm 我先來試試看好了,開同一個站上的網頁應該可以拐到瀏覽器記憶的密碼吧?
之前還發現另外一個問題
回覆刪除wikidot對中文網址的外部連結有問題
例如:
[http://aaa.bbbb.ccc/中文網址 |顯示名稱]
他會抓不到中文網址這四個字...
直接連到aaa.bbb.ccc去