I’m new to discourse, so I apologize if this is something that is easily done, however, I can’t seem to find where I can define the text that I want to appear beside our logo in the header of our discourse page. Within the red box in the header is where I’d ideally like to add text saying ‘Community Forums’ or something of the sort: [AddText-Discourse] How can I go about getting this done? Thanks in advance for any and all feedback!

Hey Daniel :wave: You can use something like this to add text next to the header logo on your site api.decorateWidget("home-logo:after", helper => { const titleVisible = helper.attrs.minimized; const headerText = "Text you want to add"; // You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here [图片] Beginner's guide to using Discourse Themes Site Management This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

[图片] Joe: You can use something like this to add text next to the header logo on your site This is now causing an error banner to be shown, because of changes to Discourse. Do you have any suggestions for achieving the same result with the new approach? Thanks.

Yea that method will no longer work and you need to use the connectors specified here in the section about the home-logo plugin outlet replacing home-logo:after widget decorations: [图片] Upcoming Header Changes - Preparing Themes and Plugins Development We’ve recently been working on updating Discourse’s header from the legacy ‘widget’ rendering system to modern Glimmer components. This change is now available in Discourse core behind the glimmer header mode site setting. timer_clock Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: white_check_mark core implementation finished & enabled on Meta white_check_mark upgrade advice published; console deprecation messages enabled … [图片] Using Plugin Outlet Connectors from a Theme or Plugin Developer Guides Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “ . These allow you…

If I have time to do that myself I’ll paste the code here. Alternatively, if someone has time first I’d be very grateful… :slight_smile:

I just did this for a theme. I’m using the site’s title and short description, but you could also insert values from theme settings or localized text. Add a glimmer component in components/header-logo-title.gjs import Component from "@glimmer/component"; import { service } from "@ember/service"; export default class HeaderLogoTitle extends Component { @service siteSettings; {{#unless @outletArgs.minimized}} {{this.siteSettings.title}} {{#if this.siteSettings.short_site_description}} {{this.siteSettings.short_site_description}} {{/if}} {{/unless}} } Attach it to the outlet in /api-initializers/my-theme.js import { apiInitializer } from "discourse/lib/api"; import HeaderLogoTitle from "../components/header-logo-title"; export default apiInitializer("1.26.0", (api) => { api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle); }); The #unless-helper checks for minimized state of the logo and only adds the text when the full logo would be visible. If you always want to show it you’d need to drop that condition.

[图片] Manuel Kostka: api.renderInOutlet("home-logo__after", HeaderLogoTitle); You can also use api.renderAfterWrapperOutlet("home-logo") (since v.1.26.0). It has the advantage you use the actual outlet name without providing the magic __before/__after.

Thank you @Arkshine. That’s nicer, I updated the previous post.

Trying to do this now but having some trouble - how do I access the “glimmer component in components/header-logo-title.gjs”? My community is here: https://community.worldradioleague.com/. I’m on the paid plan - maybe I don’t have access to Discourse core to see this?

I had wrapped this in a component, you could try using it: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. It adds the site title and short site description by default. Alternatively, you can add custom text for the title and the description on the component settings.

在徽标旁边的标题中添加文本

开发

Jonathan5 2024 年9 月 2 日 20:31 5

如果我有时间自己做，我会把代码粘贴在这里。另外，如果有人先有时间，我将不胜感激……

话题		回复	浏览量
How to modify the header HTML, but still remaining the default founctions Product Support	3	3920	2018 年5 月 25 日
Need plugin code for customised dicourse header Product Support	8	1745	2019 年5 月 10 日
Text alongside logo in discourse both linked Product Support	8	1008	2022 年2 月 16 日
Link on Top header to Go to Home page of main site Product Support	1	1413	2020 年2 月 25 日
How to add custom html next to logo using discourse plugin methods Product Support	1	1072	2021 年2 月 19 日

在徽标旁边的标题中添加文本

相关话题