Pied de page réactif simple

[Discourse]

	Résumé	Easy Responsive Footer vous permet de créer un pied de page entièrement réactif en utilisant uniquement du texte brut.
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien vers le dépôt	https://github.com/discourse/Discourse-easy-footer
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Étant donné qu’il s’agit d’un #composant de thème officiel maintenu par l’équipe Discourse, les demandes de Support, de Contribute > Bug, de Contribute > UX et de Contribute > Feature peuvent être formulées dans les catégories respectives ici sur Meta, et étiquetées avec la balise de composant de thème appropriée. Cliquez sur un lien ci-dessous pour en démarrer un.

 Support  Bug  UX  Fonctionnalité

Fonctionnalités

Bureau

Mobile

Paramètres

Nom	Description
heading	Texte pour le titre du pied de page – vous pouvez utiliser le nom de votre site par exemple – Longueur maximale : 25 caractères
blurb	Saisissez un court résumé sur votre communauté – Longueur maximale : 180 caractères
sections	Sections à afficher dans le pied de page
small links	Liens petits en bas du pied de page comme Conditions d’utilisation et Confidentialité
social links	Liens sociaux que vous souhaitez ajouter au pied de page
show footer on login required page	Cochez ce paramètre si vous souhaitez que le pied de page soit affiché sur la page nécessitant une connexion (s’applique uniquement si votre site est privé)
svg icons	Liste des icônes FontAwesome 7 utilisées dans le paramètre de liens sociaux ci-dessus.

Ce composant comprend six paramètres qui facilitent sa configuration.

1. Titre

Texte pour le titre du pied de page – vous pouvez utiliser le nom de votre site par exemple – Longueur maximale : 25 caractères

2. Résumé

Un court résumé sur votre communauté – Longueur maximale : 180 caractères

3. Sections de liens

Ajoutez des sections de liens. Le nombre idéal de sections est de six. Un élément par ligne dans cet ordre : Texte, titre
Texte : ce qui apparaît dans le pied de page
Titre : le texte qui apparaît lorsque l’élément survolé.

4. Liens

Ajoutez des liens aux sections de liens. Un élément par ligne dans cet ordre :
Parent, texte, URL, cible, titre
Il est conseillé de garder un nombre de liens similaire sous chaque section
Parent : le nom de la section parente sous laquelle ce lien s’affiche. Utilisez la valeur texte de la liste ci-dessus
Texte : le texte qui s’affiche pour ce lien
URL : le chemin vers lequel cet élément pointe. Vous pouvez également utiliser des chemins relatifs.
Cible : Choisissez si cet élément s’ouvrira dans un nouvel onglet ou dans le même onglet. Utilisez blank pour ouvrir le lien dans un nouvel onglet, ou self pour l’ouvrir dans le même onglet.
Titre : le texte qui s’affiche lorsque le lien est survolé.

5. Liens petits

Vous pouvez ajouter de petits liens en bas du pied de page, comme Conditions d’utilisation et Confidentialité. Un élément par ligne dans cet ordre :
Texte, URL, cible
Texte : Le texte qui s’affiche pour le petit lien
URL : Le chemin du lien
Cible : Utilisez blank pour ouvrir le lien dans un nouvel onglet et self pour l’ouvrir dans le même onglet

6. Liens sociaux

Saisissez les liens sociaux que vous souhaitez ajouter au pied de page dans ce format :
fournisseur, titre, URL, cible
Fournisseur : le nom du fournisseur, comme Facebook ou Twitter
Titre : Le texte qui s’affiche lorsque le lien est survolé
URL : Le chemin que vous souhaitez attribuer au lien
Cible : Utilisez blank pour ouvrir le lien dans un nouvel onglet et self pour l’ouvrir dans le même onglet

Remarques

1. J’ai laissé les éléments de remplacement par défaut pour le composant afin que vous puissiez facilement voir à quoi vos paramètres doivent ressembler.

2. Ce composant utilisera la palette de couleurs de votre thème pour générer les couleurs utilisées pour les éléments qui le composent. Cependant, tous les éléments disposent de classes uniques qui leur sont ajoutées au cas où vous souhaiteriez remplacer quelque chose.

3. Étant donné que ce composant utilise les paramètres du thème, cela signifie que je pourrai le mettre à jour à l’avenir pour le corriger ou l’améliorer, et les données que vous saisissez ne seront pas perdues

Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos offres Pro, Business et Enterprise.

[Johani (Joe)]

J’ai poussé quelques correctifs.

Changements clés :

• le composant utilise désormais des variables CSS, il est donc compatible avec le mode sombre

• quelques corrections des requêtes média pour résoudre le bug signalé par @mbauman

• ajout d’un paramètre vous permettant de contrôler l’affichage ou non du pied de page sur les pages nécessitant une connexion

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

J’ai élargi mon .wrap (1200px) avec des requêtes média afin que, au-delà d’une certaine résolution, le forum soit plus large. Si j’active le pied de page réactif, le .wrap devient plus étroit (1100px), mais uniquement pour la « partie tableau », et non pour .d-header .wrap ni pour .footer, qui restent à (1200px). Dès que je désactive le pied de page réactif, tout redevient plus large (1200px) comme prévu.

La cause ici est la spécificité CSS. Votre CSS cible .wrap, ce qui fonctionne, mais ce composant possède également du CSS qui cible #main-outlet et lui ajoute certaines propriétés pour maintenir le pied de page en bas, même sur les pages courtes.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

Le sélecteur #main-outlet est plus spécifique que votre sélecteur .wrap — car il est basé sur un ID —, il écrase donc vos styles.

Vous pouvez corriger cela en ajoutant ce CSS :

#main {
  #main-outlet {
    width: 1200px; // ou la largeur que vous souhaitez utiliser
  }
}

@Edward_Legaspi

Bonjour. Existe-t-il un moyen de limiter le nombre de colonnes du pied de page à 3 ?

Bien sûr, supprimez toutes les colonnes supplémentaires dont vous n’avez pas besoin dans les paramètres, et vous obtiendrez trois colonnes.

@PoojaPatel

Après la mise à jour, une erreur apparaît dans la console Chrome comme ci-dessous.

Je ne parviens pas à reproduire ce problème, mais l’erreur suggère que vos paramètres sont incorrects. Pouvez-vous vérifier à nouveau et vous assurer d’avoir suivi les instructions sous chaque paramètre ? Si votre problème persiste, pouvez-vous partager un lien vers le site où vous rencontrez le problème ?

---

J’ai fait un peu de nettoyage et supprimé les réponses concernant les bugs qui seront corrigés dès que vous mettrez à jour le composant. Si votre problème persiste, n’hésitez pas à en reparler.

[dadberg (Interstellar)]

Je me demande si le texte d’en-tête (This is a header) dans [Easy Footer Theme Component par Joe] peut être remplacé par un logo.

J’ai essayé d’exporter le composant pour modifier les fichiers hbs, mais sans succès. Je pense que j’ai besoin de quelques indices.

Toute idée est la bienvenue

[dax (Daniela)]

Selon ce que vous souhaitez faire, vous pouvez simplement essayer ceci :

• dans les paramètres du thème Easy responsive footer, supprimez le texte à l’intérieur du paramètre Blurb. Si vous le souhaitez, vous pouvez même supprimer le texte à l’intérieur du paramètre Heading.

• créez un nouveau composant de thème et ajoutez dans l’onglet Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /* change the settings below based on the size of your logo */
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

et le résultat sera quelque chose comme ceci :

[dadberg (Interstellar)]

Résolu !

Ma foi dans l’écosystème open source a été initialement renforcée par de grandes personnes comme vous.

[Jcava5 (John)]

Il devrait y avoir une option pour personnaliser les couleurs de l’arrière-plan et du texte avec CSS. Par défaut, cela ne correspond pas à l’en-tête.

Sinon, cela fonctionne très bien ! Merci !

[thaidb]

Bonjour Joe, pouvons-nous ajouter un autre widget ici ?

[b481]

Cela a entraîné l’apparition du logo dans le pseudo-élément blurb:before des résultats de recherche, même après que j’ai spécifié cela dans le composant

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Existe-t-il un moyen de s’assurer qu’il n’apparaît pas dans les résultats de recherche, tout en restant visible dans le pied de page ?

[littleviolette]

Merci pour ce super pied de page ! J’ai rencontré un problème pour afficher le logo TikTok de Font Awesome. J’ai essayé d’ajouter fab-tiktok, fa-tiktok, fas-tiktok et tiktok dans les paramètres des icônes SVG, mais aucun ne permet d’afficher le logo TikTok.

Merci pour votre aide !

[bekircem]

Je souhaite modifier la limite de 25 caractères pour le titre. Je vais afficher le titre avec du CSS. Quelle est la méthode la plus simple pour le faire ?

[keegan (Keegan George)]

@bekircem
Dépasser la limite de caractères peut causer certains problèmes, mais vous pouvez essayer ceci :

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "Ceci est quelque chose de plus long que 25 caractères";
   visibility: visible;
   display: block;
}

Cependant, l’utilisation de visibility: hidden conserve toujours les espaces blancs. Selon la taille de votre titre, vous pouvez plutôt essayer ceci :

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "Ceci est quelque chose de plus long que 25 caractères";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

Est-il possible d’ajouter du texte dans des sections de lien sans attribut href ?

[IAmGav (Gavin Perch)]

Il suffit d’ajouter un # à l’endroit où se trouve l’URL.

[bekircem]

Dans ce cas, l’URL apparaît toujours comme cliquable. Existe-t-il un moyen de l’ajouter sans utiliser la balise ?

[Johani (Joe)]

@bekircem

Y a-t-il un moyen d’ajouter sans obtenir la balise a ?

Vous pouvez ajouter ce CSS à votre thème quelque part

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

J’ai soumis ceci :

Fix: add pluginId to modifyClass

Cela devrait corriger une dépréciation avec un pluginId manquant. Je ne l’ai pas testé , mais cela me semble correct.

EDIT : Mais ce n’est pas du tout correct.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Si j’ajoute ce qui suit… « Community, Tags List, /tags, self, List of all Tags »… une ligne horizontale s’affiche sur le frontend. Si je supprime l’espace entre « Tags List » et que je le change en « TagsList », la ligne horizontale disparaît.

[mkschulze (M. Schulze)]

Bonjour, j’ai deux problèmes avec les liens sociaux et les icônes Fontawesome.

1. J’essaie de configurer d’autres icônes Fontawesome 5 dans la zone Social, mais elles n’apparaissent pas.
   Je veux <i class="fad fa-home"></i>

2. J’ai configuré le lien GitHub et il affiche déjà l’icône sur la page, bien que je n’aie pas réellement ajouté l’icône dans la liste des icônes svg.

EDIT : J’ai résolu le problème en utilisant simplement le nom de l’icône “home”

[AquaL1te]

Lorsque j’utilise ce composant de thème sur mon téléphone, la largeur n’est pas définie sur la largeur de l’écran. La largeur s’étend, presque à la taille d’un moniteur de bureau.

Les tests peuvent être effectués ici : https://forum.tzm.community/

Assurez-vous de l’ouvrir sur un téléphone (ou utilisez l’option de débogage dans votre navigateur, dans Firefox, vous pouvez déclencher le bug en utilisant le profil Linux Galaxy Note 20).

[dax (Daniela)]

Le composant a été corrigé. Vous devez le mettre à jour.