tutoCMS.fr
- 18 août 2016
- Steeve
Pour ce tutoriel vous avez besoin d'avoir les bases du langage HTML.
Le but de ce tutoriel est de vous montrer comment intégrer Bootstrap a MODX afin de pouvoir faire d'autres tutoriels par la suite.
Vous devez télécharger Bootstrap. Pour ma part je vais télécharger la version compilée et réduite afin de ne pas diminuer la vitesse de chargement de mes pages web. Mais vous pouvez prendre la version que vous voulez si vous savez de quoi je parle. Cliquez donc sur « Download Bootstrap ».
Vous devriez vous retrouver avec un fichier zip portant un nom similaire à celui-ci « bootstrap-3.3.7-dist.zip ». 3.3.7 étant la version que je viens de télécharger mais elle peut différer si vous suivez ce tutoriel un an après son écriture par exemple.
Maintenant vous devez décompresser le fichier zip. Une fois que c'est fait, vous devez trouver (si vous avez pris la version compilée et réduite de Bootstrap) 3 dossiers nommé respectivement : css, fonts et js. Le dossier css contient les fichiers CSS, le dossier fonts les polices d'écriture et le dossier js les fichiers JavaScript de Bootstrap.
Il faut à présent les transférer sur le serveur distant. La aussi si vous avez suivi mes tutoriel précédent sur comment transférer MODX sur un serveur distant, vous savez comment faire avec FileZilla. Je vais transférer tous ces fichiers dans le dossier « assets » dans lequel je vais créer un dossier « theme » à l'intérieur duquel je vais créer un dossier Bootstrap. Je créer ces dossiers pour organiser mon travail et mieux m'y retrouver en cas de problème. Vous pouvez vous les nommer autrement mais il faudra vous souvenir ou vous avez mis ses fichiers pour la suite du tutoriel.
Dans mon exemple je me retrouve donc avec trois dossiers contenant des fichiers :
tuto/assets/theme/css/
tuto/assets/theme/fonts/
tuto/assets/theme/js/
Maintenant nous allons les lier le fichier CSS à notre modèle de base. Pour rappel voici le modèle de base et le chunk « head » la ou nous l'avons laissé la dernière fois dans le tutoriel « Votre première page avec MODX ».
<html>
[[$head]]
<body>
[[*longtitle]]
[[*sousTitre]]
[[*content]]
[[premierSnippet]]
</body>
</html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="[[*description]]" />
<base href="[[++site_url]]" />
</head>
Modifié le code HTML du chunk « head » comme ci-dessous.
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="[[*description]]" /> <title>[[++site_name]] - [[*pagetitle]]</title> <base href="[[++site_url]]" /> <link href="assets/theme/css/bootstrap.min.css" rel="stylesheet"> </head>
A présent nous allons ajout un chunk « js_footer » pour y mettre les fichiers JavaScript de Bootstrap et de la librairie JQuery. Modifier le modèle de base comme ci-dessous pour ajouter appeler le chunk « js_footer » que nous allons créer par la suite.
<html> [[$head]] <body>[[*longtitle]]
[[*sousTitre]]
[[*content]][[premierSnippet]]
[[$js_footer]] </body> </html>
Puis créez un chunk « js_footer » avec le code ci-dessous
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="assets/theme/js/bootstrap.min.js"></script>
Vous n'avez plus qu'à vérifier si vos fichiers sont bien appelés dans votre page et le tour est joué.
Quoi vous ne savez pas comment vérifier ? Vous deviez avoir des bases de HTML normalement.
Allez je suis sympa je vous donne une des techniques.
Dans le manager de MODX cliquez sur « prévisualisation ». Une fois votre page d'accueil ouverte, faite un clique droit et cliquez sur « afficher le code source de la page ». Maintenant il vous suffit de chercher les liens que nous venons de rajouter et de les ouvrir dans un nouvel onglet. Vous devriez vois ouvrir le fichiers CSS de Bootstrap ainsi que les fichiers JavaScript de JQuery et de Bootstrap. Si il y a une erreur vous allez voir une page du type « 404 page not found ».
Voilà maintenant nous allons pouvoir aller plus loin avec de nouveaux tutoriels avec MODX.
Modification du 28 Aout 2016 : Créer un slider dynamique avec Bootstrap carousel et MIGX
Partagez cet article
A propos de l'auteur
Passionné d’informatique, de Design, de développement d'application et du Web en général (participation au start-up weekend, hackathon, dev Var, formation Google...), j’ai créé ce site afin de partager mes connaissances sur mon système de gestion de contenu préféré MODX. En espérant participer au développement de la communauté.