Discourse Bars :bières: 🍸 (un framework de barre latérale)

[merefield (Robert)]

: eyeglasses: Vue d’ensemble

Un composant de thème qui vous permet de disposer des composants[^1] sur les barres supérieure et latérale.

• Spécifiez un ensemble de « widgets » distincts pour la route et la position.
• Prend en charge les configurations pour chacun de : découverte[^2], sujet, tag[^3], catégorie[^3], catégories[^3] OU intersection de tags[^4]
• Les « barres » peuvent être : supérieure, gauche, droite OU alternative droite.
• Chaque barre peut être réduite ou ignorée (actualisez le navigateur pour réinitialiser l’ignorance). Elles peuvent être minimisées par défaut.
• Gère la barre latérale officielle, mais si vous avez l’intention d’utiliser une barre latérale gauche, le mode déroulant de la barre latérale officielle est recommandé.
• Il est livré avec des paramètres d’exemple existants qui montrent de grandes lettres, en partie comme démonstration et en partie pour que vous puissiez voir des paramètres d’exemple. Supprimez-les et remplacez-les par vos propres noms de composants.
• Livré avec un composant : bars-custom-html (voir les paramètres d’exemple pré-remplis) - mais les composants de nombreux composants de thème et plugins existants sont compatibles.
• La prise en charge mobile n’est pas encore implémentée.

[^1] : Ce TC prend en charge les composants Glimmer qui doivent être « autonomes », c’est-à-dire qu’ils récupèrent leurs propres données (ils restent ainsi entièrement modulaires et peuvent être utilisés sur n’importe quelle route)

[^2] : le terme « découverte » (route) fait référence aux pages principales de la liste des sujets (par exemple, « Derniers », « Nouveaux ») qui vous permettent de parcourir les sujets disponibles avant de cliquer et de plonger dans un sujet spécifique.

[^3] : techniquement aussi une route « découverte », mais nous les séparons sous des noms distincts afin que vous puissiez les traiter différemment si vous le souhaitez.

[^4] : Voir le Plugin d’intersection de tags

: link: Liens rapides

: octopus: Obtenir le code	https://github.com/merefield/discourse-tc-bars
: eyes: Voir le code	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
: question: Guide d’installation	Installing a theme or theme component

Vous appréciez ce composant de thème ? Veuillez le : star: sur GitHub ! : pray:

Exemple gratuit :

Lors du premier chargement :

: warning: Quelques points importants à noter sur ce TC !

• Ce composant de thème est principalement destiné aux développeurs et administrateurs ayant une certaine compréhension technique du développement de thèmes. Si vous n’êtes pas suffisamment technique et avez besoin d’aide pour implémenter des barres latérales en utilisant Bars, vous pouvez m’embaucher ou embaucher un développeur sur Marketplace

• Ce composant de thème est destiné à fournir un cadre pour prendre en charge les barres latérales. Il ne fournit pas et n’est pas destiné à fournir une finition visuelle finale que vous devrez ajouter dans votre thème avec du CSS supplémentaire. Cependant, il fait beaucoup de travail pour vous et vous donne moins de choses à penser et vous donne peut-être même la capacité de faire des choses que vous ne pouviez pas faire auparavant… : sweat_smile:

Considérations sur les composants

• Vous devez spécifier un nom de composant. Le nom du composant est en fait le même que le nom du fichier dans le répertoire du thème, tc ou plugin component sans le suffixe.
• le nom du composant n’est pas le nom du composant de thème (qui pourrait contenir plusieurs composants Glimmer Ember), c’est le nom du fichier du composant Ember réel : sweat_smile: , donc par exemple :

donc layouts-tag-list

• Ils peuvent provenir d’un composant de thème ou d’un plugin existant. Les composants existants peuvent fonctionner. Exemples :
• 🏷️ Bars Tag List Component
• Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
• Discourse AI Topic Summary 🤖 … et peut-être même :
• Le widget Leaderboard : https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (faites-moi savoir si vous l’essayez ci-dessous !)
• Il faut une certaine expertise pour construire des composants
• Mais essayez de construire votre propre composant dans un autre composant de thème et assurez-vous qu’ils sont tous deux actifs dans le même thème.
• Les composants doivent sourcer leurs propres données (ils ne peuvent pas utiliser les modèles de passage de sortie de plugin malheureusement en raison des sorties de plugin spécifiques qui doivent être utilisées pour disposer les choses de cette manière)
• Prêt à l’emploi, vous ne pouvez utiliser que les données JSON API existantes de, par exemple, Discourse core ou celles fournies par un plugin existant. Si vous avez besoin de données sur mesure que vous ne pouvez pas obtenir des API actuelles, vous pouvez m’embaucher ou embaucher quelqu’un sur Marketplace pour vous aider.
• Vous devrez peut-être styliser la barre latérale et les limites des composants à votre goût. (encore une fois, si vous avez besoin d’aide, envisagez d’embaucher un développeur).
• L’utilisation stratégique des ombres portées et des bordures peut rendre les choses très jolies - soyez artistique !

Pourquoi

• Avec la mise à jour de Discourse core vers Ember 5, l’astuce utilisée par le plugin Layouts de Pavilion pour fournir un excellent moyen de manipuler la mise en page de Discourse a cessé de fonctionner. Il n’y avait plus de moyen simple d’afficher une barre latérale sur une route de sujet via une interface utilisateur relativement simple.

• De plus, Ember a introduit les composants Glimmer qui étaient beaucoup plus agréables à utiliser. (Layouts utilisait l’API Widgets qui est dépréciée au profit des composants Glimmer).

• Enfin, l’équipe principale de Discourse a fourni un nouvel éditeur JSON pour les paramètres des composants de thème, ce qui a rendu possible le déploiement d’un paramètre plus complexe

• Plutôt que de corriger le plugin Layouts (les TC n’existaient pas à l’époque de Layouts), il était logique de reconstruire en tant que composant de thème, car nous pouvons réaliser la plupart des choses dont nous avons besoin uniquement en front-end.

• Entrez “Bars” Santé !!

Problèmes connus

• La barre supérieure ne reste pas collée (je pourrais supprimer le paramètre correspondant si je ne parviens pas à le résoudre).

Crédits

• Successeur spirituel du Plugin Layouts maintenant cassé, construit par @angus (Merci !) qui nous a bien servi pendant de nombreuses années.
• Utilise le système de paramètres de Blocs de barre latérale droite (merci @pmusaraj !)

[^1] : le terme « découverte » (route) fait référence aux pages principales de la liste des sujets (par exemple, « Derniers », « Nouveaux ») qui vous permettent de parcourir les sujets disponibles avant de cliquer et de plonger dans un sujet spécifique.
[^2] : techniquement aussi une route « découverte », mais nous les séparons sous des noms distincts afin que vous puissiez les traiter différemment si vous le souhaitez.
[^3] : Voir ici pour plus de détails. Pour que cela reste facultatif (tous les installateurs de Bars ne voudront pas d’une page d’accueil personnalisée), Bars n’ajoute pas le modificateur requis dans about.json vous devez donc l’ajouter dans le thème parent ou un autre TC pour l’activer.

[Lilly (Lillian Louis)]

Woah, c’est génial ! Beau travail Robert. Merci d’avoir fait cela et de l’avoir rendu disponible !

Forké !

[thoka (Thomas Kalka)]

Je suis tout au début de l’apprentissage de l’ajout de widgets personnalisés, mais : j’aimerais avoir une option pour ajouter des widgets dans un pied de page non déroulant en vue mobile.
Serait-ce possible avec une future version de ce composant ?

[merefield (Robert)]

Aucun plan pour ajouter des « barres » supplémentaires à ce stade, mais peut-être une fois que les choses se seront calmées et que le TC sera clairement stable…

… les RP ou le parrainage sont toujours les bienvenus

[denvergeeks]

Cela semble génial - Merci ! Pourriez-vous s’il vous plaît fournir un exemple de ce à quoi ressemblent les paramètres pour inclure le widget de liste de tags dans l’une des barres latérales ?

Par exemple, d’après les instructions, cela semble fonctionner…

Mais la barre latérale gauche n’affiche toujours que le grand A…

[merefield (Robert)]

Deux choses :

Premièrement, voici des paramètres similaires de StarZen :

Le nom du composant est en fait le même que le nom du fichier dans le composant (je l’ajouterai à l’OP)

https://starzen.space

Deuxièmement, c’est vraiment idiot, mais vous devez appuyer sur Enregistrer et cliquer sur la coche après avoir appuyé sur Enregistrer.

C’est une double sauvegarde !

C’est la nature du thème actuel de cores, pas des barres. Je pourrais ajouter une note à ce sujet dans l’OP.

[denvergeeks]

@merefield

Deuxièmement, c’est vraiment bête, mais il faut appuyer sur Enregistrer et cocher la case après avoir appuyé sur Enregistrer.

C’est un double Enregistrement !

Oui, j’ai fait le double enregistrement

Pourtant, je dois manquer quelque chose car le résultat est le même. Y a-t-il autre chose que je puisse fournir pour aider ?

[merefield (Robert)]

Partagez votre JSON de paramètres (bouton en bas de TC).

[denvergeeks]

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Votre component_name est toujours incorrect, regardez mon exemple et vous voudrez peut-être supprimer le reste.

[denvergeeks]

Hmm… OK J’ai supprimé tout sauf le premier, et j’ai changé le nom pour qu’il corresponde au vôtre (même si le nom du composant provient de TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - où trouverais-je que le nom correct du composant est layouts-tag-list ?)

Cependant, changer le nom du composant dans la fenêtre modale ne semble pas le changer dans le JSON des paramètres, ni supprimer les autres éléments, même après une double sauvegarde…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Comme je l’ai expliqué ci-dessus (et que j’ai maintenant précisé dans le message initial), le nom du composant n’est pas le nom du composant de thème (qui pourrait contenir de nombreux composants Ember Glimmer), c’est le nom du composant Ember réel :

donc layouts-tag-list

C’est un malentendu utile, je clarifierai davantage dans le message initial, en utilisant cet exemple.

Je ne suis pas sûr pourquoi votre paramètre est persistant

Essayez de supprimer le composant de thème, de le rajouter et de suivre le même processus.

Ou actualisez simplement votre navigateur ?

[ckshen]

Merci pour le travail @merefield !

Fonctionnellement, en quoi Discourse Bars diffère-t-il des blocs de barre latérale droite avec HTML personnalisé, outre le fait que l’emplacement ne doit pas nécessairement être uniquement à droite ?

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[merefield (Robert)]

Bars est le successeur spirituel de Pavilions Layouts qui existait avant RSB.

Mais par rapport à RSB, le support multi-route et multi-position principalement (l’objectif de Bar est de reproduire l’utilité et la flexibilité de Layouts), l’ajout critique étant le support des routes de sujets. De plus, je ne prends pas en charge les params pour le moment… Je n’ai pas encore rencontré de cas d’utilisation. Je n’inclus également aucun composant à part les grandes lettres de démonstration - ceci est délibéré et est destiné à être davantage un framework d’administration/développeurs (tout comme Layouts l’était).

La feuille de route pourrait être plus ambitieuse aussi - si j’obtiens un financement, je pourrais ajouter la fonctionnalité mobile que Layouts avait - n’importe qui est libre de me contacter pour sponsoriser ce travail.

[denvergeeks]

OK, j’ai supprimé et réinstallé à la fois les barres TC et les listes de tags de mise en page TC (j’ai essayé de les supprimer et de les rajouter individuellement et ensemble), mais les résultats sont tous les mêmes. Et j’ai actualisé à chaque fois comme je l’avais fait auparavant. J’ai également vidé le cache de mon navigateur.

[merefield (Robert)]

Je ne parviens pas à reproduire votre problème de paramètres bloqués. Je viens d’ajouter et de supprimer une barre latérale gauche.

Je serais intéressé par d’autres rapports similaires.

[denvergeeks]

Merci pour le temps que vous avez passé à essayer — je vais l’essayer sur certaines de mes autres instances Discourse plus tard aujourd’hui et je vous ferai un nouveau rapport.

[denvergeeks]

J’ai également supprimé tous les plugins, reconstruit (et je n’ai aucun autre TC ou thème installé), et il s’agit d’une nouvelle installation d’hier soir.

Au cas où cela serait utile, j’ai découvert que, avec les mêmes paramètres que ci-dessus, alors que la barre latérale gauche n’apparaît nulle part ailleurs, elle s’affiche sur la route /latest (bien que seulement le titre “Tags”, sans afficher de tags.)

---

---

---

---

Et voici le JSON des paramètres…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Vous allez devoir déboguer cela vous-même - vérifiez votre console, le CSS du thème, etc.

Ça marche pour moi :

Je ne me souviens pas si Layouts Tag List nécessite des Groupes de Tags… peut-être !

[denvergeeks]

@merefield

Je ne me souviens pas si la liste des balises de mise en page nécessite des groupes de balises…

Oui, l’activation des groupes de balises dans les paramètres (puis la création de certains groupes de balises) a permis aux balises d’apparaître.

Cependant, la définition de la route pour l’élément de composant sur discovery n’affiche toujours que la barre de gauche sur les listes /latest, /new et /top.

Pourriez-vous avoir la gentillesse de m’indiquer une liste de toutes les « routes » disponibles pouvant être utilisées ici ?

Merci encore !