将 IPFS 与您的网站配合使用

虽然这不是必需的，但强烈建议除非链接到其他域，否则托管在 IPFS 上的网站应仅使用相对链接。这是因为可以通过许多不同（但最终等效）的方式访问数据：

• 从您的自定义域：https://ipfs.tech/index.html
• 从 gateway：https://cloudflare-ipfs.com/ipns/ipfs.tech/index.html
• 通过不可变的哈希：https://cloudflare-ipfs.com/ipfs/QmNksJqvwHzNtAtYZVqFZFfdCVciY4ojTU2oFZQSFG9U7B/index.html

在 Web 应用程序中仅使用相对链接可以同时支持上述所有方式，并为用户提供最大的灵活性。如果您尚未使用相对链接，切换到相对链接的确切方法取决于您使用的框架。

Pinata ↗ 的一篇博客文章 ↗介绍了这些流行的 JavaScript 框架。只需稍加修改配置即可修复。

Gatsby 是一款基于 React 的 JavaScript 框架。有一款 插件 ↗可确保 Gatsby 使用相对链接。

添加一个名为 _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"

对于其他框架或未使用框架的情况，有一个名为 make-relative ↗ 的脚本可以解析网站的 HTML，并自动将链接和图片重写为相对路径。