إضافة محتوى مخصص يظهر فقط في صفحتك الرئيسية

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

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

إذا لم تكن على دراية بقوالب Discourse، فاطّلع على: Beginner's guide to using Discourse Themes و Structure of themes and theme components

في قالب Discourse، ستحتاج إلى إعداد هيكل المجلدات التالي:

:file_folder: javascripts/discourse/components/
:file_folder: javascripts/discourse/connectors/

من هنا، سنقوم بإنشاء مكون Ember. يمكنك العثور على المزيد من المعلومات حول مكونات Ember من خلال وثائقهم: Ember.js Guides - Guides and Tutorials - Ember Guides

ولكن في الوقت الحالي، سيكون هذا مكونًا بسيطًا، مكتوبًا في ملف .gjs واحد يحتوي على كل من المنطق والقالب.

:page_facing_up: javascripts/discourse/components/custom-homepage-content.gjs

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";

export default class CustomHomepageContent extends Component {
  @service router;

  get isHomepage() {
    const { currentRouteName } = this.router;
    return currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.isHomepage}}
      <h1>هذا هو محتوى HTML الخاص بصفحتي الرئيسية</h1>
    {{/if}}
  </template>
}

هذا ينشئ مُعرِّفًا (getter) باسم isHomepage، يتحقق من خدمة الموجه (router) للتحقق من currentRouteName — إذا تطابق اسم المسار مع صفحتك الرئيسية (كما هو محدد في إعدادات الموقع)، فسيُرجع true. يقوم القالب داخل <template>...</template> بالتحقق من هذا المعرف ويعرض المحتوى الخاص بك فقط عندما تكون قيمته true. يمكنك إضافة أي HTML تريده بين كتل {{#if}}.

الآن بعد إنشاء المكون، نحتاج إلى إضافته إلى Discourse في مكان ما. في هذه الخطوة، ستحتاج إلى تحديد أي منفذ مكون (plugin outlet) ستستخدمه. هذه مناطق في جميع أنحاء Discourse أضفنا فيها بعض الكود المخصص للمطورين للربط بها. يمكنك البحث في Discourse عن هذه المنافذ على Github، أو تصفحها باستخدام (deprecated) Plugin outlet locations theme component.

بالنسبة للصفحات الرئيسية المخصصة، يُعد above-main-container خيارًا شائعًا، لذا دعنا نستخدمه.

نحتاج إلى إنشاء ملف المكون (connector) في المجلد الصحيح:

:page_facing_up: javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs

import CustomHomepageContent from "../../components/custom-homepage-content";

<template><CustomHomepageContent /></template>

:point_up: وهذا كل شيء، كل ما يحتاجه هو سطر واحد يستدعي المكون الخاص بك :tada:


يتم التحكم في إصدارات هذه الوثيقة - اقترح التغييرات على Github.

47 إعجابًا

مرحباً @awesomerobot،

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

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

مرحباً @Cornelius، هل من الممكن الاطلاع على الكود الخاص بك؟

إعجابَين (2)

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

معظم هذه الأدلة القديمة للسمات قديمة بالنسبة للطريقة التي تتم بها الأمور الآن.

7 إعجابات

نعم، كان هذا قديماً جداً! لقد قمت بتحديثه ليعكس بنية السمات البعيدة ومكونات Ember الحديثة لدينا.

6 إعجابات

هذا رائع!

وهل هذا الـ getter هو نفس الشيء مثل هذا http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html؟ أنا أعرف القليل بما يكفي لأكون خطيرًا. إذا كان هو نفسه، فسأقوم بتحرير OP لربطه.

3 إعجابات

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

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

ستقوم بإنشاء مكون السمة الخاص بك وتثبيته من خلال تجربة المستخدم.

تثبيت سمة أو مكون سمة

تثبيت تطبيق سطر أوامر Discourse Theme CLI للمساعدة في بناء السمات

4 إعجابات

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

3 إعجابات

discovery.${defaultHomepage()} ستطابق المسار المحدد كمسار الهبوط بواسطة إعداد top-menu. ستطابق كل من عنوان URL الجذر / والمسار المحدد، مثل /categories.

في تجربتي، هناك تعقيدان عند بناء صفحة رئيسية مخصصة بناءً على defaultHomepage():

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

لبناء صفحة رئيسية مخصصة فقط على عنوان URL الجذر، يمكن التحقق من router.currentURL === '/'. افتراضيًا، يطابق هذا فقط عنوان URL الجذر / وليس مسار الهبوط المحدد بواسطة إعداد القائمة العلوية. ومع ذلك، هناك منطق الآن على روابط الشريط الجانبي يهدف أيضًا إلى مطابقة عنوان URL معين بمسار. لذلك لن يعمل على روابط الشريط الجانبي افتراضيًا. لقد نشرت للتو موضوعًا حول هذا: هل يمكنني الحصول على روابط شريط جانبي لا تحل عنوان URL إلى مسار؟

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

4 إعجابات

صحيح، إنها خدعة قديمة إلى حد ما أن / و /route المقابل يمكن أن يعرضا محتوى مختلفًا. لدينا مهمة للقيام بها

  1. السماح بتعيين الصفحة الرئيسية بشكل مستقل عن إعداد top_menu
  2. إضافة قالب صفحة رئيسية جديد قائم بذاته يمكن تخصيصه دون الاستيلاء على مسار موجود

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

6 إعجابات