إنشاء جدول التنقل في محتوى التدوينة بلوجر
السلام عليكم،اقدم لكم اليوم شيء رائع لإنشاء جدول التنقل في محتوى التدوينة عبر
العنواين وبالإنجليزية يدعى ب Table Of Contents فالمميز فيه أنه تلقائي أي لايحتاج
وضع رابط الهاشتاك في بداية المقال واضافة ايدي للعناوين وهكذا ستمل قد تضيف الجدول
في مقال اثنان ثلاثة بس ماراح تقدر تكمل تضيف الجدول في المقالات وهكذا مواضيع
مدونتك لن تكون متناسقة ولكن سنقدم لكم اليوم سكريبت منه تحتاج فقط كتابة مقالك
واضافة العناوين وخلص ماراح يحتاجك بشيء لاتلمسه فقط(🤣) الذي لايعرف هذه الميزة
فهي عبارة عن جدول المحتويات أو دعنا نقول عبارة عن قائمة تتكون من نقاط أو أجزاء
من الموضوع الوارد في المقال الذي يحتوي على عنوان.يمكننا استخدام "جدول المحتويات"
كتحليل لمحتويات المقالة في شكل ارتباط الهاشتاك الذي درسناه في سلسلة HTML بحيث
يكون من السهل على القارئ اختيار المعلومات التي سيقرأها أو التنقل بين فروع
التدوينة بكل سهولة وللتذكير فإننا غالبًا ما نعثر على جدول المحتويات على مواقع
ويكيبيديا والموسوعات وكذلك ملفات PDF من الكتب الإلكترونية والتي يتم وضعها عادة
بعد مقدمة المقال أو الفكرة الرئيسية لمقال او في البداية.وقبل أن نتقل بكم لطريقة
تركيب هذه الميزة دعنا نوضح مسألة مهمة وهي الحرص على تنسيق مواضيعك بشكل دقيق
وإدراج العناوين لكي نساعد الإضافة بإعطاء أفضل نتيجة لها.
طريقة التركيب
السكريبت عبارة عن كلمة خفية توضع في بداية المقال فيقوم السكريبت بتغيير
محتواه بمعلومات سبق وان حملها وهي انه قام بأخد العنواين واضافة لها ايديات
لهم ونسخ العناوين وضعها على شكل ارتباط الهاشتاك بدل محتوى الكلمة الخفية
- إنتقل إلى المظهر >> ثم إضغط على تحرير Edit HTML
- قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js التالي
<script type='text/javascript'>
/*<![CDATA[*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(j($){$.1G.2=j(o,p){p=$.1H({1e:"1I 1J L:",6:"1K",r:"#1L",Y:"f",1f:1g,Z:m.Z().1M(j(){M(m.1N===8)1h m.1O}).1P()},p);C N;M(p.1f==1i){N=[p.Z]==" 1Q "}1j{N=1g};M(N){v=\' #2-4{1k:1l;1R:1S;k:10-w;3:11 12 #O;13-9:#O;14:P 1T;x:0 P 1m;1n-Q:1U;Y:\'+p.Y+\';}#2-L{9:#1o;n-R:1V;n-15:1W;1X:1Y;x:P 0;}#2-4 a:1Z{20:"•";9:\'+p.r+\';x:0 g;k:10-w;n-R:1m;}#2-4 a{9:#21;n-R:22;x-23:g;k:w;1p:1q;}#2-4 a:S{9:\'+p.r+\';}.y-l 1r:z,.y-l 1s:z,.y-l 1t:z,.y-l 1u:z,.y-l 1v:z,.y-l 1w:z{14:P 0;9:\'+p.r+\';n-15:25;}#2-6{1k:1l;k:w;Q:26%;1p:1q;x:g 0;}h[1x="27"] #2-6{T-19:28;}h[1x="29"] #2-6{T-19:2a;}#2-6 a{9:2b;13-9:\'+p.r+\';3:11 12 \'+p.r+\';n-R:2c;k:10-w;1n-Q:2d;x:g;14:2e 2f;T-19:1y;n-15:1z;2g-1A:1z;}#2-6 a:S{9:#2h;13-9:#O;3:11 12 #O;}#2-4:S,#2-6 a:S{-U-D-E:0 g F G(0,0,0,0.16);-V-D-E:0 g F G(0,0,0,0.16);-W-D-E:0 g F G(0,0,0,0.16);-o-D-E:0 g F G(0,0,0,0.16);D-E:0 g F G(0,0,0,0.16);}#2-4{-U-3-c:H;-V-3-c:H;-W-3-c:H;-o-3-c:H;3-c:H;}#2-6 a{-U-3-c:I;-V-3-c:I;-W-3-c:I;-o-3-c:I;3-c:I;}#2-4 *{-U-A-B:f;-2i-A-B:f;-V-A-B:f;-W-A-B:f;-o-A-B:f;A-B:f;}\';!j(t){C e=1a.2j("v");e.2k=t,1a.l.2l(e)}(v);m.2m(\'<h J="2-4"><h J="2-L" 2n="" 2o="2p" 2q="0">\'+p.1e+\'<1B Q="18" 1A="18" 2r="0 0 24 24"><2s 2t="#1o" d="2u,18.2v.1C,2w.2x,16.2y,2z.2A,16.2B.17,2C,5.2D.17,2E.2F,7.2G,2H.2I,7.2J.1C,2K,5.2L" /></1B></h><X J="2"></X></h>\').2M(o).2N(j(i){i=i+1;$(m).2O(\'J\',\'1b-\'+i).2P(o).2Q(\'1D+1D,p,h, 2R, 2S, 2T, 2U, 1r, 1s, 1t, 1u, 1v, 1w, p, 2V, 2W, a, 2X, 2Y, 2Z, 30, 31, 32, 33, 34, 35, 36, 37, 38, q, s, 39, 3a, 3b, 3c, 3d, 3e, 3f, C, b, u, i, 1y, X, 1c, 3g, 3h, 3i, 3j, 3k, 3l, 3m, 3n, 3o, 3p, 3q, 3r, 3s, 3t, 3u, 3v, 3w, 3x, 3y, 3z, 3A, 3B, 3C, 3D, 3E, 3F, 3G, 3H, 3I, 3J, 1b, 3K, 3L, 3M, 3N, 3O\').3P(\'<h J="2-6"><a 1d="#2-4">\'+p.6+\' ↑</a></h>\');$(\'<1c><a 1d="#1b-\'+i+\'">\'+$(m).T()+\'</a></1c>\').3Q(\'#2-4 X\')});$(\'#2-L\').1E("1F",j(){C 2=1a.3R("2");M(2.v.k==="f"){2.v.k="w"}1j{2.v.k="f"}});$(\'#2-4 a, a[1d="#2-4"]\').1E("1F",j(){C K=m.K;$(\'3S,l\').3T({3U:$(K).3V().6},3W,j(){3X.3Y.K=K});1h 1i})}}})(3Z);',62,248,'||toc|border|list||top|||color|||radius|||none|5px|div||function|display|body|this|font||||mincolor||||style|block|margin|post|target|user|select|var|box|shadow|8px|rgba|4px|30px|id|hash|Content|if|ext|f5f5f5|10px|width|size|hover|text|webkit|moz|ms|dl|float|contents|inline|1px|solid|background|padding|weight||||align|document|section|dt|href|title|Allallowtoc|true|return|false|else|position|relative|15px|min|000000|clear|both|h1|h2|h3|h4|h5|h6|dir|center|normal|height|svg|83|br|on|click|fn|extend|Table|of|Top|4d90fe|map|nodeType|nodeValue|get|allowtoc_Content|overflow|hidden|20px|180px|17px|700|cursor|pointer|before|content|777|13px|bottom||bold|100|rtl|left|ltr|right|white|11px|80px|2px|12px|line|cecece|khtml|createElement|innerHTML|appendChild|prepend|onclick|role|button|tabindex|viewBox|path|fill|M12|17L8|15L7|42|41L12|21L16|59|41L15|15M12|83L15|9L16|58|59L12|3L7|41|59L8|9L12|83Z|children|each|attr|nextUntil|not|span|applet|object|iframe|blockquote|pre|abbr|acronym|address|big|cite|code|del|dfn|emx|img|ins|kbd|samp|small|strike|strong|sub|sup|tt|dd|ol|ul|li|fieldset|form|label|legend|table|caption|tbody|tfoot|thead|tr|th|td|article|aside|canvas|details|embed|figure|figcaption|footer|header|hgroup|menu|nav|output|ruby|summary|time|mark|audio|video|after|appendTo|getElementById|html|animate|scrollTop|offset|600|window|location|jQuery'.split('|'),0,{}))
$(function() {
var post = $('.post-body div[dir]');
$(post).toc('h1,h2,h3,h4,h5,h6', {
title: "المحتويات",
top: "رجوع",
mincolor: "#4d90fe",
float: "right",
Allallowtoc: true,
});
});
/*]]>*/
</script>
التعديلات
لجعل صندوق جدول التنقل يأخذ كامل عرض الصفحة نضع القيمة noneالمعرف title | خاص بعنوان جدول التنقل ضع الإسم الذي يناسبك |
المعرف top | خاص بإسم زر الصعود ضع الإسم الذي يناسبك |
المعرف mincolor | خاص بلون الإضافة الإفتراضي يمكنك وضع كود اللون الذي تريده كقيمة مكان #4d90fe . |
المعرف float |
خاص بمكان وضعية جدول التنقل لاحظ الاتي..لجعل صندوق جدول التنقل يأخذ
جهة اليمين نضع القيمة right. لجعل صندوق جدول التنقل يأخذ جهة اليسار
نضع القيمة left
لجعل صندوق جدول التنقل يأخذ كامل عرض الصفحة نضع القيمة none |
المعرف Allallowtoc | مهم جدا فهو ميزة تتيح لك عرض جدول المحتوايات في كامل منشوراتك دفعة واحدة دون اللجوء إلى وضع أمر التنفيذ <!-- allowtoc_Content --> داخل المنشور طبعا في حال كانت مواضيعك منسقة بشكل جيد ... إذا لتفعيل هذه الخاصية قم بالأتي..إستعمل القيمة true لتشغيل الإضافة في جميع منشوراتك. إستعمل القيمة false للتعطيل في جميع منشوراتك و عرض الإضافة فقط في حال وضعنا أمر التنفيذ <!-- allowtoc_Content --> داخل المنشور. |