ما هي الطرق المختلفة لتخصيص المحتوى داخل منشور (سمات مخصصة وما شابه ذلك)

حتى الآن، أعرف طريقتين للقيام بذلك:

  1. <span>some text</span>

    CSS:

    [data-theme-custom] {
        color: pink;
    }
    
  2. [wrap="indent"]some text[/wrap]
    سيؤدي ذلك إلى إنشاء عنصر div أو span (إذا كان هناك محتوى آخر في نفس السطر)، يحتوي على السمات التالية: class="d-wrap" و data-wrap="custom"

    CSS

     [data-wrap="custom"] {
         color: pink;
     }
    

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

إعجابَين (2)

هل يمكنني رفع هذا الموضوع بلا خجل؟

لم أتمكن من العثور على أي موضوع يسرد جميع الطرق لتخصيص محتوى منشور HTML باستخدام محرر Discourse المدمج.

إذا كانت هناك طرق أخرى غير الطريقتين اللتين ذكرتهما - وهما متشابهتان جدًا - فربما يكون howto مفيدًا؟

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

أود أيضًا أن أرى أي علامات HTML تعمل في المنشئ. أعتقد أنني رأيتها في مكان ما من قبل ولكن لم أتمكن من العثور عليها في وقت سابق اليوم.

على سبيل المثال، كنت أحاول إضافة <button class="success">Click me</button> إلى المنشئ، وقد ظهرت في المعاينة ولكنها فشلت عندما نشرتها. أعتقد أن بعض علامات HTML تعمل، فقط لست متأكدًا من أي منها.

أعتقد أن هذه هي علامات HTML والسمات المسموح بها افتراضيًا:

يمكننا أن نرى أن السمة data-* مسموح بها.


يحتوي هذا الملف على طريقة [wrap=*] text [/wrap] لتخصيص عنصر ما، والتي تضيف أيضًا السمة data-wrap بالقيمة *

لم أتمكن من العثور على المزيد بعد.

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

من الممكن استخدام بعض فئات HTML في Discourse، ومع ذلك، يتم تطهير معظم HTML في المنشور لأسباب أمنية، ولا يُسمح إلا بـ HTML أبيض صارم جدًا في markdown. لإضافة فئات إلى القائمة البيضاء، يجب عليك استخدام إضافة، ويحدث التطهير من جانب الخادم وكذلك من جانب العميل. تحقق من
القائمة البيضاء لعلامات / سمات HTML
للحصول على بعض التفاصيل حول مكان إضافة السمات المدرجة في القائمة البيضاء، وأعتقد أنها ستبدو مشابهة لشيء مثل هذا: قائمة Discourse البيضاء لـ HTML. وكما ذكر @RGJ، يرجى ملاحظة أن الدالة whiteList() مهملة ويتم استدعاؤها حاليًا allowList() هنا.

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

آمل أن يساعد هذا!

7 إعجابات

شكرا على ردك!

لقد عثرت على رابطك الأول بعد ظهر اليوم.

ملفات رابط GitHub عمرها 7 سنوات، لذا أفترض أن الكود قد يكون قديماً؟

على أي حال، لقد استخدمت هذا:

export function setup(helper) {
    if (!helper.markdownIt) { return; }
  
    helper.registerOptions((opts, siteSettings) => {
      opts.features.nolinkify = siteSettings.no_linkify_enabled;
    });
  
    helper.allowList(["span.nolinkify"]);
}

والذي استعرته من GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

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

في حالتي، كان الغرض هو “إلغاء الربط” بسهولة للكلمات في المشاركات باستخدام Auto-Linkify Words (فهو يقبل فقط الوسوم والفئات لمنع الربط)، وخاصة الكلمات في وسوم عناوين HTML عند استخدام DiscoTOC - automatic table of contents

لقد جربت أيضًا حلاً يعتمد على صيغة bbcode مثل هذا:

    helper.registerPlugin(md => {
      md.inline.bbcode.ruler.push("nolinkify",{
        tag: "nolinkify",
  
        replace: function(state, tagInfo, content) {
          const token = state.push("html_raw", '', 0);
          const escaped = state.md.utils.escapeHtml(content);
          token.content = `<span="nolinkify ">${escaped}</span>`;
          return true;
        }
      });
    });

لذلك، جربت كلا الحلين لمشكلة وسوم العناوين الخاصة بي مع جدول المحتويات.
هذا لا يعمل:

## [nolinkify]test[/nolinkify]

ولكن هذا يعمل:

## <span class="nolinkify">test</span>

كنت أفضل الصيغة الأولى، لكنني أعتقد أنها غير متوافقة مع جدول المحتويات بسبب ترتيب تنفيذ البرامج النصية…

3 إعجابات

هذا الكود لم يعد يعمل. من الأفضل إزالته من منشورك.

الإجابة موجودة في الموضوع المرتبط، كما اكتشف @canapin بالفعل.

يرجى ملاحظة أن الدالة whiteList() مهملة ويتم استدعاؤها حاليًا allowList() (كما هو موضح).

3 إعجابات

آه، نعم، لقد تم ذكره حتى في وحدة التحكم :+1:

3 إعجابات

شكراً لتأكيدك، تم تحديث المنشور الأصلي لضمان الدقة.

إعجابَين (2)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.