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

开发
1

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
AddText-Discourse1132×325 37.3 KB

How can I go about getting this done?

Thanks in advance for any and all feedback!

2

Hey Daniel :wave:

You can use something like this to add text next to the header logo on your site

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- change this text

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here

3 个赞
3

由于 Discourse 的更改，这现在会导致显示错误横幅。您有什么建议可以使用新方法实现相同的结果吗？谢谢。

4

该方法将不再有效，您需要使用此处关于 home-logo 插件出口的部分中指定的连接器，替换 home-logo:after 部件装饰：

4 个赞
5

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

1 个赞
7

我刚为主题做了这个。我正在使用网站的标题和简短描述，但您也可以插入主题设置或本地化文本中的值。

在 components/header-logo-title.gjs 中添加一个 glimmer 组件

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
  @service siteSettings;

  <template>
    {{#unless @outletArgs.minimized}}
      <div class="header-logo-title">
        <span
          class="header-logo-title__title"
        >{{this.siteSettings.title}}</span>
        {{#if this.siteSettings.short_site_description}}
          <span
            class="header-logo-title__description"
          >{{this.siteSettings.short_site_description}}</span>
        {{/if}}
      </div>
    {{/unless}}
  </template>
}

在 /api-initializers/my-theme.js 中将其附加到 outlet

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);
});

#unless 助手会检查 logo 的最小化状态，并且仅在完整 logo 可见时添加文本。如果您想始终显示它，则需要删除该条件。

4 个赞
8

您也可以使用 api.renderAfterWrapperOutlet(\"home-logo\")（自 v.1.26.0 起）。它的优点是您可以使用实际的 outlet 名称，而无需提供魔术般的 __before/__after。

4 个赞
9

谢谢 @Arkshine。这样更好，我已经更新了之前的帖子。

3 个赞
10

我正在尝试现在进行操作，但遇到了一些麻烦 - 如何访问“components/header-logo-title.gjs”中的“glimmer component”？

我的社区在这里：https://community.worldradioleague.com/。

我使用的是付费计划 - 也许我无法访问 Discourse core 来查看这个？

11

我已经将其包装在一个组件中，您可以尝试使用它：https://gitlab.com/manuelkostka/discourse/helpers/header-logo-title。它默认添加站点标题和简短的站点描述。或者，您可以在组件设置中添加自定义的标题和描述文本。

3 个赞