Le panneau Page Settings dans l'administration vous permet d'améliorer le rendu de la page en vous permettant d'inclure d'autres éléments. Cela comprend des éléments tels que la favicon, meta tags Facebook et Twitter, et même des fichiers JavaScript et / ou CSS. Tous ces éléments sont destinés à être partagés sur l'ensemble du site et les Paramètres de la page (page settings) est ce que vous permettra de le faire.
Dans l'approche traditionnelle des templates, afin d'ajouter l'un de ces éléments, vous devez modifier manuellement le fichier qui comprend la structure de la page.Ce qui est généralement un fichier index.php
. Page Settings simplifie ce processus de façon exponentielle en faisant abstraction de l'action manuelle d’édition par un formulaire simple et puissant directement dans l’admin.
Grâce au concept fondamental de gantry et la mise en œuvre des surcharges, les Paramètres de la page peut être globales, ainsi que indépendante par Outline, si c'est nécessaire. Vous pouvez l'utiliser pour ajouter un script analytics pour l'ensemble du site, ou un autre apparaissant en fonction du profil auquel une page est assignée.
Contrôles
Tout comme dans le Panneau de réglages, les surcharges, filtrage et les glissements fonctionnent de la même façon.
Propriétés d'entête (head properties)
Le bloc Head Properties permet de personnaliser tout ce qui vient entre les balises <head>et </head>. Souvent, vous voulez ajouter des balises meta pour Facebook ou Twitter, ou peut-être voulez vous simplement ajouter quelque chose de personnalisé.
La capture d'écran ci-dessus illustre l'une des nombreuses manières possibles dont vous pouvez compiler les Propriétés de l'entête.
Meta Tags
Meta Tags est un champ de collecte que prend une liste de clés et des valeurs, les combine, et les restituent dans <head></head>
dans une sorte de propriété <meta>
. Les formes d'utilisations de balises meta sont innombrables. Habituellement les meta tags sont utilisés pour mieux définir un site aux moteurs de recherche ainsi que choisir comment le site s'affiche lors de l'intégration dans Facebook ou Twitter.
Plus de détails sur les meta tags Facebook's Open Graph et Twitter's Cards peuvent être trouvés aux emplacements suivants :
Contenu personnalisé (Custom Content)
Le champ de contenu personnalisé est dédié à quelque chose de spécifique que l'on veut ajouter à la balise <head>. N'importe quelle metadata qui est autorisé d'être insérée par les spécifications peut être écrite ici, de la même manière que vous feriez si vous éditiez un fichier index.html
.
Les balises de métadonnées courantes sont <title>
, <style>
, <meta>
, <link>
, <script>
, et <base>
.
Il est vivement conseillé de gérer les Scripts et les Styles via la la Section Assets ou via les Atoms. Bien qu’il peut être tentant d’écrire du code de script et les balises directement dans ce champs, il ne devrait être utilisé qu'en dernier recours. Évaluez donc correctement si les scripts et les styles devraient aller ici.
Attribut du Body (Body Attributes)
Body Attributes permet aux utilisateurs de personnaliser les attributs de la balise <body>
comme si vous injectiez du contenu juste après l'ouverture de <body>
ou juste avant que </body>
ne ferme.
Body Id et Classes Body
Le champ Body Id permet aux utilisateurs de spécifier un identifiant pour la balise <body>
, tandis que Body Classes permettent aux utilisateurs d'ajouter des noms de classe personnalisées supplémentaires. Selon l’exemple dans la capture d’écran ci-dessus, le résultat sera rendu ainsi:
<body id="my-site" class="... gantry body-class ...">
Gantry ajoute déjà ses propres classes à body, selon divers facteurs tels que l’élément de menu en cours de visualisation, quel outline est utilisé, etc..
La plupart du temps, vous n’aurez besoin d’ajouter aucune classe personnalisée, mais dans le cas où vous en aurez besoin, c'est ici l'endroit pour cela.
Attributs de balises (Tag Attributes)
Tag Attributes est un champ de clé/valeur qui permet d'injecter des attributs personnalisés supplémentaires à <body>
. Compte tenu de l'exemple ci-dessus en capture d'écran, imaginez vous avoir chargé un script qui permet aux utilisateurs de personnaliser la vitesse de défilement et l’actualisation automatique de page via les attibuts data-scroll
et data-refresh
.
Le résultat sera rendu ainsi:
<body id="my-site" class="... gantry body-class ..." data-scroll="500ms" data-refresh="3mins">
Mise en page des Sections (Sections Layout)
Depuis la version Gantry 5.2.0, par défaut, toutes les sections dans le Layout Manager se référent à ce paramètrage pour leur propres styles. Sections Layout propose trois types de styles:
-
Fullwidth (Boxed Content) [Défaut - précédemment "Fullwidth"]
-
Fullwidth (Flushed Content) [nouveau dans 5.2.0]
-
Boxed
Et voici une représentation visuelle de ces trois cas
Fullwidth (Boxed Content) [Default]
|
Fullwidth (Flushed Content)
|
Boxed
|
|
|
|
Ces styles permettent aux utilisateurs de personnaliser l’ensemble du site ou les différentes Sections pour répondre à des besoins spécifiques. Le scénario le plus fréquent, par exemple, est de souhaiter une section complètement remplie afin qu'une image ou un arrière-plan puisse être ajouté pour le remplir jusqu'aux bords.
Pour modifier le comportement des différentes Sections, dirigez-vous vers le panneau Layout Manager et cliquez sur l'icône outils (engrenage) de la section souhaitée. Vous serez alors en mesure de choisir une valeur différente pour le champ de layout. Inherit dira à Gantry qu'il devrait utiliser le réglage du panneau Page Settings.
After <body>
et Before </body>
Parfois, vous avez besoin d'injecter des styles, des scripts ou des éléments à la page et ils doivent être insérés, soit au début ou à la fin de <body>
.
Un bon exemple était Facebook's SDK for JavaScript dans sa version 1.0. À l'époque, Facebook exigeait au site de fournir <div
id="fb-root"></div>
juste après la balise d'ouverture <body>
. Comme vous pouvez le voir dans l'exemple de capture d'écran ci-dessus, cela aurait été l'endroit idéal pour cela.
Vous verrez souvent des scripts nécessitant que vous faites poussiez des éléments en avant dans la page et au lieu de créer de nouveaux modules, des particules ou des Widgets, vous pouvez simplement ajouter votre élément ici. Les Popups sont aussi un bon exemple. Le contenu du modal est injecté dans la page, mais invisible, jusqu'à ce qu'un élément déclenche le popup pour l'ouvrir.
Assets
Assets est une section dédiée à l'injection de CSS / JS spécifiques ou de Favicons sur le site. Même si tout ce que vous pouvez faire avec les assets, vous pourriez les faire avec juste Head Properties et Body Attributes, nous avons découplé ces portions à sa propre section.
Les Assets jouent un rôle très important dans la création de templates personnalisés. L'inclusion de scripts ou de styles tiers est devenu très commun et pour cette raison, il est important d’avoir une section dédiée pour maintenir le tout bien organisé.
Favicon et Touch Icon
Les fonctionnalités Favicon et Touch Icon permettent aux utilisateurs d’affecter une image au site qui le représentera alors sous forme d’une icône dans l’onglet navigateur ou dans l’écran d’accueil de votre appareil.
Les deux champs sont très semblables, Le champ Favicon utilise la façon plus traditionnelle d'injecter et d'associer une icône sur le site. Dans le passé, cela a toujours été représenté par un fichier icône de la taille 16x16 ou 32x32.
De nos jours, avec l’avènement des dispositifs de contact et la possibilité d’enregistrer dans les favoris ou les écrans d’accueil un site entier, de nouvelles normes sont apparues permettant des icônes plus grandes et plus détaillées.La fonctionTouch Iconcouvre cet aspect et permet de laisser les appareils comprendre que votre site peut utiliser des icônes avec des résolutions plus élevées.
Si vous voulez utiliser Touch Icon, Il est conseillé de créer une image qui est au moins de 180x180 ou 192x192. Le périphériques avec une plus petite résolution s'adapteront et rameneront l'image à l'échelle mais ceux avec une résolution plus élevée bénéficieront d'une jolie icône.
Gantry ne s'occupe que de l'utilisation la plus courante de icônes tactiles et prends en charge iOS, Android et Windows. Il ne fait que réduire les icônes. Si vous êtes à la recherche d'une utilisation plus sophistiquée de cette option et des tailles plus ciblées, référez-vous à cet article. Vous pouvez également utiliser des Outils en ligne pour générer des icônes.. L'endroit idéal pour ajouter du code d'icônes personnalisées générées est Propriété d'entête: Contenu personnalisé.
CSS et JavaScript
Les deux champs de collecte CSS et JavaScript fonctionnent de manière identique à Custom CSS/JS Atom. Le même comportement peut être accompli en ajoutant un Atome comme expliqué ci-dessous. Bien que dans certains cas, on préférerait avoir des assets séparés entre la section Assets et Atoms. Les deux méthodes sont bonnes et tout se résume à ce que vous préférez.
Atomes
Depuis Gantry 5.2.0, les Atomes ont été déplacés du Layout Manager dans le panneau Page Settings. Même si les atomes sont des particules de facto et peuvent être créés de la même manière, ils se comportent différemment.
Les atomes sont des particules qui n’apparaissent pas visuellement en frontal, mais qui servent un objectif important. Ils peuvent être assignés page par page, ou par défaut qui l'appliquera automatiquement à toutes les pages du site.
À toutes fins utiles, Atomes tels que Google Analytics, et Custom CSS / JS ajoute le script à la page qui ajoutera ou modifiera le code de la page lors du chargement. Ceci est utile pour le style de base telles que les couleurs, et les analyses de suivi.
Lorsque vous utilisez un Atome, le chemin d'accès à un fichier local est relatif à la racine du site, et pas à un dossier de template. Nous recommandons d’utiliser un lien de flux, tels que gantry-theme://custom/thing.css
a titre d’exemple, qui permet au lien de fonctionner même si vous changez de thème G5 ou de plates-forme.
Google Analytics
L'atome Google Analytics vous donne la possibilité d'ajouter rapidement votre Code Google Analytics UA à une mise en page, qui fonctionne en arrière-plan de votre page lors du chargement de celle-ci. Il ajoute le script nécessaire autour du code que vous entrez dans les réglages de l'Atom.
CSS / JS Personnalisés