페이지 구성 사용자 정의

CMS 대시보드 및 디자이너 캔버스의 콘텐츠를 개인화하는 것 외에도 페이지의 슬러그(예: URL), 페이지 수준 SEO 구성 및 오픈 그래프 구성을 사용자 정의할 수 있는 기능도 있습니다. 기본적으로 웹 사이트의 각 페이지는 기본 로캘에서 구성을 가져오지만 보조 로캘에서 이를 수정할 수 있는 옵션이 있습니다. 

시작하기 전에: 현지화 개요를 살펴보고 현지화에 대해 알아보세요. 

메모: 일부 현지화 기능은 특정 현지화 계획에서만 사용할 수 있습니다. 현지화 계획 및 기능 비교를 종합적으로 살펴보세요.. 

이 가이드에서는 다음 내용을 확인할 수 있습니다. 

1. 페이지 수준 SEO 및 오픈 그래프 구성을 조정하는 방법
2. 사용자 정의 코드를 조정하는 방법

페이지 수준 SEO 및 오픈 그래프 구성 조정

각 페이지에 대해 SEO 및 오픈 그래프 구성을 개인화하려면: 

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 */