Ajout de contenu dynamique

Dans ce didacticiel, nous allons commencer à utiliser la syntaxe de modèle native de SilverStripe pour injecter un contenu dynamique sur notre site, tel que la navigation, les titres de page, le contenu CMS, etc.

Dépôt de code à télécharger

Ajout de la navigation principale

Pour créer notre menu principal, nous allons utiliser une méthode globale fournie par SilverStripe à tous vos modèles: la $Menufonction. $Menurenvoie une liste de toutes les pages d’une section donnée du site. Comme elle renvoie un ensemble plutôt qu’une valeur unique, nous devrons parcourir le résultat pour créer un menu de longueur variable. Dans la <ul>balise qui enveloppe la navigation principale, supprimez les <li>balises codées en dur et ajoutez la syntaxe suivante:

 

<% loop $Menu(1) %>
  <li><a class="$LinkingMode" href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
<% end_loop %>

 

Examinons ce que fait chaque élément de syntaxe:

<% loop $Menu (1)%>  Commence une boucle à travers tous les éléments de menu, en répétant tout le code HTML qui est dans la boucle pour chacun. En passant (1) en argument, nous demandons au CMS de nous donner toutes les pages du niveau 1 de la hiérarchie. Changer cela en (2) nous donnerait toutes les pages du deuxième niveau de la hiérarchie dans la section courante, et ainsi de suite.

$Link  Lien vers la page dans l’itération actuelle de la boucle.

$Title  Titre de la page dans l’itération actuelle de la boucle.

$MenuTitle  SilverStripe fait la distinction entre le titre d’une page (c’est-à-dire dans votre <h1>balise) et le titre devant apparaître dans le contexte de la navigation. Souvent, ce sont les mêmes, mais comme l’utilisateur a la possibilité de personnaliser le titre dans les menus, nous utilisons la variable $ MenuTitle ici.

$LinkingMode  Une méthode d’assistance qui indique l’état de notre menu. Pour chaque élément de la liste, cette méthode renvoie l’une des trois chaînes suivantes:

  • lien : la page n’est pas active
  • current : c’est la page en cours
  • section : la page en cours est un descendant de cette page (c.-à-d. sur l’URL /about-us/company, la page “société” est en cours et la page “à propos de nous” est “section”.

Actualiser la page. Vous devriez maintenant voir les trois pages par défaut que SilverStripe crée pour vous dans la navigation principale: Accueil, À propos de nous et Contactez-nous.

 

Ajout d’une URL de base

Essayons de naviguer vers l’une des pages en disant «À propos de nous». Avez-vous remarqué que les images sont brisées? Que se passe t-il ici?

En consultant l’inspecteur Web, vous constaterez que le navigateur recherche nos ressources par rapport à l’URL actuelle. Dans ce cas, c’est quelque chose comme about-us/images/logo.png. Nous devons nous assurer que tous les actifs se chargent par rapport à la racine de notre projet. Nous pourrions utiliser une barre oblique (“/”) pour cela, mais si vous travaillez dans un sous-répertoire de localhost (par exemple, http: // localhost / my-website / public ), cela ira trop loin dans l’arborescence.

Pour cette raison, il est fortement recommandé d’ajouter une <base />balise à l’en-tête de votre document dans tous les modèles. Heureusement, SilverStripe fournit une balise d’aide facile à utiliser qui vous donne exactement ce dont vous avez besoin. Ajoutez simplement la syntaxe <% base_tag %>en haut de votre <head>section.

Rechargez la page, et les choses devraient paraître un peu moins folles maintenant.

 

Variables de modèle plus courantes

Maintenant que nous avons un ensemble de modèles cohérent et navigable, nous pouvons commencer à ajouter d’autres variables de modèle communes à toutes les pages.

Nous pouvons commencer avec nos balises méta. Bien qu’il soit fort probable que vous souhaitiez avoir un niveau de contrôle granulaire sur ceux-ci, SilverStripe propose la méthode d’assistance $MetaTagsque nous vous recommandons d’utiliser. Il génère certaines balises standard, notamment le jeu de caractères, le générateur, ainsi que des métadonnées contextuelles extraites du CMS, telles que la description de la page. Par défaut, cette méthode inclut également la <title>balise, mais si vous préférez quelque chose de plus personnalisé, utilisez simplement $MetaTags(false)pour la supprimer. Gardez à l’esprit que vous êtes libre d’augmenter ces balises méta avec tout ce que vous aimez. Ils sont simplement utilisés pour vous aider à démarrer.

Supprimons la balise méta “charset” avec la <title>balise et remplaçons-la par $MetaTags. Nous laisserons la balise méta “viewport”, car nous en avons besoin pour notre conception réactive.

Ensuite, regardons la zone de contenu principale, où la plupart du contenu de notre page s’affichera. Nous pouvons mettre à jour notre <h1>balise pour utiliser la $Titlevariable. Cela attirera le titre de la page actuelle tel qu’il est défini dans le CMS.

En dessous de cela, nous avons quelques chapelures codées en dur dans le modèle. C’est probablement une zone de votre conception que vous souhaitez personnaliser, mais pour l’instant, nous allons utiliser la variable magique $Breadcrumbspour produire une chaîne de texte enrichi représentant le fil d’ariane. Dans des tutoriels ultérieurs, nous verrons comment personnaliser le résultat de cette méthode.

Remplacez le contenu de <div class="breadcrumb" />avec $Breadcrumbs.

La section la plus importante de notre page est la zone de contenu principale. Dans notre maquette, nous avons quelques paragraphes de texte que nous pouvons supprimer en faveur de l’extraction de contenu réel du système de gestion de contenu. Dans SilverStripe, la $Contentvariable fait référence au corps principal du contenu ajouté à l’éditeur de texte enrichi lors de la modification d’une page.

Remplacez le contenu de <div class="main col-sm-8" />par $Content.

En plus du contenu, nous avons une barre latérale qui contient la sous-navigation. Plus tôt dans ce tutoriel, nous avons créé une boucle pour la navigation principale à l’aide de $Menu(1). De même, nous pouvons créer une sous-navigation à l’aide de $Menu(2). Nous ne voulons pas inclure ce bloc de contenu à moins que la sous-navigation existe, nous allons donc envelopper le tout dans un <% if $Menu(2) %>bloc.

Remplacez le contenu de la barre latérale comme suit:

 

<% if $Menu(2) %>
  <h3>In this section</h3>
    <ul class="subnav">  
      <% loop $Menu(2) %>
        <li><a class="$LinkingMode" href="$Link">$MenuTitle</a></li>
      <% end_loop %>
    </ul>
<% end_if %>

 

Regardons rapidement la page de connexion au CMS en accédant à l’ /admin/URL. Notez que nous ne sommes pas présentés avec un formulaire de connexion. Afin d’obtenir le formulaire à afficher, nous devrons ajouter une $Formvariable, qui sert principalement d’espace réservé pour le formulaire de connexion. SilverStripe n’a pas de modèle personnalisé pour le formulaire de connexion par défaut. Au lieu de cela, il l’injecte dans votre type de page par défaut. Nous voulons nous assurer qu’il est placé dans un endroit qui a du sens.

Ajoutez une $Formvariable ci-dessous $Content.

Enfin, notre modèle utilise la convention d’un logo en hyperlien pour accéder à la page d’accueil. Dans le balisage statique, nous avons un lien codé en dur vers index.html. Nous voulons nous assurer que cela renvoie à l’URL de base de notre site Web. Utilisons la $AbsoluteBaseURLvariable dans le lien autour du logo.

TOUT VOIR Ajouter une remarque
VOUS
Ajoutez votre commentaire
 
© Academy EdTech. 2019 All rights reserved.
X