L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Mise en route avec les pages statiques du CMS octobre –
Cet article a été créé en partenariat avec October CMS . Merci de soutenir les partenaires qui rendent SitePoint possible.
De nos jours, les développeurs de sites Web peuvent avoir de la difficulté, en particulier avec WordPress qui effectue la plus grande mise à jour de son histoire . Au cours des derniers mois, nous avons observé un intérêt croissant pour la communauté du système de gestion d'octobre.
Octobre est le choix naturel pour les développeurs qui recherchent un système de gestion de contenu moderne et fiable basé sur le framework PHP de Laravel. Lancé en 2014, le CMS d'octobre est aujourd'hui une plate-forme mature dotée d'un vaste écosystème. October CMS est reconnu pour sa fiabilité et ses mises à jour sans faille, ce qui est grandement apprécié par les développeurs et leurs clients. La philosophie «Revenir à l'essentiel» compte vraiment pour les indépendants et les studios numériques, dont les activités dépendent de la qualité des logiciels qu'ils utilisent. Le marché à la croissance rapide et les entreprises de soutien construites autour d’octobre sont une preuve de la confiance de la communauté. En octobre 2018, CMS a également été élu meilleur CMS pour fichiers plats lors du concours CMS Critic Award .
Octobre CMS possède un noyau extensible simple. Le noyau fournit les fonctions de base du CMS et de nombreuses fonctionnalités peuvent être ajoutées avec les plugins du Marketplace. Le marché des plug-ins inclut de nombreuses catégories de produits, notamment les blogs, le commerce électronique, les formulaires de contact, etc.
Dans ce tutoriel, nous allons montrer comment créer un site Web avec des pages modifiables en WYSIWYG (Ce que vous voyez est Ce que vous obtenez) et les fonctionnalités de blogging. Nous allons utiliser le plugin Static Pages qui vous permet de créer une structure de site Web dynamique avec des pages et des menus gérables par des utilisateurs finaux non techniques. Parallèlement, le site Web comprendra des pages de blog dynamiques, dont le contenu sera géré avec le plug-in Blog . Tous les plugins utilisés dans ce tutoriel sont gratuits pour toute personne. Les idées de ce didacticiel peuvent être étendues à la création de sites Web plus complexes. Vous trouverez des thèmes mettant en oeuvre des fonctionnalités similaires sur le Themes Marketplace mais l'objectif de ce tutoriel est de montrer à quel point il est facile de créer un site Web pour octobre à partir de zéro.
C'est ce que nous aurons à la fin:
Le thème du site Web est entièrement basé sur Twitter Bootstrap 4.3. Le site Web de démonstration comprend également un simple fichier CSS qui gère certaines fonctionnalités de style claires, telles que le remplissage et les couleurs, mais comme il n'est pas pertinent pour le sujet de ce didacticiel, il ne sera pas décrit dans ce guide.
CMS
Pour installer October CMS, vous devez disposer d'un serveur Web répondant à la configuration minimale requise . Vous pouvez utiliser MAMP comme solution pour essayer Octobre sur votre ordinateur
Il existe plusieurs façons d'installer October CMS. Nous allons utiliser l’option Wizard Installer, qui est simple et conviviale. Le processus d'installation est expliqué dans la documentation . Créez une nouvelle base de données MySQL, téléchargez le programme d'installation décompressez-le dans un répertoire que vous aviez préparé pour octobre et ouvrez le script install.php dans un navigateur.
[19659003] Le processus d'installation est assez simple, affichant les invites standard pour entrer les détails de la base de données et configurer les informations d'identification de l'administrateur. À la dernière étape, cliquez sur Démarrer à partir de zéro. Cela créera une installation vide avec un thème de démonstration simple.
Une fois l'installation terminée, cliquez sur le lien Administration Area et connectez-vous au serveur principal CMS d'octobre à l'aide de vos informations d'identification. fourni lors de l'installation.
Installation de pages statiques et de plugins de blog
Dans cette étape, nous allons installer deux plugins nécessaires à notre petit projet. Dans la zone d'administration CMS d'octobre, accédez à la page Paramètres et cliquez sur le lien Mises à jour et plug-ins dans la barre latérale. Entrez «Pages statiques» dans la barre de recherche et une fois le chargement de la liste des plug-ins terminé, cliquez sur le plug-in Static Pages .
Ceci installera le plugin Static Pages. Répétez le processus pour installer le plugin Blog.
Si vous avez tout fait correctement, vous devriez voir deux plugins installés:
Création du nouveau thème
Nous souhaitons commencer par un thème vierge pour notre didacticiel. Pour créer un nouveau thème, ouvrez la page Paramètres dans la zone d'administration CMS d'octobre et cliquez sur l'élément de thème Front-end dans la barre latérale. Cliquer le lien Créer un nouveau thème vierge . Entrez le nouveau nom du thème, par exemple, «Mon thème de blog». Cliquez sur Créez .
Création de la mise en page
En octobre, CMS Layouts définit les pages en échafaudage; elles comprennent généralement les balises HTML, HEAD, TITLE et BODY. Presque chaque page du CMS a une mise en page assignée. Le code de mise en page fonctionnel le plus simple ressemble à ceci:
{% page%}
Notez la balise {% page%} – elle est remplacée par le contenu de la page lorsque la page est demandée et rendue par October CMS.
Pour notre tutoriel, la mise en page définira le balisage requis. pour une page Twitter Bootstrap. Nous allons essentiellement le copier à partir de l'exemple Bootstrap Starter Template et étendre les fonctionnalités du système de gestion d'octobre
. Pour créer une mise en page, ouvrez l'éditeur de CMS en cliquant sur CMS dans le menu principal. Notez que l'utilisation de l'éditeur de CMS intégré n'est pas obligatoire, car tous les objets de thème – Layouts, Pages et Partials – ne sont que des fichiers HTML dans le répertoire du thème (bien qu'il existe une option permettant d'utiliser une base de données à la place). Cela signifie que vous pouvez les éditer avec votre éditeur de code préféré. Toutefois, l'utilisation de l'éditeur de CMS est préférable pour les nouveaux utilisateurs.
Cliquez sur l'élément Layouts dans la barre latérale, puis cliquez sur le bouton Ajouter . Dans l'éditeur de mise en page, entrez par défaut dans le champ Nom de fichier et cliquez sur Enregistrer (vous pouvez également cliquer sur Ctrl + S sous Windows ou Cmd + S sur Mac). Collez le texte suivant dans l'éditeur de code de marquage et assurez-vous de sauvegarder la mise en page à nouveau.
Thème de mon blog
{% page%}
Comme mentionné ci-dessus, le balisage a été copié du modèle de démarrage Bootstrap avec quelques ajouts:
- Nous avons ajouté une référence au fichier d'actif
theme.css. Cette feuille de style n'est pas pertinente pour le tutoriel. Il définit un style visuel pour le menu des catégories de blog et gère certains styles de texte. - Le conteneur principal comporte deux colonnes. La colonne de gauche contient la balise
{% page%}et sera remplacée par le contenu réel de la page par le CMS d'octobre lorsqu'une page réelle est demandée. La colonne de droite contient le menu des catégories de blog. - Les éléments du menu supérieur ont été supprimés. Nous les remplacerons par le contenu généré automatiquement plus tard dans ce didacticiel.
Pour rendre la mise en page disponible pour les pages statiques, nous devons ajouter le composant Page statique à la mise en page. Cliquez sur l'élément Components dans la barre latérale, puis cliquez sur le composant Static Page . Il se trouve dans la section Pages . Cela va ajouter le composant à votre mise en page. Ce composant ne nécessite aucune configuration, mais vous pouvez cliquer dessus pour afficher les propriétés disponibles dans l'inspecteur . Vous pouvez également cocher la case Mise en page par défaut pour définir cette mise en page par défaut pour toutes les nouvelles pages.
N'oubliez pas de sauvegarder la mise en page avant de quitter la page!
pages statiques
Notre site imaginaire aura la structure de page suivante:
- Accueil (/)
- Projets (/ projets)
- Sites Web (/ projets / sites Web)
- Applications (/ projets / applications)
- À propos de (/ à propos de)
- Blog (/ blog)
- Contactez-nous (/ contactez-nous)
Toutes les pages, à l'exception du blog, sont des pages statiques. Les pages statiques peuvent être créées par les utilisateurs finaux sans aucune connaissance en développement Web, en mode WYSIWYG. Créons maintenant les pages statiques.
Cliquez sur l’article Pages dans le menu principal du CMS pour octobre pour ouvrir l’éditeur de pages statiques.
Cliquez sur le bouton Ajouter . ] pour créer une nouvelle page statique. Entrez Page d'accueil dans le champ titre et “/” (barre oblique) dans le champ URL . Mettez n'importe quel texte dans le champ Contenu et sauvegardez la page
Répétez le même processus pour créer la page Projets, À propos et Contactez-nous. La page Blog n'est pas une page statique, ignorez-la pour l'instant. Vous pouvez utiliser n’importe quelle URL pour les pages que vous créez. Le plug-in Static Pages essaiera de générer des URL en fonction des titres de page que vous fournissez.
Comme vous l'avez peut-être remarqué, les sites Web et les applications sont des sous-pages de la page Projets. Pour créer une sous-page, survolez la page Projets dans la liste des pages, puis cliquez sur le lien Ajouter une sous-page :
L'URL générée automatiquement pour les sous-pages reflétera leur emplacement, par exemple: / projets / sites Web .
Vous pouvez maintenant tester votre site Web en cliquant sur l'icône Aperçu dans le menu supérieur de la zone d'administration. L'icône est située dans le coin droit, à gauche de l'image de l'avatar de l'utilisateur. Si vous avez tout fait correctement, le site Web affiche la page d'accueil et vous pouvez essayer d'ouvrir d'autres pages en saisissant leurs URL dans la barre d'adresse du navigateur. Cependant, nous allons résoudre ce problème dans les sections suivantes:
Maintenant que nous avons créé les pages statiques, nous pouvons créer les menus du site Web principal. Le plug-in Static Pages peut créer automatiquement la structure de menus en fonction de la structure de vos pages statiques, de vos catégories de blogs et bien plus encore. Vous pouvez ajouter des éléments de menu manuellement ou configurer le menu pour qu'il génère automatiquement ses éléments.
Notre site Web dispose de deux menus en haut, à gauche et à droite. Commençons par créer le menu de gauche. Dans l'écran Pages cliquez sur l'élément Menus dans la barre latérale, puis cliquez sur le bouton Ajouter pour créer votre premier menu. Entrez “Top menu – left” dans le champ Nom. Cliquez sur Ajoutez l'élément dans la zone Éléments de menu .
Entrez une valeur dans le champ Titre – le titre de cet élément de menu ne sera de toute façon pas visible. Sélectionnez Toutes les pages statiques dans le menu déroulant Type . Activez la case à cocher . Remplacez cet élément par son contenu généré . Enregistrez l'élément de menu et le menu lui-même.
Nous pouvons maintenant ajouter le menu à notre mise en page pour le rendre visible sur toutes les pages du site Web. Retournez dans la zone CMS cliquez sur Layouts puis sur default.htm layout dans la liste des dispositions pour ouvrir la présentation dans l'éditeur. Maintenant, cliquez sur l'élément Components dans la barre latérale, puis cliquez sur le composant Static Menu . Cliquez sur le nouveau composant dans la zone Composants de présentation pour ouvrir Inspecteur et assurez-vous que la propriété Menu affiche [Début du menu – gauche]. Entrez topMenuLeft dans la propriété Alias . Enregistrez la mise en page.
Nous allons maintenant avoir un peu de code. Bootstrap 4 attend un balisage spécifique pour les barres de navigation :
Pour les menus déroulants, il est un peu plus compliqué.
Le plugin Pages statiques peut générer un balisage. pour les menus automatiquement, mais le balisage par défaut n'est pas spécifique à Bootstrap – il n'est tout simplement pas possible d'avoir un format de balisage universel qui conviendrait à tous les environnements. Nous allons créer notre propre partiel partiel pour le rendu des éléments de menu, qui sera entièrement compatible avec Bootstrap 4. Comme vous le savez peut-être, October CMS utilise le moteur de template Twig .
Dans la zone CMS cliquez sur Partials dans la barre latérale, puis cliquez sur Ajouter pour créer un nouveau partiel. Entrez les éléments de menu dans le champ Nom de fichier et collez l'extrait suivant dans le champ Markup . Assurez-vous de sauvegarder le partiel à la fin.
Les variables des éléments et de la classe devraient être transmises de l'extérieur du partiel, ce que nous expliquerons ci-dessous. La variable items est une liste (tableau) d'éléments de menu à restituer et la variable class spécifie la classe CSS que nous voulons ajouter à l'élément navbar. Nous utiliserons le même partiel pour afficher 3 menus: le côté gauche du menu principal, le côté droit du menu principal et la liste des catégories de blogs.
La variable de la classe est nécessaire pour ajouter le paramètre mr-auto nom de la classe dans le menu en haut à gauche. Cette classe fait partie du système de présentation Bootstrap . Fondamentalement, cela poussera le menu en haut à gauche sur le côté gauche et le menu en haut à droite – vers la droite.
Le tableau items contient une liste d’items de menu. Vous pouvez trouver la documentation complète de l’API des menus de pages statiques sur la page de documentation du plug-in .
Nous pouvons enfin afficher nos menus sur la page. Ouvrez l'éditeur CMS cliquez sur Layouts dans la barre latérale et cliquez sur notre mise en page par défaut. Remplacez l’espace réservé par la ligne suivante et sauvegardez le modèle .
{% partial 'éléments de menu' = topMenuLeft.menuItems class = 'mr-auto'%}
La balise partielle est une fonctionnalité standard du moteur de modèle de CMS d'octobre. Il faut le nom partiel et des variables facultatives pour passer au partiel. Le code ci-dessus rend le partiel que nous venons de créer. La variable items charge les éléments de menu du composant Menu statique avec l'alias topMenuLeft créé précédemment. La variable class est simplement une chaîne statique avec une valeur requise par Bootstrap.
Ouvrez à nouveau l'aperçu du site Web pour afficher le menu affiché:
Il existe actuellement deux problèmes. avec le menu – l'élément Contactez-nous est affiché à gauche, bien que, selon notre plan, il doit être à droite. L'autre problème est qu'il n'y a aucun élément de blog dans le menu. Nous allons résoudre les deux problèmes dans une minute.
Commençons par l’élément de menu Contactez-nous. Accédez à la section Pages cliquez sur l'élément Pages dans l'encadré et cliquez sur la page Contactez-nous . Cliquez sur la petite icône en forme de triangle située à droite de l'éditeur pour accéder au formulaire Paramètres :
Activez l'option Masquer la navigation dans l'option Les paramètres forment et sauvegardent la page statique. Ceci masquera la page statique Contactez-nous du menu généré automatiquement.
Créons maintenant le menu supérieur droit. Cliquez sur Menus dans la barre latérale, puis cliquez sur Ajouter pour créer un nouveau menu. Entrez Menu supérieur – à droite dans le champ Nom . Cliquez sur Ajoutez l'élément et entrez Contactez-nous dans le champ Titre . Sélectionnez Page statique dans le menu déroulant Type et sélectionnez la page Contactez-nous dans le menu déroulant Référence . Cliquez sur Cliquez sur pour enregistrer l'élément de menu et sur le menu lui-même.
Retournez dans la zone CMS et ouvrez notre présentation par défaut dans le éditeur. Ajoutez un autre composant Static Menu à la présentation. Cliquez sur le nouveau composant pour afficher Inspecteur, entrez dans le champ Alias et sélectionnez dans le menu supérieur – à droite dans le menu déroulant.
Fermez l'inspecteur et collez la ligne suivante dans la section Markup sous la ligne que vous avez ajoutée pour afficher le menu en haut à gauche:
{% partial 'éléments de menu' items = topMenuRight .menuItems%}
Comme vous pouvez le constater, nous utilisons le même partiel que précédemment, mais cette fois, nous chargeons les éléments de menu à partir du menu supérieur droit et nous ne transmettons aucune classe CSS. Enregistrez la mise en page et prévisualisez à nouveau le site Web:
Félicitations, nous y sommes presque! Le dernier élément de menu manquant est le blog. Expliquer comment ajouter des fonctionnalités de blog à un site Web n’entre pas dans le cadre de ce didacticiel. Pour en savoir plus sur la création de pages de blog, consultez la page de documentation du plug-in de blog . En supposant que vous ayez déjà créé la page d'article de blog, nous pouvons ajouter un élément de menu au menu en haut à gauche.
Ouvrez la section Pages et accédez à la zone Menus . Cliquez sur le menu dans le menu supérieur – à gauche puis sur Ajouter un élément . Entrez Blog dans le champ Titre et sélectionnez page CMS dans le menu déroulant Type . Sélectionnez votre page de blog dans le menu déroulant Référence .
Ne fermez pas encore le menu contextuel de l'éditeur d'élément de menu. Nous allons montrer une astuce qui nous aidera à rendre l’élément de menu Blog actif par programme sur la page Catégorie de Blog. Cliquez sur l'onglet Attributs dans l'éditeur d'élément de menu, puis cliquez sur entrer blog dans le champ Code . Enregistrez l'élément de menu, puis enregistrez le menu.
Vous pouvez maintenant actualiser l'aperçu du site Web et afficher notre nouvel élément de blog au menu:
. est le menu de la catégorie blog. Nous supposons que vous avez créé la page CMS des catégories de blogs en suivant la documentation du plugin Blog. Une chose importante pour rendre la page de catégories de blog compatible avec le plug-in Static Pages est que le composant Post List de la page de catégories doit avoir la propriété Category Filter pour être configurée de manière à lire sa valeur. dans le paramètre URL:
Après avoir configuré la page de catégorie CMS du blog, cliquez à nouveau sur l'élément Pages dans le menu principal du système de gestion d'octobre pour créer un nouveau Menu . . Entrez Catégories de blog dans le champ Nom et cliquez sur Ajouter un élément . Dans l'éditeur d'éléments de menu, saisissez Catégories dans le champ Titre . Cette valeur n'a pas vraiment d'importance car cet élément de menu va être remplacé par des éléments de menu basés sur les catégories de blog. Sélectionnez Toutes les catégories de blogs dans le menu déroulant Type . Sélectionnez la page CMS de vos catégories de blog dans le menu déroulant Page CMS . Cliquez sur la case Remplacez cet élément par ses enfants générés enregistrez l'élément de menu et enregistrez le menu.
Nous avons déjà ajouté deux menus à la présentation, le processus d'ajout de la le troisième menu est le même. Cliquez sur l'élément CMS dans le menu principal d'octobre, ouvrez la présentation par défaut et ajoutez le composant Static Menu à la présentation. Cliquez sur le nouveau composant et entrez blogCategories dans le champ Alias . Sélectionnez le nouveau menu Catégories de blog dans la liste déroulante Menu . Enregistrez la mise en page.
Remplacez maintenant le commentaire par la balise partial :
{% partial 'éléments de menu' éléments = blogCategories.menuItems class = 'flex-column'%}
Enregistrez à nouveau la mise en page et prévisualisez le site Web. Si vous ne voyez aucun élément dans le menu des catégories de blog, assurez-vous d’avoir créé des catégories de blog! Le site Web a maintenant exactement la apparence que nous souhaitons.
Toutefois, si vous cliquez sur une catégorie de blogs, vous remarquerez que l'élément du menu principal Blog n'est pas actif. Pour résoudre ce problème, nous allons utiliser l'API Static Pages pour rendre l'élément de menu actif par programme. Ouvrez la page Catégories de blog dans l'éditeur de CMS et collez ce petit extrait dans l'éditeur de Code :
onInit ().
{
$ this ['activeMenuItem'] = 'blog';
}
La valeur blog est le code de l'élément de menu, que vous avez spécifié pour l'élément Blog. Et le activeMenuItem est une variable utilisée par le plug-in Static Pages pour déterminer l'élément de menu actuellement actif. Pour en savoir plus sur l’API du plug-in, consultez la page de documentation . Enregistrez la page et actualisez l'aperçu du site Web – l'élément Blog est maintenant actif.
Nous espérons que ce tutoriel vous a plu! Cet article a pris quelques heures à écrire, mais le processus de création du site Web de démonstration a pris aussi peu que 15 minutes. Vous pouvez maintenant créer des sites Web avec des pages mixtes statiques et dynamiques. Vous pouvez trouver plus de plugins utiles sur le Marketplace et apprendre plus de trucs sur le blog d'octobre du CMS!
Voir aussi:
Source link