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

[Discourse]

إذن، تريد إدراج نص أو صورة في موقع Discourse الخاص بك.

بالنسبة للنص، ففي معظم الحالات يكفي تعديله من /admin/customize/site_texts.
في بعض الأحيان، ومع ذلك، نرغب في إضافة جملة بين كتلتين متميزتين، بدلاً من تعديل أحد العناصر الموجودة.

دعنا نرى كيفية القيام بذلك باستخدام الخاصيتين :before و :after في CSS3.

الخطوات الأساسية

1. لكي تعمل، سنحتاج إلى استخدام وحدة تحكم المطور الموجودة في المتصفحات الرئيسية. لفتحها، اضغط ببساطة على F12.

   

2. حدد العنصر الذي تريد إضافة النص قبله أو بعده.

   

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

3. ابدأ في التعديل. أضف اللواحق :before أو :after إلى الفئة، وأضف نصًا باستخدام الخاصية content.

   إضافة صورة أكثر تعقيدًا قليلاً إذا لم تكن تعرف CSS، ولكن من الجيد اتباع نمط مماثل:

   background-image: url("url-goes-here");
   background-repeat: no-repeat;
   background-size: your-value;
   content: "";
   width: your-value;
   height: your-value;
   display: inline-block;
   

   قبل:

   

   وبعد:

   

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

4. قم بتخصيصه. بمعرفة القليل عن CSS، من السهل تخصيص نمط النص كما تريد.

   

   .fancy-title::after {
     content: "نص آخر " "\f072";
     color: violet;
     font-family: Fontawesome;
     background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%);
     font-size: 18px;
     padding: 2px 4px;
     border: 1px solid;
   }
   

5. بمجرد الرضا، أضف تغييراتك إلى CSS لموقعك عن طريق إنشاء مكون سمة.

---

ننتقل إلى بعض الأمثلة العملية:

• عنوان الموضوع

  قد يكون من المفيد لبعض المواقع إضافة صورة أو لافتة أو إعلان مخصص قبل أو بعد عنوان الموضوع أو كل منشور.

  

  #topic-title::before {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 750px 335px;
    width: 750px;
    height: 335px;
    display: inline-block;
    content: "";
  }
  
  #topic-title::after {
    background-image: url(your-URL-here);
    background-repeat: no-repeat;
    background-size: 800px 295px;
    width: 800px;
    height: 295px;
    display: inline-block;
    content: "";
  }
  

• جسم الموضوع

  

  .topic-body.clearfix::before {
    background-image: url(your-URL-here);
    max-height: 2.8571em;
    width: 690px;
    height: 184px;
    background-size: auto 2.8571em;
    background-repeat: no-repeat;
    margin-left: 11px;
    margin-bottom: 0.25em;
  }
  

  أو بعد:

  

  ما عليك سوى تغيير .topic-body.clearfix::before إلى .topic-body.clearfix::after.
  وبالمثل، من الممكن إضافة نص عادي قبل أو بعد:

  .topic-body.clearfix::before {
    content: "DISCOURSE ROCKS!";
    color: red;
    font-weight: bold;
    padding-left: 11px;
  }
  

  
  

• أزرار المنشور

  
  

  .nav.post-controls .actions::before {
    color: red;
    content: "مرحبًا من Discourse";
  }
  

• الجدول الزمني

  

  .topic-timeline::before {
    color: red;
    content: "Hello World";
  }
  
  .topic-timeline::after {
    color: red;
    content: "Hello again";
  }
  
  .timeline-scroller-content::before {
    color: violet;
    content: "Hey,";
  }
  
  .timeline-scroller-content::after {
    color: violet;
    content: "It's me again!";
  }
  
  .timeline-container .topic-timeline .start-date::before {
    color: goldenrod;
    content: "Start Date ";
  }
  
  timeline-container .topic-timeline .start-date::after {
    color: goldenrod;
    content: " \f060";
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::before {
    content: "\f061 ";
    color: burlywood;
    font-family: Fontawesome;
  }
  
  .widget-link.now-date::after {
    color: burlywood;
    content: " Now Date";
  }
  

• أزرار التذييل

  

  #topic-footer-buttons::before {
    content: "THESE ARE FOOTER BUTTONS";
    color: indianred;
    border: 2px solid;
    padding: 3px;
  }
  
  #topic-footer-buttons::after {
    color: indianred;
    content: "CONTENT AFTER GO HERE";
    border: 2px solid;
  }
  

  في الحالة الأخيرة، تجدر الإشارة إلى أن محتوى :after يُدرج بعد نص. إذا لم تكن بحاجة إلى تخصيصات خاصة، فمن المستحسن تغيير النص الأصلي عبر /admin/customize/site_texts بدلاً من تعديل CSS.

• المواضيع المقترحة

  

  #suggested-topics::before {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  
  #suggested-topics::after {
    content: "";
    background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
    width: 690px;
    height: 184px;
    background-size: 690px 184px;
    background-repeat: no-repeat;
    display: inline-block;
  }
  

• إجراءات الموضوع

  

  .widget-button.btn-flat.share.no-text.btn-icon::after {
    content: " Share";
  }
  
  .widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
    content: " Like";
  }
  

مرجع: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

---

ملاحظة: العناصر الزائفة المُنشأة بواسطة ::before و ::after تكون محتواة داخل صندوق تنسيق العنصر، وبالتالي لا تنطبق على العناصر البديلة مثل <img>، أو على عناصر <br>. المصدر: ::after CSS pseudo-element - CSS | MDN

وبعبارة أخرى، لن يعمل هذا مع العناصر «المغلقة ذاتيًا» التي لا يمكن أن تحتوي على عناصر فرعية. من البديهي التفكير في أن العناصر الزائفة تكون مثل:

{::before is here}<tag>text content</tag>{::after is here}

بينما في الواقع هي

<tag>{::before is here}text content{::after is here}</tag>

---

يتم التحكم في إصدار هذا المستند - اقترح تغييرات على github.