L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Application d'un modèle Bootstrap à Sitefinity avec MVC
Découvrez comment vous pouvez utiliser une approche MVC pour appliquer un modèle Bootstrap à votre site Web Sitefinity dans ce didacticiel pas à pas.
Avez-vous déjà reçu un modèle que quelqu'un d'autre avait codé pour créer un Sitefinity site à partir de? Si oui, cet article est pour vous. Nous verrons comment appliquer Timer, un modèle d'amorçage personnel multi-pages réactif gratuit à un projet Sitefinity utilisant une approche MVC avec un package Bootstrap.
Il est très facile d'appliquer un modèle Bootstrap téléchargé depuis Internet à un projet Sitefinity avec MVC. Tout d'abord, nous configurons le projet, combinons les ressources CSS et JS et les référons dans le fichier de modèle. La deuxième étape consiste à configurer le modèle dans Sitefinity et à la troisième étape, à créer les pages et les modules dynamiques qu’ils utilisent. En général, chaque page comporte plusieurs widgets de grille qui sont des espaces réservés avec des balises HTML et des classes CSS et des widgets de contenu placés dans les widgets de grille. Les widgets de contenu peuvent être des blocs de contenu, qui sont essentiellement du HTML libre, ou des widgets utilisés pour afficher les éléments de contenu des modules de contenu.
D'autre part, travailler avec MVC est toujours très amusant. Développé pour les utilisateurs frontaux de Sitefinity, il a adopté les dernières tendances en matière de gestion des actifs frontaux. En outre, vous avez un contrôle total sur le balisage généré par les widgets. Commençons par la configuration.
Configuration du projet et du package
1. Créer un projet Sitefinity
2. Copiez les actifs frontaux du modèle de minuteur dans
Importez les fichiers CSS dans
Dans
Après cela, ouvrez une console de ligne de commande dans
3. Après cela, ouvrez default.cshtml (
4. Placez le fichier favicon.ico à la racine du projet (sous
Regardez cette vidéo pour en savoir plus sur la configuration du projet:
Configuration des modèles de page
5. default.cshtml est la base du modèle de page par défaut dans Sitefinity sous Conception> Modèles de page.
Ajoutez les parties réutilisables du modèle Minuteur au modèle de page par défaut dans Sitefinity sous Conception> Modèles de page à utiliser avec toutes les pages.
Ouvrez le modèle de page par défaut (Sitefinity sous Conception> Modèles de page ) et ajoutez conteneur widget de grille à Espaces réservés d'en-tête et de pied de page.
Le pied de page est constitué de colonnes Bootstrap, donc insérez le widget de grille grid-8 + 4 dans celui-ci. Le reste du pied de page est du code HTML, qui peut être placé dans les widgets Content block (il est plus facile de placer le code HTML directement dans la vue HTML du widget Content block ). [19659003] 6. La prochaine chose à faire est de choisir le modèle de navigation à utiliser. Le plus approprié s’avère être NavigationView.Horizontal.cshtml (du paquet Bootstrap).
Dans
7. Ensuite, nous devons créer deux widgets de grille qui sont couramment utilisés pour envelopper différentes parties des pages.
Toutes les pages contiennent des éléments de section (
avec la ligne CSS de la classe est utilisée pour envelopper une section. Créez un widget de grille appelé rangée ( /ResourcePackages/Bootstrap/GridSystem/row.html ).
Conseil: Il est important de placer la classe " sf_colsIn " dans la balise html
Conseil: Il est important de placer la classe " sf_colsIn " dans la balise html
afin de créer un espace réservé dans Sitefinity UI.), l'ID sera remplacé par la classe CSS "sf-hero-area" ().
Source link
8. Des identifiants sont attribués à la plupart des sections du modèle Timer. Ces identifiants sont utilisés dans le CSS pour définir les sélecteurs CSS. Plusieurs occurrences du même widget de grille sont utilisées sur la même page. C’est pourquoi il ne peut pas y avoir d’attributs d’ID unique pour chaque widget de grille déplacé. Par conséquent, les identifiants du modèle Timer doivent être remplacés par des classes CSS. Ouvrez
9. Il y a des éléments de section répétés parmi les pages. Les sections répétées doivent être placées dans les modèles pour pouvoir être utilisées par toutes les pages.
Toutes les pages comportent une section " d'appel à l'action ", de sorte qu'une section " d'appel à l'action " est ajoutée au modèle de page par défaut dans Sitefinity sous Conception> Modèles de page .
Sept pages ont une section " global-page-header ", ce qui permet de créer un autre modèle basé sur le modèle par défaut. Il s'appelle default-with-global-header et la section " global-page-header " y est placée.
La " entête de page globale " consiste en un wrapping
avec la classe CSS, un en-tête
et un fil d'Ariane. Faites glisser un widget de grille grid-12 et définissez la classe CSS requise dans le concepteur de widgets dans sa propriété Classes. Pour l'en-tête, déposez un widget Content block dans le widget grid-12 et modifiez-le à l'aide de pages du menu Actions. Dans le modèle, le balisage commun est spécifié et, sur chaque page, le bloc de contenu particulier est modifié pour écrire le nom de la page en question.
Pour le fil d'Ariane, utilisez un fil d'Ariane MVC avec un modèle différent, comme c'était le cas pour d'autres widgets auparavant.
Maintenant que tous les éléments communs sont configurés, procédons avec des pages individuelles.
Regardez cette vidéo pour en savoir plus sur les modèles de pages:
Création et installation de pages [19659006] 10. Page d'accueil
a) La page d'accueil contient un en-tête avec des informations sur le concepteur. Pour créer cet en-tête, utilisez un widget Content block et collez-y le code HTML requis.
b) Ensuite vient l'information «À propos de moi», qui comprend du texte et une image. Pour réaliser cette partie de la conception, supprimez un widget de grille section et le jeu de concepteurs de widgets sf-about dans la propriété de section . Après cela, placez un widget de grille de conteneur puis placez-y un autre widget de grille grid-6 + 6 . Les deux colonnes du grille-6 + 6 ont une col-sm-6 classes CSS, cliquez sur Éditer et ajoutez-les à Colonne 1 et Column 2 propriétés. La mise en page est prête, alors supprimez deux widgets Content blocks dans chaque colonne. Le premier widget Content block contient du texte et un balisage simple avec des classes. Celui de la deuxième colonne contient une image et du balisage. Ajouter l'image à partir de l'outil Insérer image du widget Content block .
CONSEIL: le widget Image n'est pas utilisé dans ce cas particulier, car un balisage supplémentaire autour de l'image est nécessaire et le moyen le plus facile de l'ajouter se trouve directement dans le bloc de contenu . widget.
c) Pour la section suivante, ajoutez un widget de grille section et définissez la classe CSS requise comme à l'étape précédente. Après cela, faites glisser un widget de grille de conteneur dans le widget de grille de la section . Cette section comprend des œuvres avec titre, image et détails. Pour ajouter facilement de nouveaux éléments et modifier ceux existants, créez un module dynamique appelé Artwork avec les éléments de contenu " oeuvres " et les champs suivants:
– Titre – Type : Texte court
– Informations – Type: Texte long
– Description – Type: Texte bref
– Image – Médias associés (images, vidéos, fichiers)
Après avoir créé le module, créez quelques éléments de module dans Sitefinity sous Contenu> Oeuvres d'art . Modifiez ensuite les modèles de liste et de détails du module en fonction de la conception. Pour chaque module personnalisé, des modèles de widgets Liste et Détails sont créés dans Sitefinity sous Conception> Modèles de widgets . Les modèles sont nommés List.work ( List. [name-of-content-item]) et Detail.work ( Detail. [name-of-content-item]). Pour modifier la vue par défaut Liste ou Détail ou pour en créer de nouveaux, créez un dossier avec le nom de l'élément de contenu travail (pas le type de contenu!) Dans
Pour modifier la vue Liste, ajoutez un fichier cshtml List.work.cshtml (car le nom des éléments de contenu est work ) dans
Créez List.WorkList.cshtml dans
d) Pour la dernière section, ajoutez un widget de grille section et un widget de grille conteneur et configurez les classes CSS. Cette section est composée de deux lignes avec trois éléments de colonne sur chaque ligne. Les éléments ont des classes col-md-4 col-lg-4 col-xs-12 . Là encore, utilisez les widgets de grille par défaut fournis avec les classes «- md» et ajoutez manuellement les autres classes de résolution via le concepteur de widgets de grille. Le reste est obtenu avec des widgets Content block dans chaque élément de colonne.
Détails de l'œuvre
11. Créez la page et faites glisser un widget works . Créez un nouveau modèle de détail comme pour la vue Liste et configurez le widget travaux pour l'utiliser.
Regardez cette vidéo pour en savoir plus sur les pages de détail de la maison et des œuvres d'art:
12. A propos de
a) Modifiez le widget Content block dans la section “en-tête de page globale” pour écrire le titre de la page.
b) Configurez la section suivante avec une section . ] widget de grille et un autre widget de grille de conteneur qu'il contient et configurez-les selon vos besoins. La section comporte deux colonnes, faites donc glisser un widget de grille grid-6 + 6 dans le widget de grille conteneur . La première colonne contient une image. Utilisez le widget Image pour télécharger l'image dans les bibliothèques Sitefinity et l'ajouter à la page. L'image a une classe img-responsive . Ajoutez la classe via le concepteur de widgets Image .
Conseil: Tout contenu statique (par exemple, le texte, qui ne devrait faire partie d'aucun module) peut être placé directement dans un bloc Content widget.
c) Configurez la section suivante avec un widget de grille section et définissez les classes CSS nécessaires ( about-feature clearfix ). Après cela, déposez un widget de bloc de contenu et ajoutez le code HTML de cette section dans la vue HTML de l'éditeur de widgets Content block .
d) Configurez la section suivante à l'aide d'une grille de section . widget et un autre widget de grille de conteneur et configurez-le selon vos besoins. La section "Rencontrer l'équipe" peut être traitée avec un module dynamique. Créer un module Équipe avec éléments de contenu " membres de l'équipe " et champs:
– Titre (Nom) – Type: Texte court
– Titre du poste (Titre du poste) – Type: Texte court
– Informations abrégées – Type: Texte long
– Facebook – Type: Texte court
– Twitter – Type: Texte court
– LinkedIn – Type: Texte bref
– Google (Google+) – Type : Texte court
Une fois le module créé, créez un modèle de liste, modifiez-le, puis configurez-le comme pour le module Artworks.
13. Service
a) Les sections «Ce que nous aimons» et «Nos clients heureux» sont similaires aux sections déjà configurées dans d'autres pages.
b) Il existe une autre liste avec les œuvres d'art sur cette page. Cette liste ne contient que les œuvres présentées. Allez à Sitefinity Contenu> Oeuvre et marquez toutes les œuvres présentées avec l’étiquette Featured . Déposez un widget œuvres sur la page et limitez le nombre d'éléments à afficher à ceux marqués avec Featured . Dans l'onglet Paramètres de liste définissez quatre éléments à afficher et configurez le modèle de liste. Dans l'onglet Paramètres d'élément individuel configurez les éléments individuels à ouvrir dans la page Arwork details .
14. Galerie
a) Cette page contient une galerie d’images avec oeuvres d’art. Créez donc un modèle personnalisé Gallery List.WorksGallery.cshtml dans
Créez un balisage. nouvel album Artworks dans Sitefinity Contenu> Images et configurez le widget Galerie d'images pour afficher uniquement les images de cette galerie sélectionnée.
15. Blog Full
Dans le module Posts du blog ajoutez un champ personnalisé de type . Images associées dans Champs personnalisés pour les posts . Ce champ sera utilisé pour l'image d'en-tête. Certaines publications de blog peuvent avoir des œuvres d'art associées. Par conséquent, créez un autre champ personnalisé ArtWork à partir du type Données associées et le type de données fonctionne. Les méta-données et les gens seront des tags.
a) Créez la page Blog complète et faites glisser un blog posts .
b) Créez un modèle de liste sous
c) Configurez le widget Blog posts à utiliser. BlogPostList et pour ouvrir des éléments uniques dans la page Blog details .
16. Détails du blog
a) Faites glisser un widget de blogs
b) Créez un modèle de détail du widget Blog de blogs sous
Aller à Sitefinity Contenu> Œuvres d'art> Pages dans lesquelles des articles de ce genre sont publiés et déplacés Description de l'œuvre ] page en haut. Après cela, des illustrations d'un article de blog seront ouvertes à la page Détails de l'œuvre .
c) Chaque modèle de détail d'article contient une option de partage social. Le widget Partage social MVC peut être activé via le concepteur du widget. Pour ce faire, ouvrez Édition> Avancé> Modal et définissez EnableSocialShare à True .
CONSEILS: pour activer davantage d'options de partage sur les réseaux sociaux, accédez à Sitefinity Administration> Paramètres> Partage social et cochez ceux qui vous intéressent.
d) Pour activer les commentaires relatifs aux blogs, accédez à Administration> CommentsModule> Commentable Types . Créez ensuite des modèles de commentaires personnalisés dans
Conseil: Lorsque vous modifiez le modèle, veillez à conserver les ajouts Sitefinity tels que le tri et le nombre de commentaires. Vous pouvez également activer Captcha à partir de Administration> CommentsModule> UseSpamProtectionImage.
17. Encadré gauche du blog
Les sections spécifiques de cette page sont les sections de recherche, de catégories et de publications récentes.
a) Pour la section de recherche, utilisez un widget Search box et créez un nouvel index de recherche pour le blog. messages dans Sitefinity Administration> Index de recherche .
Créez un nouveau modèle de widget Search dans
Configurez le champ de recherche . pour utiliser l'index de recherche créé et le modèle de widget SearchBox, ainsi que pour afficher les résultats sur la page Blog left search .
b) Pour la section catégories, utilisez un widget Categories et créez un modèle personnalisé CategoriesSidebarList (comme avec les autres widgets précédents)
c) Pour les articles de blog récents, utilisez la section un widget Blog posts et créez un nouveau modèle BlogPostSimple . Configurez le widget pour afficher seulement trois éléments au total, pour trier les articles de manière à ce que les derniers publiés soient en haut et pour ouvrir un élément unique dans la page Blog details .
d) Faites glisser un widget Blog posts et configurez-le pour ouvrir un seul élément de la page Détails du blog comme pour la page Blog complète .
. 18 Résultats de recherche gauche de blog
a) Créez cette page dupliquée du blog à gauche mais changez le widget Blog posts avec un résultats de la recherche .
b) Allez sur Sitefinity Contenu> Blogs et cliquez sur Actions> Titre et propriétés pour élément du blog . Définissez la propriété Page par défaut sur Blog> Détails du blog. Après cette publication dans le widget Le résultat de recherche sera ouvert à la page Détails du blog comme dans les autres cas.
19. Contacts
La partie intéressante de cette page est le formulaire de contact. Les autres sections sont réalisées avec les sections + des widgets de grille de conteneur et les widgets de bloc de contenu .
a) Créez un contact avec moi . formulaire ContactWithMe dans Sitefinity Contenu> Formulaires .
b) Modifiez le balisage des champs des dossiers ParagraphTextField, TextField et SubmitButton dans
c) Personnalisez le message qui s'affiche une fois le formulaire soumis dans le concepteur de widgets Formulaire dans l'onglet Paramètres .
Conclusion
Nous espérons que vous avez trouvé cette étape. étape par étape utile! Vous pouvez en apprendre plus sur Sitefinity ici et n'hésitez pas à consulter le code source de tout ce qui se trouve au-dessus de vous sur ce Github repo .
Source link