8/01/2018

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

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




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


لاتنسى أخذ نسخة إحتياطية من القالب

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

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


لاتنسى أخذ نسخة إحتياطية من القالب

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

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

  • 
    <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