콘텐츠로 이동
Starlight
Filters

    파일 트리

    파일 아이콘과 접을 수 있는 하위 디렉터리가 있는 디렉터리의 구조를 표시하려면 <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> 속성”

    구현: FileTree.astro

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