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
stylesheets
<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
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() - 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>
body
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.