ما هي عناصر HTML التي يمكنك تخصيصها؟

مطور
1

بصفتي جديدًا في Discourse، أحاول فهم ما يمكن تخصيصه وكيفية القيام بذلك. أعرف أن هناك مواضيع ومكونات مواضيع متاحة، وأدرك أيضًا أنه نظريًا يمكنني تعديل HTML وCSS وJavaScript إذا انتقلت إلى admin -> customize -> Themes -> [انقر على الموضوع المحدد] -> edit CSS/HTML.

أحاول فهم كيفية استخدام لوحة التحكم التي تظهر عند محاولة “تحرير CSS/HTML”. تعرض هذه اللوحة <head> Header After Header <body> Footer Embedded CSS.

هل هناك دليل يحتوي على أمثلة حول كيفية تعديل HTML فعليًا؟ أفهم أن هناك اقتراحات على Meta، ولكن قدر ما أستطيع رؤيتها، فهي مبعثرة عبر مواضيع مختلفة في المنتدى.

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

لذا أحاول ترتيب ما يمكنني فعله باستخدام “تحرير CSS/HTML” لتخصيص منتداي.

2

نعم، يُرجى الاطلاع على دليل المطورين لمواضيع Discourse.

3

شكرًا لك. لقد رأيت هذا من قبل، لكنني تجنبت ذلك لأن التركيز بدا أنه على إنشاء سمة جديدة، وليس مجرد تحرير منتداي الوحيد.

أرى بالفعل بعض التوجيهات هناك حول كيفية استخدام لوحة تحكم “تحرير CSS/HTML”. ولكن، للتأكيد، هل يمكنني تغيير HTML و CSS و JS دون إنشاء سمة جديدة؟

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

4

صحيح!

أنصحك بالتأكيد بمتابعة ذلك الدليل أيضًا، فلا تدع جانب “السمة” (Theme) فيها يثنيك، إذ يغوص في جوانب متعددة من التخصيص ستجدها مفيدة.

5

الرابط الذي قدمه سيمون يشرح كل شيء، لكنه طويل نسبيًا للقراءة.

بشكل عام، إذا كنت ترغب في تعديل HTML في Discourse، فيمكن القيام بذلك بعدة طرق:

  1. من خلال بعض علامات التبويب HTML المحددة مسبقًا في سمة أو مكونك: Header، After Header، </body>، Footer.
  2. من خلال استهداف مساحة HTML “حرة” (مخرج) يمكنك ملؤها بـ HTML خاص بك. يمكن القيام بذلك عبر وسم <script> يمكنك إضافته في علامة التبويب <head>.
    إليك مثال على المخرجات المتاحة في عرض الموضوع:
    image
    image1141×1158 87.7 KB
  3. من خلال تجاوز قالب HTML موجود. تحتوي القوالب أحيانًا على الكثير من كود HTML، وستحتاج إلى نسخ ولصقها بالكامل لإجراء تعديلاتك. يمكن أيضًا القيام بذلك في وسم <script> مضاف في <head> الخاص بك.

إن إنشاء سمة، أو مكون سمة، أو “مجرد تعديل منتداي الفردي”، هو في الواقع نفس الشيء تقريبًا هنا. تُنفذ الثلاثة تقريبًا بنفس الطريقة.

نعم، يعتمد ذلك على ما تريد فعله بالضبط، لكن الطريقة الصحيحة عادةً هي إنشاء مكون سمة جديد وكتابة HTML/CSS فيه.

6

شكرًا على هذه المعلومات المفيدة. أستطيع فهم كيفية إضافة HTML إلى مساحة مفتوحة، وكذلك إخفاء HTML موجود باستخدام CSS (أي، استخدام display: none على فئة div ذات الصلة، والتي أفترض أنني أستطيع العثور عليها باستخدام أداة الفحص).

لكن كيف يمكنني تجاوز HTML، مثل نقل مكون من مكان لآخر؟ هل لديك مثال موجز؟

7

أنا أقوم بالإشارة الجزئية إلى الرابط الذي نشره سيمون:

مثال سريع لملء منفذ بمربع أحمر كبير؛ هنا يقع المنفذ فوق قائمة المنشورات في عرض الموضوع:

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
  <div style="height: 200px; width: 200px;background: red"></div>
</script>

image
image1049×801 56.5 KB

لاحظ خاصية data-template-name.

مثال سريع لتجاوز قالب شريط التنقل:

<script type="text/x-handlebars" data-template-name="components/navigation-bar">
    {{#each navItems as |navItem|}}
      {{navigation-item content=navItem filterMode=filterMode category=category}}
    {{/each}}
    <div style="background: red; padding: 10px; float: left;">لقد أضفت هذا الكتلة في قالب شريط التنقل</div>
    {{custom-html name="extraNavItem" tagName="li"}}
    {{!- يتم ذلك لتجنب وجود DIV داخل UL، في الأصل {{plugin-outlet name="extra-nav-item"}}
    {{#each connectors as |c|}}
      {{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
    {{/each}}
</script>

image
image1135×122 10.7 KB

مرة أخرى، لاحظ خاصية data-template-name.

إليك قائمة القوالب: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates

ومكون موضوع مفيد يسلط الضوء على جميع مواقع المنافذ: (deprecated) Plugin outlet locations theme component

8

حسناً، بدأت أفهم الآن. هذا مفيد جداً.

1. من أين يأتي: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name؟ (بمعنى، كيف أعرف ما الذي يجب إدخاله هناك)؟

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

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

3. ثم ألصق الكود ذي الصلة في لوحة التحكم تحت خيار “تحرير CSS/HTML”. ولكن أين تحديداً؟ تحت الخيار الأول (</head>)؟ أفترض ذلك بناءً على إجابتك السابقة، لكن سيكون من المفيد التأكيد على ذلك.

آمل أن يكون هذا مفيداً للآخرين أيضاً.

9

للبحث عن اسم وموقع عنصر، أعتقد أن أفضل طريقة هي الإضافة التي ربطت بها أعلاه.

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

نعم، إنه صعب، لكنني لست خبيرًا وأعتقد أن هناك طرقًا أكثر كفاءة للقيام بذلك!

نعم.

عندما تأتي من Wordpress أو phpBB معتادًا على تعديل ملفات القوالب مباشرة في هذا الدليل أو ذاك، قد يبدو Discourse غامضًا… :sweat_smile:

10

شكرًا لك. عند المقارنة مع ووردبريس، على الأقل من وجهة نظري، فإن الميزة الكبيرة هي أن ديسكورد يستخدم Ruby و JavaScript بدلاً من PHP.