快速入門：翻譯 UI 資源 (HTML)

發行項
01/28/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

將 UI 的字串資源放入資源檔。接著您就可以從程式碼或標記中參照這些字串。

指示

將字串放入資源檔中，而不是直接放入程式碼或標記當中。
1. 在 Visual Studio 中開啟 package.appxmanifest，移至 [應用程式] 索引標籤，並將預設語言設定為 "en-US"。如果這是通用應用程式，方案中的每個 package.appxmanifest 都要執行此步驟。注意這樣會指定專案的預設語言。如果使用者的慣用語言或顯示語言不符合應用程式提供的語言資源，就會使用預設語言資源。請參閱屬性頁 (JavaScript)。
2. 建立資料夾以包含資源檔案。
  1. 在 [方案總管] 中，以滑鼠右鍵按一下專案 (通用應用程式則是共用專案)，然後選取 [加入] > [新增資料夾]****。
  2. 將新資料夾命名為 "strings"。
  3. 如果在 [方案總管] 中沒有看到新資料夾，請保持選取該專案，同時從 Microsoft Visual Studio 功能表中，選取 [專案] > [顯示所有檔案]****。
3. 建立英文 (美國) 適用的子資料夾和資源檔案。
  1. 在 strings 資料夾上按一下滑鼠右鍵，然後在下面新增資料夾。將它命名為 "en-US"。資源檔案會放入針對 BCP-47 語言標籤命名的資料夾中。如需語言限定詞與通用語言標籤清單的詳細資料，請參閱如何使用限定詞命名資源。
  2. 在 en-US 資料夾上按一下滑鼠右鍵，然後選取 [加入] > [新增項目]…。
  3. 選取 [資源檔 (.resjson)]""。
  4. 按一下 [加入]。這會新增預設名稱為 resources.rejson 的資源檔案。建議您使用此預設檔名。應用程式可將其資源分割到其他檔案中，但您必須謹慎小心以正確地參照這些資源 (請參閱如何載入字串資源)。
  5. 新檔案包含預設內容。以下列內容取代預設內容 (可能會和預設內容非常相似)：
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    這是嚴格的 JavaScript 物件標記法 (JSON) 語法，每個名稱/值組後面都必須放置逗號，最後一個除外。在這個範例中，"greeting" 與 "farewell" 會識別將要顯示的字串。另一組 ("_greeting.comment" 與 "_farewell.comment") 則是說明字串的註解。註解是為負責將字串當地語系化成其他語言的譯者提供特殊指示的好位置。
將字串資源識別碼新增到程式碼和標記。
1. 將適用於 JavaScript 的 Windows Library 的參考新增到您的 HTML 檔案 (如果尚未新增)。
  
  注意以下程式碼顯示當您在 Visual Studio 建立新的 [空白應用程式 (通用應用程式)] 專案時，所產生之 Windows 專案之 default.html 檔案的 HTML。請注意，檔案已包含 WinJS 的參考。
```

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
```
  注意以下程式碼顯示當您在 Visual Studio 建立新的 [空白應用程式 (通用應用程式)] 專案時，所產生之 Windows Phone 專案之 default.html 檔案的 HTML。請注意，檔案已包含 WinJS 的參考。
```

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
```
2. 在隨 HTML 檔案提供的 JavaScript 程式碼中，當載入 HTML 時呼叫 WinJS.Resources.processAll 函式。
```
WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}
```
  如果有其他 HTML 載入至 WinJS.UI.Pages.PageControl 物件，請在頁面控制項的 IPageControlMembers.ready 方法中呼叫 WinJS.Resources.processAll(element)，其中 element 是要載入的 HTML 元素 (及其子元素)。這個範例是以應用程式資源和當地語系化範例的案例 6 為根據：
```
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});
```
3. 在 HTML 中，使用資源檔中的資源識別碼 ('greeting' 和 'farewell') 參考字串資源。
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. 參考屬性的字串資源。
```
<div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
```
5. 在 JavaScript 中參考字串資源。
```
var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);
```
HTML 取代項目的 data-win-res 屬性的一般模式是 data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}"。

注意如果字串不包含任何標記，請盡可能將資源繫結到 textContent 屬性，而不是 innerHTML。取代 textContent 屬性的速度會比 innerHTML 快許多。
針對其他兩種語言新增資料夾與資源檔案。
1. 在德文的 strings 資料夾之下，建立另一個資料夾。將資料夾命名為 "de-DE"，用以代表德文 (德國)。
2. 在 de-DE 資料夾中，建立另一個 Resources.rejson 檔案，然後以下列內容來取代：
  
  strings/de-DE/resources.resjson
```
{
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}
```
3. 再建立一個名為 "fr-FR" 的資料夾，用以代表法文 (法國)。建立新的 Resources.rejson 檔案，然後以下列內容來取代：
  
  strings/fr-FR/resources.resjson
```
{
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}
```
建置並執行應用程式。

針對您的預設顯示語言來測試應用程式。
1. 按 F5 來建置並執行應用程式。
2. 請注意，greeting 與 farewell 將以使用者偏好的語言顯示。
3. 結束應用程式。
注意僅限「Windows 市集」應用程式。針對其他語言來測試應用程式。
1. 開啟 [控制台]，然後選取 [時鐘、語言和區域] > [語言]****。
2. 請注意，當您執行應用程式時所顯示的語言是列在最上方的語言，也就是英文、德文或法文。如果列在最上方的語言不是這三種語言之一，應用程式將切換回清單上支援的下一個語言。
3. 如果您的電腦上沒有上述三種語言，可以按一下 [新增語言]，然後將遺漏的語言新增至清單。
4. 若要以其他語言測試應用程式，請選取清單中的語言，然後按一下 [上移]****，直到該語言位在最上方。然後執行該應用程式。
注意僅限「Windows Phone 市集」應用程式針對其他語言來測試應用程式。
1. 在手機 (或手機模擬器) 上開啟 [設定]。
2. 選取 [語言]****。
3. 請注意，當您執行應用程式時所顯示的語言是列在最上方的語言，也就是英文、德文或法文。如果列在最上方的語言不是這三種語言之一，應用程式將切換回清單上支援的下一個語言。
4. 如果您的手機沒有上述三種語言，點選 [新增語言]，然後將遺漏的語言新增至清單。
5. 若要以其他語言測試應用程式，請點選並按住清單中的語言，然後點選 [上移]****，直到該語言位在最上方。然後重設手機，再執行應用程式。

共用方式為

快速入門：翻譯 UI 資源 (HTML)

指示

相關主題

其他資源