أفضل الممارسات لإنشاء أنماط CSS مخصصة لأقسام المشاركات

مقدمة

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

أحد الأشياء التي أود القيام بها هو إضافة توقيع مخصص إلى الرسائل الخاصة التي أرسلها، و “توقيعها”. لا أريد استخدام صورة؛ بل اسمي بخط Google.

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

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

السؤال: كيف أضع نصًا في منشور في كتلة يمكن استهدافها عبر CSS؟

ما وجدته حتى الآن

صادفت الموضوع التالي:

CSS مخصص داخل منشور / إضافة فئات مخصصة

من هذا الموضوع، استخلصت هذه الإجابة:

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

بينما أنا هنا، سؤال محدد خارج الموضوع قليلاً ولكنه في صلب الموضوع:

أنا “أسيء استخدام” تخصيص لجعل فكرة توقيعي تعمل، فقط أنها لا تعمل، وأتساءل عما إذا كان لدى أي شخص أي رؤى سريعة.

أقوم بتحميل خطوط Google المخصصة باستخدام مكون إضافي أعرف أنه يعمل لأن منتدى بأكمله يستخدم هذه الخطوط بنجاح. استخدمت ذلك لفرض تحميل “Playwrite USA Traditional”.

لدي CSS التالي في السمة الخاصة بي:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

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

هل فاتني شيء غبي في إعداداتي، أم أن هناك شيئًا آخر يمكنك التفكير فيه فاتني؟ هذا ليس سؤال Discourse.

أيضًا، هل هناك طريقة أفضل لتحميل خط Google لاستخدامه في موقعي؟

أوصي بالاطلاع على Generic bbcode wrapper for theme components

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

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

يبدو أن رمز التضمين من https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400، يجب أن يكون "Playwrite US Trad"

// <uniquifier>: استخدم اسم فئة فريد ووصف
// <weight>: استخدم قيمة من 100 إلى 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
إعجاب واحد (1)

أوه، هذا يبدو رائعًا. شكرًا على التوجيه!

في الواقع، هذا كل ما كنت آمله. لم أرغب في إضاعة الوقت، ولكن في حال كان هناك أي شيء واضح حقًا. هههه.

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

للتسجيل، تحميل اسم الخط الصحيح والإشارة إلى اسم الخط الصحيح ينتج النتائج المتوقعة في الأصل.

والآن يمكنني “توقيع” مشاركاتي:


شكرا لك :slight_smile:

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.