Skip to main content
버전: 3.10.2

파일 연결

때로는 에셋(예: docx 파일, 이미지...)에 직접 Markdown 파일에서 링크를 걸고 싶을 수 있습니다. 이때 에셋을 사용하는 Markdown 파일과 같은 위치에 해당 에셋을 두면 편리합니다.

다음과 같은 파일 구조를 가정해보겠습니다.

# Your doc
/website/docs/myFeature.mdx

# Some assets you want to use
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example.docx

이미지​

이미지는 마크다운 기본 문법, CJS require, ES imports 구문을 사용하는 3가지 방법으로 연결할 수 있습니다.

간단한 마크다운 기본 문법을 사용해 이미지를 표시합니다.

![Example banner](./assets/docusaurus-asset-example-banner.png)

All of the above result in displaying the image:

http://localhost:3000

My image alternative text

참고

@docusaurus/plugin-ideal-image를 사용한다면, 문서에 설명된 전용 이미지 컴포넌트를 사용해야 합니다.

파일​

In the same way, you can link to existing assets by require'ing them and using the returned URL in videos, a anchor links, etc.

# My Markdown page

<a target="\_blank" href={require('./assets/docusaurus-asset-example.docx').default}> Download this docx </a>

or

[Download this docx using Markdown](./assets/docusaurus-asset-example.docx)
http://localhost:3000
이 docx 다운로드

Markdown으로 이 docx 다운로드

Markdown 링크는 항상 파일 경로입니다

Markdown 이미지나 링크 구문을 사용하면, 도큐사우루스가 모든 에셋 경로를 파일 경로로 해석하고 자동으로 require() 호출로 변환합니다. JSX 구문을 사용하지 않는 한 Markdown에서 require()를 사용할 필요가 없으며, JSX를 사용할 경우에는 직접 처리해야 합니다.

SVG 파일​

도큐사우루스에서는 SVG 파일을 바로 사용할 수 있습니다.

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg />;
http://localhost:3000

이런 사용법은 CSS를 사용해 SVG 이미지 일부를 변경할 때 유용하게 활용할 수 있습니다. 예를 들어 현재 설정한 테마에 따라 SVG 이미지 색상을 변경할 수 있습니다.

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg className="themedDocusaurus" />;
[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
  fill: greenyellow;
}

[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
  fill: seagreen;
}
http://localhost:3000

테마 이미지​

도큐사우루스는 테마별 이미지를 지원합니다: ThemedImage 컴포넌트 (테마에 포함됨)를 사용하면 현재 테마에 따라 이미지 소스를 바꿀 수 있습니다.

import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemedImage from '@theme/ThemedImage';

<ThemedImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl('/img/docusaurus_light.svg'),
    dark: useBaseUrl('/img/docusaurus_dark.svg'),
  }}
/>;
http://localhost:3000
Docusaurus themed imageDocusaurus themed image

깃허브 스타일 테마 이미지​

GitHub는 경로 프래그먼트를 사용하는 자체 이미지 테마 적용 방식을 사용하며, 이 방식은 직접 쉽게 구현할 수 있습니다.

경로 프래그먼트 (GitHub에서는 #gh-dark-mode-only와 #gh-light-mode-only)를 사용해 이미지 표시 여부를 전환하려면, 사용자 지정 CSS에 다음 내용을 추가하세요 (GitHub에 종속되고 싶지 않다면 자체 접미사를 사용할 수도 있습니다):

src/css/custom.css
[data-theme='light'] img[src$='#gh-dark-mode-only'],
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
  display: none;
}
![Docusaurus themed image](/img/docusaurus_keytar.svg#gh-light-mode-only)![Docusaurus themed image](/img/docusaurus_speed.svg#gh-dark-mode-only)
http://localhost:3000

Docusaurus themed imageDocusaurus themed image

정적 애셋​

마크다운 링크 또는 이미지가 절대 경로에 있다면 경로는 파이 경로로 표시되며 정적 디렉터리에서 확인할 수 있습니다. 예를 들어, 정적 디렉터리를 ['public', 'static']으로 설정한 경우 다음 이미지를 생각해 보세요:

my-doc.md
![An image from the static](/img/docusaurus.png)

도큐사우루스는 static/img/docusaurus.png와 public/img/docusaurus.png 두 위치에서 이미지를 찾아봅니다. 그러면 링크는 URL로 남아 있는 대신 require() 호출로 변환됩니다. 이는 두 가지 측면에서 바람직합니다.

  1. 도큐사우루스가 애셋을 제공할 때 처리할 기본 URL에 대해 걱정할 필요가 없습니다.
  2. 이미지가 Webpack의 빌드 파이프라인에 들어가 해당 이름에 해시가 추가되고 브라우저에서 이미지를 캐시해 사이트 성능을 향상시킬 수 있습니다.

URL을 작성하려면, pathname:// 프로토콜을 사용해 자동 에셋 연결을 비활성화할 수 있습니다.

![banner](pathname:///img/docusaurus-asset-example-banner.png)

이 링크는 별도의 처리나 파일 존재 여부 확인 없이, <img src="/img/docusaurus-asset-example-banner.png" alt="banner" />로 생성됩니다.