إدراج نص تمهيدي في صفحة /s؟

أعتذر إذا كان هذا لا ينتمي إلى الدعم.

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

لأغراضي، أود أن أجعل صفحة الهبوط /s أكثر ترحيبًا وإعلامًا بدلاً من مجرد “للأعمال فقط”.

هل من الممكن إضافة نوع من النص التمهيدي أو المعلوماتي إلى صفحة /s فوق خيارات الاشتراك/الدفع؟ أو هل هذا شيء قد يتم تنفيذه (يومًا ما) كخيار أو هو خارج النطاق؟

في الأساس، مجرد مربع نص قابل للتحرير من قبل المستخدم مع خيارات التنسيق القياسية فوق الخيارات الحالية.

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

سأكون ممتنًا لأي رؤية.

شكرًا لك.

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

إعجابَين (2)

يمكنك رؤية أماكن منافذ الإضافات (plugin outlets).

ثم سيسمح لك المكونات المخصصة - إضافة زر أو نص في أي منفذ إضافة بلصق نص عشوائي في أي منفذ إضافة.

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

بالتأكيد. أتخيل شيئًا كهذا…

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

هذا يبدو رائعًا وقويًا.

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

اضطررت إلى متابعة صفحة Github للعثور على إشارة إلى هذا:

للعثور على منافذ الإضافات (plugin outlets)، قم بتشغيل enableDevTools() في وحدة تحكم جافاسكريبت (javascript console).

أنا أقدر إجابتك على استفساري. شكرًا لك.

نعم. إنه مكون سمة. (على الأقل تسمح معظم الخطط بتثبيت أي مكونات سمات تريدها). هل حاولت النقر على الزر الأزرق الكبير الذي يقول “تثبيت مكون السمة هذا”؟

هذا يبدو نقدًا عادلاً!

لقد أضفت رابطًا إلى https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215 حتى تتمكن من العثور على أماكن مخارج المكونات الإضافية (plugin outlets).

لقد أضفت هذا الرابط حتى قبل أن أقرأ هذا الجزء من رسالتك! :slight_smile:

أوه، ولكن بالنظر إلى مخارج المكونات الإضافية على /s لا يبدو أن هناك أي مخارج للمكونات الإضافية. إذا كنت ترغب في وضع نص فوق عنوان “إجراء دفعة”، فأنت محظوظ!

image

(تظاهر بأن “الدفع مقابل الخدمات” هي “إجراء دفعة”) يمكنك وضعه إما في top-notices أو above-main-container، ولكني أخشى أن يؤدي ذلك إلى إضافة المحتوى في كل صفحة، وليس فقط صفحة الدفع ما لم تتمكن من اكتشاف بعض CSS لإخفائه في جميع الصفحات الأخرى. إذا كنت صبورًا، فهناك احتمال معقول أن تتمكن من الحصول على https://ask.discourse.com/ ليخبرك بكيفية القيام بذلك.

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

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

نعم. أنا في مستوى يمكنني فيه تثبيت مكونات السمة دون مشاكل.

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

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

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

لم أكن على علم بهذا المورد، شكرًا لك.

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

أقدر ردك المدروس.

لا، لا. كنت أقصد أن أشير، نعم. أنت على حق. يجب تحسين التوثيق. لهذا السبب قلت إنه “عادِل”!

لست مضطرًا لذلك. فقط افتح أدوات المطور في متصفحك (يعمل F12 ما لم تكن تستخدم جهاز Mac؛ ويجب أن أبحث عنها في كل مرة أستخدم فيها جهاز Mac حتى لو كان على بعد 8 أقدام مني، ثم أبحث في جوجل عن “mac open dev tools browser” أو شيء من هذا القبيل) واكتب enableDevTools() في موجه وحدة التحكم. يمكنك القيام بذلك هنا والآن، على هذا الموقع.

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

أنا لا أستخدم جهاز ماك أبدًا، ولكني أتذكر “J” بفضل

إعجابَين (2)

آه. وحدة تحكم المطور للمتصفح، وليس وحدة تحكم تابعة لـ Discourse. بدأت الأمور تتضح أكثر. شكرًا لك.

لقد قمت بتمكين المكونات المخصصة (Custom Components). وقمت بتمكين أدوات المطور (devtools) في وحدة تحكم المتصفح. وقمت بتنشيط شريط أدوات المطور لرؤية مكونات الإضافات (plugin-components).

والآن أفهم، أنت تقول أنه لا يوجد مكون إضافة لـ الاشتراكات (Subscriptions)، وبالتالي لا توجد طريقة *سهلة لوضع نص في صفحة الهبوط المحددة تلك. فهمت.

*سهلة بمعنى الخطوة 1. الخطوة 2. الخطوة 3. نجاح! وليس تتطلب ساعات من البحث وتعليمات CSS، إلخ.

image

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

أنا أقدر المساعدة في هذا الموضوع. شكرًا لك.

إعجابَين (2)

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

نعم، الاشتراكات لديها class="above-main-container-outlet subscriptions-campaign ember-view"، لذا يمكنك فعل شيء مثل إخفاء فئة العنصر الذي تضيفه ثم إظهاره مرة أخرى إذا كان ضمن subscriptions-campaign. شيء من هذا القبيل.

إعجابَين (2)

بعد البحث قليلاً على جوجل و SO، قمت بتجميع نسخة CSS خالصة:

.above-main-container-outlet.subscriptions-campaign::after {
  content: "Whatever text I want to put here! \A This is a new line! \A";
  white-space: pre;
}

باستخدام \A كحرف سطر جديد.

آمل أن يساعد ذلك؟

إعجابَين (2)

شكرًا لك. أقدر قيامك بذلك.

أنا متنقل حاليًا ولن أكون على جهاز كمبيوتر شخصي (أسهل للعمل عليه) حتى الغد…

لكنني أنشأت مكونًا جديدًا ولصقت فيه تنسيق CSS الخاص بك. قمت بتمكين المكون. والآن يظهر النص في كل صفحة.

لذا فهو يعمل. هذا إنجاز كبير. شكرًا لك.

الآن عليّ فقط أن أكتشف كيفية القيام بذلك…

… عندما تسنح لي الفرصة.

وكيفية تنسيق النص داخل CSS نفسه. على سبيل المثال…

نص العنوان

المحتوى نفسه. وربما أصبح رائعًا قليلًا.

أنا متأكد من أن هذا مجرد شيء يتعلق بـ CSS يمكنني البحث عنه في جوجل واكتشافه في النهاية. أنا أتعلم أثناء المضي قدمًا.

أقدر المساعدة. شكرًا لك.

لقد نجحت في تشغيله فقط على صفحة الاشتراكات وبشكل منسق بشكل صحيح تقريبًا باستخدام ما يلي:

/* الجزء 1: العنوان (منسق كـ H1 أصلي) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
  content: "هذا هو العنوان"; 
  display: block;
  
  /* تنسيق لمطابقة عناوين 'title-wrapper' */
  font-family: var(--heading-font-family);
  font-size: var(--font-up-5);
  font-weight: bold;
  line-height: var(--line-height-small);
  color: #DDDDDD;
  
  /* مسافة بين هذا العنوان والنص أدناه */
  margin-bottom: 8px; 
}

/* الجزء 2: نص الجسم (مع مسافة أدناه) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
  content: "هذا هو النص العادي الذي يأتي أسفل العنوان. \A لا يزال بإمكانك استخدام الشرطة المائلة العكسية A لأسطر جديدة هنا.";
  display: block;
  
  /* تنسيق لمطابقة نص الجسم القياسي */
  font-family: var(--font-family);
  font-size: var(--font-0);
  line-height: var(--line-height-medium);
  color: #DDDDDD;
  white-space: pre-wrap;
  
  /* هذا ينشئ المساحة الفارغة (عودة السطر) أسفل النص الخاص بك */
  margin-bottom: 40px; 
}

إعجابَين (2)

أيضًا، انقر بزر الماوس الأيمن واختر INSPECT. كمبيوتر شخصي/ماك

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

لقد فتحت طلب سحب (PR)، آمل أن يتم دمجه :crossed_fingers::

3 إعجابات

أوه. هذا ذكي جداً. فهمي لـ CSS نظري أكثر منه عملي.

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

@ZeroDean تم دمج طلب السحب (PR)! آمل أن يساعد ذلك!

3 إعجابات

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

إعجابَين (2)

رائع. أقدر لك إنجاز ذلك! شكرًا لك @NateDhaliwal

شكرًا لك. بما أنني أستخدم خدمة مستضافة، فهل هذا يعني أنه يجب عليّ الانتظار حتى تحديث الخادم التالي؟

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