micolog 模板的制作-illacrimo-plus-3(补充) 占个座位先
30 八月 2009
micolog 模板的制作-illacrimo-plus-2(完结)
感觉前面两篇写的不够完整，所以继续补充实战版的wp模板转换~~
在micolog中的主题default中有以下文件：
这些文件文件夹都是静态文件，你可以任意添加js、css或者图片等
我们继续看illacrimo-plus主题的文件列表：
它和micolog的主题文件夹相比没有templates目录了，它的templates文件全部在主题目录下面。现在打开micolog的templates目录：
我们需要的是在illacrimo-plus下面建立一个templates目录，然后开始建立base.html文件，但是illacrimo-plus中是没有base.html文件的，而是多了header.php和footer.php文件。
很明显就是这两个文件等价于base.html。简单说两句，这个文件在每个页面都会进行调用，用来生成完整的页面。动态替换的只有中间一小块。
打开base.html看看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8;" />
<title>{% block title %} {{ blog.title}}{% endblock %}</title>/*这个就不多说了，这些标签在上文中说得很清楚了*/
<link rel="stylesheet" href="/themes/{{ blog.theme_name }}/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="{{ blog.title }} RSS Feed" href="{{ blog.feedurl }}" />
<link href="/static/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest"/>
<script type="text/javascript" src="/themes/{{ blog.theme_name }}/rounded_corners_lite.inc.js"></script>
<script type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
{% block head_block %}{% endblock %}
<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
var myBoxObject = new curvyCorners(settings, "nifty");
myBoxObject.applyCornersToAll();
var myBoxObject = new curvyCorners(settings, "meta");
myBoxObject.applyCornersToAll();
var myBoxObject = new curvyCorners(settings, "sidebar");
myBoxObject.applyCornersToAll();
}
</script></head>
<body>
<div id="main">
<div id="wrapper"><div id="top">
<div id="logo"><h1><a href="{{blog.baseurl}}/" title="{{blog.title}}">{{blog.title}}</a></h1>
</div><div id="menu">
<ul>
<li class="{%if ishome%}current_page_item{%else%}page_item{%endif%}" >
<a href="{{ blog.baseurl }}" >Home</a>
</li>
{{self.m_list_pages}}
<li class="page_item" ><a href="{{blog.feedurl}}">(RSS)</a></li>
{% block topmenu %}{% endblock %}{%if self.is_admin%}
<li><a href="/admin">Admin</a> </li>
{%endif%}
<li>
{%if self.is_login%}<a href="{{self.logouturl}}">Logout</a>
{%else%}
<a href="/admin">Login</a>{%endif%}
</li><li id="searchbox">
<form method="get" id="searchform" action="http://www.google.com/search">
<input type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="as_q" id="s" />
<input type="image" src="/themes/{{ blog.theme_name }}/images/transparent.gif" id="go" alt="Search" title="Search" />
<input name="as_sitesearch" value="{{blog.domain}}" type="hidden"></form>
</li>
</ul>
</div></div>
<div id="content">
<div id="split">{%block content %}{%endblock%} /*这部分就是关键的分界点了，此标签以上的部分就用header.php替换，以下的部分就用footer.php替换，但是有点细节需要自己处理，div要检查封闭哈。*/
</div>
</div>
</div><div id="push"></div>
<div id="footer">
<div class="footer">
<p class="fooleft">{{blog.title}} is proudly powered by <a href="http://xuming.net">Micolog</a>. Theme by <a href="http://bob.my/" title="Simple">Bob</a>
</p>
<p class="fooright"><a href="#top" title="Top">top</a></p>
</div>
</div></body>
</html>
蓝色的部分是不需要要去掉的，应为这些样式结构是不需要的，我们只需要数据部分。
看看替换后的文件base.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>{% block title %} {{ blog.title}}{% endblock %}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="alternate" type="application/rss+xml" title="{{ blog.title }} RSS" href="{{ blog.feedurl }}" />
<link href="/static/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest"/>
<link rel="shortcut icon" href="{{blog.baseurl}}/themes/{{ blog.theme_name }}/favicon.ico" type="image/x-icon" />
<link rel="icon" href="{{blog.baseurl}}/themes/{{ blog.theme_name }}/favicon.gif" type="image/gif" />
<link rel="stylesheet" href="{{blog.baseurl}}/themes/{{ blog.theme_name }}/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="{{blog.baseurl}}/static/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="{{blog.baseurl}}/themes/{{ blog.theme_name }}/script.js"></script>
{% block head_block %}{% endblock %}
</head>
<body>
<div id="page">
<!-- start header -->
<div id="header">
<div id="tag-cloud"></div>
<div class="LS"></div>
<h1><a href="{{blog.baseurl}}/">{{ blog.title }}</a></h1>
<p class="Desc">{{ blog.subtitle }}</p>
<div id="taotao"></div>
<script type="text/javascript">show_refer_in();</script>
</div>
<div id="menu">
<div id="PageRank"><img id="PageRankImg" alt="PRank" title="PageRank" width="44" height="15" src="http://www.pagerank.net/pagerank.gif" /></div>
<ul id="nav">
<li class="{%if ishome%}current_page_item{%else%}{%endif%}"><a href="{{blog.baseurl}}/">Blog</a></li>
{{self.m_list_pages}}
<!--<li class=\"current_page_item\"><a title=\"点击使用Google搜索本站\" href=\"/search\">搜索 \"{$keyword}\"</a></li>搜索结果页面-->
</ul>
</div>
{%block content %}{%endblock%}<div id="st-tag-cloud"><div class="st-tag-cloud"></div></div>
<div id="footer">
<div id="copying">
<p><strong>Copyright © 2009 - {{ blog.title}} - is proudly powered by <a href="http://appengine.google.com/">Google App Engine</a></strong><br />
<span title="Version 2.0.4 Build 20090105">Illacrimo Plus Theme</span> is created by: <a href="http://www.designdisease.com/">Design Disease</a> and improved by: <a href="http://www.cbmland.com">cbm</a>,<a href="http://www.feeqi.com">suna</a>.</p>
</div>
<div id="logos">
</div>
</div></div>
</body>
</html>
于是base.html就替换完成，请注意检查<?php ?>
接下来替换index.html文件，这个文件与index.php对应，看看index.php：
<?php get_header(); ?>
<!-- Container -->
<div id="content"><!-- Start SC -->
<div id="SC"><?php if (have_posts()) : $post_num = 0; ?>
<?php while (have_posts()) : the_post(); $post_num++;?><div class="Post" id="post-<?php the_ID(); ?>">
<div class="PostHead">
<h1><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<small class="PostAuthor">Author: <?php the_author() ?> <?php edit_post_link('Edit'); ?><?php if(function_exists('the_ratings')) { echo " , Rating:";the_ratings('span'); } ?></small>
<p class="PostDate">
<small class="day"><?php the_time('j') ?></small>
<small class="month"><?php the_time('M') ?></small>
<small class="year"><?php the_time('Y') ?></small>
</p>
</div>
<div class="PostContent"><?php the_excerpt('Read the rest of this entry »'); ?>
</div>
<div class="PostDet"><ul>
<li class="PostCom"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?><?php if(function_exists('the_views')) {$views=the_views('',false); if ($views!=0)echo " , ".$views." Hits"; } ?></li>
<li class="PostCateg"><?php if(function_exists('st_the_tags'))st_the_tags(); else the_category(', '); ?></li></ul>
</div>
</div><!--<?php trackback_rdf(); ?>-->
<?php else : ?>
<div class="clearer"></div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignright"><?php previous_posts_link(__('Older Posts »')) ?></div>
<div class="alignleft"><?php next_posts_link(__('« Newer Posts')) ?></div>
</div>
<br/>
<h2><?php _e('Not Found'); ?></h2>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- End SC -->
<!-- Container -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
先说一下蓝色的部分我们已经不需要，那是调用头脚文件的，看看index.html
{% extends "base.html" %}
{% block content%}
{% if entries %}{% for entry in entries %}
<div class="ctop"></div>
<div class="box">
<div id="post-{{entry.key}}">
<div class="nifty"><h2><a href="/{{ entry.link }}" rel="bookmark" title="Permanent Link to {{entry.title}}">{{entry.title}}</a> <span class="date">{{entry.date|datetz:"F jS, Y"}}</span></h2></div>{{entry.content_excerpt}}
<div class="meta">{% if entry.strtags %}Tags: {%for tag in entry.tags%}<a href="/tag/{{tag|urlencode}}">{{tag}}</a> {%endfor%}<br><br>{%endif%} Posted in {%for cate in entry.categories%} <a href="/category/{{cate.slug}}">{{cate.name}}</a> {%endfor%} | {%if self.is_admin%}<a href="{{entry.edit_url}}">Edit</a> | {%endif%} <a href="/{{entry.link}}#comments">Comments({{entry.commentcount}})»</a></div>
</div></div>
<div class="cbottom"></div>
<div class="space"></div>
{% endfor %}<div class="ctop"></div>
<div class="box">
<div class="alignleft">{% if show_next %}<a href="/page/{{ pageindex|add:"1" }}">« Older Entries</a>{%endif%}</div>
<div class="alignright">{% if show_prev %}<a href="/page/{{ pageindex|add:"-1" }}">« Newer Entries</a>{%endif%}</div>
<div class="clear"></div></div>
<div class="cbottom"></div>
<div class="space"></div>{% else %}
<div class="ctop"></div>
<div class="box">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
<div class="clear"></div>
<div class="cbottom"></div>
<div class="space"></div>{% endif %}
</div>
{% include "sidebar.html" %}
{% endblock %}
block content之间的部分就是我们要替换的，初步替换结果：
{% extends "base.html" %}
{% block content%}
<!-- Container -->
<div id="content"><!-- Start SC -->
<div id="SC"><?php if (have_posts()) : $post_num = 0; ?>
<?php while (have_posts()) : the_post(); $post_num++;?><div class="Post" id="post-<?php the_ID(); ?>">
<div class="PostHead">
<h1><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<small class="PostAuthor">Author: <?php the_author() ?> <?php edit_post_link('Edit'); ?><?php if(function_exists('the_ratings')) { echo " , Rating:";the_ratings('span'); } ?></small>
<p class="PostDate">
<small class="day"><?php the_time('j') ?></small>
<small class="month"><?php the_time('M') ?></small>
<small class="year"><?php the_time('Y') ?></small>
</p>
</div>
<div class="PostContent"><?php the_excerpt('Read the rest of this entry »'); ?>
</div>
<div class="PostDet"><ul>
<li class="PostCom"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?><?php if(function_exists('the_views')) {$views=the_views('',false); if ($views!=0)echo " , ".$views." Hits"; } ?></li>
<li class="PostCateg"><?php if(function_exists('st_the_tags'))st_the_tags(); else the_category(', '); ?></li></ul>
</div>
</div><!--<?php trackback_rdf(); ?>-->
<div class="clearer"></div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignright"><?php previous_posts_link(__('Older Posts »')) ?></div>
<div class="alignleft"><?php next_posts_link(__('« Newer Posts')) ?></div>
</div>
<br/><?php else : ?>
<h2><?php _e('Not Found'); ?></h2>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- End SC -->
<!-- Container -->
</div>
<?php get_sidebar(); ?>{% endblock %}
然后在进行深加工~~替换php语法，结果如下：
{% extends "base.html" %}
{% block content%}
<!-- Container -->
<div id="content">
<!-- Start SC -->
<div id="SC">
{% if entries %}
{% for entry in entries %}
{% if entry.tags %}
twst123{{entry.categories}}
{% endif %}
<div class="Post" id="post-{{entry.key}}">
<div class="PostHead">
<h1><a title="Permanent Link to {{entry.title}}" href="/{{ entry.link }}" rel="bookmark">
{{entry.title}}
</a></h1>
<small class="PostAuthor">Author:
{{entry.author}}
{%if self.is_admin%}<a class="post-edit-link" href="{{entry.edit_url}}" title="编辑文章">Edit</a>{%endif%}
</small>
<p class="PostDate"> <small class="day">
{{entry.date|datetz:"j"}}
</small> <small class="month">
{{entry.date|datetz:"M"}}
</small> <small class="year">
{{entry.date|datetz:"Y"}}
</small> </p>
</div><div class="PostContent">
<div class="cat_icon" ><a href="/category/{{cate.slug}}" title="{{cate.name}}"><img src="{{blog.baseurl}}/themes/{{ blog.theme_name }}/images/t.png" width="48" height="48" alt="http://cbmland.googlepages.com/{{cate.name}}.png" title="{{cate.name}}" /></a></div>
{{entry.content_excerpt}}
</div>
<div class="PostDet">
<ul>
<li class="PostCom">
<a href="/{{entry.link}}#comments" title="{{entry.title}} 上的评论">{{entry.commentcount}} Comments</a>
</li>
<li class="PostCateg">
{% if entry.strtags %}Tags: {%for tag in entry.tags%}<a href="/tag/{{tag|urlencode}}">{{tag}}</a> {%endfor%} Posted in {%endif%}{%for cate in entry.categories%} <a href="/category/{{cate.slug}}" title="查看 {{cate.name}} 的全部文章" rel="category">{{cate.name}}</a> {%endfor%}
</li>
</ul>
</div>
</div>
<!--<?php trackback_rdf(); ?>-->
<div class="clearer"></div>
{% endfor %}
<div class="navigation">
<div class="alignright">
{% if show_next %}<a href="/page/{{ pageindex|add:"1" }}">Older Posts »</a>{%endif%}
</div>
<div class="alignleft">
{% if show_prev %}<a href="/page/{{ pageindex|add:"-1" }}">« Newer Posts</a>{%endif%}
</div>
</div>
<br/>
{% else %}
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
{% endif %}
</div>
<!-- End SC -->
<!-- Container -->
</div>
{% include "sidebar.html" %}
{% endblock %}
接下来替换sidebar.html，single.html，category.html，tag.html，comments.html，page.html，error404.html。主要替换这些文件就足够了，其他的文件（比如error-101.html，functions.php等）如果有就替换没有就不用管了。
好了文件替换就到这里，接下来替换的就大同小异了，具体参看我做好的illacrimo-plus主题包
最后希望大家做好主题都能让我与你分享你的快乐，大家一起讨论问题~~~
文笔有限，错误之处请指出，thanks~~~~
2 Responses for "micolog 模板的制作-illacrimo-plus-3(补充)"
-
reply -
reply内牛满面～超级感动！
赶紧学习！
![http://www.pagerank.net/pagerank.gif"](http://www.pagerank.net/pagerank.gif"){kind=link}
![http://cbmland.googlepages.com/{{cate.name}}.png"](http://cbmland.googlepages.com/{{cate.name}}.png"){kind=link}
占位学习中。。。