Dans le premier post, il y a un lien vers Github avec des commentaires expliquant la fonctionnalité. Je crois que c’est toujours une fonctionnalité expérimentale et pour l’essayer, vous devez utiliser et Installer l’application de console Discourse Theme CLI pour vous aider à créer des thèmes.
1 « J'aime »
Merci pour votre réponse manuel, j’utilise déjà la CLI, les documents Git montrent comment ajouter le HTML personnalisé, pas le composant réel, je veux ajouter la bannière de recherche qui est déjà installée sur le forum, puis-je l’appeler dans home.hbs ou dois-je créer une nouvelle bannière de recherche HTML à utiliser
Que diriez-vous de l’afficher sur la page d’accueil alors ?
1 « J'aime »
oui c’est le problème, je dois l’ajouter sur la page d’accueil, j’en ai ajouté un personnalisé, j’en ai maintenant 2, je vais en supprimer un du thème, merci encore, j’apprécie beaucoup
1 « J'aime »
Comme mentionné, lorsqu’il y a plusieurs itérations, cela fonctionne lors des suivantes et ce n’est que la première fois que le filtre n’est pas appliqué. Cela fonctionnerait donc lorsque j’ajouterais une exécution à blanc initiale au magasin :
Je ne sais pas comment déboguer cela correctement, mais cela peut aider à cerner le problème.
3 « J'aime »
On dirait un cache qu’il faut réchauffer.
2 « J'aime »
Oui, cela a à voir avec la façon dont nous préchargeons les données. J’ai une PR prête avec une solution potentielle : DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
Je fusionnerai en début de semaine prochaine.
5 « J'aime »
La PR ci-dessus a maintenant été fusionnée @manuel, elle devrait résoudre le problème pour vous. Merci encore pour le rapport !
2 « J'aime »
J’ai remarqué aujourd’hui que l’ajout d’un composant à une route par la nouvelle méthode recommandée ne fonctionne pas lors de l’utilisation de ce modificateur de thème.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
La seule façon dont cela fonctionne est javascripts/connectors/custom-homepage/welcome-banner.hbs
4 « J'aime »
Ça semble fonctionner pour moi. Rendez-vous un autre composant ? Je pense qu’il y avait le problème que cela ne fonctionne qu’avec un seul. Ou c’est parce que je ne l’utilise qu’en version stable pour le moment.
3 « J'aime »
Je vais devoir tester un peu plus, je ne suis pas sûr de pourquoi cela ne fonctionne pas pour moi pour le moment.
2 « J'aime »
J’ai beaucoup utilisé ceci, ainsi que mon composant Blocs de page d’accueil. Deux suggestions :
Classes par défaut
J’ai ajusté le composant pour qu’il ajoute toujours une classe homepage au corps et une classe active à un lien de la barre latérale avec href=\"/custom\". Ces fonctionnalités pourraient probablement être des valeurs par défaut pour le modificateur ?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(Je voulais initialement ajouter le lien de la barre latérale par défaut, mais ne pas pouvoir modifier un tel lien dans l’interface me semble être un inconvénient majeur, voir How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Premier rendu rapide
Je ne saurais pas comment aborder cela techniquement. Mais je me demande, si nous arrivons sur une page d’accueil personnalisée, qui affiche généralement une sélection de contenu limitée, pourrions-nous améliorer le FCP (First Contentful Paint) de la page d’accueil et l’afficher déjà pendant que le reste de l’application se charge ? Peut-être que je comprends mal la nature de l’architecture d’application unique ici… il est un peu décevant d’être d’abord présenté à l’animation de chargement, puis d’atterrir sur une page assez simple, qui en soi pourrait être là instantanément.
4 « J'aime »
Peut-être… pas sûr. Il est relativement facile d’ajouter cette classe maintenant à n’importe quel modèle de composant, il suffit d’utiliser l’aide bodyClass. Par exemple, dans un thème séparé, nous faisons ceci :
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Cela permet d’obtenir le même résultat que le hook onPageChange, mais c’est plus fiable. Il ne définira cette classe que pour le corps tant que le composant est rendu.
Si le composant dispose déjà de toutes les données dont il a besoin, alors oui, il n’y a aucune raison pour qu’il ne puisse pas être rendu avec le reste de l’application. Dans la plupart des cas, cependant, le composant devra faire une requête pour obtenir des données supplémentaires, ce qui déclenchera l’indicateur de chargement. Je ne vois pas de moyen simple de rendre ce chargement plus rapide, honnêtement.
Pendant que nous y sommes, nous avons apporté une amélioration supplémentaire à cette fonctionnalité. Jusqu’à très récemment, la vue du crawler de la page d’accueil personnalisée n’était pas personnalisable. Elle l’est maintenant, via un outlet HTML côté serveur : DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 « J'aime »
J’avais l’habitude de modifier mon thème en utilisant l’interface d’administration, mais comme je reçois maintenant un avertissement de dépréciation, je me penche plutôt sur l’option custom-homepage.
J’ai migré mon <head> et mon CSS en suivant cet exemple. Ma tentative est ici. Jusqu’ici tout va bien.
Le problème est maintenant de savoir comment insérer la barre de recherche et le composant « Who’s Online ».
Dans mon précédent <head>, j’ajoutais simplement {{whos-online}} et {{search-menu}} là où je les voulais dans le code, mais cela ne fonctionne pas ici - je ne trouve pas comment les injecter correctement.
Quelqu’un pourrait-il m’indiquer la bonne direction ou connaître la syntaxe correcte ?
Le résultat final devrait ressembler à ceci (actuellement revenu à mon ancien code, bientôt obsolète).
J’ai jeté un coup d’œil rapide localement et j’ai rencontré un problème avec le composant WhosOnline. Mais après avoir redémarré le serveur, cela a fonctionné correctement. Le code que j’ai utilisé dans le composant de la page d’accueil était :
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Gardez à l’esprit cependant que SearchMenu est toujours présent, car il fait partie du cœur, tandis que <WhosOnline /> provient d’un plugin et n’est enregistré que si le plugin est activé.
3 « J'aime »
Cela a résolu le menu Qui est en ligne et le menu de recherche ! Génial. Maintenant, il me suffit de trouver la syntaxe pour obtenir le flux que je vois actuellement ici.
Actuellement, il est affiché en masquant tout le reste de la page sauf le flux, en insérant le héros, qui est en ligne, le menu de recherche et les liens, puis en positionnant le flux par rapport à ceux-ci en surchargeant le CSS. Pas idéal.
Je suis sur le point de pouvoir faire une mise en page personnalisée de la page d’accueil où je peux placer toutes les pièces à leurs bons endroits, mais il me manque comment récupérer le flux. J’ai essayé d’inspecter la page actuelle avec Ember et j’ai consulté les composants de l’application discourse pour savoir comment l’importer, mais sans succès.
Des indices ?
J’utiliserais un composant comme Featured Lists pour afficher une liste de sujets avec un nombre limité de sujets sur la page d’accueil. Je pense que si vous insérez la liste principale, vous obtenez une liste infinie qui se charge progressivement. C’est peut-être ce que vous voulez ? Mais pourquoi s’embêter alors à ajouter une page d’accueil séparée, plutôt que de construire votre page de destination directement sur cette vue de liste de sujets ?
Vous pourriez également consulter mon composant Homepage Blocks pour organiser la mise en page de votre page d’accueil. Vous pouvez ajouter des composants et organiser leur ordre via un éditeur. Le composant ajoute également une classe CSS homepage et un élément wrapper supplémentaire homepage-blocks que vous pouvez utiliser pour un meilleur style responsive. Par exemple, vous pourriez définir une grille sur le wrapper et ajuster votre mise en page en fonction de la largeur, de sorte que vous ayez une mise en page avec une barre latérale et un contenu principal sur les grands écrans et une mise en page en une seule rangée avec tout votre contenu empilé sur des vues plus étroites. Actuellement, les éléments de votre barre latérale se réduisent, ce qui peut ne pas être idéal à certaines largeurs.
Ce serait un exemple simple de grille de page d’accueil qui change de mise en page en fonction de la largeur : https://forum.zolidar.com.
1 « J'aime »