|
| WOWchinese |
Template Tag list
Here is a list of all of Diary's template tags, for the purpose of copying and pasting when template hacking. These tags are explained further in Diary Template Tags, defined.
<head> tags:
<$BlogSiteFeedLink$>
<$BlogEncoding$>
<BlogSiteFeed>
<$BlogSiteFeedUrl$>
</BlogSiteFeed>
<$BlogMetaData$>
<$BlogPageTitle$>
<body> tags:
<$BlogOwnerFirstName$>
<$BlogOwnerLastName$>
<$BlogOwnerEmail$>
<$BlogOwnerFullName$>
<$BlogOwnerPhotoUrl$>
<$BlogOwnerNickname$>
<$BlogOwnerLocation$>
<$BlogOwnerAboutMe$>
<$BlogOwnerProfileURL$>
<Blogger>
<BlogDateHeader>
<$BlogDateHeaderDate$>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemURL>
<a href="<$BlogItemURL$>">
</BlogItemURL>
<$BlogItemTitle$></a>
</BlogItemTitle>
<BlogItemTitle>
<$BlogItemTitle$>
</BlogItemTitle>
<$BlogItemBody$>
<$BlogItemAuthor$>
<$BlogItemAuthorNickname$>
<$BlogItemAuthorEmail$>
<$BlogItemAuthorURL$>
<$BlogItemDateTime$>
<$BlogItemNumber$>
<$BlogItemArchiveFileName$>
<$BlogItemPermalinkURL$>
<$BlogItemControl$>
<BlogDateFooter>
</BlogDateFooter>
</Blogger>
<BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
<MainPage></MainPage>
<ArchivePage></ArchivePage>
<ItemPage></ItemPage>
<MainOrArchivePage></MainOrArchivePage>
<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
<BlogItemCommentsEnabled>
<$BlogItemCommentCount$>
<BlogItemComments>
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$>
<$BlogCommentPermalinkURL$>
<$BlogCommentAuthor$>
<$BlogCommentDateTime$>
<$BlogCommentDeleteIcon$>
<$BlogItemCreate$>
</BlogItemComments>
</BlogItemCommentsEnabled>
|
| WOWchinese |
| Template Tags: defined
Diary tags look a lot like HTML. One difference between them and HTML is that case is important.
Diary tags, defined:
<$BlogSiteFeedLink$> - outputs your Site Feed's URL inside a <link> tag:
<link rel="service.feed" type="application/atom+xml" title="Your Blog's Title" href="http://yourblog.wowchinese.com/atom.xml" />
<$BlogEncoding$> - inserts the encoding setting from the Settings | Formatting tab into a content-type declaration. Specifically:
<meta http-equiv="Content-Type"
content="text/html; ch***et=<$BlogEncoding$>" />
<BlogSiteFeed><$BlogSiteFeedUrl$></BlogSiteFeed> - allow the RSS feed for your blog to be auto-discovered by supporting aggregators. Example:
<BlogSiteFeed>
<link rel="alternate"
type="application/rss+xml"
title="RSS"
href="<$BlogSiteFeedUrl$>" />
</BlogSiteFeed>
<$BlogMetaData$> - inserts all blog metadata via one tag. here's sample output:
<meta http-equiv="Content-Type"
content="text/html; ch***et=UTF-8" />
<meta name="MSSmartTagsPreventParsing"
content="true" />
<meta name="generator" content="Blogger" />
<link rel="service.feed" type="application/atom+xml"
title="DanoTestMule"
href="http://yourblog.wowchinese.com/atom.xml" />
<link rel="service.post" type="application/atom+xml"
title="DanoTestMule"
href="http://www.wowchinese.com/atom/6602135" />
<link rel="EditURI" type="application/rsd+xml"
title="RSD"
href="http://www.wowchinese.com/rsd.pyra?blogID=6602135" />
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
(this last tag will appear if your blog is set to unlisted.)
<$BlogPageTitle$> - Gives your published blog pages smart titles ("Blog Name" for the index page, "Blog Name: Date Info" for archive pages, and "Blog Name: Post Title" for Post Pages). This tag should only be used in a Template's <head>, in between <title> and </title>.
<$BlogTitle$> - The title of the blog.
<$BlogDescription$> - A description of the blog.
<Blogger> & </Blogger> - the main "container tags" for your blog content; most of the following tags should be inside these to work properly.
<BlogDateHeader>
<$BlogDateHeaderDate$>
</BlogDateHeader> - these output date headers for each post, as defined in the Settings | Formatting tab.
<BlogItemTitle>
<BlogItemURL>
<a href="<$BlogItemURL$>">
</BlogItemURL>
<$BlogItemTitle$></a>
</BlogItemTitle> - these output each post's Title, linked to their respective external URLs; remove the second, third and fourth lines to unlink the Titles.
<$BlogItemBody$> - The content of a post.
<$BlogItemAuthor$> - The author of a post, using both the first and last names.
<$BlogItemAuthorNickname$> - The Display Name of the author of a post.
<$BlogItemAuthorEmail$> - The email address of the author of a post.
<$BlogItemAuthorURL$> - The homepage URL of the author of a post.
<$BlogItemDateTime$> - The Date and/or Time of a post.
<$BlogItemNumber$> - The unique ID number of the post.
<$BlogItemArchiveFileName$> - The archive filename of the post
<$BlogItemPermalinkURL$> - The permalink of the post
<$BlogItemControl$> - The Quick Edit link of the post
<BlogDateFooter>
</BlogDateFooter> - these output date footers for each post, as defined in the Settings | Formatting tab.
Sidebar archive list tags, explained in the archive links article:
<BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
Conditional tags, explained in the conditional tag article:
<MainPage></MainPage>
<ArchivePage></ArchivePage>
<ItemPage></ItemPage>
<MainOrArchivePage></MainOrArchivePage>
Previous post code, explained in the previous posts article.
<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
Comment code, explained in the comment tags article.
<BlogItemCommentsEnabled>
<$BlogItemCommentCount$>
<BlogItemComments>
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$>
<$BlogCommentPermalinkURL$>
<$BlogCommentAuthor$>
<$BlogCommentDateTime$>
<$BlogCommentDeleteIcon$>
<$BlogItemCreate$>
</BlogItemComments>
</BlogItemCommentsEnabled>
Profile code, explained further in the profile tags article:
<$BlogOwnerNickname$>
<$BlogOwnerFirstName$>
<$BlogOwnerLastName$>
<$BlogOwnerFullName$>
<$BlogOwnerEmail$>
<$BlogOwnerLocation$>
<$BlogOwnerAboutMe$>
<$BlogOwnerPhotoUrl$>
<$BlogOwnerProfileUrl$>
Add Ons
<$BlogCounter$>
|
| WOWchinese |
| What do Blog's template tags do?
Blogging makes Web updates easy. At a minimum, all you have to do is write a post and click "publish" to see your page updated. When you submit a post to WOWchinese, it gets saved to our database and this is where Blog tags come in. Blog tags tell our blog publishing program which information to fetch from database and put on the page. "Please put the topic here, the comments right underneath, and then the date and time go here and here. Thank you." It's all very polite.
Blog Tags are meant to look like HTML so that when a more advanced user wants to customize a template, they will be in familiar territory. There are many different Blog tags but they can be generally categorized into two main groups: item-level tags and page-level tags.
The item-level tags do all the grunt work because they are the ones that pull the actual information from WOWchinese's database and put it on the Web. They do all the heavy lifting but don't worry, we taught them to bend at the knees. You can spot an item level tag in the dark because they are the ones with the money signs such as <$BlogItemAuthor$> (that tag will make the blog author's name show up.)
The page-level tags think they're fancier than all the others (but they're really not) because they have more to do with the design and structure of a page. Page level tags tell item level tags when and where to do their thing so when you take a look, you'll see them appearing both before and after item level tags.
<BloggerArchives>
<$BlogArchiveURL$>
<$BlogArchiveName$>
</BloggerArchives>
See how the Blog Archives tag tells those two money sign tags that they can go ahead and do their thing? So bossy! But they actually get along very well so we can't complain.
Both tags also get along well with HTML. Web designer types who like to design their own Blog templates (or modify our free templates) understand that they can wrap HTML around our tags to get them to look however they want.
<BlogDateHeader>
<h4><$BlogDateHeaderDate$></h4>
</BlogDateHeader>
In the example above, the date headers on each blog post will show up larger and bolder than other text on the Web page because the user has wrapped the <h4></h4> tags (a kind of tag in HTML that means "bigger and bolder") around the <$BlogDateHeaderDate$> tag.
That's a little highlight of what it's like to fiddle around with Blogg Tags and HTML. Remember, you don't have to work with your template code if you don't want to; that's why we have tons of free designs for you to choose from. However, just in case you want to try your hand at working on your template we've got other tutorials for you to read. If you do start tinkering, here's a tip: copy and paste the code that's in your template section first and save it as a text file so if you really screw everything up you can just revert to what you started with. Have fun!
|
| WOWchinese |
Template Walkthrough
A lot of our other articles explain the various Blog template tags in great detail, but this one is going to be a demonstration of how they all work together to create a complete template. As we walk through the code, I'll explain what is going on in each section. The Blog tags will all be highlighted, apart from the regular HTML and CSS, so they'll be easy to spot. Sit tight, here we go!
<html><head><title><$BlogPageTitle$></title>
This is the beginning of our template. You'll usually want to use the <$BlogPageTitle$> for your title, since it automatically uses the right name for any page you're on.
quote:
<style>
/* style modified from glish:
http://www.glish.com/css/ */
body{margin:0px 0px 0px 0px;font-family:trebuchet
ms, verdana, sans-serif; background-color:white;}
#Title{font-size:63px; padding-left:15px;
padding-top:10px; text-transform:uppercase;
font-family:trebuchet ms, verdana, sans-serif;}
#Title a {text-decoration:none; color:inherit;}
#Description{padding:0px; padding-top:10px;
font-size:12px; font-weight:normal}
.DateHeader{border-bottom:none; font-size:15px;
text-align:left;
margin-top:20px; margin-bottom:14px; padding:1px;
padding-left:17px; color:gray;
font-family:trebuchet ms, verdana, sans-serif;}
.PostTitle{font-size:18px; font-weight:bold}
.Post{padding-left:20px; margin-bottom:20px;
text-indent:10px;
padding-right:20px; line-height:22px}
.PostFooter{margin-bottom:15px; margin-left:0px;
color:black; font-size:10px}
#leftcontent{background-color:whitesmoke;
border-right:2px dashed #000;
border-bottom:0px dashed #000; float:left;
padding-bottom:20px;
margin-right:15px; padding:0px; width:67%;
border-top:0px dashed #000}
.SideBarTitle{font-weight:bold; font-size:18px}
h1{font-size:14px; padding-top:10px}
a{text-decoration:none}
a:hover{border-bottom:dashed 1px red}
#rightcontent{font-size:12px; height:100%;
margin-left:0px; text-transform:none;
padding-right:10px; background-color:white;}
.blogComments{font-size:15px; text-align:left;
margin-top:20px; margin-bottom:14px; padding:1px;
padding-left:17px; color:gray; font-family:trebuchet
ms, verdana, sans-serif;}
.blogComment{margin-top:10px; margin-bottom:10px;
color:black; text-indent:10px; padding-right:20px;
line-height:22px}
.deleted-comment {font-style:italic; color:gray;}
.byline{margin-bottom:20px; margin-left:0px;
margin-right:10px; color:black;
font-size:10px; display:inline}
#profile-container { }
.profile-datablock { }
.profile-img {display:inline;}
.profile-img img {float:left; margin:0 10px 0px 0;
border:4px solid #ccc;}
#profile-container p { }
#profile-container .profile-textblock { }
.profile-data strong {display:block;}
</style>
This section is the style sheet, which describes the colors, fonts, borders and other properties of everything on your page. For more information, see How do I change the colors or fonts in my template? and [url=""]What else can I do with CSS[/url]?
<!-- Meta Information -->
<$BlogMetaData$>
</head>
At the end of the head section, we have the <$BlogMetaData$> tag. This is immensely useful, since it automatically inserts all the meta tags that you need for your blog in one easy step.
Now we're ready to get into the body of the template. This is the part that we actually see in the browser window when we view the blog.
<body>
<div id="leftcontent">
<div id="Title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</div>
The <$BlogTitle$> tag is the part that shows the title of our blog, but we added a little bit of extra code around it to make a link back to the homepage. The <$BlogURL$> tag is the one that gives us that address. However, since we don't want to bother linking back to the homepage if we're already on it, we wrapped the link in <ItemPage> tags, so it will only be there on item pages.
Now, on to the posts:
<Blogger>
<BlogDateHeader>
<div class="DateHeader"><$BlogDateHeaderDate$></div>
</BlogDateHeader>
<div class="Post"><a name="<$BlogItemNumber$>"> </a>
<BlogItemTitle><span class="PostTitle"><BlogItemURL>
<a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a></span></BlogItemTitle>
<$BlogItemBody$>
<span class="PostFooter">
#182; <a href="<$BlogItemPermalinkURL$>"
title="permanent link"> <$BlogItemDateTime$></a>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemCommentCount$>
comments</a> </BlogItemCommentsEnabled>
</MainOrArchivePage>
</span>
</div>
Notice the <Blogger> tag at the beginning of this section. Pretty soon we'll come upon a matching </Blogger> tag. Anything between those two tags will be repeated for every post on your page.
The tags with dollar signs ($) in this section all refer to data that will be different for each individual post. For instance, <$BlogItemTitle$> prints the title, and <$BlogItemBody$> prints the entire text of the post.
The tags without dollar signs indicate when something should be printed in the page or not. For instance <BlogItemTitle> and </BlogItemTitle> enclose code and text that will only appear if the item has a title. Similarly text between <MainOrArchivePage> and </MainOrArchivePage> will only appear on the main page or on archive pages. We're using that tag to enclose the comment links, since we don't need to show those on the item pages.
Speaking of comments, we'll need some code to display comments for entries that have them, so we'll see that next. Note that we're still within the <Blogger> tags, since comments relate to individual posts.
<ItemPage>
<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments"></a>
Comments:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$><br />
<div class="byline">
<a href="<$BlogCommentPermalinkURL$>"
title="permanent link">#</a>
posted by <$BlogCommentAuthor$> :
<$BlogCommentDateTime$>
</div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</div>
</BlogItemCommentsEnabled>
<br /> <br />
<a href="<$BlogURL$>"><< Home</a>
</div>
</ItemPage>
</Blogger>
</div>
We've got <ItemPage> and <BlogItemCommentsEnabled> tags in here so that this code only appears on the post pages for entries that allow comments. The <BlogItemComments> and </BlogItemComments> tags are similar to <Blogger>, since they contain the code that will be repeated for every comment on the page. Inside those tags, you can see that displaying comments is pretty much like displaying posts. There is <$BlogCommentBody$> for the text of the comment, etc.
A couple other tags work slightly differently.
<$BlogCommentDeleteIcon$> automatically inserts a delete icon and link for each comment. <$BlogItemCreate$> adds in the link to add a new comment.
So that covers everything in the main section of your template. Let's take a look at the sidebar now.
<div id="rightcontent">
<div id="Description"><$BlogDescription$></div>
The <$BlogDescription$> tag is similar to the <$BlogTitle$> tag we saw earlier. It will display the description for your blog.
<p>
<div id="profile-container">
<div class="SideBarTitle">ABOUT ME</div>
<dl class="profile-datablock">
<dt class="profile-img">
<img src="<$BlogOwnerPhotoUrl$>"
width="68" alt="" />
</dt>
<dd class="profile-data"><strong>Name:</strong>
<$BlogOwnerNickname$></dd>
<dd class="profile-data"><strong>Location:</strong>
<$BlogOwnerLocation$></dd>
</dl>
<p class="profile-textblock">
<$BlogOwnerAboutMe$>
</p>
<p class="profile-link">
<a href="<$BlogOwnerProfileUrl$>">View my profile</a>
</p>
</div>
This section contains your profile information, including a link to the page with your complete profile. These all have pretty descriptive names, like <$BlogOwnerNickname$>, so you can tell what information they'll print out.
Another common thing to have in your sidebar is a list of all your archive links.
<div class="SideBarTitle">ARCHIVES</div>
<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>
<br /></p>
The <BloggerArchives> tags are some more of the repeating kind. They will print the line of code between them for each of your archive files.
If there's anything else you want in your sidebar (other links, more text, etc.) you can add that in here. You can copy the formatting for the ARCHIVES title if you want to make more matching headers.
Then, of course, at the end of the template, we have our ubiquitous WOWchinese button:
<br />
<p style="text-align:center">
<a href="http://www.wowchinese.com">
<img alt="WOWchinese" border="0"
src="http://www.wowchinese.com/moderator/images/site_blog.gif">
</a>
</p>
</div>
</body>
</html>
And that's the end of our template. If you want to use this template or modify it, you can find it under Settings of your blog.
If you have created a new template, you can always share with this community.
|
|