ETBlue 外星人吟遊地球: -步驟-Blogger 文章內，加入中英版本切換的功能-Steps-Add a language switch button in your Blogger post

2011年3月9日星期三

-步驟-Blogger 文章內，加入中英版本切換的功能
-Steps-Add a language switch button in your Blogger post

這是一個簡單的 javascript / jQuery 實作，不僅是在 Blogger 系統，所有的部落格系統、或是一般的網頁，都可以使用。

世界上大多數的人，母語都不是英文，就像我一樣。不過，有些事情是跟各國、各語言的人，都有關係的，比方說本網誌的 Blogger hack 技術文章，根據 Google Analytics 的訪客統計，除了國內 zh-tw 語系的讀者之外，還會有 en-us, en-gb, de, it, fr, es, zh-cn ... 等各種語言的讀者，來參考或取用程式碼。其中，部份讀者會使用 Google Translate 閱讀網頁，但是目前，自動翻譯的效果仍然很糟糕，因此，有些流量比較高的技術文章，我會寫成中英雙語版本，畢竟，英文是多數人的第二語言，也是國際上最通用的語言。

不過，雙語文章有個缺點，讀者其實只需要看其中一種語言就好了，雙語文章的第二語言，在閱讀上，其實是很大的干擾。所以，為了讓讀者可以一次只看到一種語言、又能夠自由的切換版本，就製作了這個按鈕，搭配簡單的 html 標籤設定，就可以完成這個實用的小功能。

原則上，實作這個功能是不需要更動 Blogger 樣板的，不過，如果你需要頻繁使用的話，可以把按鈕的 CSS 寫在樣板內，這樣就不用每次發文章時，要在文章內插入落落長的樣式設定程式碼。

在 Blogger 文章中插入按鈕，讓讀者可以自由的切換中英版本

預設顯示中文版本

按下按鈕後，切換成英文版本，再按一下又可以切回來

步驟如下：

在 Blogger 發表文章時，從「Compose」切換到「Edit HTML」，在想要放置語言切換按鈕的地方，貼上下面這段文字。我自己是把按鈕放在文章的最開頭處。

<a class='lang-switch-button' style='padding:5px 8px;background-color:#e90;color:#fff;font-weight:bold;-moz-border-radius: 5px;-webkit-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;' href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>

其中，紅字的部份，可以代換成你自己的語言。例如，使用法語的話，可以把「.lang-tw」代換成「.lang-fr」，然後「正體中文」換成「Français」。
按照正常方式撰寫文章內容，中文版本（或母語版本）放在前面，英文版本放在後面。撰寫完畢後，一樣切到「Edit HTML」，插入這些文字：（紫色字是插入的部份）

<div class="lang-tw">
... 你的中文版本的文章內容(your Chinese version content) ...
</div>
<div class="lang-en" style="display:none">
... your English version content ...
</div>

其中，紅色字的部份，一樣代換成你自己的語言，以上面提的法文為例，就一樣是「lang-fr」。
由於這段程式碼會用到 jQuery 框架，如果你的網誌未曾引入 jQuery 的話，程式碼就不會產生作用。所以，要再補上引入 jQuery 的動作。引入 jQuery 的方式有兩種：

在 Design > Page Elements 頁面中的任一處，按「Add a Gadget」，選擇「HTML/Javascript」小工具，小工具的標題留白不填，內容則貼上這段文字：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

我自己的話，通常是把 javascript 小工具集中在最下面的 footer 頁尾區段，這樣做，可以讓讀者的瀏覽器優先讀取最重要的網頁內容，而把較不重要的 javascript 程式碼留在最後才讀取。
或者，在 Design >Edit HTML 頁面，按 Ctrl + F 搜尋「/head」，然後插入跟上面一樣的這段文字：（紫色字是插入的部份）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

把引入 jQuery 框架的程式碼，放在<head></head>標籤之內，好處是，不用擔心 jQuery 框架跟 javascript 程式碼的前後位置放錯，可以保證 jQuery 框架一定會先被讀取。

壞處則是，由於<head></head>標籤的程式碼，位於 Blogger 樣板程式碼之中，而不是位於網誌專屬的資料庫之內，所以，一旦更換樣板，程式碼就會不見，必須再一次手動的修改樣板程式碼。

到這裡，中英切換的按鈕就完成了。
如果，想要進一步，連文章的標題都切換的話，原理也跟文章內容一樣，只要在標題欄位內，把想切換的部份，用適當的<div>標籤包裹起來就可以了。像這樣：

<div class="lang-tw">你的中文標題(your Chinese title)</div><div class="lang-en" style="display:none">your English title</div>

這樣一來，當讀者按下「English | 正體中文」按鈕的時候，不僅是文章內容會切換語言，就連文章的標題，也會同時切換語言。

當然，只要再按一下按鈕，就又可以切換回來了，要反覆按幾次都可以。
最後，如果你時常會使用這個功能，又像我一樣，沒事喜歡改改按鈕顏色、改改按鈕字體之類的，那麼，可以把控制按鈕外觀的 CSS 樣式，直接寫在 Blogger 樣板內，像這樣：

在 Design >Edit HTML 頁面，按 Ctrl + F 搜尋「.post-body」，然後在附近找個空行，插入這段文字：

.lang-switch-button {
padding:5px 8px;
background-color:#e90;
color:#fff !important;
font-weight:bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
}
儲存樣板之後，文章中的切換按鈕程式碼，就可以從這樣（紅色字是縮減的部份）
<a class='lang-switch-button' ~~style='padding:5px 8px;background-color:#e90;color:#fff;font-weight:bold;-moz-border-radius: 5px;-webkit-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;'~~ href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>
縮減成這樣
<a class='lang-switch-button' href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>
往後，想要修改按鈕的顏色或外觀時，就不需要一篇一篇文章的改樣式，相反地，只要修改樣板內的這段 CSS ，就可以同時修改每一篇文章中的按鈕。

以上，實際的效果就在本文之中，讀者不妨按按看。很方便吧？

發現 bug 的話請留言通知我喔！謝謝 XD

This is a simple javascript / jQuery implementation, which should work over all blog platforms or general html web pages.

Most people's native language is not English, just like me. Yet some blog posts may be useful to people who don't speak the same language as I do. For example my Blogger hack articles. According to Google Analytics, except for those zh-tw users from my country, there are visitors speaking en-us, en-gb, de, it, fr, es, zh-cn ... etc. Some of them use Google Translate ---- which looks terrible. So, for some tech posts with more traffic, I would make them Chinese - English bilingual posts, since English is the international language.

Here is a problem reading bilingual posts. Most user need only one language, and the other language is just disturbing. So I made this language switch button. Users can only see one language and can switch language whenever they like.

Basically there is no need to change Blogger template. But if you would use it frequently, you can move the switch button CSS into your Blogger template, and save some efforts in each post.

Add a language switch button in your Blogger post

Show Chinese Tradidional version by default

Switch to English version after clicking the switch button. Click again to switch back.

The steps are as follow:

While posting on Blogger, switch from "Compose" mode to "Edit HTML" mode. Paste the following text to where you want to place the button: (for me, I place it in the first line)

<a class='lang-switch-button' style='padding:5px 8px;background-color:#e90;color:#fff;font-weight:bold;-moz-border-radius: 5px;-webkit-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;' href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>

The red parts could be replaced. For example, if you use French just replace ".lang-tw" into ".lang-fr," and "正體中文" into "Français."
Write your post content and insert the following text in "Edit HTML" mode: (insert the purple parts)

<div class="lang-tw">
... 你的中文版本的文章內容(your Chinese version content) ...
</div>
<div class="lang-en" style="display:none">
... your English version content ...
</div>

The red parts should be replace into your language.
Since the javascript code uses jQuery framework, it will not work without jQuery acquired. Here are two ways acquiring jQuery:

Go to "Design > Page Elements" and click "Add a Gadget" (anywhere you want, but footer is suggested). Choose "HTML/Javascript" gadget, leave the title blank, and paste the following text into widget content:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Or, go to "Design >Edit HTML" and press "Ctrl + F" searching for "/head." Then insert the text just above </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

The advantage of putting jQuery framework in between <head></head> tags is that we don't need to worry about the order of jQuery code and javascript code. The jQuery code will be loaded absolutely before any piece of javascript code.

The disadvantage is that since <head></head> tag is a part of Blogger template, customized setup will be erased as long as you change your template. To remain jQuery acquired, you need to insert this code again.

The language switch button is done by now.
If you want the post title to change as well, you can do the same trick in post title field:

<div class="lang-tw">你的中文標題(your Chinese title)</div><div class="lang-en" style="display:none">your English title</div>
Finally, if you want a quick control of all buttons in all posts, you can put the CSS directly inside Blogger template:

Go to "Design >Edit HTML" and press "Ctrl + F" searching for ".post-body". Then find an empty line and insert these text:

.lang-switch-button {
padding:5px 8px;
background-color:#e90;
color:#fff !important;
font-weight:bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
}
After saving your template, the button code in each post can change from: (red part is to be deleted)
<a class='lang-switch-button' ~~style='padding:5px 8px;background-color:#e90;color:#fff;font-weight:bold;-moz-border-radius: 5px;-webkit-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;'~~ href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>
to:
<a class='lang-switch-button' href='#' onclick='$(".lang-en").toggle();$(".lang-tw").toggle();'>English | 正體中文</a>
Then, when you want to modify the look of these buttons, just modify the CSS in Blogger template. No need to edit every post.

The effect works in this post.

Please leave comments if you find something XD

26 則留言:

Beben Koben2011年3月9日晚上8:30
so we do post two ways!
one in our language, another in the desired language?
hmmm...
回覆刪除
回覆
ETBlue2011年3月10日凌晨1:05
I guess that would be more friendly to international visitors... is this feature useful to you?
回覆刪除
回覆
Beben Koben2011年3月10日清晨5:04
it means we have to do double work ...
useful for still train our foreign language ... kekekekkkk
回覆刪除
回覆
ETBlue2011年3月10日清晨6:40
When I wrote this post, I felt tired because I have to do double work! :/
回覆刪除
回覆
Beben Koben2011年3月11日凌晨12:04
simple use of the scripts, but need additional work to post...hihihi.
at least there is a new way of using translate tricks with jQuery :)
回覆刪除
回覆
QQBoxy2011年3月31日下午4:42
原來是要寫兩篇文章阿...
我以為是用翻譯機的=__=|||
這...其實還蠻累人的(汗"
回覆刪除
回覆
ETBlue2011年3月31日晚上7:21
真的，我寫到第二遍就覺得快吐血了
但是又不能直接貼 Google 翻譯的結果
畢竟就是因為翻譯結果不佳才自己動手寫的... orz
回覆刪除
回覆
Unknown2011年5月28日上午11:04
喔喔還有這招！？學習了！最近正愁著該如何放我英文版的部落格文的時候，找著找著就逛進這篇了XD

P.S "Google Traslate Tool kit" 還滿不錯的，我有篇文就是用它翻譯後，稍微剪貼編輯一下弄成的。 ^^

Try it!
回覆刪除
回覆
ETBlue2011年5月28日下午1:04
如果你真的要放非 Google Translate 的多語言版本，我記得有更好的 i18n 解，只是沒用到所以懶得研究，囧rz

ihower 網誌上的這種 http://ihower.tw/blog/ 很不賴，可惜應該只能放 Google Translate 的結果...
回覆刪除
回覆
Unknown2011年5月28日晚上7:58
不不不，我是手動翻譯的。（應該說是半自動）
所以這篇才是我最需要的。^^

Google Translate Tool kit 真的很好用！它能輸入文件、HTML 頁面，藉由Google 翻譯後讓你逐句校對、更改後另存新檔(WYSIWYG editor, e.g. Evernote or Google Notebooks 複製貼上)，重點是它可以保留原文的所有格式 >///<

這是 GTTK 的截圖： http://goo.gl/LroYV
(當時我連標題都沒校完就興奮的拍下去了 :P)

而且還能協作喔！（那篇文我跟goingbuzz.net 分享了。）
我覺得超讚的！ XD
回覆刪除
回覆
Lisa Z2011年6月12日晚上8:59
想問一下這樣search engine 能搜到hidden 的文章部份嗎?
回覆刪除
回覆
Lisa Z2011年6月12日晚上9:04
還有我一按網頁就把我redirect 去login @.@ (但我明明就已經login blogger.com)
然後我再登入它還是要我再登入 T.T
safari 和firefox 都不行
回覆刪除
回覆
ETBlue2011年6月12日晚上9:07
@Lisa
1.搜尋引擎可以搜到，只要你按Ctrl+U之後在原始碼中可以看到的內容，都是搜尋引擎可以搜到的內容。
2.不知道為什麼href的"#"值會被系統自動竄改成編輯頁面的網址... orz 不過現在應該好了 >_<
回覆刪除
回覆
Lisa Z2011年6月12日晚上9:33
嗯嗯沒問題了
可是你用過之後有沒有留意到流量或是逗留時間是這樣比較好, 還是像以前一樣一次顯示出來比較好?
我在想如果英文人來到, 到底會不會按這個button 呢 ==?
by the way, 好喜歡你的blog 啊!
回覆刪除
回覆
ETBlue2011年6月12日晚上9:38
呃，我沒注意耶囧！

要解的話，我想應該要在button上面做個計數器之類的，不然就是要去翻一下Google Analytics有沒有辦法幫我把這個按鈕的點擊算進去... 有解的話再貼上來 XD

寫網誌有人喜歡真是太好了 lol
回覆刪除
回覆
Lisa Z2011年6月12日晚上9:59
每次編輯之後"#" 都會被改成編輯頁面的網址 @.@
文章寫好之後不要改了 =="
不管怎麼說這都是個好方法~
謝~~~
回覆刪除
回覆
Unknown2011年6月13日清晨7:43
Blogger 用 HTML 編輯器就不會被擅自竄改了，Blogger 的所見即所得編輯器不只會改 href, 還會吃掉 p, br 等標籤＝＝

對了，ETBlue 是怎麼幫文章標題埋中英切換的語法的呢＠＠？
回覆刪除
回覆
ETBlue2011年6月13日上午8:45
@EriCSN

1.會擅自竄改這一點真是過度自動了 orz

2.標題埋中英切換的方法，跟文章內文一樣，因為Blogger標題可以嵌入html標籤，所以標題寫成

div class="lang-tw" 中文標題 /div
div class="lang-en" style="display:none" English Title /div

ps 因為Blogger留言不能有html語法，所以上面的code都拿掉了 < 跟 > 符號，實際使用的時候，請參考文章內文的那段html

總之，標題寫成這樣，就可以跟內文一起切換中英版本了 XD
回覆刪除
回覆
Unknown2011年6月14日晚上11:11
之前試過但會遇到標題欄位的字數限制...Orz
ETBlue 的標題看起來很長為何都沒問題？ T^T
回覆刪除
回覆
ETBlue2011年6月14日晚上11:12
我的標題都爆炸長，可是沒遇過標題字數限制耶！是多久以前遇到的呢？搞不好現在試試看又可以了... @___@
回覆刪除
回覆
Melissa2011年6月18日清晨7:16
好棒的功能！簡單直覺命中需要><謝謝分享～～
可是每次按按鈕真的都會跳轉到編輯文章的頁面耶！如果不是admin，就會被帶到login的畫面，有辦法修改嗎？ @@"
回覆刪除
回覆
ETBlue2011年6月18日上午9:05
因為 Blogger 系統在編輯文章的時候，會把設定為 # 的連結網址，自動改成瀏覽器當下的頁面（也就是文章編輯頁面）的網址...

實在不知道系統為什麼要有這種功能啊 orz

總之，「每次」修改文章的時候，記得「手動」把那段 code 內的
href="XXXXXXXXX..."
改回
href="#"

真的很囧~
回覆刪除
回覆
Lisa Z2011年6月21日晚上8:33
我試了如果是用html editor 的話它不會自動改
回覆刪除
回覆
ETBlue2011年6月25日晚上9:09
@Lisa 喔喔喔！原來如此... 所以要是手賤去按 compose 的話就要記得改回來 orz
回覆刪除
回覆
Melissa2011年6月29日凌晨4:15
作者已經移除這則留言。
回覆刪除
回覆
Melissa2011年7月2日凌晨3:08
我想沒有人遇過這個情形...這個按鈕我用得很高興(thanks!)，結果突然失效了！唯一想得到的更動，就只有一些版型和旁邊的小工具的改變而已，也沒動到內文，但所有頁面的切換按鈕都很統一的失效了 @@ 報告完畢~~
回覆刪除
回覆