← Web3 / web3 / ipfs-gateway / reference

Использование IPFS на вашем веб-сайте

Хотя это не обязательно, для сайтов, размещённых в IPFS, настоятельно рекомендуется использовать только относительные ссылки, за исключением случаев, когда ссылка ведёт на другой домен. Это связано с тем, что к данным можно получить доступ разными способами, которые в итоге равнозначны:

• С вашего собственного домена: https://ipfs.tech/index.html
• Через шлюз: https://cloudflare-ipfs.com/ipns/ipfs.tech/index.html
• По неизменяемому хэшу: https://cloudflare-ipfs.com/ipfs/QmNksJqvwHzNtAtYZVqFZFfdCVciY4ojTU2oFZQSFG9U7B/index.html

Использование только относительных ссылок в веб-приложении поддерживает все эти варианты одновременно и даёт пользователю наибольшую гибкость. Конкретный способ перехода на относительные ссылки, если вы их ещё не используете, зависит от используемого фреймворка.

Эти популярные JavaScript-фреймворки рассматриваются в запись в блоге ↗ от Pinata ↗. Они устраняются небольшими изменениями конфигурации.

Gatsby представляет собой JavaScript-фреймворк на основе React. Есть плагин ↗ для него, чтобы ссылки оставались относительными.

Добавьте файл _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 сайта и автоматически переписывает ссылки и изображения в относительные.