Comment inclure des fichiers Css et Javascript dans Twig
Bonjour,
Je rencontre un petit problème avec mon code.
Ce que je fais
j'ai commencé la formation MISE EN PRATIQUE DE LA POO EN PHP et j'ai un soucis avec Twig
<!-- Mon layout.php.twig -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MVF | Millenium Vouhis Foundation</title>
<meta content="" name="description">
<meta
content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link
href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Mes Fichiers Css -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link
href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Mes Fichiers Js -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>Ce que je veux
je souhaite que Twig rend mon template avec le styles et les animations de mes propres fichiers Css et Js.
Ce que j'obtiens
J'obtiens bien le template mais sans le style et les animations.
Nb: dans la balise Link l'attribut href pointant vers une librairie de cdnjs.com tel que Bootstrap est prise en compte.
<!-- CDN Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />l'arborescence de mon projet
https://i.stack.imgur.com/pVvOh.jpg
Aidez-Svp
12 réponses
Hello,
DIs moi ton fichier "layout.php.twig" est-il à la racine de ton projet ? Où dans un dossier ?
cela à une importance au niveau du chemin.
Là en gros du indique de ton dossier asset est un sous dossier de ton chier "layout.php.twig"
Mets nous une capure de l'arboréscence de ton projet stp.
J'ai remarqué ça aussi lorsque j'apprenais, il faut mettre l'URL du CSS et JS en URL absolue.
il faut mettre les url dans des assets
exemple
<!-- bootstrap v4 css -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">merci pour vos reponses je vais essayer et vous faire un retour. je vous envoie l'url de l'arborescence de mon projet.
https://i.stack.imgur.com/pVvOh.jpg
Arbi j'ai essayé de mettre les url dans des assets mais ça affiche une erreur:
Fatal error: Uncaught Twig\Error\SyntaxError: Unknown "asset" function. in C:\Users\Andy loic Aaron\MVF\views\layout.php.twig:23 Stack trace: #0
oui j'ai essayé ça marche pas. voici ce que je reçois dans ma console Chrome
Failed to load resource: the server responded with a status of 404 (Not Found)
Hello,
Dans ton cas j'aurai probablement créé un fichier avec des constantes pour mes chemins.
1- A la racine création d'un fichier "boostrap.php" avec dedans:
<!-- boostrap.php -->
// racine du site
define('ROOT', __DIR__);
//definie le chemin vers les vues par rapport à ROOT donc à la racine
define('VIEWS', ROOT . '/views');
//definie le chemin vers les assets par rapport à VIEWS qui lui défini son chemin par ROOT
define('CSS', VIEWS . '/Assets/css/');
define('JS', VIEWS . '/Assets/js/');
define('IMG', VIEWS . '/Assets/img/');
define('VENDORS', VIEWS . '/Assets/img/');2- Dans ton fihcier "Index.php"
<!-- index.php -->
<?php
require_once("../boostrap.php"); // charge le fichier boostrap avec les constantes
require ("../vendor/autoload.php");
...3- Dans ton fichier "layout.php.twig"
<!-- layout.php.twig -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MVF | Millenium Vouhis Foundation</title>
<meta content="" name="description">
<meta
content="" name="keywords">
<!-- Favicons -->
<link href="<?= VENDORS . "/jquery/jquery.min.js" ?>" rel="icon">
<link href="<?= IMG . "img/apple-touch-icon.png" ?>" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Mes Fichiers Css -->
<link href="<?= CSS . "/bootstrap/css/bootstrap.min.css" ?>" rel="stylesheet">
<link href="<?= CSS . "/icofont/icofont.min.css" ?>" rel="stylesheet">
...Alors je te prévines c'est de tête mais je devrais pas être trop loin "normalement"
Salut @bidule et merci pour ton message,
j'ai essayé ta logique, j'ai fait passer les constantes PHP definies dans le bootstrap.php à Twig( comme c'est mon moteur de templates) via la methode addGlobal(). Tout devrait normalement fonctionner mais il y a cette même erreur comme quoi:
Not allowed to load local resource: file:///C:/Users/Andy%20loic%20Aaron/MVF/views/assets/vendor/bootstrap/css/bootstrap.min.css
salut,
la c'est que ta constate root remonte trop loin.
essai avec:
<!-- boostrap.php -->
// racine du site
define('ROOT', dirname(__FILE__));