Changer le système de grille CSS dans l'éditeur de nouvelle page

Avec le moteur de rendu .NET Core, les clients peuvent profiter pleinement du nouvel éditeur de page de Sitefinity et de sa riche fonctionnalité.

Il a beaucoup d'améliorations, dont un seul widget, dédié à la création mises en page, appelées Section.

Les sections sont des espaces réservés pour les widgets de contenu. Ils peuvent être imbriqués ou configurés pour avoir plusieurs colonnes. Par défaut, le widget de section utilise l'un des systèmes de grille CSS les plus courants: le système de grille Bootstrap 4. Cependant, si vous avez un framework CSS préféré ou un système de grille CSS, vous pouvez facilement passer à l'un d'entre eux.

Dans ce tutoriel, nous allons faire exactement cela. Nous allons apprendre comment remplacer le système de grille Bootstrap par le système de grille Tailwind.

Création de la mise en page

L'exemple de ce billet de blog peut être trouvé comme exemple de projet dans Exemples de Sitefinity .NET Core ]. Le nom du projet est «change-grid-system». Si vous êtes nouveau sur le sujet, voici un excellent article sur Sitefinity Page Editor et les meilleures façons de l'utiliser .

Commençons.

1. Créer une nouvelle mise en page (fichier cshtml) dans change-grid-system / views (le nom du fichier de mise en page doit contenir "Layout" ou "Template" pour que Sitefinity le reconnaisse). Appelons notre mise en page _Layout.cshtml. Cela créera un nouveau modèle de page dans l'interface utilisateur de Sitefinity et le mappera au fichier de mise en page physique.
2. Faites référence au CSS de votre framework CSS préféré dans la balise head de _Layout.cshtml. Dans cet exemple, nous utilisons Tailwind CSS .

    < link   rel  =  " stylesheet "    href  =  " https : //cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/utilities.min.css  "  /> 

   Au cas où vous auriez besoin de remplacer les styles par défaut du widget de section, vous pouvez ajouter le lien suivant, qui remplacera les styles de widget de section par défaut.

    < link rel  =  "stylesheet"  href  =  "@ Progress. Sitefinity.AspNetCore.Constants.PrefixRendererUrl (" styles  /  section .  css ") " type  = " texte / css "> 

   Gardez à l'esprit que le dossier" styles "se trouve à la racine de votre projet. Vous pouvez utiliser la même approche pour charger des fichiers CSS supplémentaires si nécessaire. Nous ne le ferons pas dans le didacticiel.

Personnalisez la vue du widget de section

1. Dans Views / Shared / Components, ajoutez un dossier Section et dedans Default.cshtml, qui remplacera la vue par défaut du widget section.
2. The appSettings. json sert de fichier de configuration. Vous pouvez y définir les classes utilisées pour les espacements dans les widgets de section. Vous avez également accès à la propriété CssGridSystemColumnCount qui définit le nombre de colonnes de votre système de grille (par exemple Bootstrap et Taildwind utilisent une grille de 12 colonnes). Nous définissons donc la valeur sur 12.

    "Widgets" :  {
       "Styling" :  {
          "CssGridSystemColumnCount" :  12 
      } 
   } 

   Plus tard, lorsque nous éditerons la vue du widget de section, nous aurons accès à cette valeur via le SectionViewModel et nous l'utiliserons pour construire les classes de vent arrière. De plus, lorsqu'il est défini dans le appSettings.json il est également utilisé par l'outil d'édition rapide de l'éditeur de page pour calculer correctement la largeur de la colonne de chaque ligne.
   

3. En parlant de la vue du widget de section, vous avez également accès aux propriétés suivantes à travers le modèle du widget:

   ColumnProportions – un tableau, dans lequel chaque élément contient le nombre de colonnes de la grille css par colonne de ligne

   ColumnsClasses – classes attribuées à chaque colonne de ligne depuis l'interface utilisateur

4. Dans notre exemple, les classes du framework CSS Tailwind ressemblent à ceci – w-1/12 où 1 représente le nombre de colonne de grille CSS, contenu dans ce row column et 12 est le nombre maximal de colonnes de la grille CSS. Pour construire cette classe, nous pourrions faire un petit calcul et attribuer directement la valeur à l'attribut de classe. Cependant, pour le rendre plus clair et pour montrer comment une logique de serveur supplémentaire peut être branchée en cas de besoin, nous allons créer un assistant de balise .net principal personnalisé pour la construction de nos classes. Pour plus d'informations sur les aides de balises .Net personnalisées .

Personnaliser la vue du widget de section

1. Créez un dossier TagHelpers à la racine de change-grid-system. Ajoutez-y une bibliothèque de classes appelée ColumnClassTagHelper.cs. Pour vous assurer que notre application a accès aux assistants de balises, ajoutez une référence pour eux dans le fichier Views / _ViewImports.cshtml.

    @addTagHelper *, système de changement de grille  

2. Notre assistant de balise a trois propriétés:

GridSize – le nombre de colonnes de grille dans le système – 12 dans le cas de Bootstrap et Tailwind;

AddtionalClass – toutes les classes supplémentaires, définies dans la colonne, par exemple à partir de la vue avancée de l'éditeur de propriétés;

CssColsPerRowCol – nombre de colonnes de grille par colonne de ligne) que nous passerons par le modèle de section.

 [ HtmlTargetElement  ( Attributes  = [19659060] "columnClass" )   ] 
     public   class   ColumnClassTagHelpers  :   TagHelper 
     {
         /// 
 
         /// Obtient ou définit le nombre de colonnes de la grille. 
         /// 
         public   string   GridSize  {  get ; [19659064] set ;  } 

         /// 
 
         /// Obtient ou définit les classes supplémentaires. 
         /// 
         public   string   AdditionalClass  {  get ;   set ;  } 

         /// 
 
         /// Obtient ou définit le nombre de colonnes de la grille par ligne colonne. 
         /// 
         public   string   CssColsPerRowCol  {[19659064] get ;   set ;  } 

         /// 
 
         /// Traite la sortie. 
         /// 
 
         ///  Le contexte de la vue.  
         ///  La sortie traitée. 
         public   override   void    Process  ([19659112] TagHelperContext  context   TagHelperOutput  sortie ) 
         {
             if   ( output ! =   null  ]) 
             {
                output .  Attributes .  RemoveAll  ( "columnClass" ) ; 
                 var   cls  =   string .  Concat  ( this .  AdditionalClass   "w -"   this .  CssColsPerRowCol   "/"   this .  GridSize ) ; 
                output .  Attributes .  SetAttribute  ( "class"  cls ) ; 
            } 
         } 
    } 

3. La classe a également un décorateur HtmlTargetElement, qui est utilisé pour spécifier les éléments cibles de notre assistant de balise. Dans notre cas, nous voulons utiliser le tag helper sur les éléments pour lesquels l'attribut columnClass est défini.
4. La méthode Process est l'endroit où toute la magie se produit. Il reçoit le contexte de l'instance Tag Helper et de la sortie Tag Helper que nous utilisons pour lire et modifier le contenu réel qui est dans la portée de notre Tag Helper. Dans la méthode process, nous supprimons d'abord notre attribut columnClass, puis nous concaténons les propriétés mentionnées ci-dessus pour créer la classe de colonne. La dernière chose que nous faisons est de définir la classe sur la sortie.
5. Une fois que nous faisons cela, notre colonne devrait avoir les classes Tailwind appropriées.

Au cas où vous auriez besoin de créer des sections / espaces réservés complètement personnalisés pour votre site Web page, vous pouvez profiter de cet exemple et de cette vidéo .

Si vous avez trouvé ce didacticiel utile, n'hésitez pas à essayer l'éditeur de page et les widgets de section de Sitefinity . Avec un moteur de rendu .Net Core prêt à l'emploi, Sitefinity offre aux développeurs un niveau supplémentaire de flexibilité en termes de développement frontend. Si vous êtes nouveau sur Sitefinity, vous pouvez en savoir plus ici ou sauter directement et commencer votre essai gratuit de 30 jours dès aujourd'hui.