قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا جميلا ومميزا .
عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه , سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى تتابع معنا هذه الأكواد وشكلها فى الواقع .
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر .
وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو .<?xml version="1.0" encoding="UTF-8" ?>
هذه تكويدات خاصه بنوع الملف ومحتواه وليس من الضرورى عليك معرفة ماذا تفعل هذه الأكواد , ولكن هنك جزء هام فيها وهو الملونباللون الأحمر وهو الذى يخبر المتصفح أن يقوم بقراءة المحتوى من إتجاه معين , وهذا الجزء هام جدا وسنتعامل معه كثيرا فيما بعد .<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
وهو وسم رأس المدونه وهو الوسم الذى يحتوى على أوامر هامه جدا مثل الميتا تاج .<head>
وهذه هى أوامر الميتا تاج وهى الأساسيه ويمكنك اضافة أوامر ميتا تاج أخرى على حسب إحتياجاتك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه .<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
هو وسم بداية وفتح الكود الذى يضم بداخله أوامر لغة CSS وهى اللغه التى تحدد شكل المدونه وتعطيه المظهر المطلوب .<b:skin><![CDATA[
وهو كود المتغيرات ويوجد عادة فى القوالب التى تقدمها لنا بلوجر رسميا , ونجد هذا الكود موجود بكثره ولكل واحد فيهم وظيفه محدده , فمثلا فى هذا الكود فهو يحدد لنا خط محتوى المدونه ويقدم لنا الخط الأساسى والمعتاد ثم يقدم لنا الخط الذى قمت أنت بإختياره وتغييره من خلال مصمم نماذج بلوجر .<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
وهو كود CSS ويلى أكواد ووسوم المتغيرات مباشرة , وهذا الكود الذى كتبته كنموذج يحدد لنا محتوى أو جسد المدونه من حيث الخط ولون النص والخلفيه والحواشى , ونلاحظ إستخدام المتغيرات فى هذه الأكواد .body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
وهو وسم نهاية وإغلاق الكود الذى ضم بداخله لغة CSS , وبهذا يحدد أوامر هذه اللغه بين وسميه بداية ونهايه .]]></b:skin>
وهو كود مكتبة جى كويرى الذى يجعل مدونتك قابله للإستعانه بتأثيرات جى كويرى الجذابه جدا , وإن لم تكن موجوده بمدونتك فعليك إضافتها .<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
وهو وسم إغلاق رأس المدونه , وهو الذى يضم كل ما ذكرناه سابقا فيما بعد وسم فتح رأس المدونه .</head>
وهو وسم بداية وفتح جسد المدونه أو محتوى المدونه .<body expr:class='"loading" + data:blog.mobileClass'>
وهو كود أداه موجوده على المدونه , والكود السابق خاص بقائمة الروابط , فهو يحدد إسم الأداه وإذا كانت مقفله أو مفتوحه ونوع الأداه, ومثل هذه الأدوات يكون رأس الصفحه و رسائل المدونه الإلكترونيه ( التدوينه نفسها ) .<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
وهو كود التقسيم والذى يحدد قسم معين فى المدونه ويحتوى على ما يحتوى عليه هذا القسم , ويبدأ بكود البدايه وينتهى بوسم الإغلاق .<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
وهو وسم الشرط , ووظيفته أنه يشتطر أمرا ما على المتصفح , فمثلا يشترط على المتصفح بإظهار أداه معينه فى الصفحه الرئيسيه فقط وإخفائها فى باقى الصفحات , وهكذا فى أمور كثيره فى المدونه .<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهى لغه تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد فى استخدام القوالب فى بلوجر .<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب , وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحه أو محتوى المدونه .</body>
وسم الإغلاق للكود كاملا .</html>
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر .
0 commentaires:
Enregistrer un commentaire