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

أنا جديد في منصة Discourse، لذا أعتذر إذا كان هذا الأمر سهلاً، إلا أنني لا أستطيع العثور على المكان الذي يمكنني فيه تحديد النص الذي أريد أن يظهر بجانب شعارنا في رأس صفحة Discourse الخاصة بنا.

داخل المربع الأحمر في الرأس، أود مثلاً إضافة نص يقول “منتديات المجتمع” أو ما شابه ذلك:

كيف يمكنني تحقيق ذلك؟

شكرًا مقدّمًا على أي ملاحظات أو تعليقات!

مرحبًا دانيال :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 إعجابات

يؤدي هذا الآن إلى ظهور لافتة خطأ، بسبب التغييرات التي طرأت على Discourse. هل لديك أي اقتراحات لتحقيق نفس النتيجة بالنهج الجديد؟ شكراً.

لن تعمل هذه الطريقة بعد الآن وتحتاج إلى استخدام الموصلات المحددة هنا في القسم الخاص بـ home-logo plugin outlet بدلاً من home-logo:after widget decorations:

4 إعجابات

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

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

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

أضف مكون 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 إعجابات

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

4 إعجابات

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

3 إعجابات

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

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

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

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

3 إعجابات