Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n(ko-KR): update sidebar.mdx #2094

Merged
merged 2 commits into from
Jul 5, 2024
Merged

i18n(ko-KR): update sidebar.mdx #2094

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e84a3da
i18n(ko-KR): update `sidebar.mdx`
jsparkdev Jul 5, 2024
edf09fc
Merge branch 'main' into sidebar
delucis Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 110 additions & 25 deletions docs/src/content/docs/ko/guides/sidebar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
],
});
```

파일 구조는 다음과 같습니다.

<FileTree>

- src/
- content/
- docs/
- constellations/
- andromeda.md
- orion.md

</FileTree>

다음 사이드바가 생성됩니다.

<SidebarPreview
config={[
{ label: '안드로메다', link: '' },
{ label: '오리온', link: '' },
]}
/>

링크된 페이지의 프론트매터에서 추론된 값을 재정의하기 위해 `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/' },
],
Expand All @@ -72,7 +126,7 @@ starlight({

<SidebarPreview
config={[
{ label: '가니메데', link: '' },
{ label: '유성 상점', link: '/shop/' },
{ label: 'NASA', link: 'https://www.nasa.gov/' },
]}
/>
Expand All @@ -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',
],
},
],
Expand Down Expand Up @@ -182,7 +236,7 @@ starlight({
]}
/>

#### 프론트매터에서 자동으로 생성된 링크 변경하기
## 프론트매터에서 자동 생성된 링크 사용자 정의

자동으로 생성된 링크를 변경하려면 개별 페이지의 [`sidebar` 프론트매터 필드](/ko/reference/frontmatter/#sidebar)를 사용하세요.

Expand Down Expand Up @@ -224,24 +278,21 @@ sidebar:
/>

:::note

`sidebar` 프론트매터 구성은 자동으로 생성된 링크에만 사용되며 수동으로 정의된 링크에서는 무시됩니다.

`sidebar` 프론트매터 구성은 `slug` 속성으로 정의된 자동으로 생성된 그룹의 링크 및 문서 링크에만 사용됩니다. `link` 속성으로 정의된 링크에는 적용되지 않습니다.
:::

## 배지

링크, 그룹, 자동 생성된 그룹은 라벨 옆에 배지를 표시하기 위해 `badge` 속성을 포함할 수도 있습니다.

```js {10,17}
```js {9,16}
starlight({
sidebar: [
{
label: '별',
items: [
// "초거성" 배지가 있는 링크
{
label: '페르세우스',
link: '/stars/persei/',
badge: '초거성',
},
Expand Down Expand Up @@ -301,15 +352,14 @@ starlight({

선택적으로 `class` 속성을 CSS 클래스 이름으로 설정하여 사용자 정의 배지 스타일을 만들 수 있습니다.

```js {10}
```js {9}
starlight({
sidebar: [
{
label: '별',
items: [
// 노란색 "Stub" 배지가 있는 링크
{
label: '시리우스',
link: '/stars/sirius/',
badge: { text: 'Stub', variant: 'caution' },
},
Expand Down Expand Up @@ -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/',
},
],
},
Expand All @@ -430,6 +480,44 @@ starlight({
]}
/>

### 내부 링크 국제화

[내부 링크](#내부-링크)는 기본적으로 콘텐츠 프론트매터의 번역된 페이지 제목을 자동으로 사용합니다.

```js {9-10}
starlight({
sidebar: [
{
label: '별자리',
translations: {
'pt-BR': 'Constelações',
},
items: [
{ slug: 'constellations/andromeda' },
{ slug: 'constellations/scorpius' },
],
},
],
});
```

브라질 포르투갈어로 문서를 탐색하면 다음 사이드바가 생성됩니다.

<SidebarPreview
config={[
{
label: 'Constelações',
items: [
{ label: 'Andrômeda', link: '' },
{ label: 'Escorpião', link: '' },
],
},
]}
/>

다국어 사이트에서는 `slug` 값에 URL의 언어 부분이 포함되지 않습니다.
예를 들어 `en/intro` 및 `pt-br/intro`에 페이지가 있는 경우, 사이드바를 구성할 때 슬러그는 `intro`입니다.

## 그룹 축소

`collapsed` 속성을 `true`로 설정하면 링크 그룹의 기본 상태를 접힌 상태로 만들 수 있습니다.
Expand All @@ -441,10 +529,7 @@ starlight({
label: '별자리',
// 기본적으로 그룹을 축소
collapsed: true,
items: [
{ label: '안드로메다', link: '/constellations/andromeda/' },
{ label: '오리온', link: '/constellations/orion/' },
],
items: ['constellations/andromeda', 'constellations/orion'],
},
],
});
Expand Down
Loading