قالب بلوجر هو بالأساس عباره عن ملف بامتداد XML وهو نوع من الملفات التي تحتوي على أكواد HTML وCSS بطريقه مدمجة،
قالب بلوجر هو بالأساس عباره عن ملف بامتداد
XML وهو نوع من الملفات التي تحتوي
على أكواد HTML وCSS بطريقه مدمجة، فيكون اسم
القالب مثلا SIMPLE.XML
وهو الملف الذي يتم تحميله ورفعه على مدونتك كي يكسبها شكلا جميلا ومميزا.
عند رفع ملف القالب على مدونتك وفتح
تحرير HTML سنجد أن القالب عباره عن
أكواد مصفوفه بشكل منظم ومرتب، هذه الأكواد لها معنى وكل منها له وظيفة، سنتناول
الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كي تتابع معنا هذه
الأكواد وشكلها في الواقع.
<?xml version="1.0"
encoding="UTF-8" ?>
هو الترميز الذي يميز هذا الملف بأنه
على لغة XML والذي
يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو.
<!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>
وهو وسم رأس المدونة وهو الوسم الذى
يحتوى على أوامر هامه جدا مثل الميتا تاج .
<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>
هذه هي أوامر الميتا تاج وهي الأساسية
ويمكنك اضافة أوامر ميتا تاج أخرى على حسب احتياجاتك، فمثلا أمر الميتا تاج الأول
خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه.
<b:skin><![CDATA[
هو وسم بداية وفتح الكود الذي يضم بداخله أوامر لغة CSS وهي اللغة التي تحدد شكل المدونة
وتعطيه المظهر المطلوب.
<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"/>
هو كود المتغيرات ويوجد عادة في القوالب التي تقدمها لنا بلوجر رسميا،
ونجد هذا الكود موجود بكثرة ولكل واحد فيهم وظيفة محدده، فمثلا في هذا الكود فهو
يحدد لنا خط محتوى المدونة ويقدم لنا الخط
الأساسي والمعتاد ثم يقدم لنا الخط الذي قمت
أنت باختياره وتغييره من خلال مصمم نماذج بلوجر.
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>
هو وسم نهاية وإغلاق الكود الذي ضم بداخله لغة CSS, وبهذا يحدد
أوامر هذه اللغة بين وسميه بداية ونهاية.
<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>
وهو وسم الشرط،
ووظيفته أنه يشترط أمرا ما على المتصفح، فمثلا يشترط على المتصفح بإظهار أداه
معينه في الصفحة الرئيسية فقط وإخفائها في باقي الصفحات، وهكذا في أمور كثيره في المدونة.
<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>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهي لغة تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد في استخدام القوالب في بلوجر.
</body>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب, وهو الوسم الذى ضم
كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحة أو محتوى المدونة.
</html>
وسم الإغلاق
للكود كاملا.
تعليقات