Le titulaire / modèle de page

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

Dans ce tutoriel, nous allons nous concentrer sur la section Guides de voyage de notre site Web pour ce sujet. Comme nous pouvons le constater dans les conceptions, deux modèles sont requis pour cette section: une vue liste ou une page “hub” et une page de détail. C’est l’un des modèles de contenu Web les plus courants, utilisé sur le Web; pensez aux listes de nouvelles, aux galeries d’images, même à une timeline sur Twitter. Pour ce faire dans SilverStripe, nous utiliserons une convention très commune.

L’idée est simple. Un type de page gère la vue liste et contient généralement très peu de contenu natif. La fonction principale de cette page est de fournir une liste de ses pages enfants, en fournissant un bref résumé pour chacune d’elles, ainsi qu’un lien vers sa vue détaillée. Un deuxième type de page représentera la vue détaillée de toute page enfant donnée, qui comportera généralement un modèle personnalisé et des champs de contenu constituant son identité.

Création des types de page

Par convention, sans application, la vue de liste et la vue de détail portent les suffixes Titulaireet Page , respectivement, et le nom de notre type de contenu prend le préfixe. Dans ce cas, notre section Guides de voyage présente un type de contenu que nous appellerons “Article”. Nos types de page seront donc nommés ArticleHolder et ArticlePage.

Dans le dernier épisode, nous avons créé notre premier type de page personnalisé, HomePage. Répétons ce processus et créons un type de page appelé ArticleHolder. Pour récapituler, nous avons besoin d’un fichier PHP appelé ArticleHolder.phpdans notre app/srcrépertoire qui contient une paire de classes vides, comme ceci:

app / src / ArticleHolder.php

namespace SilverStripe\Lessons;

use Page;

class ArticleHolder extends Page
{

}

app /src/ArticleHolderController.php

namespace SilverStripe\Lessons;

use PageController;

class ArticleHolderController extends PageController
{

}

De même, nous ferons la même chose pour ArticlePage.

app /src /ArticlePage.php

namespace SilverStripe\Lessons;

use Page;

class ArticlePage extends Page
{

}

app /src/ArticlePageController.php

namespace SilverStripe\Lessons;

use PageController;

class ArticlePageController extends PageController
{

}

Nous aurons également besoin de modèles pour ces pages. Dans votre répertoire de thèmes, copiez le contenu de static/article-holder.htmlto templates/SilverStripe/Lessons/Layout/ArticleHolder.sset static/article-page.htmlto templates/SilverStripe/Lessons/Layout/ArticlePage.ss.

Notez que notre concepteur nous a facilité les choses en n’incluant que ce qui appartient à notre $Layoutmodèle. Nous devons cependant ajouter nos variables communes. Avant d’ aller plus loin, nous allons ajouter $Title, $Contentet $Breadcrumbsà leurs endroits appropriés.

De plus, pendant que nous y sommes, rangerons un peu les choses et déplaçons les chapelures et la section de titre (Marqué <div class="parallax colored-bg pattern-bg">) vers son propre modèle d’inclusion, que nous appellerons Banner.ss. N’oubliez pas de mettre à jour votre templates/Layout/Page.ssfichier également.

Puisque nous avons créé deux nouveaux types de page et deux nouveaux modèles, nous devons créer la base de données et vider le cache des modèles avant de poursuivre. Nous pouvons le faire tout à la fois en visitant /dev/build?flushle navigateur. Assurez-vous que le texte bleu qui a SiteTree.ClassNameété mis à jour est visible et que les nouveaux types de page sont affichés en vert.

Entrons dans le CMS et ajoutons ces nouveaux types de page à l’arborescence du site. C’est probablement le bon moment pour construire la navigation principale de notre site. Supprimer toutes les pages sauf “Accueil” et “À propos de nous”. Ensuite, créez la structure avec les titres et types de page suivants:

• Accueil (HomePage)
• Trouver une location (page)
• Lister votre location (page)
• Régions (page)
• Guides de voyage (ArticleHolder)
• À propos de nous (page)

Notez que pour obtenir la page “Qui sommes-nous” au bas de la page, vous devrez utiliser le glisser-déposer.

Maintenant que notre nouvelle ArticleHolderpage est en place, créez des pages enfants en dessous. Ceux-ci devraient utiliser le type de page ArticlePage. N’hésitez pas à les titrer comme bon vous semble.

Retournons sur notre site et visitons la section Guides de voyage. Cela a l’air bien, mais évidemment, nous ne voulons pas de contenu statique ici. Nous voulons que ces articles reflètent toutes les pages enfants de cette section.

Pour ce faire, nous allons utiliser une méthode de modèle qui est proposée à toutes les pages de SiteTree, appelée $Children. Cette méthode retourne une liste de toutes les pages dont le parent est la page en cours. Comme il retourne une liste, nous avons besoin d’un <% loop %>contrôle.

    <% loop $Children %>
    <div class="item col-md-6">
      <div class="image">
        <a href="blog-detail.html"> 
          <span class="btn btn-default">Read More</span>
        </a>
        <img src="http://placehold.it/766x515" alt="" />
      </div> <div class="tag"><i class="fa fa-file-text"></i></div>
     <div class="info-blog">
       <ul class="top-info">
         <li><i class="fa fa-calendar"></i> July 30, 2014</li>
         <li><i class="fa fa-comments-o"></i> 2</li>
         <li><i class="fa fa-tags"></i> Properties, Prices, best deals</li>
       </ul>
      <h3><a href="blog-detail.html">How to get your dream property for the best price?>/a></h3>
      <p>Sed rutrum urna id tellus euismod gravida. Praesent placerat, mauris ac pellentesque fringilla,
 tortor libero condimen.
 Aliquam fermem tum nulla felis, sed molestie libero porttitor in.</p>
     </div>
    </div>
    <% end_loop %>

Lorsque nous entrons dans une boucle, la portée de toutes nos variables est définie sur l’itération actuelle de la boucle. Autrement dit, l’accès à la $Titlepropriété dans la boucle ne renverra pas la propriété de la page actuelle, Guides de voyage, mais plutôt les titres de chaque page enfant.

Parcourons la boucle et remplaçons tout contenu statique par des variables dont on sait qu’elles existent dans les pages enfants.

• Remplacer le titre par $Title
• Remplacez le lien vers blog-detail.html par $Link

Tout le reste peut rester statique pour le moment.

Notez que toutes les pages pour lesquelles l’option Afficher dans les menus est désactivée sont masquées. Pour afficher tous les enfants, quel que soit leur état Afficher dans les menus, nous pouvons utiliser $AllChildren.

Il reste beaucoup de points non résolus sur cette page, qui resteront statiques, en particulier dans l’encadré latéral, mais nous les distinguerons au cours de plusieurs tutoriels.

Actualisez la page et voyez que nous générons du contenu dynamique. Essayez de cliquer sur un lien et voyez que cela vous amène à une page de détail pour l’article. La page de détail est toujours codée en dur. Remplissons le $Title, et les $Contentvariables auxquelles ils appartiennent.

Appliquer des contraintes hiérarchiques

N’oublions pas que ce que nous construisons est finalement une expérience pour un éditeur de contenu. Il est facile d’oublier cela en tant que développeur lorsque vous vous concentrez uniquement sur le fonctionnement optimal des fonctionnalités front-end. L’une des caractéristiques d’un excellent développeur de CMS est l’attention portée à l’expérience utilisateur dans le CMS.

Prenons un moment pour assumer le rôle d’auteur de contenu et imaginons que nous souhaitons créer un nouvel article. En passant à travers ce processus, nous remarquons deux risques d’utilisation évidents:

• L’utilisateur peut ajouter une page d’ article n’importe où dans l’arborescence du site.
• Lors de l’ajout d’une page enfant aux guides de voyage, l’utilisateur doit savoir utiliser le type de page ArticlePage .

SilverStripe offre une API pour les contraintes hiérarchiques qui appliqueront le modèle requis. Commençons par nous assurer que seul ArticlePage peut être créé sous les guides de voyage. Ajoutez les éléments suivants à votre classe ArticleHolder :

    private static $allowed_children = [
      ArticlePage::class
    ];

$allowed_childrenest juste ce que cela ressemble. Il s’agit d’une liste des types de page autorisés à être créés sous ce type de page. Notez qu’une valeur scalaire est également acceptée ici si vous n’avez qu’un seul type de page.

Il faut tenir compte de la bizarrerie lors de la modification de variables de classe statiques privées. Dans SilverStripe, les statistiques privées sont fonctionnellement identiques aux mises à jour des fichiers YAML de configuration, ce qui signifie que nous aurions pu appliquer tout aussi facilement notre $allowed_childrenparamètre dans notre fichier de configuration, comme suit:

SilverStripe\Lessons\ArticleHolder:
  allowed_children:
    - SilverStripe\Lessons\ArticlePage

Quelle que soit la façon dont vous choisissez est une question de préférence. Historiquement, ces types de paramètres communs sur les pages ont été définis en tant que variables statiques, car l’API de configuration n’a pas été introduite jusqu’à la version 3.0. Par conséquent, pour des raisons de cohérence, il est logique d’utiliser une variable statique dans ce cas, mais là encore, c’est fonctionnellement. identique.

En raison de ce chevauchement, comme dans l’API de configuration, les modifications de variables statiques privées ne s’appliquent pas tant que nous n’avons pas vidé le cache. S’il semble étrange que vous deviez vider le cache après une simple modification de la définition de votre classe, c’est bon signe. Vous êtes normal C’est une idiosyncrasie du framework SilverStripe, et sans entrer dans les détails de ce tutoriel, il suffit de dire que c’est juste une de ces choses dont vous devez être conscient.

Videz le cache, en ajoutant? Flush à l’URL, et revenons dans le CMS. Essayez d’ajouter un type de page incorrect sous Guides de voyage. Notez que la liste déroulante force le type de page ArticlePage sur nous.

Mais qu’en est-il des pages au niveau racine? Comme il n’y a pas de type de page pour la racine, nous ne pouvons pas spécifier $ allowed_children. Pour cela, nous pouvons utiliser la variable boolean $can_be_rootde notre classe ArticlePage et vider le cache.

    private static $can_be_root = false;

Maintenant, si nous essayons de créer une ArticlePage au niveau racine de l’arborescence du site, l’action est interdite.

Maintenant, si nous passons par le processus de création d’une nouvelle page d’article , celle-ci sera beaucoup plus souple et rationalisée.