كيفية تخصيص شريط أدوات Composer

[wisedesk]

أتساءل عما إذا كانت هناك أي طريقة لتخصيص الأزرار التي يتم عرضها (وبأي ترتيب) في شريط أدوات الموضوع الجديد.

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

أرى أن هناك مواضيع حول تخصيص زر الموضوع الجديد، ولكن ليس شريط الأدوات نفسه.

[putty (Derek Putnam)]

أنا أيضاً فضولي بشأن هذا. لقد أضفنا مؤخرًا أداة إلى شريط أدوات المحرر، مما أدى إلى دفع إلى السطر التالي.

[awesomerobot (Kris)]

لا يوجد إعداد لتكوين شريط الأدوات، ولكن يمكن القيام بذلك من خلال السمات والإضافات.

سيكون من الجيد وجود هذه الميزة، لذا سأعيد تصنيفها كطلب ميزة.

في الوقت الحالي، يمكن إخفاء الأزرار باستخدام CSS… على سبيل المثال:

.d-editor-button-bar {
  .local-dates {  // يخفي زر التاريخ
    display: none;
  }
}

أو لإخفاء خيار من قائمة

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

باستخدام CSS، من السهل أيضًا إعادة ترتيب العناصر في هذه القوائم… يمكنك القيام بشيء مثل:

.d-editor-button-bar {
  .local-dates {  // ينقل زر التاريخ إلى البداية
    order: -1/
  }
}

لدينا دليل لمعرفة كيفية تغيير CSS هنا:

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

كل ما سبق، التغيير الأكثر صعوبة هو نقل شيء ما من/إلى القائمة المنسدلة وإلى شريط الأدوات الرئيسي (أو العكس). ستحتاج إلى إخفاء الزر الأصلي باستخدام CSS ثم إضافة زر مكرر باستخدام واجهة برمجة التطبيقات (API).

بالنظر إلى مكون سمة مثال، مثل Discourse Gifs يعطي فكرة عامة عن كيفية القيام بذلك… على الرغم من أن هذا يصبح صعبًا إذا لم تكن مطورًا.

javascripts/discourse/initializers/gif-integration.js

[SkyLin]

لـ قائمة

عندما حاولت الكتابة بهذه الطريقة، لم يتغير ترتيب العرض.
ملاحظة: display: none; لم تعمل أيضًا.

.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

الصيغة التالية تعمل كما هو متوقع، وتنقل “إنشاء حدث” إلى الأعلى.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

أنا لست على دراية بـ CSS، ChatGPT يساعد في إنشاء الكود أعلاه.

[alltiagocom (Tiago)]

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

ولكن في الوقت الحالي، القدرة على تحريك الأشياء عالميًا على الأقل وإضافتها إلى القائمة المخفية/قائمة الترس، ستساعد.

على شاشتي مقاس 13 بوصة، بدأت الأمور تصبح ضيقة بعض الشيء (أحب دائمًا أن يكون جزء من الموضوع الأصلي مرئيًا لاقتباس الأقسام، وما إلى ذلك):

[alltiagocom (Tiago)]

أنا فضولي: كيف أضفت تلك الملاحظة “20 حرفًا مطلوبًا”، وهل تعرض بعد ذلك عدد الأحرف التي كتبها الشخص بالفعل؟
ماذا عن العنوان؟

[putty (Derek Putnam)]

بصراحة لست متأكدًا تمامًا. تم تثبيت هذا على مجتمع كنت أديره سابقًا (لكنني لم أعد أديره). يبدو أنه يمكن العثور عليه هنا.

[alltiagocom (Tiago)]

شكرا! هذا بالضبط ما هو مطلوب!

[bitmage (Brandon Mason)]

@wisedesk

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

لدي أيضًا كبار السن في منتدى، وأشعر بالسخافة عند شرح هذا لهم.

الترس هو أيضًا رمز غير واضح جدًا لـ “هناك المزيد”. ربما تكون النقاط الثلاث أكثر ملاءمة؟ هل هناك طريقة مباشرة لتغيير الأيقونة؟

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

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}

[sb56637]

@awesomerobot

كل هذا على الرغم من أن التغيير الأكثر صعوبة هو نقل شيء ما من/إلى القائمة المنسدلة وإلى شريط الأدوات الرئيسي (أو العكس). ستحتاج إلى إخفاء الزر الأصلي باستخدام CSS ثم إضافة زر مكرر باستخدام واجهة برمجة التطبيقات.

بالنظر إلى مكون سمة مثال، مثل Discourse Gifs يعطي فكرة عامة عن كيفية القيام بذلك… على الرغم من أن هذا يصبح صعبًا إذا لم تكن مطورًا.

discourse-gifs/javascripts/discourse/initializers/gif-integration.js at b0431b26143809f7a952cd98c2249db9e976bbfc · discourse/discourse-gifs · GitHub

مرحباً، كنت أتساءل عما إذا كانت هذه الطريقة لا تزال موصى بها، أم أنها تأثرت بهذا؟

Modernizing inline script tags for templates & JS API

Using <script type='text/discourse-plugin> or <script type='text/x-handlebars'> in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular <script> and <script type='text/javascript'> are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled Late September 2025 - removal of feature Converting <script ty…

[david (David Taylor)]

لا يزال استخدام api.onToolbarCreate من مُهيئ .js مدعومًا

الموضوع الذي ربطته يشير فقط إلى تضمين جافاسكريبت في علامات \u003cscript type=\"text/discourse-plugin\"\u003e.

[opcourdis]

مرحباً،

لدي “أيقونة إنشاء حدث” موضوعة على اليمين وخارج القائمة “+menu”، ولكن يمكنك وضعها على اليسار بهذه التعليمات:

1. في رأس السمة الخاص بك في admin > appearance > themes > edit > edit code > head، أضف هذا الكود جافاسكريبت:

<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(() => {
  const e = ".d-editor-button-bar";
  const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
  const n = ".fk-d-menu__inner-content";
  const o = ".d-modal.fk-d-menu-modal";

  const c = (e) => {
    const t = e.querySelector('svg use[href="#calendar-day"]');
    return t ? t.closest("button") : null;
  };

  const r = (e, t, n = 4000) => new Promise((o, c) => {
    const r = t(e);
    if (r) return o(r);
    const l = new MutationObserver(() => {
      const n = t(e);
      n && (l.disconnect(), o(n));
    });
    l.observe(e, { childList: !0, subtree: !0 });
    setTimeout(() => {
      l.disconnect();
      c();
    }, n);
  });

  const l = (e = 4000) => {
    const t = new MutationObserver(() => {
      document.querySelector(o) && t.disconnect();
    });
    t.observe(document.body, { childList: !0, subtree: !0 });
    setTimeout(() => {
      t.disconnect();
    }, e);
  };

  const s = (e) => {
    if (e.querySelector(".custom-create-event-btn")) return;
    const o = document.createElement("button");
    o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
    o.title = "Create event";
    o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
    e.appendChild(o);

    o.addEventListener("click", async () => {
      const e = document.querySelector(t);
      if (!e) return;
      e.click();
      let o = document.querySelector(n);
      if (!o) {
        await new Promise((e, t) => {
          const c = new MutationObserver(() => {
            o = document.querySelector(n);
            o && (c.disconnect(), e());
          });
          c.observe(document.body, { childList: !0, subtree: !0 });
          setTimeout(() => {
            c.disconnect();
            t();
          }, 2000);
        });
      }
      try {
        (await r(o, c)).click();
        l();
      } catch {}
    });
  };

  const u = new MutationObserver(() => {
    const t = document.querySelector(e);
    t && s(t);
  });
  u.observe(document.body, { childList: !0, subtree: !0 });

  const d = document.querySelector(e);
  d && s(d);
})();
</script>

2. إذا كنت تريد الأيقونة على اليسار وليس على اليمين: في نفس صفحة الإدارة، ستجد علامة تبويب CSS حيث يمكنك إضافة هذا:

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3. إضافي: إذا كنت تريد أن يكون هذا الزر مرئيًا في هذا المكان في فئات معينة فقط، فاستخدم النص البرمجي هناك وقم بتعديل الشروط بأسماء الفئات الخاصة بك: Discourse Calendar (and Event) - #547 by opcourdis

[sb56637]

شكراً جزيلاً لـ @david و @opcourdis على الردود المفيدة.