메인 컨텐츠로 이동
Version: 2.0.0-alpha.75

파일 연결

마크다운 파일에서 직접 정적 파일에 연결해야 하는 경우가 있습니다. 이럴 때는 마크다운 파일과 인접한 위치에 파일을 배치하는 것이 편리합니다.

일반적으로 사용하는 파일 유형을 처리할 수 있도록 웹팩 로더(Webpack loader)를 설정해야 합니다. 그렇게 하면 파일을 import 했을 때 URL을 가져오고 파일이 자동으로 output 디렉터리로 복사됩니다.

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

# 현재 문서/website/docs/myFeature.mdx
# 사용하고자 하는 파일/website/docs/assets/docusaurus-asset-example-banner.png/website/docs/assets/docusaurus-asset-example-pdf.pdf

이미지#

마크다운 내에서 이미지를 직접 연결하거나 JSX 이미지 태그를 사용해 요청할 수 있습니다.

# 마크다운 페이지
<img  src={require('./assets/docusaurus-asset-example-banner.png').default}  alt="Example banner"/>
or
![Example banner](./assets/docusaurus-asset-example-banner.png)

ECMAScript의 import 구문도 같은 방식으로 동작합니다.

# 마크다운 페이지
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="My image alternative text" />

화면에 이미지는 아래와 같이 보여집니다.

My image alternative text

note

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

파일#

같은 방식으로 파일을 요청하거나 비디오나 링크의 URL를 사용해 파일을 연결할 수 있습니다.

# 마크다운 페이지
<a  target="_blank"  href={require('./assets/docusaurus-asset-example-pdf.pdf').default}>  PDF 파일 내려받기</a>
or
[마크다운을 사용해 PDF 파일 내려받기](./assets/docusaurus-asset-example-pdf.pdf)
PDF 파일 내려받기

마크다운을 사용해 PDF 파일 내려받기

SVG 파일#

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

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;

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

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg className="themedDocusaurus" />;
html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {  fill: greenyellow;}
html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {  fill: seagreen;}

테마 이미지#

도큐사우루스에서는 ThemedImage 컴포넌트(classic/bootstrap 테마에 포함된)를 기반으로 테마 이미지를 조작할 수 있습니다. 이를 통해 현재 설정한 테마에 따라 이미지를 다른 파일로 대체할 수 있습니다.

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