Créer un exemple de page Sitefinity sur .NET Core

L'introduction du .NET Core Renderer a été la première étape d'un projet à long terme de migration de Sitefinity vers le framework .NET Core.

Cette couche de présentation autonome, qui peut être hébergé, développé et déployé indépendamment de l'interface utilisateur de gestion de contenu et du backend opérationnel, inaugure un tout nouvel ensemble de concepts et de capacités d'édition de page.

Dans ce billet de blog, nous allons suivre les étapes nécessaires pour créer un exemple .NET Page principale. La page a été construite à l'aide du nouvel éditeur et l'une des meilleures choses à ce sujet est l'excellente expérience WYSIWYG. Voyez par vous-même.

Intéressé? Allons-y …

Configuration de Sitefinity

Tout d'abord, nous devons configurer l'instance Sitefinity, à laquelle nous allons connecter notre moteur de rendu .NET Core. Téléchargez la solution et suivez les étapes décrites dans ce référentiel d'exemples Sitefinity . Une fois que vous avez configuré le projet, vous devriez avoir une page – Page d'échantillons Quantum – marquée avec une étiquette «nouvel éditeur», un type de contenu Témoignage et un Registre [19659013] Form (assurez-vous de suivre précisément toutes les étapes des fichiers Lisez-moi).

Ensuite, suivez les instructions de connexion de Sitefinity à un serveur autonome Application ASP.NET Core pour configurer votre instance afin qu'elle fonctionne avec le moteur de rendu .NET Core.

Projet de rendu .NET Core

Commençons par configurer notre projet de rendu .NET Core. Vous pouvez opter pour le modèle de démarrage fourni par l'équipe Sitefinity ou vous pouvez suivre les instructions de cet article de documentation pour créer une application vierge .NET Core . Dans cette démo, j'utiliserai le modèle de démarrage.

C'est ici que vous trouverez le modèle de démarrage complet . Tout ce que vous avez à faire est de changer l'URL dans le fichier appsettings.json pour qu'elle corresponde à celle de l'exemple de projet Quantum, que nous avons mis en place au début.

Une fois le modèle téléchargé, ouvrez-le avec l'EDI de votre choix et modifiez l'URL de l'instance Sitefinity sous appsetings.json "Sitefinity" -> "URL".

 "Sitefinity" :   {
     "Url" :   "http://nstefano.com:8080"[19659022Oft-of-the-Box)[19659024Oft-of-the-BoxLeswidgetsnerépondenttoutsimplementpasàvosbesoinsdeconceptionvouspouvezcontinueretencréerdespersonnalisésdansleprojetNETCorePourlesbesoinsdeladémoleswidgetsdontnousavonsbesoinseraient:

 Widget de section statique [Layout widget]
    
 Widget de témoignage [Content widget]
    
 Widget de formulaire de demande de démonstration [Content widget]

 Notez que le  Widget de mise en page   est utilisé comme un espace réservé pour les autres widgets. Le widget Contenu    est utilisé pour présenter du contenu, statique ou dynamique. 

 Section statique 
 Commençons par le widget  Section statique . Il vous permet d'insérer un widget de section avec un balisage spécifique. Vous pouvez obtenir ce widget directement à partir du référentiel de pages d'exemple  . Copiez simplement les fichiers suivants dans leurs répertoires correspondants: 
 Tous les fichiers  *. Cshtml  dans [Views/Shared/Components/StaticSection] 
 Testimonial Widget 
 Maintenant, nous pouvons nous concentrer sur la création du widget Testimonial. En suivant les étapes de l'article  Créer un widget .NET Core personnalisé nous devons créer les fichiers suivants dans les répertoires appropriés, comme suit: 
  TestimonialItem.cs  and  ] Item.cs  dans [DTO]. DTO (Data transfer object) est la classe correspondante du type Testimonial Dynamic. Une liste de tous les types disponibles peut être trouvée  ici . 
    
 Default.cshtml  dans [Views/Shared/Components/Testimonial]. La vue  cshtml  contient tout le balisage nécessaire pour le widget. 
    
 ItemViewModel.cs  dans [ViewModels/Testimonial]. Ce sont les données auxquelles la vue  cshtml  se lie. 
    
 TestimonialsEntity.cs  in [Entities/Testimonial]. Vous pouvez lister ici les champs qui seront visibles dans le concepteur de widgets. Par exemple,  MixedContentContext Testimonials  affichera un champ de sélection à partir duquel nous pouvons sélectionner les éléments de témoignage pour le widget à afficher. Tous les types disponibles peuvent être trouvés  ici . 
 Configuration de démarrage 
 Une fois tous les fichiers créés, nous devons ajouter la ligne suivante ` services.AddScoped  ();`  à la méthode ` ConfigureServices () « dans «  Startup.cs  ».  La méthode  AddScoped  enregistre le service avec une durée de vie limitée, celle d'une seule requête. 

 public   void   ConfigureServices  ( IServiceCollection  services  ) 
 {
     // Ajout de services liés à sitefinity 
    services .  AddScoped  < ITestimonialModel  TestimonialModel >   () ; 
    services .  AddSitefinity  () ; 
    services .  AddViewComponentModels  () ; 
} 
 Form Widget
 Enfin, nous avons besoin du widget "Demo request form".
 Une fois que nous avons terminé le développement des widgets, nous pouvons commencer à préparer le style de la page. Tout d'abord, nous devons indiquer au projet .NET Core d'utiliser des fichiers statiques. Nous pouvons le faire en ajoutant ` app.UseStaticFiles ();`  à la méthode ` ConfigureServices ()`  dans " Startup.cs .
 public [19659056] void   Configurez  ( IApplicationBuilder  app   IWebHostEnvironment  env ) 
 {
     if   () env .  IsDevelopment  () ) 
     {
        app .  UseDeveloperExceptionPage  () ; 
    } 
    app .  UseStaticFiles  () ; 
    app .  UseRouting  () ; 
    app .  UseSitefinity  () ; 
    app .  UseEndpoints  ( endpoints  => 
     {
        endpoints .  MapControllerRoute  (
             name :   "default" 
         pattern :   "{controller = Home} / { action = Index} / {id?} ") ; 

 endpoints .  MapSitefinityEndpoints  () ; 
    } ) ; 
} 
 Styles, scripts et polices
 Nous avons maintenant besoin de quelques styles, scripts et polices. Tous les fichiers source utilisés pour le style de la page seront placés dans le répertoire «client-src». Récupérez simplement tous les fichiers du  du dossier exemple client-src  et placez-les dans votre projet. Pour «jouer» avec eux, vous devez installer  NodeJS  (version 14.15.1) et exécuter «npm i» et «npm start».
 Cela précompilera tout le fichier SCSS en CSS, copiez tous les éléments nécessaires (polices) et réduisez le fichier JavaScript de l'exemple, en les plaçant tous dans le répertoire «wwwroot». Nous lions ensuite les fichiers dans  Layout.cshtml  qui se trouve dans Views / Shared.
 ] Si vous avez opté pour le modèle de démarrage, il vous suffit de changer le nom de fichier des fichiers  css  et  js d’ajouter des CDN pour les polices et de supprimer les fichiers out-of -the-box bootstrap.css car nous utilisons un  personnalisé  du projet. Dans l'ensemble, le fichier devrait ressembler à  ceci .
 Si vous avez commencé avec un projet nouvellement créé, puis créez  Layout.cshtml  dans le dossier Views / Shared et collez  ce contenu .
 Démarrage du projet
 Construisez et démarrez le .NET Core project et accédez à Sitefinity via  http: // localhost: 5000 / sitefinity  (5000 est le port de projet .NET Core par défaut). Ouvrez Pages et sélectionnez «Afficher» pour la page d'exemple Quantum ou accédez directement à http: // localhost: 5000 / netcore-renderer / quantum-sample-page. Ça a l'air bien, n'est-ce pas?
 Permettez-moi maintenant de passer en revue les étapes à suivre pour implémenter la conception de la page. Pour les besoins de la démo, nous allons créer une autre page .NET Core et l'appeler «Quantum sample page 2». Ensuite, nous sélectionnons «_Layout.cshtml» (modèles .NET Core) pour le modèle de page.
 Style de la page
 Je décomposerai le style en trois composants principaux: Disposition, principal et pied de page.
 Disposition
 Pour la section Disposition, nous allons créer la base de la page. En commençant par une page vide, nous devons ajouter deux widgets de section l'un après l'autre.
 Choisissez  Ajouter un widget ici  et sélectionnez  Section  widget
 Modifier les styles de widget de section avec Padding Bottom réglé sur S et Margin Bottom réglé sur L.
 Les paramètres d'affichage de Padding et Margins représentent des classes CSS. Ces classes peuvent être modifiées en modifiant les propriétés correspondantes dans «OffsetClassess» dans « appsettings.json ». Par défaut, ils représentent les classes d'utilitaires d'espacement  Bootstrap 4 .
 Maintenant, passez aux paramètres avancés et définissez la classe CSS personnalisée Section sur  «qu-main»  et la section Label sur  Emballage principal . Bien que le changement d'étiquette de section ne soit pas obligatoire, c'est un bon moyen d'avoir une séparation visuelle de la structure de la page. La configuration du remplissage et de la marge de style de section et de colonne peut être effectuée à l'aide des commandes de champ de l'interface utilisateur.
 Allez dans Paramètres avancés et définissez le libellé sur .
 Après la section  Main wrapper ajoutez un widget  Section . Modifiez-le et définissez le haut de la section Padding sur L. Passez aux paramètres avancés, renommez-le en tant que wrapper de pied de page et ajoutez une classe CSS personnalisée pour la section «qu-footer».
 Dans la section suivante, ajoutez un widget  Section statique modifiez-le et sélectionnez ViewType = Container. Ensuite, passez à Paramètres avancés et renommez-le en  Formulaire .
 Voilà, nous en avons terminé avec la mise en page de la page et elle devrait ressembler à ceci.
 ] Main
 Continuons avec la section Main. Celui-ci nécessitera un peu de travail supplémentaire:
   
 Ajoutez un widget  Section  à la section  Main  et modifiez-le. Définissez l'étiquette sur  Logo wrapper  et mettez à jour les styles de section comme suit: Padding top S, Margin top M, Bottom L.
 Maintenant, dans ce  Logo wrapper  place un  Widget d'image . Sélectionnez l'image du logo   dans la bibliothèque d'exemples de pages Quantum. Définissez le libellé de ce widget sur  Logo .
 Ajoutez un widget de section après l'encapsuleur de logo. Divisez-le en 2 colonnes [50%, 50%].
 Modifiez cette section et, dans les styles de colonne, définissez Column 2 Padding top M. Basculez sur Paramètres avancés et définissez le titre de la section sur  En-tête principal,  puis définissez les classes CSS personnalisées pour la colonne 1 sur «col-lg-6 col-md-12» et la colonne 2 sur «col-lg-6 col-md-12 pl-xl-5».
 Comme nous utilisons Bootstrap, nous pouvons tirer parti du système de grille réactif qu'ils nous fournissent. Donc, fondamentalement, nous disons que ces colonnes devraient être côte à côte si la taille de l'écran est plus large qu'une certaine valeur, et qu'elles devraient sinon s'enrouler. Cliquez ici pour  en savoir plus sur le système Bootstrap Grid .
 Dans la colonne 1, placez un widget  Image  et sélectionnez l'ordinateur portable   image de la bibliothèque.
 À l'intérieur de la colonne 2, placez un widget  Bloc de contenu suivi d'un widget  Appel à l'action (CTA) . Modifiez le bloc de contenu  passez à «Afficher HTML» et insérez ce qui suit:
 < h4   class  =  " qu-txt-white mb-2  " >  QUANTUM WEB DESIGN WIZARD  </  h4 > 
 < h1   class  =  " qu-txt-white "  >  Refonte complète pendant moins d'une semaine? Nous faisons ceci.  </  h1 > 
  
 Pour passer à la vue HTML, sélectionnez simplement le bouton de balisage ci-dessous.
 Modifiez le widget  CTA  et saisissez  «Obtenir une démo gratuite»  dans le champ Action principale sous le libellé Action. Dans les paramètres d'affichage, modifiez la valeur de l'action principale à l'action secondaire. Définissez Margin en haut sur M.
 Ajoutez un widget  Section  après la section  Main head  et renommez-le. J'entends par là accéder aux paramètres avancés et changer l'étiquette en  Points de conversion.  Réglez le bas de la marge de section sur S.
 Placez un widget  Section  dans la section  Conversion points  section .  Accédez à Paramètres avancés et renommez-le en  En-tête de conversion.  N'oubliez pas de définir la classe CSS sur Colonne 1 «col-lg-5».
 Ajoutez deux widgets  Bloc de contenu  à l'intérieur  En-tête de conversion . Modifiez celui du haut, et insérez une règle horizontale, puis choisissez Paramètres avancés et ajoutez la marge définie du haut à L et du bas à M. Vous pouvez insérer une règle horizontale en appuyant sur le bouton ci-dessous.
 Modifier le second  Bloc de contenu,  passez à  Afficher le code HTML  et insérez ce qui suit:
   < h2 >  Améliorez l'expérience client sur votre site Web  </  h2 > 
   
 Après la section d'en-tête Conversion, placez un autre widget Section. Divisez-le en 3 colonnes [42%, 8%, 50%]. Puis renommez-le en Info et points. Continuez et définissez les classes CSS personnalisées comme suit:
 Colonne 1 = "col-lg-5 col-md-12"
 
 Colonne 2 = "col-lg-1 col-md-12"
 
 Colonne 3 = "col-lg-6 col-md-12 mt-lg-0 mt-5 pl-xl-5"
 Ajoutez deux widgets dans la colonne 1: a  Bloc de contenu  et un  CTA . Modifiez le  Bloc de contenu  et passez au HTML, puis ajoutez ceci:
 < p   class  ] =  " qu-txt-gray qu-txt-medium "  >  Nous concevons de superbes sites Web pour toute entreprise, portefeuille, organisation et plus encore avec l'aide de notre concepteurs d'assistants et gourous du front-end.  </  p >   
 Modifiez le widget CTA, définissez son étiquette d'action principale sur «Plus d'infos» et choisissez Marge en haut M.
 Dans la colonne 3, ajoutez deux sections. Renommez-les en Points 1 et Points 2 (si intelligent, non?). Divisez les deux sections en 2 colonnes [50%, 50%]. Maintenant, dans chaque colonne de la section Points (total de 4), nous devons ajouter un widget de bloc de contenu. Modifiez la section Points 1 et ajoutez la classe CSS «mt-md-0 mt-3» à la colonne 2. Modifiez la section Points 2, définissez la marge de section en haut L et ajoutez la classe CSS «mt-md-0 mt-3» à la colonne 2 .
 Modifiez le premier widget de bloc de contenu. Dans la barre d'outils, choisissez Insérer une image et sélectionnez l'image a1 dans la bibliothèque de pages d'exemples Quantum.
 Modifiez l'image , remplacez les vignettes de l'image par Taille personnalisée et définissez la largeur et la hauteur sur 80. Définissez les marges de l'image à droite sur 10.
 Basculez vers l'affichage HTML et collez ce qui suit:
   < div   class  =  " media "  > 
  {{balisage d'image}}
   < div   class  =  " media-body "  > 
     < h4 >  FACILE À CHANGER  </  h4 > 
     < p   class  =  " qu-txt-gray "  >  Permettre aux responsables marketing de gérer l'apparence de votre site Web en appliquant la palette de couleurs de leur campagne.  </  p > 
   </  div > 
 </  div > 
 
 Maintenant, remplacez {{image markup}} par le balisage  réel de l'image précédemment insérée. À la fin, tout devrait aimer quelque chose comme ceci:
   < div   class  =  " media "  > 
    <img sf-custom-thumbnail = "true" src = "http: // localhost: 5000 / images / default-source / quantum-sample-page / a1.png? Status = Master  & amp;  sfvrsn = 43fbcc09_0 "style =" marge droite: 10px; " sf-size = "8218" width = "80" alt = "..." sf-constrain-proportions = "true" sfref = "[images%7COpenAccessDataProvider] b9038a2f-59f8-46a8-b9c5-a310aa9c758e"
    / data-sf-ec-immutable = "">
     < div   class  =  " media-body "  > 
         < h4 >  FACILE À CHANGER  </  h4 > 
         < p   class  =  " qu-txt-gray "  >  Permettre aux spécialistes du marketing de gérer l'apparence de votre site Web en appliquant la palette de couleurs de leur campagne.  </  p > 
     </  div > 
 </  div >   
 Faites de même avec les trois autres blocs de contenu et utilisez le texte et l'image appropriés.
 Maintenant, terminons le dernier composant de la section principale. Ajoutez un widget Section après la section Points de conversion, renommez-le en Responsive et définissez Section Margin bottom sur S via les paramètres de la section Display.
 Placez un widget Section dans la section Responsive et renommez-le en titre Responsive. Modifiez-le et définissez la classe CSS «col-lg-5» sur la colonne 1.
 Ajoutez deux widgets de bloc de contenu dans l'en-tête Responsive. Modifiez celui du haut et insérez une règle horizontale, puis choisissez Paramètres avancés et ajoutez Marge en haut L et bottom M.
 Modifiez le deuxième bloc Content, basculez vers View Html et insérez ce qui suit:
   < h2 >  Solution mobile prête à l'emploi  </  h2 >   
 Après la section En-tête sensible, ajoutez une autre section. Divisez cette section en trois colonnes [42%, 8%, 50%]. Modifiez-le et passez aux paramètres avancés, changez son étiquette en Info et prévisualisez et ajoutez des classes CSS personnalisées, comme suit:
 Colonne 1 = "col-lg-5 col-md-12"
 
 Colonne 2 = "col-lg-1 col-md-12"
 
 Colonne 3 = "col-lg-6 col-md-12 mt-lg-0 mt-5 pl-xl-5"
 Et voilà, nous sommes prêts avec le Section principale. Assurez-vous de vérifier également la structure de la page, car nous avons changé les étiquettes de section afin d'être plus visible dans la structure.
 Footer
 Encore une section à gauche, et voici comment nous allons procéder:
 Colonne 1 = "col-lg-5 col-md-12"
 
 Colonne 2 = "col-lg-1 col-md-12"
 
 Colonne 3 = "col-lg-6 col-md-12 mt-lg-0 mt-5 pl-xl-5"
 Dans la colonne 1, ajoutez un widget DemoRequestForm.
 Dans la colonne 3, déposez un widget Témoignages. Modifiez-le et sélectionnez les témoignages à afficher.
 Et nous en avons terminé avec la dernière section de notre page. Ça n'a pas l'air mal, n'est-ce pas?
 Et comme nous utilisons  Bootstrap nous obtenons également une conception adaptée aux mobiles, prête à l'emploi.
 Wrap -up
 N'hésitez pas à essayer et à suivre la conversation dans notre fil de discussion dédié  à la communauté . Là, vous pouvez côtoyer des personnes partageant les mêmes idées et vous tenir au courant des dernières actualités sur Sitefinity et .NET Core . Vous êtes les bienvenus pour rejoindre notre webinaire dédié .NET Core et découvrir comment la nouvelle architecture à 3 niveaux vous aide à pérenniser vos projets. Cliquez sur le lien ci-dessous pour réserver votre place.
 S'inscrire pour un .NET en direct Webinaire de base