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

في المنشور الأول يوجد رابط إلى Github مع تعليقات تشرح الميزة. أعتقد أن هذه لا تزال ميزة تجريبية ولتجربتها تحتاج إلى استخدام و تثبيت تطبيق Discourse Theme CLI console للمساعدة في بناء السمات.

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

شكراً على الرد يا مانويل، أنا أستخدم بالفعل الواجهة سطر الأوامر (CLI)، وثائق Git توضح كيفية إضافة HTML مخصص وليس المكون الفعلي، أريد إضافة لافتة البحث المثبتة بالفعل في المنتدى، هل يمكنني استدعائها في home.hbs أم يجب علي إنشاء لافتة بحث HTML جديدة لاستخدامها.

ما رأيك في عرضها على الصفحة الرئيسية إذن؟
image

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

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

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

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

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

3 إعجابات

يبدو وكأنها ذاكرة تخزين مؤقت تحتاج إلى تسخين.

إعجابَين (2)

نعم، يتعلق الأمر بكيفية تحميلنا المسبق للبيانات. لدي طلب سحب جاهز مع إصلاح محتمل: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub

سيتم الدمج في بداية الأسبوع المقبل.

5 إعجابات

تم دمج طلب السحب أعلاه الآن @manuel، ويجب أن يحل المشكلة لك. شكرًا مرة أخرى على التقرير!

إعجابَين (2)

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

import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";

export default apiInitializer("1.8.0", (api) => {
  api.renderInOutlet("custom-homepage", welcomeBanner);
});

الطريقة الوحيدة التي تعمل بها هي javascripts/connectors/custom-homepage/welcome-banner.hbs

4 إعجابات

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

3 إعجابات

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

إعجابَين (2)

لقد كنت أستخدم هذا كثيرًا، جنبًا إلى جنب مع مكون Homepage Blocks الخاص بي. اقتراحان:

الفئات الافتراضية

لقد قمت بتعديل المكون بحيث يضيف دائمًا فئة homepage إلى الجسم وفئة active إلى رابط شريط جانبي مع href=\"/custom\". هل يمكن أن تكون هذه الميزات افتراضيات للمعدل؟

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href="/custom"]'
    );

    if (currentRoute === "discovery.custom") {
      document.body.classList.add("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      document.body.classList.remove("homepage");
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});

(في البداية أردت إضافة رابط الشريط الجانبي افتراضيًا، ولكن عدم القدرة على تعديل مثل هذا الرابط في الواجهة يبدو لي عيبًا حقيقيًا، انظر How can I edit sidebar links that are added with api.addCommunitySectionLink?)

عرض سريع لأول مرة

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

4 إعجابات

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

  <template>
    {{bodyClass "custom-homepage"}}
  ...
  </template>

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

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


بينما نحن هنا، أجرينا تحسينًا إضافيًا لهذه الميزة. حتى وقت قريب جدًا، لم يكن عرض الزاحف للصفحة الرئيسية المخصصة قابلاً للتخصيص. الآن هو كذلك، عبر منفذ HTML من جانب الخادم: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub

5 إعجابات

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

لقد قمت بترحيل <head> و css الخاص بي باتباع هذا المثال. محاولتي هنا. حتى الآن كل شيء على ما يرام.

المشكلة الآن هي كيفية إدراج شريط البحث والمكون “من متصل”.
في <head> السابق الخاص بي، أضفت ببساطة {{whos-online}} و {{search-menu}} حيثما أردت في الكود، ولكن هذا لا يعمل هنا - لا يمكنني العثور على كيفية حقنها بشكل صحيح.

هل يمكن لأحد أن يوجهني في الاتجاه الصحيح هنا أو يعرف الصيغة الصحيحة؟

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

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

import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";


...

<template>
        <WhosOnline />
</template>

ضع في اعتبارك مع ذلك أن SearchMenu موجود دائمًا، لأنه في النواة، بينما يأتي <WhosOnline /> من مكون إضافي ولا يتم تسجيله إلا إذا كان المكون الإضافي ممكّنًا.

3 إعجابات

لقد حل هذا مشكلة “من متصل الآن” وقائمة البحث! رائع. الآن أحتاج فقط إلى معرفة الصيغة الصحيحة للحصول على الموجز الذي أراه حاليًا هنا.

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

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

أي أدلة؟

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

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

سيكون هذا مثالًا بسيطًا لشبكة الصفحة الرئيسية التي تبدل التخطيط اعتمادًا على العرض: https://forum.zolidar.com.

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