網站 / 使用Google Translate JS將網站變成多語系網站

聽說網站如果能夠具備多語系內容 

可以更容易被搜尋到 

但是我又不會多語

還好現在AI發展的關係 

機器翻譯的品質越來越好

wordpress可以直接用外掛達成網站多語系

目前使用的外掛Translate WordPress with GTranslate是免費的 

想說為什麼可以這樣大方

原來是使用google的translate js

而這個js目前是免費使用

blogger可以用 HTML/JavaScript小工具引用translate js

其他 網站也可以用相同的方式達成多語系 

基本上就是完全按照範例 

然後將網站中不想被翻譯的部份加上class屬性- notranslate

1. <div id="google_translate_element"></div>
2. <script type="text/javascript">
3. function googleTranslateElementInit() {
4. new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'zh-TW,en,zh-CN,ja'}, 'google_translate_element');
5. }
6. </script>
7. 
   
8. <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

備註1：本來想將這個js下載備份，但是測試時無法載入功能，看來還是會跟google主機互動。

備註2：嚴格來說，這種方式不是真正的多語系網站，只是單純利用機器翻譯網站內容，無法確認翻譯內容是否正確。

繼續閱讀

網站 / 套用模板製作RWD網路相簿

最近結束成果分享會，拍了許多照片

原本想用Google相簿提供照片給參與人員瀏覽與下載

但是，Google相簿只能透過分享的方式

也同時會開放權限給其他使用者

不符合我的需求

因此，決定將照片上傳到學校網頁空間

並且做成RWD(Responsive Web Design)的樣式

在ThemeWagon Team

找到一個簡單且符合需求的模板-Multiverse – Free HTML5 Photography Website Template

刪除不需要的內容之後

接下來是資料處理

首先要將照片圖檔分成小圖，跟大圖

這樣才能節省載入時間，並且配合點小圖放大圖的燈箱效果

又因為，我同時用2台相機拍照

照片檔名的命名前綴不同，而且為了處理html時方便統一處理，必須要重新命名

只是修改檔名的程式卻無法使用拍攝時間排序

所以先在資料夾將檔案全選，在第一個檔案按右鍵-重新命名

檔案名稱就會變成 XX(1)~~XX(N)

這樣就可以用批次修改檔名的程式將不需要的字串用空白取代

之後再把原始圖檔縮成適當尺寸的大圖與瀏覽用的小圖

接下來是處理網頁的html

因為照片有125張，不可能一個一個輸入網址

而且學校的網頁空間只允許靜態網頁，也不能用連結資料庫的方式

所以透過Excel 整理與串接html程式碼的字串，之後再一次貼上

這時候遇到的難關是–如何在Excle的公式的字串裡再串接雙引號

萬事拜Google大神

解答是： 2個 ” 等於 1個 ” ，由於前後又各有1個 “包起來成為字串，所以在公式中會變成=““”“

因此，html程式碼改成Excel字串必須分清楚哪個是Excel的字串符號，哪個是html的雙引號

 

之後將html貼入模板之中就大功告成

不過，後來還是有微調一些設定

1.在圖檔的彈出視窗，增加”DOWNLOAD”的功能，可以直接下載而不是開新視窗，並且讓下載的圖檔是原始圖檔

這必須在 a 標籤內增加一個 download的參數

2.原本的模板在手機瀏覽時，文字標籤會被隱藏，修改CSS取消隱藏

 
3.原本的模板，照片是沒有間隔的，所以修改CSS增加框線

最後呈現的樣式

 

參考

[發問] 雙引號的問題

HTML 超連結 <a> 標籤 (tag)

繼續閱讀