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

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

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

المميزات

التثبيت

قبل إضافة أكواد (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

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

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

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