메인 컨텐츠로 이동
Version: 2.0.0-beta.10 🚧

파일 연결

Sometimes you want to link to assets (e.g. docx files, images...) directly from Markdown files, and it is convenient to co-locate the asset next to the Markdown file using it.

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

# 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

이미지

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

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

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

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" />

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

My image alternative text

note

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

파일

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

# 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)
DOCX 파일 내려받기

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

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 컴포넌트(테마에 포함된)를 기반으로 테마 이미지를 조작할 수 있습니다. 이를 통해 현재 설정한 테마에 따라 이미지를 다른 파일로 대체할 수 있습니다.

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

Static assets

If a Markdown link or image has an absolute path, the path will be seen as a file path and will be resolved from the static directories. For example, if you have configured static directories to be ['public', 'static'], then for the following image:

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

Docusaurus will try to look for it in both static/img/docusaurus.png and public/img/docusaurus.png. The link will then be converted to a require call instead of staying as a URL. This is desirable in two regards:

  1. You don't have to worry about base URL, which Docusaurus will take care of when serving the asset;
  2. The image enters Webpack's build pipeline and its name will be appended by a hash, which enables browsers to aggressively cache the image and improves your site's performance.