In this iteration, I do a little refactoring and set up for adding javascript in later iterations. I'll discuss the refactoring and javascript set up separately. Oh, yeah. And I also set a background image. That's discussed below, too.
Refactoring
The refactoring was basically about breaking up long includables into smaller includables that could be re-assembled into the larger elements. I found that my post includable was getting very long with a lot of different things going on inside it for the various post components. My preference is to have smaller blocks of code that do essentially only one thing (like insert the timedate line in the footer) so that I can focus on one small thing at a time.
So, this:
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<!-- for the post title -->
<b:if cond='data:post.title'>
<div class="post-title">
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</div>
</b:if>
<!-- for the post body -->
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>
<b:else/>
<div class='post-body' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
</div>
</b:if>
<!-- for the post footer -->
<div id="post-footer">
<!-- for the author -->
<div id="post-footer-author">
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</div>
<!-- for the post footer time and date line -->
<div id="post-footer-timedate">
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<data:post.timestamp/>
</b:if>
</b:if>
on
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/>
<script type='text/javascript'>
postDate = "<data:post.dateHeader/>";
</script>
<b:else/>
<script type='text/javascript'>
document.write(postDate);
</script>
</b:if>
</div>
<!-- for the post footer labels -->
<div id="post-footer-labels">
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</div>
<!-- end of the post footer -->
</div>
</b:includable>
Became this:
<!-- post includable -->
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:include name='post-title' data='post'/>
<b:include name='post-body' data='post'/>
<b:include data='post' name='post-footer'/>
</b:includable>
With the components being defined in their own includables like this:
<!-- post-title includable -->
<b:includable id='post-title' var='post'>
<b:if cond='data:post.title'>
<div class="post-title">
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</div>
</b:if>
</b:includable>
I don't know about you, but I find that a lot nicer! My includables fit on a single screen and I can think about and work on things without having to scroll around.
javascript setup
I also set up a place in the <head> section where I'm going to put all my javascript (at least that's my working hypothesis). From a previous post, I had also put a line of javascript in the middle of my code. So, I moved this up into my javascript section. And, I created a little dummy javascript function (called 'alertBox') so that I could verify that this setup worked.
Here's what the javascript section in the <head> looks like:
<script type='text/javascript'>
var postDate="";
//<![CDATA[
function alertBox()
{
alert("I am an alert box!");
}
//]]>
</script>
And I set up the post-footer-comments includable to use the javascript function:
<!-- post-footer-comments includable -->
<b:includable id='post-footer-comments' var='post'>
<b:if cond='data:post.numComments > 0'>
<a href="javascript:void(0)" onclick="alertBox();">
<data:post.commentLabelFull/>
</a>
</b:if>
</b:includable>
And, it worked!
Background Image
Just because I was futzing around, I decided to include a background image for my blog. This was accomplished in the CSS section:
body {
background:url(http://backgroundfull.com/images/1654-image-green-background-ground-wallpaper-back-344641.jpg) no-repeat;
background-attachment: fixed;
}
Template Code
Here's what the template looks like after refactoring and javascript setup:
<?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>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Quando' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'></link>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'></link>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:skin>
<![CDATA[
/*
-----------------------------------------------
----------------------------------------------- */
/* Variable definitions
====================
<Group description="Post" selector="body">
<Variable
name="post.title.font"
description="Font for Post Title"
type="font"
default="normal normal 13px Oxygen, sans-serif"
value="normal normal 13px Oxygen, sans-serif"/>
<Variable
name="post.body.font"
description="Font for Post Body"
type="font"
default="normal normal 12px/18px 'Oxygen', sans-serif"
value="normal normal 12px/18px 'Oxygen', sans-serif"/>
<Variable
name="post.title.color"
description="Post Title Color"
type="color" default="#4c2600"
value="#4c2600"/>
<Variable
name="post.body.color"
description="Text Color"
type="color"
default="#ffffff"
value="#495025"/>
</Group>
<Variable name="post.wrapper.width" description="Width of the Post Wrapper" type="length" default="700px" value="700px"/>
<Variable name="post.body.width" description="Width of the Post Body" type="length" default="680px" value="680px"/>
/* =================================================
CSS Styling
================================================= */
body {
background:url(http://backgroundfull.com/images/1654-image-green-background-ground-wallpaper-back-344641.jpg) no-repeat;
background-attachment: fixed;
}
.post-body {
font: $(post.body.font);
color: $(post.body.color);
background-color: #ffffff;
padding: 5px 12px 8px 8px;
width:$(post.body.width);
-moz-border-radius: 5px;
border-radius: 5px;
}
#post-footer {
font: $(post.body.font);
font-size: 11px;
margin: 10px 0px 5px 1px;
}
.post-wrapper {
padding: 3px 10px 6px 9px;
background-color: #f6f7e8;
width: $(post.wrapper.width);
margin: 10px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.post-wrapper a {
text-decoration: none;
color: #DE7104;
}
.post-title {
font: $(post.title.font);
font-size: 110%;
// font-weight: bold;
color: $(post.title.color);
margin: 5px 0px 9px 1px;
}
.post-title a {
color: $(post.title.color);
text-decoration: none;
display: block;
}
.post-title a:hover {
color: #545b10;
}
]]>
</b:skin>
<script type='text/javascript'>
var postDate="";
//<![CDATA[
function alertBox()
{
alert("I am an alert box!");
}
//]]>
</script>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<!-- main includable -->
<b:includable id='main' var='top'>
<b:if cond='data:numPosts != 0'>
<b:loop values='data:posts' var='post'>
<div class="post-wrapper">
<b:include data='post' name='post'/>
</div>
</b:loop>
</b:if>
</b:includable>
<!-- post includable -->
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:include name='post-title' data='post'/>
<b:include name='post-body' data='post'/>
<b:include data='post' name='post-footer'/>
</b:includable>
<!-- post-title includable -->
<b:includable id='post-title' var='post'>
<b:if cond='data:post.title'>
<div class="post-title">
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</div>
</b:if>
</b:includable>
<!-- post-body includable -->
<b:includable id='post-body' var='post'>
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>
<b:else/>
<div class='post-body' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
</div>
</b:if>
</b:includable>
<!-- post-footer includable -->
<b:includable id='post-footer' var='post'>
<div id="post-footer">
<b:include name='post-footer-comments' data='post'/>
<b:include name='post-footer-author' data='post'/>
<b:include data='post' name='post-footer-timedate'/>
<b:include data='post' name='post-footer-labels'/>
</div>
</b:includable>
<!-- post-footer-comments includable -->
<b:includable id='post-footer-comments' var='post'>
<b:if cond='data:post.numComments > 0'>
<a href="javascript:void(0)" onclick="alertBox();">
<data:post.commentLabelFull/>
</a>
</b:if>
</b:includable>
<!-- post-footer-author includable -->
<b:includable id='post-footer-author' var='post'>
<div id="post-footer-author">
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</div>
</b:includable>
<!-- post-footer-timedate includable -->
<b:includable id='post-footer-timedate' var='post'>
<div id="post-footer-timedate">
<b:if cond='data:top.showTimestamp'>
On
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/>
<script type='text/javascript'>
postDate = "<data:post.dateHeader/>";
</script>
<b:else/>
<script type='text/javascript'>
document.write(postDate);
</script>
</b:if>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<data:post.timestamp/>
</b:if>
</b:if>
</div>
</b:includable>
<!-- post-footer-labels includable -->
<b:includable id='post-footer-labels' var='post'>
<div id="post-footer-labels">
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
No comments:
Post a Comment