-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4017 from GeotrekCE/feat_add_menus_for_flat_pages
Add menus for flat pages
- Loading branch information
Showing
51 changed files
with
2,840 additions
and
2,499 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,152 @@ | ||
| =============== | ||
| Pages statiques | ||
| =============== | ||
| ======================= | ||
| Pages statiques & menus | ||
| ======================= | ||
|
|
||
| .. contents:: | ||
| :local: | ||
| :depth: 2 | ||
|
|
||
|
|
||
| .. danger:: | ||
| Depuis Geotrek-Rando V3, le composant Bootstrap n'est plus utilisé pour gérer les différentes tailles d'écran. Cela signifie que la mise en page créée dans Geotrek-Admin n'est pas reproduite sur le site public. Cette documentation n'est valable que pour Geotrek-Rando V2 en attendant sa mise à jour expliquant le fonctionnement actuel. Voir le ticket : https://github.com/GeotrekCE/Geotrek-rando-v3/issues/466 | ||
|
|
||
|
|
||
| Les pages statiques sont les pages d'information et de contextualisation de votre portail web Geotrek-rando. Comme pourraient l'être les premières pages d'un topo-guide papier. Elles peuvent aussi être consultées dans votre application Geotrek-mobile. | ||
|
|
||
| .. figure :: /images/user-manual/flatpages-gtecrins.jpg | ||
| Exemple de page statique (http://www.grand-tour-ecrins.fr/informations/le-grand-tour-des-ecrins/) | ||
| Elles permettent de fournir à l'internaute et futur randonneur des informations génériques : présentation de votre structure, votre projet de randonnée, recommandations, informations pratiques, etc. | ||
| Les pages statiques permettent de fournir à l’internaute et futur randonneur des informations génériques : présentation de votre structure, votre projet de randonnée, recommandations, informations pratiques, etc. | ||
|
|
||
| Elles sont gérées depuis le site d'administration de Geotrek-admin et sont ensuite publiées sur Geotrek-rando via l'API. | ||
|
|
||
| Du point de vue d'un portail de valorisation comme Geotrek-rando on parle des pages statiques par opposition aux pages « dynamiques » qui correspondent à la page de recherche avec ses filtres et la carte, ainsi qu'aux pages de détails des résultats. Ces pages ne sont pas conçues manuellement mais sont un assemblage de multiples sources de données effectué par le logiciel Geotrek. | ||
|
|
||
|
|
||
| Elles sont gérées depuis le module de configuration de Geotrek-admin et sont ensuite publiées sur Geotrek-rando à chaque synchronisation du contenu. | ||
| Pour rendre les pages statiques accessibles aux visiteurs Geotrek-admin permet de gérer les menus déroulants dans l'en-tête du portail. Les éléments du premier niveau sont toujours apparents (s'il y a assez d'espace d'affichage, ou dans un menu « Burger » sinon). Et il est possible de définir des éléments de menu dans un 2ème niveau, accessibles en déroulant les menus. | ||
|
|
||
| La section correspondante et le type d'entités s'appelle Élément Menu, dans cette documentation on pourra parler de menu pour signifier les éléments de menu si ça ne porte pas à confusion. | ||
|
|
||
| Les exemples de présentation visuelle des menus et des pages statiques décrivent la manière dont Geotrek-rando peut exploiter ces données et paramètrages. La présentation pourrait être différente si le portail n'est pas propulsé par Geotrek-rando. | ||
|
|
||
| .. image :: /images/user-manual/flatpages-adminsite.jpg | ||
| Créer une page statique | ||
| ======================== | ||
|
|
||
| Depuis le module de configuration de Geotrek-admin, sélectionnez "Pages statiques" dans la rubrique "Flatpages". | ||
| Le formulaire de création/modification d'une page statique contient les champs suivants : | ||
|
|
||
| - **Titre \*** | ||
| - Publiée | ||
| - Portails | ||
| - Sources | ||
| - Cover image | ||
| - Cover image author | ||
| - Contenu | ||
| - Position | ||
| - Relative à | ||
|
|
||
| Seul le champ Titre est obligatoire pour créer une page statique. | ||
|
|
||
| Les champs Titre, Publiée et Contenu peuvent recevoir une valeur différente pour chaque langue configurée. | ||
|
|
||
| *Titre* | ||
|
|
||
| Il s'agit du titre de votre page qui sera visible et mis en avant sur la page elle-même. Le titre sert également à générer l'adresse web de la page. | ||
|
|
||
| *Publiée* | ||
|
|
||
| Une page n'est visible sur le portail de valorisation que si elle a été publiée dans l'admin. On peut publier une page uniquement pour certaines langues. | ||
|
|
||
| *Portails* | ||
|
|
||
| Ce champ ne concerne que les pages qui ne sont pas ciblée par un menu. Permet de rendre la page visible sur certains portails pour y faire référence en-dehors des menus de navigation (dans le bas de page, dans le contenu d'une autre page, etc). | ||
|
|
||
| *Sources* | ||
|
|
||
| Permet d'attribuer une ou plusieurs sources au contenu de la page. Les sources peuvent être créées sur le site d'administration dans la section COMMUN ou directement avec le bouton + à côté de ce champ. | ||
|
|
||
| *Cover image* | ||
|
|
||
| Permet de saisir une image grand format qui sera affichée en mode bandeau en haut de la page. | ||
|
|
||
| *Contenu* | ||
|
|
||
| Le contenu de la page, sa mise en forme, les médias qui y sont insérés. Le contenu peut être traduit avec les valeurs spécifiques pour chaque langue configurée. | ||
|
|
||
| *Position* et *Relative à* | ||
|
|
||
| .. image :: /images/user-manual/flatpages-flatpages.png | ||
| Ces champs sont une alternative au glisser-déposer sur la liste des Pages Statiques et permettent de déplacer les pages dans l'arborescence (voir `Arborescence des pages statiques`_). | ||
|
|
||
| Vous accédez alors à la liste des pages statiques. | ||
| Cliquer sur "Ajouter Page statique" en haut à droite de l'écran pour créer une première page. | ||
| **Mise en forme et médias** | ||
|
|
||
| Construire une page statique | ||
| ============================ | ||
| Le champ contenu expose un éditeur de texte riche (TinyMCE) permettant d'ajouter de la mise en forme et des médias dans le contenu de la page. | ||
|
|
||
| Sélectionnez la langue du contenu que vous souhaitez saisir : en / fr / it... | ||
| - mise en forme du texte : titres, styles du texte, couleur du texte | ||
| - insertion de listes | ||
|
|
||
| Saisissez : | ||
| Médias : | ||
|
|
||
| * un titre (sans guillemets, parenthèses, etc.) | ||
| * un ordre optionnel (pour définir l'ordre d'apparition dans le menu de votre Geotrek-rando) | ||
| * cochez « publié » lorsque vous souhaiterez mettre en ligne votre page | ||
| * définissez la « source » (comprendre ici la destination d'affichage et donc votre Geotrek-rando) | ||
| * sélectionnez une cible (Geotrek-rando et/ou Geotrek-mobile ou cachée pour créer une page qui ne sera pas listée dans le menu). | ||
| - insérer une image | ||
| - insérer une vidéo YouTube | ||
| - insérer un lien vers une autre page | ||
|
|
||
| Attention, à chaque fois que cela vous est demandé, veillez à sélectionner la langue de votre contenu. | ||
| Publier une page | ||
| ================ | ||
|
|
||
| .. image :: /images/user-manual/flatpages-form.jpg | ||
| Une page créée n'est pas immédiatement visible sur un portail. Il faut d'abord la marquer comme Publiée pour chacune des langues souhaitées. Il faut ensuite lui donner un moyen d'être visitée sur le site portail. Plusieurs options : | ||
|
|
||
| L'interface permet de construire sa page en responsive design, c'est-à-dire qu'il est possible de disposer les blocs de contenu pour s'adapter aux différentes tailles d'écrans des utilisateurs. | ||
| - faire figurer un lien vers la page dans les menus déroulants (voir `Arborescence de menus`_) | ||
| - placer la page dans l'arborescence des pages (voir `Arborescence des pages statiques`_) | ||
| - placer un lien direct dans une autre section du site : dans une page d'accueil personnalisée, dans un bas de page, etc. | ||
|
|
||
| .. image :: /images/user-manual/flatpages-bootstrap-responsive.jpg | ||
| Arborescence de menus | ||
| ===================== | ||
|
|
||
| Choisissez le gabarit sur lequel vous souhaitez construire votre page : 12 / 6-6 / 4-4-4 / etc. Ce sont des formats prédéfinis d'assemblage de blocs basés sur 12 colonnes qui occupent 100% de la largeur de l'écran (Bootstrap). | ||
| La page liste des Éléments Menus indique la structure arborescente qui sous-tend les menus déroulants tels qu'ils apparaîtront sur le portail. | ||
|
|
||
| .. image :: /images/user-manual/flatpages-bootstrap-grids.jpg | ||
| .. note:: | ||
|
|
||
| Vous pouvez aussi utiliser ou vous inspirer des 2 gabarits d'exemple (Gabarit 1 et Gabarit 2). | ||
| Un portail de type Geotrek Rando ne peut afficher que 2 niveaux de menus ! | ||
|
|
||
| .. image :: /images/user-manual/flatpages-blocks.jpg | ||
| Chaque élément de menu a les champs suivants : | ||
|
|
||
| Vous pouvez ajouter autant de gabarits que vous le souhaitez sur une seule page. | ||
| - *Titre* | ||
| - *Publié* | ||
| - *Portails* | ||
| - *Type de cible* | ||
| - [Si type de cible est "page"] la *page* cible | ||
| - [Si type de cible est "lien"] l'*URL du lien* (par langue) et checkbox *Ouvrir dans un nouvel onglet* | ||
| - *Position* et *Relative à* | ||
|
|
||
| Une fois que vous avez ajusté vos blocs de contenu pour un affichage sur ordinateur (Desktop), vous devez basculer sur l'affichage sur mobile (Phone) pour l'adapter à de plus petits écrans (en cliquant sur les + et - bleus de chaque bloc). Privilégiez alors des blocs sur une colonne faisant 100% de large. | ||
| Chaque Élément Menu peut avoir une cible ou non. S'il a une cible le clic sur le menu y accédera. Il y a trois possibilités de cibles : | ||
|
|
||
| .. image :: /images/user-manual/flatpages-blocks-edit.jpg | ||
| - une page statique Geotrek, avec le type de cible = "page" | ||
| - avec le type de cible = "lien" : | ||
| + une page web externe sur un autre site web, par exemple "https://fr.wikipedia.org/wiki/Randonnée". Auquel cas une bonne pratique web est d'ouvrir un nouvel onglet (checkbox cochée) | ||
| + une page web interne au portail, typiquement une recherche pré-enregistrée, par exemple "/search?practices=4&difficulty=2&duration=1". Auquel cas une bonne pratique est de rester sur le même onglet (checkbox non-cochée) | ||
|
|
||
| Ajouter du contenu dans un bloc | ||
| =============================== | ||
| Le champ *Plateforme* permet de différencier des menus destinés uniquement à un portail web ou uniquement à une app Geotrek Mobile. Cette possibilité de paramètrage sera bientôt supprimée. | ||
|
|
||
| En cliquant dans la zone de texte, une barre d'édition apparaît. Sur un format classique comme dans les logiciels de traitement texte, plusieurs menus et outils sont alors disponibles : | ||
| Arborescence des pages statiques | ||
| ================================ | ||
|
|
||
| * File : (fichier) | ||
| * Edit : retour, copier-coller, | ||
| * Insert : Insérer une image, un lien, des caractères spéciaux | ||
| Les pages statiques sont organisées dans une structure arborescente, une page statique peut avoir des pages enfants et une unique page parente. L'arborescence des pages statiques permet d'organiser le contenu statique d'un portail d'une manière intelligible pour les visiteurs du site. | ||
|
|
||
| .. image :: /images/user-manual/flatpages-wysiwyg.jpg | ||
| Les pages enfants sont accessibles depuis une page parente dans Geotrek-rando. | ||
|
|
||
| Insérer une image : cela ouvre une nouvelle fenêtre avec différents champs à remplir : | ||
| Compatibilité de contenu créé avec l'ancien éditeur | ||
| ==================================================== | ||
|
|
||
| * Source : insérer l'URL de l'image (idéalement dans le répertoire /custom/public/images/ de votre Geotrek-rando) | ||
| * Image description : légender l'image pour optimiser son référencement | ||
| * Dimensions : ajuster le format et cocher « Constrain proportions » | ||
| L'ancien éditeur de contenu des pages statiques (éditeur de grille avec Bootstrap) a été supprimé avec la déprécation de Geotrek-rando-v2. | ||
|
|
||
| Insérer un lien : cela ouvre une nouvelle fenêtre avec différents champs à remplir : | ||
| Les pages statiques créées avec l'ancienne version de l'éditeur continueront de fonctionner sans changement sur le portail Geotrek-rando v3. Cependant il se peut que le balisage du contenu créé par l'ancien éditeur doive être retiré pour pouvoir utiliser à nouveau les styles et outils de mise en forme. | ||
|
|
||
| * URL : lien de destination | ||
| * Title : texte à afficher pour le lien | ||
| * Target : « New window » si vous souhaitez que le lien s'ouvre dans un nouvel onglet | ||
| Comment procéder ? | ||
|
|
||
| - View : « Show blocks » permet de faire apparaître les différents paragraphes de votre texte. Elles sont utiles à la structure de votre texte. | ||
| - Format : gras, italique, souligner, etc. Le sous-menu « Formats » permet de choisir un style prédéfini pour les titres (Heading 1, Heading 2, etc.). Pour que le style s'applique uniquement au titre et non pas à tout le texte, faire un retour à la ligne et vérifier sa prise en compte en activant « Shox blocks ». | ||
| - Table : insertion de tableau | ||
| - Tools : Afficher le code source de la page | ||
| - par précaution faire une copie du contenu, en incluant toutes les informations (URLs des images, etc) | ||
| - utiliser l'outil *code* ( ``< >`` ) pour obtenir une copie du contenu incluant les balises HTML | ||
| - retirer toutes les balises grâce à un outil en ligne (voir ci-dessous) | ||
| - remplacer l'ancien code avec le contenu nettoyé dans la fenêtre de l'outil *code*, valider | ||
| - refaire la mise en forme | ||
|
|
||
| Astuces | ||
| ======== | ||
| Il existe beaucoup de service web pour nettoyer un contenu de ses balises HTML. Voici les deux premiers résultats provenant d'un moteur de recherche : | ||
|
|
||
| 1. Ne jamais utiliser la touche retour du clavier [ ? ] sans avoir le curseur sélectionné dans une zone de texte. Cela équivaut à revenir à la page précédente et vous perdrez tout votre contenu sans le sauvegarder. | ||
| 2. Pour reproduire une page dans une langue différente : copier le Code Source et coller-le Code Source de votre nouvelle langue. Vous n'aurez plus qu'à traduire votre texte ! Idem pour traduire un contenu dans une autre langue. | ||
| 3. Si deux de vos pages ont le même numéro d'ordre d'apparition, une seule des deux sera affichée sur la plate-forme numérique. | ||
| - https://striphtml.com/ | ||
| - https://www.w3docs.com/tools/string-remove-tags |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.