核心元件的本地化功能

許多網站都要求以跨多種語言和地理位置的本地化格式提供內容。 選取的核心元件提供智慧型參考解析度,可讓您輕鬆為所有本地化內容建立統一的範本,並根據您的本地化網站結構自動調整。

範例 — 包含導覽和頁尾的本地化頁面

大部分網站都需要在所有頁面上顯示頁尾。 這些頁腳通常在頁面的所有內容中保持一致。 不過,若是本地化內容頁面,則必須顯示該頁首或頁尾的本地化版本。

同樣地,導覽元件通常必須顯示在所有頁面上。 不過,這也需要反映本地化頁面的內容。

使用導覽核心元件體驗片段核心元件的本地化功能,以及AEM🔗的可編輯範本,這將變成一項簡單的工作。 此示例可進一步擴展為使用語言導航元件

內容結構

AEM及其核心元件的所有本地化功能,都有賴於清晰且符合邏輯的內容結構。

假設您的網站僅稱為my-site,且位於此處:

/content/my-site

也可以說您使用英文撰寫網站,並以法文提供。 因此,如果您有一個名為my-page的簡單頁面,則會在網站內容樹狀結構的兩個本地化分支中找到:

/content
\-- my-site
   +-- en
       \-- my-page
   \-- fr
       \-- my-page

它位於這些本地化分支下,您將在其中建立其他網站頁面。

頁尾通常使用體驗片段製作,因此您需要的英文和法文版本與頁面相同。 不過,體驗片段不是頁面,而是可在各頁面重複使用的頁面的一部分,因此不會直接在/content下方顯示,作為其餘的頁面。 而是存放於自己的資料夾下,但由於這些資料夾也必須經過本地化,因此其結構必須與網站的本地化結構相反。

/content
+-- experience-fragments
   +-- en
      \-- footer
   \-- fr
      \-- footer
\-- my-site
   +-- en
      \-- my-page
   \-- fr
      \-- my-page

通過鏡像的本地化結構,核心元件可以找到相應頁面所需的本地化內容。

體驗片段元件非常彈性,非常適合頁首或頁尾。

因為我們的假設網站提供英文和法文版,因此我們需要在先前描述的位置中建立兩個稱為footer 的體驗片段。

頁面範本

因為頁尾會顯示在每個頁面上,因此我們需要將體驗片段新增至標準頁面範本。

我們的範本簡稱為my-template,並與其他範本一起位置:

/conf/my-site/settings/wcm/templates/my-template

在此範本中,我們將新增您希望頁面所依據的基本元件。

  • 導覽元件

    • 導覽元件會顯示在每個頁面的頂端。
    • 在導覽元件中,我們定義導覽根目錄,告訴元件網站的導覽結構從何開始。
    • 元件可以根據導覽根,自動尋找對應的本地化內容。
  • 容器元件

    • 每個頁面都會包含可編輯的容器元件,供作者在頁面上放置其他內容。
  • 體驗片段

    • 我們會以代表頁尾的片段製作語言,將體驗片段元件指向片段路徑。
    • 根據該片段的路徑以及鏡射本地化頁面結構的體驗片段結構,元件可自動尋找對應的本地化內容。

頁面

內容作者在設定網站結構和範本時,不費吹灰之力,只需將必要的內容新增至頁面即可。 由於這些範本和元件的本地化邏輯,導覽和頁尾會自動新增至頁面並翻譯。

例如,作者只需將文字元件等內容新增至英文和法文頁面(以下藍色表示)。

導覽元件和體驗片段元件來自頁面範本,且知道會根據本地化結構和頁面本身的位置(以下白色表示)自動顯示正確的內容。

將其全部擬合在一起

以下是這些簡單但強大的元素如何搭配運作,為內容作者提供本地化頁面的完整說明。

本頁內容