طريقة عمل مدونة ذات ملخص وقابلة للتوسعة read more

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

صفحة مدونتك الرئيسية عادة ما تعرض كل المحتوى لكل رسائلك. إذا كانت مشاركاتك وعادة ما تكون أكثر من فقرتين، عندئذ سيجد زائرك صعوبة في العثور بسرعة على الموضع الذي يهتم به لأنه يحتاج الكثير من النزول لأسفل. ولهذا نستخدم الملخص المنسدل وخاصية المواضيع القابلة للتوسعة في المدونات القديمة. وهذه الخاصية تؤدي الغرض ذاته في المدونات الجديدة وأكثر! بهذا، صفحتك الرئيسية سوف تعرض فقط الملخصات وعند الضغط على "أقرأ المزيد" سوف يظهر كامل الموضوع في نفس الصفحة الرئيسية مما يوفر الأنتقال لصفحات كثيرة. بالإضافة إلى رابط "الملخص فقط" يمكن للقارىء تصغيير الموضوع مرة اخرى. أضف إلى ذلك ميزة أن رابط "أقرأ المزيد" تظهر فقط للرسائل المقسمة! هذه خاصية مذهلة ولكن عليك توخي الحذر عند التعديل على القالب html. إذا لم تكن على دراية بـ html يفضل طلب الأتصال بصديق^_^. وبما أنك هنا فلا تقلق!
في هذه الخاصية، يمكنك اختيار عرض أي مقاطع من النص في بداية كل رسالة، كملخص لكل المقالة. وللقراء الذين يريدون تكملة الموضوع يمكنهم الضغط على رابط لرؤية النص الكامل. وهذا ملائم إذا كان لديك الكثير من المقالات الطويلة في كل صفحة واحدة. علما بأنه يجب عليك تمكين صفحات الرسائل للإستفادة من هذه الميزة. –هذا هو الأساسي default ولكن لا مانع من التأكد...
ولتمكين صفحات الرسائل إذهب إلى الإعدادت >> الأرشفة >> هل تريد تمكين صفحات الرسائل؟ >> نعم >> حفظ الأعدادات. أنظر الصورة...

ملحوظة: لمستخدم FTP/SFTP ربما يحتاج أدلة لمشاركاتهم مثل 2004, 2004/01, 2004/02، إلخ.
الخطوات الواجب اتباعها:
هناك ثلاث مقومات تدخل في هذه الميزة: conditional CSS، رابط "اقرأ المزيد" ورابط "الملخص فقط" لكل مشاركة، والتعديل في الرسائل التي تستخدم هذه الميزة. ولكن يجب أن تسبقهم خطوتين. لذلك دعونا نذهب للتطبيق خطوة خطوة.
1-توسيع قوالب عناصر واجهة المستخدم:
من "تخصيص" أو من "لوحة التحكم الرئيسية" إذهب إلى "التخطيط" ثم "تحرير html" ومنها أضغط على " توسيع قوالب عناصر واجهة المستخدم" لتظهر لك كل الاكواد. انظر الصورة...

2-تنزيل قالب كامل:
خطوة هامة جدا عند عمل أي إضافة أو تعديل على القالب، وهي نسخ كل الاكواد Ctrl+A ثم Ctrl+C وحفظها بملف نصي على الحاسوب الخاص بك، كما يمكنك الضغط على رابط " تنزيل قالب كامل" لحفظ القالب كاملا بصيغة XML، لكي تتمكن من العودة إليه ولصق ما نسخته أو "إيداع" ما رفعته، في حالة حدوث خطأ لا قدر الله. انظر الصورة السابقة...
3-Conditional CSS:
نبدأ العمل إذا، أبحث عن كود..............

</head>

في القالب، ويمكن البحث باستخدام Ctrl+F، واضف قبله هذا الكود كاملا من هذه الصفحة. قبله أي تؤشر بالفارة في بداية سطر الكود وتضغط enter لعمل سطر فارغ قبله تنسخ به الاكواد...

تحديث: أو من هنا مباشرة لربما تحذف الصفحة التي بها الكود:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

4-رابط "اقرأ المزيد" ورابط "الملخص فقط":
أبحث عن هذا الكود........................

id='post'

وأنسخ وألصق التغيرات الملونة بالأحمر في هذه الصفحة (كن حريصا جدا على تجنب الأخطاء، وللإشارة ربما لا تظهر هذه الكلمة "uncustomized-post-template" في القالب ولكن لا بأس.
رابط "اقرأ المزيد" سوف يظهر فقط في الصفحة الرئيسية وصفحات الأرشيف، وسوف يجعل باقي الرسالة تنسدل للقارىء بالصفحة الرئيسية والتي تحتوي على النص الكامل لمقالتك، وبالأسفل رابط "الملخص فقط".

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

<div class='post uncustomized-post-template'>

وأستبدله بهذا الكود

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

ب- ابحث عن هذا الكود................

<p><data:post.body/></p>

وأستبدله بهذا الكود

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

للإشارة، يمكنك تغيير نص "...Read more" ونص "Summary only…" إلى ما تريد، طبعا.
5-التعديل في الرسائل:
في الجزء الأخير كل ما نحتاج هو إضافة كود صغير في الرسالة الفعلية. كل رسالة تريد أن تعمل بها هذه الميزة يجب استخدام هذا الكود بالأسفل:

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

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

...الآن عند كتابة رسالة جديدة سوف يظهر لك أين تكتب الملخص وأين تكتب باقي الرسالة،
ومن المهم التأكد من أن /span في نهاية الرسالة. لضمان ذلك، استخدم "تحرير Html" بدلا من "تأليف" حين كتابة الرسالة، وبعد الكتابة يمكن الذهاب إلى "تأليف" وتغيير الخطوط والألوان وخلافه.
وللإشارة، يمكن أيضا تقسيم الرسائل القديمة إلى ملخص وكامل الرسالة، وذلك بتحرير الرسائل وإضافة الكود.
وللعلم، رابط "اقرأ المزيد" ورابط "الملخص فقط" لن يظهر إلا في الرسالة المقسمة بهذه الطريقة. وهذه ميزة ربما لن تجدها في الأكواد الأخرى.
ملاحظة، ربما تريد كتابة موضوع قصير بدون رابط "اقرأ المزيد" يمكنك عمل هذا ببساطة بحذف الكود عند تأليف الرسالة.
مزايا هذه الطريقة: ملخصات للتخصيص، بدلا من العنوان فقط. ويمكن تطبيقها على بعض الرسائل دون غيرها (على سبيل المثال: قد تريد هذا للرسائل الطويلة فقط)، بالأضافة إلى رابط "الملخص فقط"، وانسدال باقي الموضوع في نفس الصفحة الرئيسية.
العيوب: يتطلب تغييرات في الرسائل نفسها، وليس القالب فقط، ومع ذلك، فإن رابط "اقرأ المزيد" يمكن وضعه في قالب الرسالة ليظهر دائما. وكذلك مشكلة واجهتني بسبب اللغة العربية في تنسيق النص ونهاية الملخص، ومع ذلك يمكن التغلب عليها بعد معرفة html جيدا.
المراجع:
Blogger Help
Peter
Ramani
تحديث:هذا المصدر تقريبا تم حذف المدونة"hackosphere.blogspot" لهذا تم تحديث الموضوع

بعض الحقوق محفوظة
يمكن نسخ ونقل الموضوع ونشره وتوزيعه لغير الأغراض التجارية^_^ بشرط ادراج رابط مباشر للمصدر وللمؤلف.
تم نشر الموضوع لأول مرة بتاريخ 30/7/2009