2011年3月9日 星期三

-步驟-Blogger 文章內,加入中英版本切換的功能

English | 正體中文


這是一個簡單的 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 文章中插入按鈕,讓讀者可以自由的切換中英版本


預設顯示中文版本

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

步驟如下:

  1. 在 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」。
  2. 按照正常方式撰寫文章內容,中文版本(或母語版本)放在前面,英文版本放在後面。撰寫完畢後,一樣切到「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」。
  3. 由於這段程式碼會用到 jQuery 框架,如果你的網誌未曾引入 jQuery 的話,程式碼就不會產生作用。所以,要再補上引入 jQuery 的動作。引入 jQuery 的方式有兩種:
    1. 在 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 程式碼留在最後才讀取。
    2. 或者,在 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 樣板程式碼之中,而不是位於網誌專屬的資料庫之內,所以,一旦更換樣板,程式碼就會不見,必須再一次手動的修改樣板程式碼。
  4. 到這裡,中英切換的按鈕就完成了。
    如果,想要進一步,連文章的標題都切換的話,原理也跟文章內容一樣,只要在標題欄位內,把想切換的部份,用適當的<div>標籤包裹起來就可以了。像這樣:

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

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

    當然,只要再按一下按鈕,就又可以切換回來了,要反覆按幾次都可以。
  5. 最後,如果你時常會使用這個功能,又像我一樣,沒事喜歡改改按鈕顏色、改改按鈕字體之類的,那麼,可以把控制按鈕外觀的 CSS 樣式,直接寫在 Blogger 樣板內,像這樣:
    1. 在 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;
      }
    2. 儲存樣板之後,文章中的切換按鈕程式碼,就可以從這樣(紅色字是縮減的部份)
      <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>
    3. 往後,想要修改按鈕的顏色或外觀時,就不需要一篇一篇文章的改樣式,相反地,只要修改樣板內的這段 CSS ,就可以同時修改每一篇文章中的按鈕。
  6. 以上,實際的效果就在本文之中,讀者不妨按按看。很方便吧?

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