컨텐츠로 건너뛰기
Starlight

파일 트리

파일 아이콘과 접을 수 있는 하위 디렉터리가 있는 디렉터리의 구조를 표시하려면 <FileTree> 컴포넌트를 사용하세요.

미리보기
  • astro.config.mjs 중요 파일
  • package.json
  • README.md
  • 디렉터리src
    • 디렉터리components
      • Header.astro
    • …
  • 디렉터리pages/
    • …

가져오기

import { FileTree } from '@astrojs/starlight/components';

사용

<FileTree> 컴포넌트를 사용하여 파일 아이콘과 접을 수 있는 하위 디렉터리가 있는 파일 트리를 표시합니다.

<FileTree>에서 순서가 지정되지 않은 Markdown 목록을 사용하여 파일 및 디렉터리의 구조를 지정하세요. 중첩된 목록을 사용하여 하위 디렉터리를 생성하거나 목록 항목 끝에 /를 추가하여 특정 내용이 없는 디렉터리로 렌더링합니다.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/


</FileTree>
미리보기
  • astro.config.mjs
  • package.json
  • 디렉터리src
    • 디렉터리components
      • Header.astro
      • Title.astro
    • 디렉터리pages/
      • …

항목 강조 표시

파일이나 디렉터리의 이름을 굵은 글씨로 만들어 눈에 띄게 만드세요 (예: **README.md**).

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - **Header.astro**
    - Title.astro


</FileTree>
미리보기
  • 디렉터리src
    • 디렉터리components
      • Header.astro
      • Title.astro

주석 추가

이름 뒤에 텍스트를 더 추가하여 파일이나 디렉터리에 주석을 추가합니다. 주석에서 굵게 및 기울임꼴과 같은 인라인 Markdown 서식이 지원됩니다.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - Header.astro **중요** 파일
    - Title.astro


</FileTree>
미리보기
  • 디렉터리src
    • 디렉터리components
      • Header.astro 중요 파일
      • Title.astro

자리 표시자 추가

... 또는 …을 이름으로 사용하여 자리 표시자 파일과 디렉터리를 추가합니다. 이는 폴더에 더 많은 항목이 포함될 수 있음을 모든 항목을 일일이 명시하지 않고도 독자에게 알려주는 데 유용할 수 있습니다.

import { FileTree } from '@astrojs/starlight/components';


<FileTree>


- src
  - components
    - Header.astro
    - …


</FileTree>
미리보기
  • 디렉터리src
    • 디렉터리components
      • Header.astro
      • …

<FileTree> 속성

구현: FileTree.astro

<FileTree> 컴포넌트는 어떤 속성도 허용하지 않습니다.