إستخدام خاصية الهاشتاك مثل المواقع الكبيرة عبر جيكوري فقط

وبس مادامك فهمت عمل الخاصية على المواقع الكبرى راح تسألني سؤال ٱخر وهو كيف سنقوم بإضافة الخاصية على بلوجر وكيف تعمل فبلوجر وكما تعرفون لاتتعامل مع PHP مثل instagram فلهذا كيف سيعمل السكريبت على بلوجر ايضا الجواب سهل كل مافهلماه هو بدل إنشاء صفحة واتعاب نفسها إستخدمنا خاصية البحث داخل المدونة التي توفرها بلوجر عبر رابط بسيط. 

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(e,n){var t,o=window.location.origin,r=n.querySelectorAll(".post-body");if(0<r.length)for(t=0;t<r.length;t+=1)r[t].innerHTML=r[t].innerHTML.replace(/#(\S+)/g,'<a class="hashtags" href="'+o+'/search?q=$1">#$1</a>')}(0,this.document));
/*]]>*/
</script>

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

ان كنت مطور ولديك فكرة تريد تطبيقها وهذا الكود قد تشمله فكرتك ولكن لم تفهمه فهذا سهل جدا سأشرح لك الٱن لك كود وعمله وكيف تستخدمه تابعني جيدا لنشرح الأكواد المستعملة بسهولة:

الٱن قبل أن أبدأ بالشرح اذهب وإنسخ الأكواد وضعها في أحد المحررات التي تمتلكها ثم الٱن سأشرح لك كل جزء من أوله لٱخره. يوجد في البداية أكواد تأمر بعدم تنفيذ المطلوب قبل اتمام تحميل الصفحة وبياناتها وهذا جيد لموقعك لاتحذفها لكي لايختلط عمل الأكواد والٱن يوجد كود ٱخر وهو المعرف t و o لتفهم سبب إضافتهم لكي نقوم بتحويل رابط الموقع لكود تعريفي إستخدمنا كود var الذي ميزناه بoوt مع بعض والٱن الكود الثاني المعرف بn يقوم بتحويل محتوى الكلاس المحدد الى كود مختصر وان كان عملك يستعمل كلاس غير post-body فكلما عليك فعله هو تغييره بالكلاس المستعمل ولكن لاتضع كلاس ليس له أي علاقة بعملنا فقط قم بوضع كلاس المواضيع الداخلية او الإقتباسات, والكود الثالث وهو كود يقوم بالحصول على المحتوى المحدد بشكل أدق حيث انه هنا لايطلب المحتوى كاملا انما تحويل المحتوى من نصوص وأكواد الى بيانات مثل JSON فأنت لو خبير بJSON راح تلتقي بهذا أكواد كثيرا والٱن بعدما قمنا بالحصول على المتطلبات الكاملة بقي التنفيذ ففي الكود القادم ستجد هذا الرمز /#(\S+)/g والرمز يخبر الموقع انه عما يجد الرمز السابق في محتوى الكلاس المحدد يقوم يقوم بتغييره ولكن أنت ستقول لي وأنا كيف سأعرف كل الكلمات وأضعها هنا انا أريد شيء أوتماتيكي راك أشرحلك أكثر فهنا يكمن السحر انت الٱن عندما رأيت الرمز السابق اذهب الى المحرر ستجده انت رأيت علامة هاشتاك ولم تفهم ظننت ان الكود يشمل فقط الهاشتاكات، لا يأخي لو نظرت جيدا ستجد بعد رمز الهاشتاك رمز ٱخر وهو 

(\S+) وهذا الرمز يرمز لأي كلمة تأتي بعد رمز # مباشرتا والٱن هل فهمتني وأيضا يعتبر الرمز الأخير بمثابة بمعرف سنستخدمه قريبا تابعني، والٱن بعدما حددنا الكلمة المتصلة بالهاشتاك ولكن لم نقم بتحويلها لكود خاص بتضمين رابط ولحل هذا أخبرنا المتصفح بأن يقوم بتحويل الكلمة الى كود وهو الموجود في أكواد JAVASCRIPT وهذا هو الكود: 

<a class="hashtags" href="'+o+'/search?q=$1">#$1</a>

والٱن لنشرح الكود الذي يعمل بHTML كٱخر شيء: 

هنا يوجد كود a الخاص بتضمين الروابط ويحتوي على كلاس hashtags يمكنك تركه او تغييره او حذفه ليس له أهمية في هذا الكود ولكن قد تحتاجه في أكواد أخرى او لتجعل له شكل خاص به عبر CSS وأيضا يوجد href الخاص بالرابط الذي ينتقل له وفي بدايته إستخدمنا المعرف o الذي شرحناه في البداية ارجع للأعلى ان لم تره او الٱن بعد المعرف o استخدمنا صفحة /search الذي توفرها بلوجر من صفحاتها التي لايمكن حذفها وان كان عملك ليس من ضمن بلوجر فكلما عليك وهو تغييره بصفحة الكبث الداخلية الموجودة في موقعك وان لم تكن تمتلك واحدة فضفها او هذا القسم والدرس بالكامل لايخصك أبدأ والأن ان كنت تمتلك واحدة او ضفت الٱن واحدة يتقوم بالحصول على معرف البحث الخاص بها الٱن انت بعدما ضفت الصفحة وغيرت الرابط للصفحة التي ضفتها سيبقى شيء واحد وهو الرمز (=q?) الى الرمز الذي يتوفر بصفحتك واغلبية الصفحات البحث تستخدم الرمز السابق والٱن بقي الرمز 1$ هل تتذكر عندما قلت لك أن الرمز الذي شرحناه في الجزء السابق انه يعتبر معرف ان أردنا ذلك وهكذا أصبح على شكل معرف وإستخدمناه ليصبح كلمة البحث وهنا نعرف أن علامة # لم ولن يكن لها اي عمل في الرابط وهكذا عرفنا كيف حولنا الكلمة الى رابط بدون ان ندخل # دالخ الرابط فلو كان همنا هو إنشاء رابط بخاصية # فقط فكان سيكون عملنا غير مجديا وسهل جدا جدا ولن سكون له اي ميزة خاصة. 

والى هنا ننتهي من درس اليوم والى اللقاء.