كيفية تغيير تنسيق الطابع الزمني في مدونتك بإستخدام مكتبة Timeago-v1.2.3

هل أنت من رواد مواقع التواصل ؟!! ..إذن لا بد أنك قد شاهدت تنسيق الطابع الزمني للمنشورات بهذا الشكل "قبل ثانية" أو "قبل دقيقتين ..." في موقع التواصل الاجتماعي خاصةًتويتر و Facebook. يمثل هذا الوقت في الطوابع الزمنية التي تم نشرها قبل (وقت معين) بدلاً من إظهار التاريخ الكامل مثل 01/08/2018 09:00 م.

فعند نشر مقال ، سيتم عرضه قبل دقائق ، لذلك يمكن للقارئ أن يدرك أن مشاركتك تم نشرها قبل قليل. لا يمتلك البلوجر تمامًا هذه الميزة (تنسيق timeago) ، ولكنه بدل ذلك يوفر وقتًا مع التاريخ واسم الشهر وما إلى ذلك.

في هذا البرنامج التعليمي سأوضح لك كيفية إضافة تنسيق الوقت النصي في مدونتك بإستخدام مكتبة timeago.js المطورة بواسطة Ryan McGeary . سيعرض هذا النص الزمني الثانية والدقائق والساعات والأيام والسنوات (منذ كذا..) بدلاً من التاريخ الكامل. كما أنه يقوم تلقائيًا بتحديث الطوابع الزمنية..ومع ذلك أضفنا له وضيفة التحديث لحل بعض المشاكل منها الذين يستعملون زر إظهار المزيد للمواضيع بدلا من ترقيم الصفحات.

• الخطوة الأولى

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
2. إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير Edit HTML 
3. إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
4. بإستعمال الزر C +Ctrl للنسخ و v +Ctrl للصق قم بوضع الأكواد في المكان المناسب 

• الخطوة الثانية

1. قم بالبحث عن الكود التالي أو جزء منه..ستجده مكرر أكثر من مرة 

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'>
<data:post.timestamp/>
</abbr>

قم الآن بإضافة المعرفtimeagoإلى الكود السابق عند إيجاده مع تكرار العملية مع الجميع بالشكل التالي..

<abbr class='timeago published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'>
<data:post.timestamp/>
</abbr>

قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js

<script> //<![CDATA[ !function (t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof module&&"object"==typeof module.exports?require("jquery"):jQuery)}(function(t){function e(){var e=r.settings;if(e.autoDispose&&!t.contains(document.documentElement,this))return t(this).timeago("dispose"),this;var o=i(this);return isNaN(o.datetime)||(0===e.cutoff||Math.abs(n(o.datetime))<e.cutoff?t(this).text(a(o.datetime)):t(this).attr("title").length>0&&t(this).text(t(this).attr("title"))),this}function i(e){if(!(e=t(e)).data("timeago")){e.data("timeago",{datetime:r.datetime(e)});var i=t.trim(e.text());r.settings.localeTitle?e.attr("title",e.data("timeago").datetime.toLocaleString()):!(i.length>0)||r.isTime(e)&&e.attr("title")||e.attr("title",i)}return e.data("timeago")}function a(t){return r.inWords(n(t))}function n(t){return(new Date).getTime()-t.getTime()}t.timeago=function(e){return a(e instanceof Date?e:"string"==typeof e?t.timeago.parse(e):"number"==typeof e?new Date(e):t.timeago.datetime(e))};var r=t.timeago;t.extend(t.timeago,{settings:{refreshMillis:5e4,allowPast:!0,allowFuture:!1,localeTitle:!1,cutoff:0,autoDispose:!0,strings:{prefixAgo: null,prefixFromNow: null,suffixAgo: "ago",suffixFromNow: "from now",inPast: 'any moment now',seconds: "less than a minute",minute: "about a minute",minutes: "%d minutes",hour: "about an hour",hours: "about %d hours",day: "a day",days: "%d days",month: "about a month",months: "%d months",year: "about a year",years: "%d years",wordSeparator: " ",numbers: []}},inWords:function(e){function i(i,n){var r=t.isFunction(i)?i(n,e):i,o=a.numbers&&a.numbers[n]||n;return r.replace(/%d/i,o)}if(!this.settings.allowPast&&!this.settings.allowFuture)throw"timeago allowPast and allowFuture settings can not both be set to false.";var a=this.settings.strings,n=a.prefixAgo,r=a.suffixAgo;if(this.settings.allowFuture&&e<0&&(n=a.prefixFromNow,r=a.suffixFromNow),!this.settings.allowPast&&e>=0)return this.settings.strings.inPast;var o=Math.abs(e)/1e3,s=o/60,u=s/60,m=u/24,l=m/365,d=o<45&&i(a.seconds,Math.round(o))||o<90&&i(a.minute,1)||s<45&&i(a.minutes,Math.round(s))||s<90&&i(a.hour,1)||u<24&&i(a.hours,Math.round(u))||u<42&&i(a.day,1)||m<30&&i(a.days,Math.round(m))||m<45&&i(a.month,1)||m<365&&i(a.months,Math.round(m/30))||l<1.5&&i(a.year,1)||i(a.years,Math.round(l)),h=a.wordSeparator||"";return void 0===a.wordSeparator&&(h=" "),t.trim([n,d,r].join(h))},parse:function(e){var i=t.trim(e);return i=i.replace(/\.\d+/,""),i=i.replace(/-/,"/").replace(/-/,"/"),i=i.replace(/T/," ").replace(/Z/," UTC"),i=i.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"),i=i.replace(/([\+\-]\d\d)$/," $100"),new Date(i)},datetime:function(e){var i=r.isTime(e)?t(e).attr("datetime"):t(e).attr("title");return r.parse(i)},isTime:function(e){return"time"===t(e).get(0).tagName.toLowerCase()}});var o={init:function(){o.dispose.call(this);var i=t.proxy(e,this);i();var a=r.settings;a.refreshMillis>0&&(this._timeagoInterval=setInterval(i,a.refreshMillis))},update:function(i){var a=i instanceof Date?i:r.parse(i);t(this).data("timeago",{datetime:a}),r.settings.localeTitle&&t(this).attr("title",a.toLocaleString()),e.apply(this)},updateFromDOM:function(){t(this).data("timeago",{datetime:r.parse(r.isTime(this)?t(this).attr("datetime"):t(this).attr("title"))}),e.apply(this)},dispose:function(){this._timeagoInterval&&(window.clearInterval(this._timeagoInterval),this._timeagoInterval=null)}};t.fn.timeago=function(t,e){var i=t?o[t]:o.init;if(!i)throw new Error("Unknown function name '"+t+"' for timeago");return this.each(function(){i.call(this,e)}),this},document.createElement("abbr"),document.createElement("time")}); //THIS IS RAN Timeago function refreshData(){ var tm = 1, // 1 second id = $(".timeago"); id.timeago(); jQuery.timeago.settings.strings = { prefixAgo:null, prefixFromNow:null, suffixAgo:"تقريبا", suffixFromNow:"من الآن", inPast:'في اي لحظة الان', seconds:"منذ أقل من دقيقة", minute:"منذ دقيقة", minutes:"منذ %d دقيقة", hour:"منذ ساعة", hours:"منذ %d ساعة", day:"منذ يوم", days:"منذ %d يوم", month:"منذ شهر", months:"منذ %d أشهر", year:"منذ سنة", years:"منذ %d سنة", }; setTimeout(refreshData, tm*1000); }refreshData(); // execute function //]]> </script>

• التعديل على الكود

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

• ملاحظة للمطور

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

report

إذا أردت سكريبت المكتبة timeago.js بدون ضغط قم بتحميله من حاوية التحميل في القائمة الجانبية كما أنصحك بزيارة صفحة المطور على موقع github

Share This

clear