好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式，因此找了 GitHub 上不少慷慨工程師留下的原始碼，不過很多都有問題無法運作，排除掉複雜且有問題的資料後，最終一位來自伊朗的工程師的原始碼幫我完成了這次的研究，本文的前端開發基於它的靈感 👉 jq-multi-lang

首先，基礎就是在 HTML 標籤就設定自定義屬性，這個自定義屬性用來放該標籤中文字內容的翻譯文本以及文字方向設定，最後再用 jQuery 幫助我們抓取自定義屬性內的翻譯內容，並在觸發時替換掉原來的內容，如果文字方向要從右至左，也可以做到！觸發是即時的無需重新載入網頁，這個也很符合我當初的想法，而且只要會基本的 jQuery 語法就能做到，入門門檻極低。

▲ 基本上一個 HTML 檔案就完成了！稍加修改後就可以用在很多地方了！提供大家參考。

我自己改用 ID 來辨識唯一的文本標籤，使用按鈕觸發，您可以依照需求改用其他方式觸發條件，接著用 jqmultilang 方法抓 data-lang-<Lang Code> 的替代翻譯文本，順便抓是否包含 data-lang-<Lang Code>-rtl 這個屬性，如果有該屬性又等於 true，那就代表該翻譯文本方向要由右至左，這跟語言的特性有關。如此一來最簡易的多國語言靜態網頁就打造出來了！如果有多段文本（文字內容），可以用多個標籤加上識別 ID 分開，接下來就看您的需求修改了！

See the Pen
jQuery：利用自定義 HTML 屬性打造多國語言的靜態網頁 by Feng, Cheng-Chi (@qwe987299)
on CodePen.

▲ CodePen 示範，非常簡易又方便。

【論壇美化】右上角頭像區域美化
📆 2013-01-01
📁 網站技術, 架站程式, Discuz!

Git 版本控制：建立與初始化本地倉庫、暫存與認可變更（使用 VS Code）
📆 2019-09-18
📁 軟體應用, 網站技術, 程式設計

WordPress 網址異動，利用 SQL 指令快速更改
📆 2016-02-01
📁 網站技術, 資料庫, SQL, 架站程式, WordPress

SQL - OUTFILE & INFILE：資料表匯出成 TXT、將 TXT 資料匯入至資料庫（備份與復原）
📆 2019-05-30
📁 網站技術, 伺服器, 資料庫, SQL

無縮圖

【技巧】網站設計三大原則:簡單、實用、美觀
📆 2013-01-01
📁 網站技術

VS Code x GitHub Copilot：加入 Gemini 2.5 Pro 模型，感受 AI 建專案的魅力！
📆 2025-04-10
📁 軟體應用, 網站技術, 人工智慧

Flickity：超強大的 jQuery 插件！建立全平台都支援的幻燈片或卡片！
📆 2019-01-19
📁 網站技術, HTML, CSS, JavaScript, jQuery

Highlight Matching Tag（Visual Studio Code 擴充功能）：HTML 開始與結束標籤強調與標示
📆 2020-03-02
📁 軟體應用, 網站技術, HTML

《上一篇》Sound of Text：使用 Google 文字轉語音引擎製作 MP3 聲音檔案 《下一篇》LINE：新功能「聊天室分類」Android 搶先試用