ウェブサイトでのIPFSの使用

必須ではありませんが、異なるドメインにリンクする場合を除き、IPFS上でホストされるウェブサイトは相対リンクのみを使用することを強く推奨します。これは、データにアクセスする方法が多様であり（最終的には同等ですが）、以下のような理由からです：

• カスタムドメインから: https://ipfs.tech/index.html
• ゲートウェイから: https://cloudflare-ipfs.com/ipns/ipfs.tech/index.html
• 不変ハッシュによる: https://cloudflare-ipfs.com/ipfs/QmNksJqvwHzNtAtYZVqFZFfdCVciY4ojTU2oFZQSFG9U7B/index.html

ウェブアプリケーション内で相対リンクのみを使用することで、これらすべてを同時にサポートし、ユーザーに最も柔軟性を提供します。相対リンクに切り替えるための具体的な方法は、使用しているフレームワークによって異なります。

Angular, React, Vue

これらの人気のJavaScriptフレームワークについては、Pinata ↗のブログ記事 ↗で説明されています。少しの設定変更で対応できます。

Gatsby

GatsbyはReactに基づくJavaScriptフレームワークです。相対リンクを確保するためのプラグイン ↗があります。

Jekyll

以下の内容で_includes/base.htmlというファイルを追加します：

{% assign base = '' %}
{% assign depth = page.url | split: '/' | size | minus: 1 %}
{% if    depth <= 1 %}{% assign base = '.' %}
{% elsif depth == 2 %}{% assign base = '..' %}
{% elsif depth == 3 %}{% assign base = '../..' %}
{% elsif depth == 4 %}{% assign base = '../../..' %}{% endif %}

このスニペットは、現在のページからウェブサイトのルートへの相対パスを計算します。ルートにリンクする必要があるページは、次のようにこのコードを追加して更新します：

{%- include base.html -%}

このスニペットは、リンクの先頭に{{base}}を付加します。例えば、href="/css/main.css"をhref="{{base}}/css/main.css"に変更します。

Generic

他のフレームワークの場合、またはフレームワークを使用していない場合は、make-relative ↗というスクリプトがあり、ウェブサイトのHTMLを解析してリンクや画像を自動的に相対的に書き換えます。