メインコンテンツへスキップ
バージョン: 3.5.2

アセット

Markdownファイルから直接アセット（docxファイル、画像など）にリンクしたい場合があり、使用する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

画像​

画像をMarkdown構文、CJS require、またはESインポート構文の3つの異なる方法で表示できます。

単純なMarkdown構文を使用して画像を表示します

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

上記の結果はすべて、画像を表示することになります。

http://localhost:3000

My image alternative text

注意

@docusaurus/plugin-ideal-imageを使用している場合は、ドキュメント化されているように、専用の画像コンポーネントを使用する必要があります。

ファイル​

同様に、既存のアセットをrequireでリンクし、返されたURLをvideo、aアンカーリンクなどで使用できます。

# 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の画像またはリンク構文を使用すると、すべてのアセットパスはDocusaurusによってファイルパスとして解決され、自動的にrequire()呼び出しに変換されます。JSX構文を使用する場合を除き、Markdownでrequire()を使用する必要はありません。JSX構文を使用する場合は自分で処理する必要があります。

インラインSVG​

Docusaurusは、すぐに使えるインラインSVGをサポートしています。

import DocusaurusSvg from './docusaurus.svg';

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

これは、CSSを介してSVG画像の一部を変更したい場合に役立ちます。たとえば、現在のテーマに基づいてSVGカラーの1つを変更できます。

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

テーマ付き画像​

Docusaurusはテーマ付き画像をサポートしています。（テーマに含まれている）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は、パスフラグメントを使用して独自の画像テーマ設定アプローチを使用しており、これは簡単に自分で実装できます。

パスフラグメント（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

静的アセット​

Markdownリンクまたは画像に絶対パスがある場合、そのパスはファイルパスと見なされ、静的ディレクトリから解決されます。たとえば、静的ディレクトリを['public', 'static']に設定した場合、次の画像の場合

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

Docusaurusは、static/img/docusaurus.pngとpublic/img/docusaurus.pngの両方で検索を試みます。その後、リンクはURLのままではなく、require()呼び出しに変換されます。これは2つの点で望ましいです

  1. Docusaurusがアセットの提供時に処理するため、ベースURLについて心配する必要はありません。
  2. 画像はWebpackのビルドパイプラインに入り、その名前にはハッシュが付加されるため、ブラウザは画像を積極的にキャッシュでき、サイトのパフォーマンスが向上します。

URLを記述する場合は、pathname://プロトコルを使用して、自動アセットリンクを無効にできます。

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

このリンクは、<img src="/img/docusaurus-asset-example-banner.png" alt="banner" />として生成され、処理やファイルの存在チェックは行われません。