استخدام ميزة الصفحة الرئيسية المخصصة الجديدة

[manuel (Manuel Kostka)]

تجربة ميزة الصفحة الرئيسية المخصصة الجديدة: https://github.com/discourse/discourse/pull/26291
@pmusaraj أتساءل ما هو أفضل نهج لإضافة المكونات؟

1. يؤدي إضافة مُعدِّل الصفحة الرئيسية المخصصة إلى تمكين المسار discovery.custom ويعرض تنبيه معلومات افتراضي، يتم عرضه في منفذ custom-homepage:

   

2. أضيف مكونًا إلى المنفذ ويتم عرضه بدلاً من ذلك:

   
   

3. ومع ذلك، عندما أضيف أكثر من مكون واحد، أحصل على خطأ:

   
   

4. يمكنني إضافة المزيد من المكونات إلى منافذ أخرى. إليك عرض مع ظهور منافذ الإضافات:

   
   

لذا أتساءل كيف يجب أن يعمل المنفذ الجديد:

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

[merefield (Robert)]

@manuel

ولكن عندما أضيف أكثر من مكون واحد، أحصل على خطأ:

هذا ليس مفاجئاً؟

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

<MyFirstComponent />
<MySecondComponent />
<MyThirdComponent />

أو أي شيء تريده … فقط التزم بقالب واحد في هذا المجلد؟

[manuel (Manuel Kostka)]

@merefield

أليس ذلك مفاجئًا؟

اعتقدت أن الأمر كذلك لأنه يعمل مع منافذ أخرى؟ كما هو موضح في لقطة الشاشة أعلاه.

[merefield (Robert)]

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

أعتقد رغم ذلك: لماذا تريد فعل ذلك؟ سيكون لديك سيطرة أقل على التخطيط؟

هل يجبرك قالب واحد على تأليف التخطيط بأكمله دفعة واحدة مع أي عدد تريده من المكونات الفرعية؟

ومع ذلك، يبدو أن السلوك غير متسق …

[manuel (Manuel Kostka)]

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

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

[merefield (Robert)]

ولكن لماذا لا يمكنك الإشارة إلى كل هذه المكونات في قالب واحد؟

أوه لأنها تأتي من مكونات سمة مختلفة؟

أعتقد أننا كنا نتحدث بشكل غير مفهوم هنا.

عندما أقول ضع كل مكوناتك (Ember) في مجلد المكونات، أعني ذلك بالضبط ولكن في مكون سمة واحد.

أعتقد أن جوهر هذا ببساطة هو: “لماذا يتصرف هذا المنفذ بشكل مختلف؟” أفهم أنك تحاول دمج مكونات سمة مختلفة.

[manuel (Manuel Kostka)]

@merefield

أوه لأنهم قادمون من مكونات سمات مختلفة؟

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

ولكن عندما أريد عرض قائمة أخرى بنفس الطريقة، أحصل على خطأ الموصل المتعدد.

@merefield

أعتقد أن جوهر هذا هو ببساطة: “لماذا يتصرف هذا المنفذ بشكل مختلف؟”

[pmusaraj (Penar Musaraj)]

شكراً لاختبار هذا يا @manuel وللأسئلة.

@merefield

أعتقد أن جوهر هذا هو ببساطة: “لماذا يتصرف هذا المنفذ بشكل مختلف؟”

لم أكن أعرف الإجابة على هذا أيضًا، لكنني بحثت وفهمت السبب تقريبًا. لقد قدمنا مؤخرًا تمييزًا بين منافذ الإضافات الكلاسيكية ومنافذ الإضافات الغلافية، في هذا السحب من العام الماضي: DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub

منافذ الإضافات الغلافية هي تلك التي تسمح بموصل واحد فقط، والباقي يسمح بتعدد. للتوضيح، كود منفذ الإضافات الأساسي الحالي هو هذا:

<PluginOutlet @name="custom-homepage">
  {{#if this.currentUser.admin}}
    <p class="alert alert-info">
      {{i18n "custom_homepage.admin_message"}}
    </p>
  {{/if}}
</PluginOutlet>

وهو يسمح بموصل واحد فقط. ولكن إذا قمت بتغيير كود المنفذ الأساسي إلى:

<PluginOutlet @name="custom-homepage" />

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

لاحظ أيضًا أن الموصلات المتعددة لديها مشكلة ترتيب، على حد علمي، ليس لدينا آلية لتحديد الترتيب.

أعتقد أن النهج الأفضل هنا، بغض النظر عن ذلك، هو ما اقترحه @merefield: استخدم قالبًا واحدًا ثم قم بالإشارة إلى مكونات Ember منه.

@manuel

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

يتم عرض التنبيه الافتراضي للمسؤولين فقط، للعلم.

[manuel (Manuel Kostka)]

شكراً على الشروحات!

باللعب أكثر بهذا.. إنه جديد حقًا وممتع للاستخدام!

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

[manuel (Manuel Kostka)]

ملاحظة أخرى: لقد وضعت رابطًا في الشريط الجانبي باستخدام عنوان URL /custom:

لا يتم تمييزه عند التواجد في المسار المخصص.

إذا فهمت المنطق المتعلق بتمييز الشريط الجانبي بشكل صحيح، فيجب تمييزه أيضًا عند التواجد في عنوان URL الجذر /.

[pmusaraj (Penar Musaraj)]

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

خيار آخر هو إضافة منفذ ملحق إضافي ثانٍ إلى قالب الصفحة الرئيسية المخصصة، شيء مثل <PluginOutlet @name="below-custom-homepage"/>.

قد أتمسك بمنفذ custom-homepage هذا برسالة للمسؤولين دون سبب وجيه، بصراحة. هذا التحذير ليس مفيدًا جدًا…

@manuel

لا يتم تمييزه عند التواجد في المسار المخصص.

نعم، يمكن أن يكون ذلك صعبًا. في اختباري المحلي الآن، لا يعمل /custom بشكل صحيح. من الأفضل استخدام /، الذي يوجه بشكل صحيح. لكنه لا يزال لا يبرز.

[manuel (Manuel Kostka)]

@pmusaraj

نعم، هذا يمكن أن يكون صعبًا. في اختباري المحلي الآن، /custom لا يعمل بشكل صحيح. من الأفضل استخدام /، والذي يوجه بشكل صحيح. لكنه لا يزال لا يبرز.

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

@pmusaraj

قد أتمسك بمخرج custom-homepage هذا برسالة للمسؤولين دون سبب وجيه، بصراحة. هذا التحذير ليس مفيدًا جدًا…

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

@pmusaraj

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

يجب أن يكون هناك سوء فهم. المكون يغلف بالفعل جميع القوائم في مكون تغليف واحد ويعرضه على أي مخرج معين:

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

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

@pmusaraj

خيار آخر هو إضافة مخرج مكون إضافي ثانٍ إلى قالب الصفحة الرئيسية المخصصة، شيء مثل <PluginOutlet @name="below-custom-homepage" />.

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

لذلك أدركت أن المخرج يتم عرضه داخل العنصر main-outlet. الهيكل العام لهذه العناصر هو:

• غلاف main-outlet
  • غلاف sidebar-wrapper
  • main-outlet
    • مخرج custom-homepage

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

• غلاف main-outlet
  • غلاف sidebar-wrapper
  • مكون: لافتة البحث
  • مكون: المواضيع المميزة
  • مكون: القوائم المميزة
  • main-outlet

الميزة هي أنني أستطيع ترتيب العناصر عبر عرض غلاف main-outlet بأكمله وليس فقط داخل عنصر main-outlet. لتوضيح النقطة، إذا قمت بعرض أحد المكونات على مخرج custom-homepage الحالي، فسيتم عرضه متداخلاً داخل عنصر main-outlet كالتالي:

أعتقد أن المرونة القصوى للتصاميم المخصصة ستوفرها مخرج مكون إضافي يقع

• كابن مباشر لغلاف main-outlet (على غرار مخرج before-main-outlet)
• داخل div تغليف

هذا div التغليف سيجمع كل المكونات المضافة إليه ويسمح بالترتيب السهل. مثل هذا الهيكل سيبدو كالتالي:

• غلاف main-outlet
  • غلاف sidebar-wrapper
  • غلاف custom-homepage-wrapper
    • مكون: لافتة البحث
    • مكون: المواضيع المميزة
    • مكون: القوائم المميزة
  • main-outlet

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

[merefield (Robert)]

يفترض أن هذه الصفحة “سطحية” بمعنى أنها ستظهر للمستخدم ولكن ليس لـ “Googlebot” وبالتالي لن تتم فهرستها؟

[pmusaraj (Penar Musaraj)]

صحيح، نعم، بالنسبة لعرض الزاحف، اخترت إخراج القائمة العلوية فقط. لا يمكنني معرفة ما سيخرجه السمة في هذا المسار من تطبيق Rails.\n\n[quote="Manuel Kostka, post:13, topic:302496, username:manuel"]\nإذا كنت تفكر في إضافة منفذ آخر أو تغيير إعداد المنفذ، يمكنني تقديم المزيد من الملاحظات بناءً على استخدامه حتى الآن.\n[/quote]\n\nأنا أفكر في الاقتراحات هنا @manuel، وسأخصص بعض الوقت قريبًا لاختبار بعض التغييرات. يرجى التحلي بالصبر معي.

[merefield (Robert)]

لقد أضفت دعمًا لهذه الميزة في Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield

[manuel (Manuel Kostka)]

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

الكود الموجود في المكون هو:

    const topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: {
        tags: [`${settings.featured_tag}`],
        order: sortOrder,
      }

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

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

[pmusaraj (Penar Musaraj)]

مثير للاهتمام، لست متأكدًا من سبب ذلك، ربما هناك بعض المنطق في مخزن topicList مرتبط بمسارات الاكتشاف؟ الصفحة الرئيسية المخصصة ليست مسار اكتشاف.

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

واجه @tynaut مشكلة مماثلة، لذلك من المحتمل أن يكون هناك شيء يجب معالجته هنا.

[manuel (Manuel Kostka)]

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

الشيء الغريب الآخر هو، كما ذكرت، أنه لا يقوم بتصفية القائمة الأولى فقط. على سبيل المثال، هنا أقوم بتصفية قائمتين، واحدة للوسم المميز (featured tag)، وواحدة للفئة العامة (General category)، وهذه هي الطريقة التي تظهر بها القوائم على جميع المسارات الأخرى:

فقط على مسار الصفحة الرئيسية المخصصة، تظهر هكذا:

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

[pmusaraj (Penar Musaraj)]

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

يمكنني إعادة إنتاجه بسهولة باستخدام مكون مبسط. لقد دفعت هذا إلى مستودع عينة هنا: GitHub - pmusaraj/discourse-sample-custom-homepage

يجب أن يسحب المكون sample-list هناك فقط المواضيع التي تحمل العلامة featured، لكنها لا تفعل ذلك (إنها تسحب أول 3 مواضيع بالنسبة لي). إذا قمت بإزالة المعدل custom_homepage من ملف about.json الخاص بهذا المظهر، فسيتم سحب المواضيع الصحيحة.

سأجد شخصًا أكثر دراية بخدمة المتجر لإلقاء نظرة. شكرًا!

[pinder99 (Pushpender Singh)]

مرحباً

هل يمكنك من فضلك شرح كيفية إضافة مكون (شعار بحث أو مكون مخصص مثبت بالفعل في المنتدى) داخل ملف home.hbs لجعله يظهر في الصفحة الرئيسية المخصصة الجديدة؟

شكراً