파일 연결
마크다운 파일에서 직접 정적 파일에 연결해야 하는 경우가 있습니다. 이럴 때는 마크다운 파일과 인접한 위치에 파일을 배치하는 것이 편리합니다.
일반적으로 사용하는 파일 유형을 처리할 수 있도록 웹팩 로더(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 require, ES imports 구문을 사용하는 3가지 방법으로 연결할 수 있습니다.
간단한 마크다운 기본 문법을 사용해 이미지를 표시합니다.
JSX image 태그 안에 인라인 CommonJS require 구문을 사용해 이미지를 표시합니다.
<img src={require('./assets/docusaurus-asset-example-banner.png').default} alt="Example banner"/>ES import 구문과 JSX image 태그를 사용해 이미지를 표시합니다.
import myImageUrl from './assets/docusaurus-asset-example-banner.png';
<img src={myImageUrl} alt="Example banner" />화면에 이미지는 아래와 같이 보여집니다.
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)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'), }}/>;
