联系我们

你要买什么？

经过麦宜云
2024年4月14日

自定义页面配置

本地化您页面的 SEO 详细信息、Open Graph 设置和自定义代码。

除了在 CMS 仪表板和设计器画布上个性化内容外，您还可以自定义页面的 slug（即 URL）、页面级 SEO 配置和 Open Graph 配置。默认情况下，您网站上的每个页面都从主要语言环境获取其配置，但您可以选择在任何辅助语言环境中修改这些配置。 

开始之前： 探索本地化概述以熟悉本地化。 
笔记： 一些本地化功能只能在特定的本地化计划中使用。 全面了解本地化计划和功能的比较. 

在本指南中，您将发现： 

  1. 如何定制页面级 SEO 和 Open Graph 配置
  2. 如何调整自定义代码

定制页面级 SEO 和 Open Graph 配置

要个性化每个页面的 SEO 和 Open Graph 配置： 

  1. 按 区域设置视图 顶部栏中的下拉菜单
  2. 选择您的首选语言环境
  3. 访问 页面面板
  4. 将鼠标悬停在要修改配置的页面上 
  5. 点击配置“齿轮“ 图标 

随后，您可以手动调整 SEO 配置 和 Open Graph 配置 像往常一样 - 或者将鼠标悬停在每个字段上并单击“地球”图标来机器翻译文本。 

了解有关SEO定制的更多信息。

内部提示： 对于 Collection 页面，您可以选择将 Collection 字段集成到您的 SEO 配置和 Open Graph 配置中。 

如何调整自定义代码

与其他设计元素（即元素和组件的布局）类似，次要语言环境中的自定义代码继承自主要语言环境。您无法在次要语言环境中附加或删除自定义代码。 

如果您希望创建仅影响特定语言环境的自定义代码，我们建议使用 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 的最新帖子 (查看全部)

相关文章

经过麦宜云
更新于