Nei precedenti capitoli abbiamo imparato il set minimo di strumenti necessari per gestire i nostri template ma non abbiamo ancora visto come inserire nelle nostre pagine degli asset statici: fogli di stile, file Javascript, immagini etc.
In questa lezione iniziamo realmente a "sporcarci le mani" aggiungendo gli asset statici e definendo i primi blocchi che utilizzeremo nel nostro progetto.
Nella directory resources/visual abbiamo dei template HTML statici che rappresentano un'anteprima di come implementeremo alcune pagine; ci sono inoltre file CSS, JS, font e immagini necessarie per renderizzare al meglio le pagine. Vediamo insieme come iniziare a spostare questi file all'interno del progetto.
Iniziamo con gli asset statici che per adesso ci limiteremo a copiare all'interno della directory public di Symfony in maniera che possa essere accessibile anche dall'esterno. Possiamo farlo, copiando e incollando la directory o attraverso il terminale, dall'esterno del container lanciando il comando:
$ cp -r resources/visual/assets app/publicPer verificare che tutto funzioni correttamente possiamo includere un foglio di stile all'interno del nostro template di base. Per fare ciò apriamo il file app/templates/base.html.twig e all'interno del blocco stylesheets aggiungiamo:
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet"/>Aprendo la home page dovremmo vedere il font della pagina modificato, dato che il foglio di stile di Bootstrap ridefinisce lo stile di base della pagina.
Se tutto funziona correttamente possiamo iniziare a riempire il tag <head> con quanto contenuto nel medesimo tag nei nostri template e aggiungere i Javascript in tutte le pagine. Apriamo il template resources/visual/home.html e copiamo tutto il tag <head>. A questo punto per completare il lavoro dobbiamo:
- wrappare tutti gli asset statici importati all'interno della funzione di Twig
asset(). Questa funzione stamperà automaticamente a schermo il path completo dell'asset che stiamo caricando. Ce ne sono diversi: dall'icona apple, alla favicon ai fogli di stile. Gli unici che non modificheremo saranno quelli dei font che sono esterni. - Aggiungere la lingua al template in modo che venga presa dalla request.
- Copiare i Javascript contenuti in fondo al template adattando anch'essi con la funzione
asset().
Il nostro nuovo template di base sarà:
<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head> <meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('assets/img/apple-icon.png') }}">
<link rel="icon" type="image/png" href="{{ asset('assets/img/favicon.png') }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>{% block title %}Welcome!{% endblock %}</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
name='viewport'/>
{% block stylesheets %}
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200"/>
<link rel="stylesheet" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" crossorigin="anonymous">
<!-- CSS Files -->
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/now-ui-kit.css') }}"/>
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<!-- Core JS Files -->
<script src="{{ asset('assets/js/core/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/core/popper.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/core/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/now-ui-kit.js?v=1.3.0') }}" type="text/javascript"></script>
{% endblock %}
</body>
</html>Importiamo infine la home page dai nostri template all'interno di Symfony. Come prima cosa prendiamo tutto il contenuto del tag <body> - ad esclusione dei Javascript in fondo che abbiamo già incluso nel template di base - ed inseriamolo all'interno del blocco body del file app/templates/home/index.html.twig.
Ci sono diversi asset statici che necessitano lo stesso trattamento fatto per il template di base; andiamo quindi a wrappare il tutto con la funzione asset() di Twig.
Una volta effettuato il lavoro di replacement degli asset, provando a caricare la pagina ci accorgeremo che non è sicuramente uguale a quella statica. Questo perché manca un ultimo step importante. Nel template statico il body ha delle classi che non abbiamo riportato. Dato che il tag <body> è contenuto nel template di base e queste classi possono cambiare in base alla pagina che stiamo navigando, potrebbe essere utile definire un blocco in cui includerle.
Nel template base avremo quindi:
<body class="{% block body_classes %}{% endblock %}">mentre nel template della home page aggiungeremo il blocco:
{% block body_classes %}profile-page sidebar-collapse{% endblock %}A questo punto abbiamo inserito la nostra prima pagina statica in Twig. Consideriamolo chiaramente un punto di partenza e non di arrivo, la pagina cambierà in fretta e verrà suddivisa sicuramente in parti più piccole. Dato che il suo contenuto necessita di essere loggati possiamo temporaneamente metterla da parte ed iniziare a dedicarci al Login.
Il codice della lezione è disponibile con il tag static-assets all'interno del repository.