聯絡我們

你要買什麼？

經過麥伊凡
2024 年 4 月 14 日

自訂頁面配置

本地化頁面的 SEO 詳細資訊、開放圖譜設定和自訂程式碼。

除了在 CMS 儀表板和 Designer 畫布上個人化內容之外，您還可以自訂頁面的 slug（即 URL）、頁面層級 SEO 配置和開放圖配置。預設情況下，網站上的每個頁面都會從主要區域設定派生其配置，但您可以選擇在任何輔助區域設定上修改這些配置。 

開始之前： 瀏覽本地化概述以熟悉本地化。 
筆記： 某些本地化功能只能透過特定本地化計劃存取。 全面了解在地化計劃和功能的比較. 

在本指南中，您將發現： 

  1. 如何自訂頁面層級 SEO 和 Open Graph 配置
  2. 如何調整自訂程式碼

客製化頁面層級 SEO 和開放圖配置

要個人化每個頁面的 SEO 和 Open Graph 配置： 

  1. 按 區域設定視圖 頂部欄中的下拉式選單
  2. 選擇您喜歡的區域設置
  3. 訪問 頁面面板
  4. 將滑鼠懸停在您要修改其配置的頁面上 
  5. 點選配置“齒輪" 圖示 

隨後，您可以手動調整您的 SEO配置 和 開放圖配置 像往常一樣 - 或將滑鼠懸停在每個字段上並單擊“地球” 圖示來機器翻譯文字。 

了解有關 SEO 自訂的更多資訊。

內幕提示： 對於集合頁面，您可以選擇將集合欄位整合到 SEO 配置和開放圖配置中。 

如何調整自訂程式碼

與其他設計元素（即元素和元件的佈局）相比，輔助語言環境中的自訂程式碼是從主要語言環境繼承的。在輔助區域設定中時，您無法附加或刪除自訂程式碼。 

如果您希望建立專門影響特定區域設定的自訂程式碼，我們建議使用 HTML lang 屬性作為選擇器來定位區域設置，如下所示： 


<script>
// Obtain the lang attribute from the HTML element
const htmlLang = document.documentElement.lang;

// Inspect the lang attribute and carry out a script accordingly
if (htmlLang === 'en') {
console.log('This page is in English. You can execute English-specific code here.');
// Insert your English-specific code here
} else if (htmlLang === 'fr') {
console.log('This page is in French. You can execute French-specific code here.');
// Insert your French-specific code here
} else {
console.log('This page is in a language other than English or French.');
// Incorporate code for other languages here
}
</script>

或者，對於動態 CSS： 


/* Custom styles for all languages */
p {
font-size: 16px;
color: black;
}

/* Styles for English content */
:lang(en) p {
font-weight: bold;
}

/* Styles for French content */
:lang(fr) p {
font-style: italic;
}

/* Include additional language-specific styles as necessary */
麥伊凡
Ewan Mak 的最新帖子 (看全部)

相關文章

經過麥伊凡
更新於