أداة أحدث الموضوعات لمدونات بلوجر أو قسم معين بطريقة مميزة
أداة أحدث الموضوعات لمدونات بلوجر أو قسم معين بطريقة مميزة

مثل حي علي Codepen مثال حي
مرحبًا ، في المقال هذه ، أحضر إليكم هذه الأداة لبلوجر. اداة عرض اخر المواضيع لقسم معين لمدونات بلوجر. يطلق عليه mint-feedList وينتمي إلى صندوق الأدوات لتطوير قوالب بلوجر . أنا متأكد من أن هذه الأداة ستكون مفيده لأغلب الناس. حسنًا ، دون المزيد من التحدث عن الأداة دعونا نبداً.

تنبيه لتعمل الأداة يجب أن تكون المدونة في وضع عام عكس ذلك لن تعمل الأداة.

المميزات

  1. Pure Javascript (لا توجد تبعيات أو أطر مطلوبة لاستخدامها).
  2. بنية HTML قابلة للتخصيص من خيارات الأداة.
  3. اثنين من طريقة العرض المتاحة افتراضياً.
  4.  صمم باستخدام بعضاً من scss (يمكنك رؤية الكود في المستودع على github)
  5. وبعض المميزات الأخري ...
هذه هي بعض الخصائص التي يمكنني ذكرها في هذه الأداة ، بالطبع أنني آمل أن أحسنها مع مرور الوقت لتحسينها بمساعدة أولئك الذين يستخدمونها على مواقع الويب الخاصة بهم يوميًا ، بالطبع أنا أرحب بكل الاقتراحات والأفكار التي يمكن أن تساعدنا في تحسين الأداة ،هذا الأسكربت قد تجد به بعض الأخطاء لذلك يرجي إبلاغنا أذا وجدت أي خطاً في الأداة.

التثبيت

علي الرغم من أن نوعيات هذه الأدوات توضع في الشريط الجانبي إلأ أننا قمنا بتطويرها بحيث تعمل في أي مكان أيّاً يكن دعنا من ذلك ولنتوجه لطريقة التثبيت..

إضافة أكواد الـ CSS

قبل إضافة أكواد (javascript) ، سنضيف css. هذه الخطوة اختيارية ، لأننا إذا أردنا تعديل بنية html للأداة ، فلن تساعدنا هذه الأنماط كثيرًا. حسنًا ، في لوحة تحكم بلوجر نضغط علي المظهر وانقر فوق "تخصيص" والذي سيأخذنا إلى صفحة التخصيص ، حيث نبحث عن "متقدم" ، سنقوم بالنزول للأسفل حتي نجد "إضافة CSS" نقوم بلصق الكود التالي
    / *! mint-feedList.js v1.0 - Mint Web © 2019 | MIT License * / 
    .mint-feedList__messages { background : rgba (30, 39, 46, .05); color : # 1e272e ; font-size : 14px ; font-weight : 500 ; padding : 16px ; border-radius : 4px } .mint-feedList-item { margin-bottom : 16px ; overflow : hidden} .mint-feedList-item__image { width : 96px ; height :96px;float:left}.mint-feedList-item__image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;border-radius:4px;-webkit-box-shadow:0 3px 5px -1px rgba(0, 0, 0, .36);box-shadow:0 3px 5px -1px rgba(0, 0, 0, .36)}.mint-feedList-item__content{width:calc(100% - 96px);padding:0 16px;float:right}.mint-feedList-item__title{font-size:18px;color:#1e272e;font-weight:500;padding:16px 0;padding-top:0;display:block;-webkit-transition:all 0.2s;transition:all 0.2s}.mint-feedList-item__title[href]{text-decoration:none}.mint-feedList-item__title[href]:hover{color:#3f51b5;text-decoration:none}.mint-feedList-item__summary{margin:0;font-weight:500;color:rgba(30, 39, 46, .7);padding:16px 0;padding-top:0}.mint-feedList-item__meta{font-size:12px;margin:16px 0;margin-bottom:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mint-feedList-item__meta a,.mint-feedList-item__meta span{background:#eff2f5;color:#1e272e;padding:0 8px;line-height:28px;border-radius:4px;font-weight:500;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:4px}.mint-feedList-item__meta a.tags:before,.mint-feedList-item__meta a.timestamp:before,.mint-feedList-item__meta span.tags:before,.mint-feedList-item__meta span.timestamp:before{width:14px;height:14px;opacity:.6;margin-right:8px;background-size:100% 100%;background-repeat:no-repeat}.mint-feedList-item__meta a.tags:before,.mint-feedList-item__meta span.tags:before{content:"";background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUuNSw3QTEuNSwxLjUgMCAwLDEgNCw1LjVBMS41LDEuNSAwIDAsMSA1LjUsNEExLjUsMS41IDAgMCwxIDcsNS41QTEuNSwxLjUgMCAwLDEgNS41LDdNMjEuNDEsMTEuNThMMTIuNDEsMi41OEMxMi4wNSwyLjIyIDExLjU1LDIgMTEsMkg0QzIuODksMiAyLDIuODkgMiw0VjExQzIsMTEuNTUgMi4yMiwxMi4wNSAyLjU5LDEyLjQxTDExLjU4LDIxLjQxQzExLjk1LDIxLjc3IDEyLjQ1LDIyIDEzLDIyQzEzLjU1LDIyIDE0LjA1LDIxLjc3IDE0LjQxLDIxLjQxTDIxLjQxLDE0LjQxQzIxLjc4LDE0LjA1IDIyLDEzLjU1IDIyLDEzQzIyLDEyLjQ0IDIxLjc3LDExLjk0IDIxLjQxLDExLjU4WiIgLz48L3N2Zz4=)}.mint-feedList-item__meta a.timestamp:before,.mint-feedList-item__meta span.timestamp:before{content:"";background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDIwQTgsOCAwIDAsMCAyMCwxMkE4LDggMCAwLDAgMTIsNEE4LDggMCAwLDAgNCwxMkE4LDggMCAwLDAgMTIsMjBNMTIsMkExMCwxMCAwIDAsMSAyMiwxMkExMCwxMCAwIDAsMSAxMiwyMkM2LjQ3LDIyIDIsMTcuNSAyLDEyQTEwLDEwIDAgMCwxIDEyLDJNMTIuNSw3VjEyLjI1TDE3LDE0LjkyTDE2LjI1LDE2LjE1TDExLDEzVjdIMTIuNVoiIC8+PC9zdmc+)}@media screen and (max-width:480px){.mint-feedList-item__meta a.tags:before,.mint-feedList-item__meta a.timestamp:before,.mint-feedList-item__meta span.tags:before,.mint-feedList-item__meta span.timestamp:before{display:none}}.mint-feedList.overlay .mint-feedList-item{display:-webkit-box;display:-ms-flexbox;display:flex}.mint-feedList.overlay .mint-feedList-item__image{width:156px;height:156px;position:relative;overflow:hidden}.mint-feedList.overlay .mint-feedList-item__image img{-webkit-transition:all 0.2s;transition:all 0.2s}.mint-feedList.overlay .mint-feedList-item__image:hover img{opacity:.85;-webkit-transform:scale(1.1);transform:scale(1.1)}.mint-feedList.overlay .mint-feedList-item__content{width:calc(100% - 156px)}.mint-feedList.overlay .mint-feedList-item__title{position:absolute;left:0;bottom:0;width:100%;background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .6)));background:linear-gradient(transparent, rgba(0, 0, 0, .6));color:#fff;padding:16px;border-radius:4px;pointer-events:none}.mint-feedList.overlay .mint-feedList-item__summary{padding:16px;background:#eff2f5}@media screen and (min-width:992px){.mint-feedList.overlay .mint-feedList-item{display:block}.mint-feedList.overlay .mint-feedList-item__image{float:none;width:100%;height:auto}.mint-feedList.overlay .mint-feedList-item__content{width:100%;padding:0}}.mint-feedList__loader{text-align:center;padding:16px 0}.mint-feedList__spinner{width:36px;height:36px;border-radius:50%;border:3px solid transparent;border-top:3px solid #3f51b5;display:inline-block;-webkit-animation:1s rotate infinite linear;animation:1s rotate infinite linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes rotate{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
        

قمنا بأضافة أكواد الـCSS  لننتقل إلي الخطوه التالية.

إضافة المكون الأضافي

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

    <div id="mint-feedLists"></div>
    <script src="https://imintweb.github.io/mint-projects/cdn/feedlist/mint.feedList.min.js"></script>
    <script>var feedList1 = new FeedList({/*ضع خياراتك هنا.*/});</script>

نقوم بحفظ الأعدادات وبعدها ستعمل أداة أحدث الموضوعات لمدونات بلوجر أو قسم معين بطريقة مميزة في مدونة بشكل جيد

الخيارات المتاحة

يمكن العثور على الخيارات المتاحة لهذه الأداة  في الصفحة الخاصة بالأداة.

تعديل هيكل HTML

ونصل إلى الجزء "المرح" في هذه الإضافة ، حيث أنه بفضل هذا الخيار لدينا القدرة على معالجة بنية html لهذا النص دون الحاجة إلى التلاعب "manipulate" بالكود ، وهو مناسب جدًا لأولئك الذين ليس لديهم معرفة برمجية حول HTML و CSS. إن تشغيل هذا الخيار بسيط للغاية ويعمل على غرار سلاسل قوالب ES6 ومكتبة handlebars.js ، على الرغم من أنه بطريقة أكثر بدائية وبساطة ، فمن أجل إجراء التغييرات ، استخدم طريقة استبدال javascript. على أي حال ، من يهمه الأمر حول كيفية عمل الكود ، يمكنك إلقاء نظرة على المستودع في github الذي يمكنك العثور عليه في بداية الموضوع.

حسنًا ، بالعودة إلى الموضوع ،كود html التالي هو الهيكل الافتراضي الذي يستخدمه الأسكريبت في وضعه "الافتراضي":

<div class="mint-feedList-item">
    <div class="mint-feedList-item__image"><img src="IMAGE" alt="TITLE"></div>
    <div class="mint-feedList-item__content">
     <a href="URL" target="_blank" class="mint-feedList-item__title">TITLE</a>
     <p class="mint-feedList-item__summary">SUMMARY</p>
    </div>
   </div>

كما نرى ، لدينا الوسم TITLE و IMAGE و URL و SUMMARY التي سيتم استبدالها بقيم كل منها بمجرد تنفيذ الأسكريبت . في الإصدار 1.0 ، يتوفر لدينا الوسوم التالية:
  • TITLE: يقوم بإرجاع عنوان الموضوع
  • IMAGE: يقوم بإرجاع صورة الموضوع
  • URL: يقوم بإرجاع عنوان URL للموضوع
  • CATEGORY: يقوم بإرجاع نص العلامة الأولى الموجودة في المصفوفة.
  • TAGS: يقوم بإرجاع روابط التسميات.
  • TIMESTAMP: يقوم بإرجاع تاريخ نشر الموضوع بالتنسيق: d / m / y

تنبيه يجب أن تقوم بكتابة التسمية بنفس نمطه بالأحرف الكبيره حتي تعمل.

يتم استبدال هذه القيم بقيمتها الحقيقية بمجرد تنفيذ الأسكريبت

مثال لطريقة الأستخدام 

في حال أردنا تعديل بنية html لهذا الأداة بحيث تتوافق مع تصميم قالب مدونتك ، فاتبع المثال أدناه

<script src="//imintweb.github.io/mint-projects/cdn/feedlist/mint.feedList.min.js"></script>
<script>
var customRender = function(){
 //ضمن علامات الاقتباس المفردة ، نضيف HTML الخاص بنا.
 return 'قسم قسم قسم';
}
var feedList1 = new FeedList({render: customRender});
</script>

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