Utilisation de la nouvelle fonctionnalité de page d'accueil personnalisée

[manuel (Manuel Kostka)]

Essai de la nouvelle fonctionnalité de page d’accueil personnalisée : https://github.com/discourse/discourse/pull/26291

@pmusaraj Je me demande quelle est la meilleure approche pour ajouter des composants ?

1. L’ajout du modificateur custom-homepage active la route discovery.custom et affiche une alerte d’information par défaut, rendue dans l’outlet custom-homepage :

   

2. J’ajoute un composant à l’outlet et il est rendu à la place :

   
   

3. Cependant, lorsque j’ajoute plus d’un composant, j’obtiens une erreur :

   
   

4. Je peux cependant ajouter d’autres composants à d’autres outlets. Voici une vue avec les outlets de plugins visibles :

   
   

Je me demande donc comment le nouvel outlet devrait fonctionner :

• D’une certaine manière, je n’aurais pas besoin de l’outlet. Je peux simplement utiliser les autres disponibles et limiter les composants à la route discovery.custom.
• Bien qu’il semble que je doive placer au moins un composant sur l’outlet, sinon l’alerte par défaut est rendue ? Placer un template vide ne fonctionne pas.
• D’un autre côté, si je pouvais ajouter plusieurs composants à l’outlet, je n’aurais pas besoin de logique de route du tout. Les composants n’apparaîtraient sur la page d’accueil que parce que l’outlet ne serait pas disponible sur d’autres routes ?

[merefield (Robert)]

@manuel

Cependant, lorsque j’ajoute plus d’un composant, j’obtiens une erreur :

Ce n’est pas surprenant ?

Mettez un seul fichier de modèle ici et utilisez-le pour référencer vos composants dans le dossier Composants (dont vous pouvez alors en avoir plusieurs)

<MonPremierComposant />
<MonDeuxiemeComposant />
<MonTroisiemeComposant />

Ou tout ce que vous voulez… restez-en à un seul modèle dans ce dossier ?

[manuel (Manuel Kostka)]

@merefield

Ce n’est pas surprenant ?

Je pensais que c’était parce que cela fonctionnait avec d’autres points de vente ? Comme dans la capture d’écran ci-dessus…

[merefield (Robert)]

Oh désolé, vous avez raison, il semble légal sur les Outlets (généralement) de publier plus d’un fichier de modèle dans un seul composant de thème (j’étais conscient qu’il gérait les conflits entre les composants de thème et les plugins, donc ils ont tous la possibilité de s’afficher). Curieux.

Je suppose cependant : pourquoi voudriez-vous faire cela ? Vous aurez moins de contrôle sur la mise en page ?

Un modèle vous oblige-t-il à composer l’intégralité de la mise en page en une seule fois avec autant de sous-composants que vous le souhaitez ?

Le comportement semble cependant incohérent…

[manuel (Manuel Kostka)]

Si je construisais une page d’accueil personnalisée, je voudrais pouvoir y afficher plusieurs composants existants. Et comme mentionné, cela fonctionne déjà lorsque l’on utilise d’autres points de sortie disponibles et que l’on limite les composants à la route de la page d’accueil personnalisée.

Si je ne peux ajouter qu’un seul composant au point de sortie de page d’accueil personnalisé particulier, et que je dois également en ajouter un pour désactiver le rendu par défaut, cela restreint en fait mon contrôle sur la mise en page.

[merefield (Robert)]

Mais pourquoi ne pouvez-vous pas référencer tous ces composants dans un seul modèle ?

Oh parce qu’ils proviennent de différents composants de thème ?

Je pense que nous nous sommes mal compris.

Quand je dis de mettre tous vos composants (Ember) dans le dossier Composants, je veux dire exactement cela, mais dans un seul composant de thème.

Je pense que l’essentiel est simplement : « pourquoi cette sortie se comporte-t-elle différemment ? » Je comprends que vous essayez de combiner différents composants de thème.

[manuel (Manuel Kostka)]

@merefield

Oh parce qu’ils viennent de différents composants de thème ?

Oui, c’est l’idée. J’ai juste utilisé les modèles de texte brut ci-dessus à titre d’illustration. Par exemple, j’utilise Featured Lists. Et je peux le rendre sur la sortie avec ces paramètres :

Mais quand je veux en rendre un autre de la même manière, j’obtiens l’erreur du connecteur multiple.

@merefield

Je pense que le nœud du problème est simplement : « pourquoi cette sortie se comporte-t-elle différemment ? »

[pmusaraj (Penar Musaraj)]

Merci d’avoir testé ceci @manuel et pour vos questions.

@merefield

Je pense que le cœur du problème est simplement : « pourquoi cette sortie se comporte-t-elle différemment ? »

Je ne connaissais pas non plus la réponse, mais j’ai cherché et j’ai compris à peu près pourquoi. Nous avons récemment introduit une distinction entre les sorties de plugins classiques et les sorties de plugins enveloppants, dans ce PR de l’année dernière : DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub

Les sorties de plugins enveloppants sont celles qui n’autorisent qu’un seul connecteur, les autres en autorisent plusieurs. Pour illustrer, le code actuel de la sortie de plugin principal est le suivant :

<PluginOutlet @name="custom-homepage">
  {{#if this.currentUser.admin}}
    <p class="alert alert-info">
      {{i18n "custom_homepage.admin_message"}}
    </p>
  {{/if}}
</PluginOutlet>

et il n’autorise qu’un seul connecteur. Mais si je change le code de la sortie principale pour :

<PluginOutlet @name="custom-homepage" />

Il autorisera plusieurs modèles de connecteurs sans problème. Nous pourrions apporter cette modification dans le cœur pour cette sortie particulière, mais cette différence est plus générale. Cela semble un peu opaque pour les développeurs, cependant, je vois votre point de vue.

Notez également que plusieurs connecteurs ont un problème d’ordre, à ma connaissance, nous n’avons pas de mécanisme pour décider de l’ordre.

Je pense que la meilleure approche ici, quoi qu’il en soit, est ce que @merefield a suggéré : utiliser un modèle et y référencer des composants Ember.

@manuel

Bien qu’il semble que je doive placer au moins un composant sur la sortie, sinon l’alerte par défaut est rendue ?

L’alerte par défaut n’est affichée qu’aux administrateurs, pour information.

[manuel (Manuel Kostka)]

Merci pour les explications !

En jouant davantage avec cela… c’est vraiment nouveau et un plaisir à utiliser !

J’ai utilisé trois composants existants pour cette mise en page et c’est ce à quoi je m’attendrais comme approche courante lors de la création d’une page d’accueil personnalisée. Je n’ai pu en ajouter qu’un seul à l’outlet du wrapper, c’est pourquoi je pense qu’avoir un outlet simple ici serait plus utile.

[manuel (Manuel Kostka)]

Une autre observation : j’ai mis un lien dans la barre latérale en utilisant l’URL /custom :

Il n’est pas mis en surbrillance lorsqu’on est sur la route personnalisée.

Si je comprends bien la logique des mises en surbrillance de la barre latérale, il devrait également être mis en surbrillance lorsqu’on est sur l’URL racine /.

[pmusaraj (Penar Musaraj)]

Je vois votre problème plus clairement après avoir jeté un coup d’œil rapide au composant Featured Lists. Une option consiste à refactoriser ce composant et à lui faire générer toutes les listes dans un seul composant Ember. Ensuite, vous pourriez ajouter ce composant à un outlet d’enveloppement de plugin.

Une autre option consiste à ajouter un deuxième outlet de plugin au modèle de page d’accueil personnalisé, quelque chose comme <PluginOutlet @name="below-custom-homepage"/>.

Je m’accroche peut-être à cet outlet custom-homepage avec un message pour les administrateurs sans grande raison, pour être honnête. Cet avertissement n’est pas si utile…

@manuel

Il n’est pas mis en surbrillance lorsqu’il est sur la route personnalisée.

Oui, cela peut être délicat. Dans mon test local tout à l’heure, /custom ne fonctionne pas correctement. Il est préférable d’utiliser /, qui route correctement. Mais il ne met toujours pas en surbrillance.

[manuel (Manuel Kostka)]

@pmusaraj

Oui, cela peut être délicat. Dans mon test local tout à l’heure, /custom ne fonctionne pas correctement. Il est préférable d’utiliser /, qui route correctement. Mais cela ne met toujours pas en surbrillance.

Cela semble être un problème courant. Si j’utilise /, cela ne met pas non plus en surbrillance d’autres routes définies comme page d’accueil.

@pmusaraj

Je m’accroche peut-être à cette sortie custom-homepage avec un message pour les administrateurs sans trop de bonnes raisons, pour être honnête. Cet avertissement n’est pas si utile…

Oui, je pourrais aussi imaginer que l’avertissement soit simplement affiché différemment. Le principal avantage des sorties wrapper semble être que je peux conditionnellement céder du code principal ou en rendre un personnalisé. Mais ce ne serait probablement jamais le cas pour ce message d’information.

@pmusaraj

Je vois mieux votre problème après avoir jeté un coup d’œil rapide au composant Featured Lists . Une option consiste à refactoriser ce composant et à lui faire générer toutes les listes dans un seul composant Ember. Ensuite, vous pourriez ajouter ce composant à une sortie wrapper de plugin.

Il doit y avoir un malentendu. Le composant enveloppe déjà toutes les listes dans un composant enveloppant et le rend sur n’importe quelle sortie donnée :

Je peux donc ajouter le composant sans problème à la sortie wrapper actuelle sur la page d’accueil personnalisée.
Ce que je ne peux pas faire, c’est utiliser cette sortie pour rendre plus d’un composant autonome sur la page d’accueil personnalisée. Des composants que j’aurais installés en tant que composants de thème, comme ces trois-là :

Mon hypothèse est que l’utilisation de plusieurs composants de thème autonomes pour construire une page d’accueil personnalisée serait l’approche courante. Plutôt que de tout construire à partir de zéro dans un seul thème.

@pmusaraj

Une autre option consiste à ajouter une deuxième sortie de plugin au modèle de page d’accueil personnalisée, quelque chose comme <PluginOutlet @name="below-custom-homepage" />.

Si vous envisagez d’ajouter une autre sortie ou de modifier la configuration de la sortie, je pourrais vous donner plus de commentaires sur mon utilisation jusqu’à présent. Bien que j’enveloppe ce terrier de lapin dans des détails

J’ai donc réalisé que la sortie est rendue dans l’élément main-outlet. La structure globale de ces éléments est alors :

• wrapper main-outlet
  • sidebar-wrapper
  • main-outlet
    • sortie custom-homepage

En tant que designer, je ne suis pas si flexible pour organiser les éléments sur une page d’accueil personnalisée en utilisant cette sortie. Pour le design partagé ci-dessus, j’ai plutôt utilisé la sortie before-main-outlet, non seulement parce que je peux y placer plus d’un composant, mais aussi parce qu’elle n’imbrique pas les composants dans l’élément main-outlet.
La structure telle que partagée sur la capture d’écran ci-dessus ressemble à ceci :

• wrapper main-outlet
  • sidebar-wrapper
  • composant : bannière de recherche
  • composant : sujets en vedette
  • composant : listes en vedette
  • main-outlet

L’avantage est que je peux organiser les éléments sur toute la largeur du wrapper main-outlet et pas seulement dans l’élément main-outlet. Pour illustrer le propos, si je rendais l’un des composants sur la sortie actuelle custom-homepage, il serait rendu imbriqué dans l’élément main-outlet comme ceci :

La plus grande flexibilité pour les conceptions personnalisées, à mon avis, serait offerte par une sortie de plugin placée

• en tant qu’enfant direct du wrapper main-outlet (similaire à la sortie before-main-outlet)
• dans un div enveloppant

Ce div enveloppant regrouperait tous les composants qui y sont ajoutés et permettrait un tri facile. Une telle structure ressemblerait alors à ceci :

• wrapper main-outlet
  • sidebar-wrapper
  • custom-homepage-wrapper
    • composant : bannière de recherche
    • composant : sujets en vedette
    • composant : listes en vedette
  • main-outlet

Voilà donc mon retour en tant que designer. Je suppose que c’est à vous de décider dans quelle mesure cela correspond à ce que vous considéreriez comme une application courante de la fonctionnalité de page d’accueil personnalisée.

[merefield (Robert)]

On présume que cette page est « superficielle » dans le sens où elle apparaîtra pour l’utilisateur mais pas pour « Googlebot » et ne sera donc pas indexée ?

[pmusaraj (Penar Musaraj)]

Correct, oui, pour la vue du crawler, j’ai choisi de n’afficher que le menu supérieur. Je ne peux pas vraiment savoir à partir de l’application Rails ce qu’un thème affichera sur cette route.

@manuel

Si vous envisagez d’ajouter une autre sortie ou de modifier la configuration de la sortie, je pourrais vous donner plus de commentaires sur mon utilisation jusqu’à présent.

Je réfléchis aux suggestions ici @manuel, je prendrai bientôt le temps de tester quelques changements. Merci de votre patience.

[merefield (Robert)]

J’ai ajouté la prise en charge de cette fonctionnalité dans Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield

[manuel (Manuel Kostka)]

Un problème que j’ai rencontré : je voulais afficher le composant Homepage Feature sur la page d’accueil personnalisée. Mais ensuite, les sujets ne sont pas filtrés sur cet itinéraire. Le composant affiche simplement n’importe quel sujet récent qui a une image.

Le code du composant est :

    const topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: {
        tags: [`${settings.featured_tag}`],
        order: sortOrder,
      }

Et il semble que les paramètres ne soient pas appliqués sur la page d’accueil personnalisée. Cela fonctionne bien par ailleurs. Je ne suis pas sûr de la raison pour laquelle cela se produit ?

Modification : J’utilise la même méthode sur le composant Featured Lists. Lorsque j’utilise ce composant sur la page d’accueil personnalisée, le filtre n’est pas non plus appliqué. Mais seulement sur la première liste… quand il y en a plus, les listes suivantes sont toutes correctement filtrées.

[pmusaraj (Penar Musaraj)]

Intéressant, je ne suis pas sûr de la raison, peut-être y a-t-il une logique dans le store topicList qui est liée aux routes de découverte ? La page d’accueil personnalisée n’est pas une route de découverte.

Je suis curieux, est-ce que ce même composant avec les paramètres fonctionne bien dans une route d’administration, par exemple ? Ou une route de profil utilisateur ? Auriez-vous une chance de vérifier ?

@tynaut a rencontré un problème similaire, il y a donc probablement quelque chose à régler ici.

[manuel (Manuel Kostka)]

J’ai essayé avec le composant Featured Lists, il a déjà un réglage pour afficher le composant partout. Cela n’inclut pas les routes d’administration, mais j’ai essayé sur toutes les autres (pages statiques, profils utilisateur, ..) et cela semble fonctionner partout sauf sur la page d’accueil personnalisée.

L’autre chose étrange est, comme mentionné, qu’il ne filtre que la première liste. Par exemple, ici, je filtre deux listes, une pour la balise “featured”, une pour la catégorie “General”, et c’est ainsi que les listes s’affichent sur toutes les autres routes :

Juste sur la route de la page d’accueil personnalisée, elles s’affichent comme ceci :

Donc, la première liste ne filtre plus pour la balise, mais la deuxième liste filtre pour la catégorie. Et lorsque je change l’ordre des listes, la première liste ne filtre pas pour la catégorie, mais la deuxième filtre pour la balise :

[pmusaraj (Penar Musaraj)]

J’ai trouvé un peu difficile de reproduire cela correctement avec le composant Featured Homepage, il mélange trop d’autres conditions.

Je peux facilement reproduire avec un composant simplifié cependant. Je l’ai poussé dans un dépôt d’exemple ici : GitHub - pmusaraj/discourse-sample-custom-homepage

Le composant sample-list là-bas devrait ne récupérer que les sujets avec le tag featured, mais ce n’est pas le cas (il récupère les 3 premiers sujets pour moi). Si je supprime le modificateur custom_homepage du fichier about.json de ce thème, alors les bons sujets sont récupérés.

Je trouverai quelqu’un de plus familier avec le service de store pour y jeter un œil. Merci !

[pinder99 (Pushpender Singh)]

Salut

Pouvez-vous s’il vous plaît expliquer comment ajouter un composant (bannière de recherche ou un composant personnalisé déjà installé sur le forum) dans le fichier home.hbs pour qu’il s’affiche sur la nouvelle page d’accueil personnalisée

Merci