إضافة فهرس محتويات المقالة يدويا أو تلقائيا في كل المقالات

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

طريقة إضافة فهرس محتويات المقالة يدويا

سنستخدم لاجل ذلك العلامات المرجعية.

سنحتاج إلى خاصية تسمى id وتعني "identification"والعلامة "#"

أولا: نضع إشارة (علامة مرجعية) للعنصر المحدد للنص أو العنوان الفرعي الذي نريد وضع رابط مرجعي له باستخدام خاصيةid ، وهو النص الذي تنتقل اليه الشاشة.

<h2 id="AnchorName">text</h2>

ثانيا: نقوم بإنشاء رابط مرجعي لهذا العنصر، وفي خاصية الرابط نستخدم علامة "#" متبوعة بقيمة id (العلامة المرجعية) للعنصر الذي نريد الربط له، هذا الرابط عند الضغط عليه تنتقل الشاشة إلى محتويات النص أو العنوان الفرعي الذي يشير اليه.

<a href="#AnchorName">text</a>

طريقة إضافة فهرس محتويات المقالة تلقائيا في كل المقالات

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

هذه الطريقة هي أروع طريقة اكتشفتها حتى الآن وقد صادفتها في المدونة المتميزة (((فولفولي))) التي يديرها مدون رائع ومحترف.

1 ـ من لوحة التحكمBlogger  ⟵ قالب ⟵ تحرير HTML
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود <head/> وضع قبله كود جافا سكريبت التالي ، والذي لا يمكن للأداة ان تعمل بدونه، أما إذا كان مضمنا مسبقا، فأنت لست بحاجة إلى إعادة تضمينه:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

3 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود <data:post.body/> وضع قبله الكود التالي (أو في أي مكان يناسبك):

<style>
#tocDiv {
position: relative;
display: block;
width: 50%;
float: left;
}
#tocList {
padding: 0px 25px 0px 30px;
border: 1px solid #ddd;
margin: 0;
overflow:hidden;
}
.post-body h4 {
display: inline-block;
background: #fff;
padding: 0 0px;
margin: 0;
top: -16px;
right: 40px;
font-size: 13px;
font-weight: 700;
z-index: 1;
}
#tocList ul {
padding: 0;
margin: 0;
}
#tocList a {
font-size: 13px;
padding: 0;
margin: 0;
}
</style>
<div id='tocDiv'>
<h4>يحتوي هذا الموضوع على:</h4>
<ul id='tocList'>
</ul>
</div>
<script>
$(document).ready(function() {
});
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(tocList).empty();
var prevH2Item = null;
var prevH2List = null;
var index = 0;
$(".post-body h2").each(function() {
//insert an anchor to jump to, from the TOC link.
var anchor = "<a name='" + index + "'></a>";
$(this).before(anchor);
var li = "<li><a href='#" + index + "'>" + $(this).text() + "</a></li>";
if( $(this).is("h2") ){
prevH2List = $("<ul></ul>");
prevH2Item = $(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo("#tocList");
} else {
prevH2List.append(li);
}
index++;
});
});
//]]>
</script>

القيم المحددة باللون الأخضر قابلة للتغيير.