Risorse Statiche - lucadileo9/template-catalog GitHub Wiki

Le risorse statiche (es. immagini, font, file) sono un elemento fondamentale del progetto. Questa sezione spiega come sono organizzate, accessibili e utilizzate all'interno del sistema.

1. Organizzazione delle Risorse Statiche

Le risorse statiche sono archiviate nella cartella public/ del progetto. Questa cartella รจ suddivisa in due parti principali:

  1. Risorse Globali:

    • Contengono file condivisi tra tutti i template.
    • Esempi: favicon, immagini generiche, font.
    • Percorso: /public/.

  2. Risorse Specifiche dei Template:

    • Ogni template ha una sottocartella dedicata nella cartella public/ per le sue risorse specifiche.
    • Esempi: immagini del logo, banner, icone personalizzate.
    • Percorso: /public/<nome-template>/.

Struttura della Cartella public/

public/
  โ”œโ”€โ”€ favicon.ico                     # Favicon globale
  โ”œโ”€โ”€ siti_esterni/                   # Immagini per siti esterni
  โ”œโ”€โ”€ template_screenshots/           # Screenshot dei template
  โ”œโ”€โ”€ pizzeria/                       # Risorse specifiche per il template "pizzeria"
  โ”‚   โ””โ”€โ”€ images/                     # Immagini del template
  โ””โ”€โ”€ estetista/                      # Risorse specifiche per il template "estetista"
      โ””โ”€โ”€ images/                     # Immagini del template

2. Accesso alle Risorse Statiche

Le risorse statiche sono accessibili tramite percorsi assoluti. Ecco alcuni esempi:

Risorse Globali

<img src="/favicon.ico" alt="Favicon Globale" />
<img src="/siti_esterni/jeiom23.png" alt="Screenshot JEIOM 23" />

Risorse Specifiche di un Template

<img src="/pizzeria/images/logo.png" alt="Logo Pizzeria" />
<img src="/estetista/images/banner.jpg" alt="Banner Estetista" />

3. Automazione delle Risorse

Quando si crea un nuovo template tramite Plop, viene automaticamente creata una sottocartella dedicata nella cartella public/. Questo semplifica l'organizzazione delle risorse e riduce il rischio di conflitti.

Esempio

Se crei un template chiamato estetista, Plop genera automaticamente:

public/estetista/images/

Puoi quindi aggiungere le risorse statiche del template in questa cartella.

4. Best Practices

  • Organizza le Risorse: Mantieni le risorse ben organizzate in sottocartelle dedicate (es. images/, fonts/).
  • Usa Percorsi Assoluti: Usa sempre percorsi assoluti per accedere alle risorse statiche.
  • Ottimizza le Immagini: Comprimi le immagini per migliorare le prestazioni del sito.
  • Evita Ridondanze: Condividi risorse comuni (es. favicon, font) nella cartella globale public/.

5. Esempi Pratici

Aggiunta di un'Immagine Globale

  1. Posiziona l'immagine nella cartella public/: 
    public/logo.png
  2. Accedi all'immagine nel codice: 
    <img src="/logo.png" alt="Logo Globale" />

Aggiunta di un'Immagine Specifica di un Template

  1. Posiziona l'immagine nella cartella del template: 
    public/pizzeria/images/menu.jpg
  2. Accedi all'immagine nel codice: 
    <img src="/pizzeria/images/menu.jpg" alt="Menu Pizzeria" />