🎤 **Nuxt Nation** カンファレンス開催！11月12日～13日、ご参加ください。
54.8K

content-assets
nuxt-content-assets

Nuxt Contentでローカルに配置されたアセットを有効化
⬇️ 1.6K ダウンロード
⭐ 115 スター
🏷️ v1.4.4
davestewart

Nuxt Content Assets

npm versionnpm downloadsLicenseNuxt

Nuxt Contentでローカルに配置されたアセットを有効化

Nuxt Content Assets logo

概要

Nuxt Content Assetsは、[Nuxt Content](https://content.nuxtjs.org/)でローカルに配置されたアセットを有効にします。

+- content
    +- posts
        +- 2023-01-01
            +- index.md
            +- media
                +- featured.png
                +- mountains.jpg
                +- seaside.mp4

ドキュメント内では、相対パスを使用してアセットを参照します。

---
title: Summer Holiday
featured: media/featured.png
---

I loved being in the mountains.

![mountains](media/mountains.png)

Almost as much as being in the sea!

:video{src="media/seaside.mp4"}

ビルド時に、このモジュールは[アセットとコンテンツをまとめて収集し、提供します](https://github.com/davestewart/nuxt-content-assets/blob/main/#how-it-works)。

機能

[Nuxt Content](https://github.com/nuxt/content/)上に構築されており、[Docus](https://github.com/nuxt-themes/docus)を含む任意のNuxt Contentプロジェクトまたはテーマと互換性があります。

ユーザーエクスペリエンス

  • コンテンツファイルとアセットを同じ場所に配置
  • 相対パスを使用してアセットを参照
  • あらゆる形式（画像、ビデオ、ドキュメント）をサポート

開発者エクスペリエンス

  • タグとカスタムコンポーネントで動作
  • Markdownとフロントマターで動作
  • ファイル監視とアセットのライブリロード
  • 画像サイズの挿入
  • ゼロコンフィグ

プレイグラウンド

インストールする前にモジュールをテストするには、Nuxt Content Assetsのプレイグラウンドを試すことができます。

ローカルでクローンして実行するには

git clone https://github.com/davestewart/nuxt-content-assets.git
cd nuxt-content-assets
npm install && npm install --prefix ./playground
npm run dev

その後、ブラウザで[localhost:3000](https://127.0.0.1:3000)でプレイグラウンドを開きます。

オンラインでプレイグラウンドを実行するには、こちらをご覧ください。

プレイグラウンドフォルダを参照するには

セットアップ

依存関係をインストールします

npm install nuxt-content-assets

`nuxt.config.ts` を設定します

export default defineNuxtConfig({
  modules: [
    'nuxt-content-assets', // make sure to add before content!
    '@nuxt/content',
  ]
})

開発サーバーを実行するか、ビルドを実行すると、ローカルアセットがMarkdownコンテンツと共に提供されるようになります。

使用方法

概要

ドキュメント内のどこでも相対パスを使用します。

Images
![image](image.jpg)

Links
[link](docs/article.txt)

Elements / components
:video{src="media/video.mp4"}

HTML
<iframe src="media/example.html" />

相対パスはフロントマターで定義できます（ただし、値は1つのみ）。

---
title: Portfolio
images:
  - assets/image-1.jpg
  - assets/image-2.jpg
  - assets/image-3.jpg
---

これらの値はコンポーネントに渡すことができます。

:image-gallery{:data="images"}

マークアップとコンポーネントの例については、プレイグラウンドをご覧ください：[マークアップ](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/content/advanced/gallery.md)、[コンポーネント](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/content/ContentGallery.vue)。

ライブリロード

開発中は、モジュールはアセットの追加、移動、削除を監視し、ブラウザをライブで更新します。

アセットを削除すると、ファイルを置き換えたり、パスを変更するまで、ブラウザでグレー表示されます。

画像、ビデオ、埋め込み、またはiframeソースを編集すると、コンテンツがすぐに更新されます。これは、デザインを完璧に仕上げたい場合に役立ちます！

**注意:** ライブリロードは現在、Nuxt Imageでは動作しません（[Issue #77](https://github.com/davestewart/nuxt-content-assets/issues/77)を参照）。

画像デザインを反復する必要がある場合は、開発中にNuxt Imageを無効にすることを検討してください。

画像サイズ調整

HTML

このモジュールは、生成された``タグに画像サイズのヒントを渡すことができます。

<!-- imageSize: 'style' -->
<img src="/image.jpg" style="aspect-ratio:640/480">

<!-- imageSize: 'attrs' -->
<img src="/image.jpg" width="640" height="480">

これをオンにすると、ページの読み込み時のコンテンツのジャンプを防ぐことができます。

**警告:** Nuxt Imageと併用して`imageSize: 'src'`を使用しないでください。IPXモジュールが画像を正しく提供できなくなり、静的サイト生成が失敗します。

Proseコンポーネント

[ProseImg](https://content.nuxtjs.org/api/components/prose)コンポーネントを使用する場合は、[画像サイズのヒントを`$attrs`プロパティを介してフックできます](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/temp/ProseImg.vue)。

<template>
  <span class="image">
    <img :src="$attrs.src" :width="$attrs.width" :height="$attrs.height" />
  </span>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

フロントマター

[フロントマター](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/content/advanced/gallery.md)を[カスタムコンポーネント](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/content/ContentImage.vue)に渡す場合は、`src`に値をエンコードするために`imageSize`を`'src'`に設定します。

:image-content{:src="image"}

コンポーネントはサイズ情報をクエリ文字列として受信し、それを抽出して適用できます。

<img class="image-content" src="/image.jpg?width=640&height=480">

プレイグラウンドのコンポーネントはこちらをご覧ください：[here](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/content/ContentImage.vue)。

Nuxt Image

[Nuxt Image](https://image.nuxtjs.org/)は、Nuxt Content AssetのキャッシュフォルダをNuxtレイヤーとして追加することでサポートされます。

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    'node_modules/nuxt-content-assets/cache',
  ],
}

すべての画像をNuxt Image画像として提供するには、次のような`ProseImg`コンポーネントを作成します。

<!-- components/content/ProseImg.vue -->
<template>
  <nuxt-img />
</template>

グローバルと画像ごとのソリューションの両方について、プレイグラウンドフォルダをご覧ください：[グローバル](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/temp/ProseImg.vue)、[画像ごと](https://github.com/davestewart/nuxt-content-assets/blob/main/playground/components/content/NuxtImg.ts)。

設定

このモジュールには、次のオプションがあります。

// nuxt.config.ts
export default defineNuxtConfig({
  contentAssets: {    
    // inject image size hints into the rendered html
    imageSize: 'style',
    
    // treat these extensions as content
    contentExtensions: 'mdx? csv ya?ml json',
    
    // output debug messages
    debug: false,
  }
})

画像サイズ

**注意**

v1.4.1以降、画像サイズのヒントはオプトインになりました。これは、Nuxt Imageとの互換性を最大限に高めるためです。

生成された画像に1つ以上の画像サイズのヒントを追加できます。

{
  imageSize: 'style attrs src'
}

次のスイッチから選択します。

スイッチ機能
`'style'```タグに`style="aspect-ratio:..."`を追加します。
`'attrs'```タグに`width`属性と`height`属性を追加します。
`'src'``src`属性に`?width=...&height=...`を追加します（フロントマターのみ）。

注:`attrs`のみを追加する場合は、アプリに次のCSSを含めます。

img {
  max-width: 100%;
  height: auto;
}

コンテンツ拡張子

**注意:** 通常、この設定に触れる必要はありません。

この設定は、サポートされているコンテンツタイプ以外のものをNuxt Contentが無視するように指示します。

mdx? csv ya?ml json

これにより、Nuxt Contentの[ignores](https://content.nuxt.com/get-started/configuration#ignores)リストを明示的に設定することなく、他のファイルタイプをアセットとして使用できます。

これがないと、Nuxt Contentはサポートされていないファイルタイプについて警告します。

**警告:** .jpgファイルはサポートされていません。"content:path:to:some-asset.jpg"が生のコンテンツにフォールバックします。

デバッグ

モジュールの動作を確認するには、`debug`をtrueに設定します。

{
  debug: true
}

動作原理

Nuxtがビルドされると、モジュールはすべてコンテンツソースをスキャンしてアセットを検索し、それらを一時的なレイヤーフォルダ(`nuxt_modules/nuxt-content-assets/cache`)にコピーし、パスと画像のメタデータをインデックス付けします。

Nuxt Contentの実行後、解析されたコンテンツ(`.nuxt/content-cache`)がトラバースされ、要素属性とフロントマターのプロパティの両方が、以前にインデックス付けされたアセットパスに解決されるかどうかが確認されます。

解決する場合は、Nuxt Contentのキャッシュ内の属性またはプロパティが絶対パスで書き換えられます。アセットが画像の場合は、要素またはメタデータがオプションでサイズ属性またはクエリ文字列で更新されます。

最後に、Nitroがサイトを提供し、変換されたアセットパスに対して行われた要求はすべて取得され、コピーされたアセットがブラウザによって提供されます。

開発中は、監視プロセスによってアセットの変更がキャッシュに伝播され、アセットインデックスが更新され、Webソケットを介してブラウザにロードされた画像を更新する通知が送信されます。

Nuxt Imageを使用する場合は、`_ipx/`エンドポイントがキャッシュのパブリックフォルダから直接画像を提供します。

開発

プロジェクトを開発する場合、次のエンティティを使用します。

  • src
    モジュールコード自体
  • playground
    ライブモジュールコードを読み取るスタンドアロンのNuxtアプリ
  • scripts
    モジュールを開発および公開するためのスクリプトセット

セットアップ

プロジェクトを設定するには、これらのスクリプトをそれぞれ1回実行します。

# install dependencies
npm install

# copy the cache folder to the playground's node_modules (workaround required in development)
npm run dev:setup

# generate types for the module and playground (re-run if you install new packages)
npm run dev:prepare

開発

モジュールを開発するには、提供されたプレイグラウンドアプリを使用します。

# compile the module, run and serve the playground
npm run dev

# generate the playground
npm run dev:generate

# build the playground
npm run dev:build

# serve the generated/built playground
npm run dev:preview

これらのツールを使用して、コードの品質を確認します。

# lint your code with eslint
npm run lint

# runs tests with vitest
npm run test
npm run test:watch

公開

**重要:** 公開する前に、[バージョン](https://github.com/davestewart/nuxt-content-assets/blob/main/package.json)と[変更ログ](https://github.com/davestewart/nuxt-content-assets/blob/main/CHANGELOG.md)を必ず更新してください！

ビルドして公開するには、必要に応じて次のスクリプトを実行します。

# lint, test, build, and dry-run publish
npm run release:dry

# lint, test, build and publish
npm run release

メンテナンス

このモジュールは、Nuxtの[Module Builder](https://github.com/nuxt/module-builder)コマンドを使用して作成されました。

npx nuxi init -t module nuxt-content-assets

これにより、ここに記載されているスターターテンプレートからモジュールコードが作成されました。

[Nuxi](https://github.com/nuxt/cli)とモジュールの依存関係とスクリプトは定期的に更新されるため、このモジュールを同期状態に維持するために、時々更新が必要になる場合があります。これまでのところ、これは依存関係とスクリプトの更新を意味しており、上記で説明したスターターテンプレートコードにあります。

ビルド/リリーススクリプトは元のものからわずかに変更されています。ビルドは分離され、リリースは[changelogen](https://github.com/unjs/changelogen)を使用せず、タグを自動的に追加してGitHubにプッシュしません。