From e84a3da47ed88b86848a5118e203875490928d7e Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Fri, 5 Jul 2024 20:43:20 +0900 Subject: [PATCH] i18n(ko-KR): update `sidebar.mdx` --- docs/src/content/docs/ko/guides/sidebar.mdx | 135 ++++++++++++++++---- 1 file changed, 110 insertions(+), 25 deletions(-) diff --git a/docs/src/content/docs/ko/guides/sidebar.mdx b/docs/src/content/docs/ko/guides/sidebar.mdx index 4c59c93bc3..97307971f4 100644 --- a/docs/src/content/docs/ko/guides/sidebar.mdx +++ b/docs/src/content/docs/ko/guides/sidebar.mdx @@ -49,19 +49,73 @@ import SidebarPreview from '~/components/sidebar-preview.astro'; ## 링크 및 링크 그룹 추가 -`astro.config.mjs` 파일의 [`starlight.sidebar`](/ko/reference/configuration/#sidebar) 속성을 사용하여 사이드바 [링크](#링크) 및 [링크 그룹](#그룹) (접이식 헤더 및 하위 항목들)을 구성할 수 있습니다. +`astro.config.mjs` 파일의 [`starlight.sidebar`](/ko/reference/configuration/#sidebar) 속성을 사용하여 사이드바 링크 및 링크 그룹 (접이식 헤더 및 하위 항목들)을 구성할 수 있습니다. 링크와 그룹을 결합하여 다양한 사이드바 레이아웃을 만들 수 있습니다. -### 링크 +### 내부 링크 -`label` 및 `link` 속성이 있는 객체를 사용하여 내부 또는 외부 페이지에 대한 링크를 추가할 수 있습니다. +`src/content/docs/`에서 `slug` 속성이 있는 객체를 사용하여 페이지로 이동하는 링크를 추가합니다. +링크된 페이지의 제목은 기본적으로 라벨로 사용됩니다. + +예를 들어, 구성은 다음과 같습니다. + +```js "slug:" +starlight({ + sidebar: [ + { slug: 'constellations/andromeda' }, + { slug: 'constellations/orion' }, + ], +}); +``` + +파일 구조는 다음과 같습니다. + + + +- src/ + - content/ + - docs/ + - constellations/ + - andromeda.md + - orion.md + + + +다음 사이드바가 생성됩니다. + + + +링크된 페이지의 프론트매터에서 추론된 값을 재정의하기 위해 `label`, [`translations`](#국제화) 및 [`attrs`](#사용자-정의-html-속성) 속성을 추가할 수 있습니다. + +페이지 프론트매터에서 사이드바 모양을 제어하는 ​​방법에 대한 자세한 내용은 [“자동 생성된 링크 사용자 정의”](#프론트매터에서-자동-생성된-링크-사용자-정의)를 참조하세요. + +#### 내부 링크의 약어 + +페이지 슬러그에 대한 문자열만 약식으로 제공하여 내부 링크를 지정할 수도 있습니다. + +예를 들어, 다음 구성은 `slug`를 사용한 위 구성과 동일합니다. + +```js "slug:" +starlight({ + sidebar: ['constellations/andromeda', 'constellations/orion'], +}); +``` + +### 기타 링크 + +`label` 및 `link` 속성이 있는 객체를 사용하여 외부 또는 문서가 아닌 페이지에 대한 링크를 추가합니다. ```js "label:" "link:" starlight({ sidebar: [ - // 가니메데 위성 페이지로 이동하는 링크 - { label: '가니메데', link: '/moons/ganymede/' }, + // 이 사이트에서 문서가 아닌 페이지로 이동하는 링크 + { label: '유성 상점', link: '/shop/' }, // NASA 웹사이트로 이동하는 외부 링크 { label: 'NASA', link: 'https://www.nasa.gov/' }, ], @@ -72,7 +126,7 @@ starlight({ @@ -90,15 +144,15 @@ starlight({ { label: '별자리', items: [ - { label: '용골자리', link: '/constellations/carina/' }, - { label: '켄타우루스', link: '/constellations/centaurus/' }, + 'constellations/carina', + 'constellations/centaurus', // 계절별 별자리에 대한 중첩된 링크 그룹 { label: '계절별', items: [ - { label: '안드로메다', link: '/constellations/andromeda/' }, - { label: '오리온', link: '/constellations/orion/' }, - { label: '작은곰자리', link: '/constellations/ursa-minor/' }, + 'constellations/andromeda', + 'constellations/orion', + 'constellations/ursa-minor', ], }, ], @@ -182,7 +236,7 @@ starlight({ ]} /> -#### 프론트매터에서 자동으로 생성된 링크 변경하기 +## 프론트매터에서 자동 생성된 링크 사용자 정의 자동으로 생성된 링크를 변경하려면 개별 페이지의 [`sidebar` 프론트매터 필드](/ko/reference/frontmatter/#sidebar)를 사용하세요. @@ -224,16 +278,14 @@ sidebar: /> :::note - -`sidebar` 프론트매터 구성은 자동으로 생성된 링크에만 사용되며 수동으로 정의된 링크에서는 무시됩니다. - +`sidebar` 프론트매터 구성은 `slug` 속성으로 정의된 자동으로 생성된 그룹의 링크 및 문서 링크에만 사용됩니다. `link` 속성으로 정의된 링크에는 적용되지 않습니다. ::: ## 배지 링크, 그룹, 자동 생성된 그룹은 라벨 옆에 배지를 표시하기 위해 `badge` 속성을 포함할 수도 있습니다. -```js {10,17} +```js {9,16} starlight({ sidebar: [ { @@ -241,7 +293,6 @@ starlight({ items: [ // "초거성" 배지가 있는 링크 { - label: '페르세우스', link: '/stars/persei/', badge: '초거성', }, @@ -301,7 +352,7 @@ starlight({ 선택적으로 `class` 속성을 CSS 클래스 이름으로 설정하여 사용자 정의 배지 스타일을 만들 수 있습니다. -```js {10} +```js {9} starlight({ sidebar: [ { @@ -309,7 +360,6 @@ starlight({ items: [ // 노란색 "Stub" 배지가 있는 링크 { - label: '시리우스', link: '/stars/sirius/', badge: { text: 'Stub', variant: 'caution' }, }, @@ -401,14 +451,14 @@ starlight({ translations: { 'pt-BR': 'Andrômeda', }, - link: '/constellations/andromeda/', + slug: 'constellations/andromeda/', }, { label: '전갈자리', translations: { 'pt-BR': 'Escorpião', }, - link: '/constellations/scorpius/', + slug: 'constellations/scorpius/', }, ], }, @@ -430,6 +480,44 @@ starlight({ ]} /> +### 내부 링크 국제화 + +[내부 링크](#내부-링크)는 기본적으로 콘텐츠 프론트매터의 번역된 페이지 제목을 자동으로 사용합니다. + +```js {9-10} +starlight({ + sidebar: [ + { + label: '별자리', + translations: { + 'pt-BR': 'Constelações', + }, + items: [ + { slug: 'constellations/andromeda' }, + { slug: 'constellations/scorpius' }, + ], + }, + ], +}); +``` + +브라질 포르투갈어로 문서를 탐색하면 다음 사이드바가 생성됩니다. + + + +다국어 사이트에서는 `slug` 값에 URL의 언어 부분이 포함되지 않습니다. +예를 들어 `en/intro` 및 `pt-br/intro`에 페이지가 있는 경우, 사이드바를 구성할 때 슬러그는 `intro`입니다. + ## 그룹 축소 `collapsed` 속성을 `true`로 설정하면 링크 그룹의 기본 상태를 접힌 상태로 만들 수 있습니다. @@ -441,10 +529,7 @@ starlight({ label: '별자리', // 기본적으로 그룹을 축소 collapsed: true, - items: [ - { label: '안드로메다', link: '/constellations/andromeda/' }, - { label: '오리온', link: '/constellations/orion/' }, - ], + items: ['constellations/andromeda', 'constellations/orion'], }, ], });