← Web3 / web3 / ipfs-gateway / reference

Používání IPFS na vašem webu

I když to není povinné, důrazně doporučujeme, aby weby hostované na IPFS používaly pouze relativní odkazy, pokud neodkazují na jinou doménu. Je to proto, že k datům lze přistupovat mnoha různými, ale v konečném důsledku rovnocennými způsoby:

• Z vaší vlastní domény: https://ipfs.tech/index.html
• Z gateway: https://cloudflare-ipfs.com/ipns/ipfs.tech/index.html
• Podle neměnného hashe: https://cloudflare-ipfs.com/ipfs/QmNksJqvwHzNtAtYZVqFZFfdCVciY4ojTU2oFZQSFG9U7B/index.html

Používání pouze relativních odkazů ve webové aplikaci podporuje všechny tyto možnosti najednou a poskytuje uživateli největší flexibilitu. Přesný způsob přechodu na relativní odkazy, pokud je ještě nepoužíváte, závisí na frameworku, který používáte.

Tyto oblíbené JavaScript frameworky jsou popsány v blogový příspěvek ↗ z Pinata ↗. Opravují se drobnými změnami konfigurace.

Gatsby je JavaScriptový framework postavený na React. Existuje plugin ↗ pro něj, které zajistí, že odkazy budou relativní.

Přidejte soubor _includes/base.html s tímto obsahem:

{% 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 %}

Tento úryvek kódu vypočítá relativní cestu zpět ke kořeni webu z aktuální stránky. U všech stránek, které potřebují odkazovat na kořen, přidejte na začátek následující kód:

{%- include base.html -%}

Tento úryvek kódu také přidává před všechny odkazy předponu {{base}}. Takže bychom například změnili href="/css/main.css" na href="{{base}}/css/main.css"

Pro ostatní frameworky, nebo pokud jste žádný framework nepoužili, slouží skript s názvem make-relative ↗ který analyzuje HTML webu a automaticky přepíše odkazy a obrázky na relativní.