Dans mon dernier article, j’ai documenté comment créer une page maître dans SharePoint 2013. Les pages maîtres définissent les éléments chrome globaux de votre site Web. Cet article explique comment créer des mises en page personnalisées dans SharePoint 2013. Pour plus d’informations sur le modèle de page SharePoint 2013, consultez cet article Microsoft.
Planification de votre Mise en page
Pour cet exemple, nous allons recréer un morceau d’une page sur notre site Web (www.navantis.com ):
Dans notre article précédent, nous avons créé une page maître qui définissait l’en-tête, le pied de page et les feuilles de style globales de cette page. Maintenant, nous allons créer une mise en page qui suit ce format de base. Le contenu sera dynamique afin que vous puissiez créer autant de pages que vous le souhaitez en fonction de cette mise en page.
Dans notre mise en page, nous allons définir les zones suivantes comme des « contrôles de champ ». Nous allons tous les créer dans un seul conteneur de contenu et les exposer explicitement afin de refléter notre conception:
Le fil d’ariane en haut à gauche, nous pouvons utiliser le fil d’ariane de SharePoint et nous intégrerons l’abonnement à la newsletter dans la mise en page car nous ne voulons pas que cela soit explicitement défini dans la mise en page.
Définition de votre type de contenu
Donc, avant de faire le travail HTML, créons un type de contenu (une définition des champs de contenu) qui définit chacun de ces champs pour notre page. Sur la base du plan ci-dessus, nous avons besoin des champs suivants:
- Grandefilm
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
Dans chaque cas , ce seront des contrôles HTML. SharePoint 2013 vous permet de définir d’autres types de contenu pour ces champs, tels que des images. Les images dans SharePoint 2013 peuvent être rendues dans des dimensions spécifiques et SharePoint 2013 rendra dynamiquement n’importe quelle image à celle spécifiée pour s’assurer qu’elles s’intègrent bien dans votre mise en page définie.
Pour créer un type de contenu, accédez à Paramètres du site – > Types de contenu du site (sous Galeries de concepteurs Web). Si vous regardez les Types de contenu de Mise en page, vous verrez ceux existants pour l’Article, le Catalogue, la Page d’accueil, etc. Nous allons créer un type de contenu pour notre mise en page. Cliquez sur Créer et saisissez un nom pour votre nouveau type de contenu :
Sous Type de contenu parent, vous pouvez sélectionner le parent dont votre type de contenu héritera. Si vous examinez les types de contenu de mise en page existants, ils héritent de la page type de contenu. La page se trouve dans le groupe Types de contenu de publication. Vous pouvez également spécifier le groupe dans lequel vous souhaitez placer votre nouveau type de contenu – vous pouvez l’ajouter au groupe de types de contenu de mise en page existant ou créer votre propre groupe personnalisé.
Lorsque vous avez créé votre nouveau type de contenu, SharePoint 2013 affiche les colonnes héritées automatiquement du type de contenu de page. Permet d’en ajouter de nouveaux pour représenter nos champs personnalisés. Cliquez sur la colonne Ajouter à partir d’un nouveau site et ajoutons chaque champ:
Pour chaque colonne, nous pouvons spécifier le type. Pour les champs que nous voulons explicitement styliser, nous pouvons utiliser l’option Ligne unique de texte pour que l’auteur du contenu soit mis en texte brut qui sera formaté par le modèle. Pour les champs que nous voulons fournir plus de contrôle à l’auteur du contenu, nous pouvons spécifier le champ en tant que contenu HTML complet, puis l’auteur du contenu pourra insérer n’importe quel code HTML à l’aide de l’éditeur de texte enrichi. Pour nos domaines, utilisons cette approche:
- LargeHeadline – Une seule ligne de texte
- RightHandBlurb – Plusieurs lignes de texte
- LeftLinkList – HTML complet
- LeftColumnTitle – Une seule ligne de texte
- LeftColumnText – HTML complet
- RightColumnText – HTML complet
Pour chaque champ, créez une colonne de site.
Maintenant, nous avons des champs pour stocker le contenu, créons maintenant une mise en page.
Création d’une mise en page
Pour créer une mise en page, allez dans le Gestionnaire de conception et cliquez sur 6. Modifier les Mises en page. Cliquez sur Créer une mise en page. Donnez un nom à votre mise en page, choisissez votre page maître et le type de contenu que vous venez de créer.
Si vous prévisualisez votre mise en page, vous verrez qu’elle ne ressemble pas à grand–chose – nous devons mettre à jour le code HTML autour des contrôles de champ pour formater correctement la mise en page.
Publication de votre Mise en page
Avant de pouvoir utiliser votre mise en page, elle doit être publiée. Pour publier votre mise en page, accédez à Paramètres du site – > Pages maîtresses et mises en page. Vous verrez deux fichiers – l’un est HTML et l’autre est ASPX. dans SharePoint 2013, le code HTML est maintenant le maître et vous pouvez le modifier à l’aide d’un éditeur HTML. SharePoint 2013 génère ensuite automatiquement le fichier ASPX. Pour publier votre mise en page, cliquez sur le fichier HTML, puis Publiez:
Cela publiera à la fois les fichiers HTML et ASPX, les rendant désormais disponibles pour créer une page basée sur votre mise en page.
Création d’une page
Pour créer une page basée sur notre nouvelle mise en page, accédez à Nouvelle page.
Si vous allez ensuite à la Page -> Mises en page, vous trouverez notre nouvelle Mise en page dans la liste des Mises en page disponibles. Lorsque vous changez de mise en page, vous devriez maintenant voir tous les champs que nous avons créés précédemment dans notre type de contenu.
Vous pouvez remplir votre contenu en le tapant ou en le copiant et en le collant à partir de votre site Web existant ou de documents office tels que Word. Le copier-coller s’est considérablement amélioré par rapport aux versions précédentes!
Voici mon contenu maintenant rempli:
Maintenant, nous pouvons publier notre page…
Notre contenu est là, mais la mise en page ne reflète pas ce que nous want…so maintenant, modifiez le code HTML pour mettre à jour notre mise en page.
Personnalisation des mises en page
Les mises en page dans SharePoint 2013 ne sont que des fichiers HTML avec beaucoup de balises supplémentaires pour spécifier où les contrôles vont être injectés. Nous pouvons maintenant personnaliser le fichier HTML via le gestionnaire de conception. Vous pouvez simplement récupérer une copie du fichier HTML, apporter vos modifications et télécharger à nouveau votre fichier et SharePoint 2013 fera le reste. Il existe deux façons de récupérer le fichier:
- Accédez à Gestionnaire de conception – > 3. Téléchargez des fichiers de conception et mappez un lecteur réseau dans le répertoire de votre page maître.
- Allez dans Paramètres du site – > Pages maîtresses et mises en page et vous pouvez télécharger votre fichier.
Après avoir itéré plusieurs fois avec la mise en page et déplacé les extraits fournis par SharePoint 2013 aux endroits appropriés, nous avons maintenant une page bien formatée:
Tout le contenu de la zone de la page principale est entièrement géré par SharePoint peut être facilement modifié par un auteur de contenu.
Cet article a été écrit par Chris Woodill
Christopher Woodill est le Vice-président, Secteur public de Navantis. Avec plus de 15 ans d’expérience dans la planification, la gestion et la mise en œuvre de stratégies technologiques dans les secteurs public et privé, Christopher est responsable des ventes dans le secteur public, de la stratégie et de la livraison de solutions pour nos clients dans les domaines de la santé, du gouvernement, des municipalités et de l’éducation.
