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

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


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

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

ملاحظة هذه الطريقة للمدونات التي لا يتوفر على خاصية إقرء المزيد و الملخصات . 

تركيب الإضافة 

أول شيء نبحث في تحرير HTML , عن الوسم <data:post.body/> , يوجد في المدونة أكثر من واحد , غالبا نحن نريد الثاني , ستقوم بتجربة الطريقة عليه , إن لم تعمل جربه على واحد آخر .

سنقوم بتغييره إلى هذا :

<b:if cond='data:view.type != &quot;item&quot;'>
<div class='post-image'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 250)'/>
  <b:else/>
<img alt='لا توجد صورة للمعاينة' src='https://i.imgur.com/ClqeWa5.jpg'/>
</b:if>
      </div>
<div class='post-snippet'>
<b:eval expr='data:post.body snippet { length: 200 }'/>
      <a class='readmore' expr:href='data:post.url'> متابعة الموضوع </a>
      </div>
  <b:else/>
<data:post.body/>
</b:if>


الآن لتحسين شكل الإضافة إبحث عن ]]></b:skin> و ضع فوقه مباشرة هذه الأكواد

.post-image {
    width: 200px;
    float: right;
    margin-left: 10px;
}
.post-image img {
    width: 100%;
}

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