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

开发
1

我是 Discourse 的新手，如果这个问题很容易解决，我先表示歉意。不过，我似乎找不到在哪里可以定义希望在 Discourse 页面标题栏中显示在我们标志旁边的文本。

理想情况下，我希望在标题栏的红色框区域内添加显示“社区论坛”或类似内容的文本：

AddText-Discourse
AddText-Discourse1132×325 37.3 KB

我该如何实现这一目标？

提前感谢任何反馈！

2

嘿，Daniel :wave:

你可以使用类似下面的代码，在你的网站标题徽标旁边添加文本

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "你想添加的文本"; // <--- 修改这里的文本

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

你可以将其添加到你的主题/组件的头部区域。你可以在这里了解更多关于 Discourse 主题系统的信息

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 个赞