تغييرات العناوين القادمة - إعداد السيمات والإضافات

ما هو الشيء الذي على وشك الانهيار على أي حال؟ ربما هناك مكون سمة مدعوم موجود بالفعل سيؤدي الغرض.

إذا كان مجرد الشعار في الأعلى الذي يربط بالموقع الرئيسي؟

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

هل هناك بديل لـ:

api.changeWidgetSetting("header-notifications", "avatarSize", "large");

هذا يعطيني تحذيرًا بأن هذه الوظيفة تم إهمالها وأن changeWidgetSetting لم تعد طريقة مدعومة لتجاوز الإعدادات. The header-notifications widget has been deprecated and changeWidgetSetting is no longer a supported override.

5 إعجابات

أنا أيضًا في نفس القارب.

أحاول تغيير عنوان URL للشعار بالطريقة الصحيحة، ولكن لم يعد بالإمكان تحقيق ما يلي:

api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");

ما هو استدعاء API البديل لهذا؟

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

نحن نعمل على إنشاء حل نظيف لهذا، لكنه ليس جاهزًا تمامًا بعد. ترقبوا هذا الموضوع للحصول على التحديثات.

إعجابَين (2)

مرحباً @david - هل يمكن أن يكون الحل النهائي جاهزًا بحلول يوم الجمعة 7 يونيو؟ إذا لم يكن الأمر كذلك، هل يمكنك تقديم تقدير؟
عذرًا على الاستعجال، سنبدأ النسخة التجريبية المغلقة في 17 يونيو ونحتاج إلى معرفة ما إذا كان سيتم تنفيذ هذا قبل الاختبار أم لا.

ليس لدي تاريخ محدد، ولكن من المرجح أن يكون ذلك خلال الأسبوعين القادمين. لن يكون جاهزًا بحلول الغد.

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

إعجابَين (2)

تم دمج واجهة برمجة التطبيقات الجديدة يا @kana.tatsuta.

لقد أضفت قسمًا في المنشور الأصلي مع أمثلة حول كيفية تخصيص عنوان URL لشعار الصفحة الرئيسية.

إعجابَين (2)

لقد قمنا بتمكين إشعار المسؤول عمليات النشر الجديدة على المثيلات التي تستخدم إضافات أو سمات غير متوافقة.

إعجابَين (2)

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

<script type="text/discourse-plugin" version="0.8.25">
  api.reopenWidget("home-logo", {
    logoUrl() {
      return (
        settings.Alternative_logo_url || ""
      );
    },

    mobileLogoUrl() {
      return (
        settings.Alternative_mobile_logo_url || ""
      );
    },

    smallLogoUrl() {
      return (
        settings.Alternative_small_logo_url || ""
      );
    }
  });
</script>

@tradmo،

جرب استخدام موصل في منفذ المكون الإضافي home-logo-contents. سيتم ترجمة الكود الخاص بك إلى شيء مثل:

// javascripts/discourse/initializers/customize-logo.gjs

import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: `logo-customizations`,
  initialize(container) {
    withPluginApi("1.29.0", (api) => {
      renderHomeLogo(api);
    });
  },
};

function renderHomeLogo(api) {
  const logoSmallUrl = settings.Alternative_small_logo_url || "";
  const logoUrl = settings.Alternative_logo_url || "";
  const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";

  api.renderInOutlet("home-logo-contents", `<template>
    <HomeLogoContents
      @logoSmallUrl={{logoSmallUrl}}
      @logoUrl={{logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>`);
}
3 إعجابات

بالنسبة لـ reopenWidget (sidebar-toggle)، هل يمكنك مساعدتي في فهم كيفية استبدال الكود التالي؟ لم أجد تعليمات في هذا الدليل

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* تمت إزالة زر sidebarToggle بواسطة "reopenWidget"، ويفرض applicationController إظهار sidebar على أنه صحيح (لـ desktopView) */

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },
};

أهلاً يا جماعة :wave:،

هل يمكن لأحد مساعدتي في التغييرات التي أحتاجها لهذا، من فضلك؟

<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

أعتقد أنني بحاجة إلى تحويله لاستخدام api.headerIcons.add(“foo”, FooIcon, { before: “search” }) ولكني لست متأكدًا بنسبة 100٪ من كيفية القيام بذلك :frowning:

سيكون أي مساعدة هنا موضع تقدير كبير :pray:

مرحباً @angelinekwan،

إليك توصيتنا:

  1. قم بإزالة ملف javascripts/discourse/api-initializers/desktop-open-sidebar-always.js الحالي لديك.

  2. قم بإنشاء ملف جديد: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js وأضف الكود التالي:

import { withPluginApi } from "discourse/lib/plugin-api";

const PLUGIN_NAME = "desktop-open-sidebar-always";

export default {
  name: PLUGIN_NAME,

  initialize() {
    withPluginApi("1.34.0", (api) => {
      api.modifyClass("controller:application", {
        pluginId: PLUGIN_NAME,

        calculateShowSidebar() {
          if (this.site.desktopView && this.canDisplaySidebar) {
            return true;
          }

          return this._super(...arguments);
        },
      });
    });
  },
};

أضف ما يلي إلى common/common.scss

html.desktop-view {
  .header-sidebar-toggle {
    display: none;
  }
}
4 إعجابات

مرحباً @Danny_Dainton،

ألقِ نظرة على المكون المظلي Custom Header Links (icons). أعتقد أنه يفعل ما تحتاجه.

إذا لم تتمكن من استخدام المكون المظلي، فإن api.headerIcons.add سيؤدي الغرض. :smiley:

  • أنشئ ملف تهيئة جديد. يجب أن يكون له امتداد .gjs
  • يجب أن يقوم الكود التالي بما تريده:
// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    `
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    `,
    { before: "search" }
  );
});
4 إعجابات

شكرًا لك يا سيدي!
آه، هذا يجعل الأمر منطقيًا أكثر بالنسبة لي الآن بعد رؤيته أمامي.
أنا أقدر ردك كثيرًا!! :heart:

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

أقدر المساعدة في ترحيل هذه القطعة من التعليمات البرمجية التي لا يمكنني معرفة كيفية ترحيلها:

api.reopenWidget("user-dropdown", {
  html(attrs) {
    return h(
      "a.icon",
      {title: I18n.t("custom.string.title")},
      [iconNode("bell"), this.attach("header-notifications", attrs)],
    );
  },
});

الهدف من هذا التغيير في الأصل هو الحفاظ على قائمة المستخدم user-dropdown كما هي، ولكن استبدال صورة الملف الشخصي بأيقونة (جرس).

أسهل طريقة للحصول على التأثير الذي تريده هي إضافة الأيقونة باستخدام PluginOutlet الحالي وببساطة إخفاء صورة الصورة الرمزية للمستخدم باستخدام CSS.

في ملف .gjs:

// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs

import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";

export default {
  name: "user-dropdown-bell-icon",
  initialize(container) {
    withPluginApi("1.34.0", (api) => {
      api.renderInOutlet("user-dropdown-notifications__before", 
        {{dIcon "bell"}}
      );
    });
  },
};

أضف CSS التالي:

.header-dropdown-toggle.user-menu-panel img {
  display: none;
}

تحصل على:

إعجابَين (2)

تمت إزالة كود الويدجت القديم.

3 إعجابات

هل يمكن لأحد مساعدتي في تحديث مكون سمة يضيف نصًا بجوار “home-logo”؟ شكرًا مقدمًا.