أضف نصًا بجانب الشعار في العنوان

مطور
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 plugin outlet بدلاً من home-logo:after widget decorations:

4 إعجابات
5

إذا كان لدي وقت للقيام بذلك بنفسي، فسأقوم بلصق الكود هنا. بدلاً من ذلك، إذا كان لدى شخص ما وقت أولاً، فسأكون ممتنًا جدًا… :slight_smile:

إعجاب واحد (1)
7

لقد قمت بهذا للتو لسمة. أنا أستخدم عنوان الموقع ووصفه المختصر، ولكن يمكنك أيضًا إدراج قيم من إعدادات السمة أو نص مترجم.

أضف مكون glimmer في components/header-logo-title.gjs

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

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 من حالة التصغير للشعار ويضيف النص فقط عندما يكون الشعار الكامل مرئيًا. إذا كنت تريد دائمًا إظهاره، فستحتاج إلى إسقاط هذا الشرط.

4 إعجابات
8

يمكنك أيضًا استخدام api.renderAfterWrapperOutlet("home-logo") (منذ الإصدار 1.26.0). يتميز بميزة استخدام اسم المنفذ الفعلي دون توفير __before/__after السحري.

4 إعجابات
9

شكرا لك @Arkshine. هذا أفضل، لقد قمت بتحديث المنشور السابق.

3 إعجابات
10

أحاول القيام بذلك الآن ولكن أواجه بعض المشاكل - كيف يمكنني الوصول إلى “مكون اللمعان في components/header-logo-title.gjs”؟

مجتمعي هنا: https://community.worldradioleague.com/.

أنا على الخطة المدفوعة - ربما ليس لدي وصول إلى نواة Discourse لرؤية هذا؟

11

لقد قمت بتغليف هذا في مكون، يمكنك محاولة استخدامه: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. يضيف عنوان الموقع ووصف الموقع المختصر افتراضيًا. بدلاً من ذلك، يمكنك إضافة نص مخصص للعنوان والوصف في إعدادات المكون.

3 إعجابات