Micolog Theme的制作步骤
由于很多的原因,现在空间没有了,所以呢也只能从WordPress搬家了,看中了google的产品(google的东西真是太多了,呵呵).
其他不多说了,开始替换吧,由于我以前用的模板是cmb修改的illacrimo-plus模板,所以呢也还是用这个模板来改.其他模板大家也可以看着办啦.
xuming的这个blog对wordpress还是非常友好的,基本上标签都能找到对应的替换.为了方便起见,由xuming这个模板向illacrimo-plus转换.
先看看xuming目录结构:
再看illacrimo-plus的模板文件:
其实也很简单的,就这么点模板文件.
1.首先我们把illacrimo-plus下的所有除php文件之外的文件文件夹都复制到xuming目录下,替换掉重文件.
就是这些文件!
开始我们的主要步骤了!
2.替换base.html文件;
这个文件就是所有的调用文件:看看他的结构:
分为三部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>{% block title %} {{ blog.title}}{% endblock %}</title>
//添加了一个block调用,其内部有一个标签blog标题//
<link rel="stylesheet" href="/themes/{{ blog.theme_name }}/style.css" type="text/css" />
//当前主题名称//
<link rel="alternate" type="application/atom+xml" title="{{ blog.title }}" href="{{ blog.feedurl }}" />
<link href="/static/wlwmanifest.xml" type="application/wlwmanifest+xml" rel="wlwmanifest"/>
<link rel="icon" type="image/ico" href="/favicon.ico"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link rel="pingback" href="/pingback" />
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
{% block head_block %}{% endblock %}
//一个名为head_block的块,也是在后面的调用出现//
</head>
<body>
<div id="gc-container">
<div id="langpref">
<span style="background:#CC4444 none repeat scroll 0% 0%;color:white;padding:5px;">
正在加载...
</span>
</div>
<script>function loginp()
{
$.getJSON("/do/info_login", function(ret){
if( ret.islogin)
{
html='<span style="color:gray;padding:0px 6px">你好，'+ret.name+'</span> <a href="{{self.logouturl}}"> 注销</a>';
if (ret.isadmin)
html+=' <a href="/admin">管理</a>';
$('#langpref').html(html);
}
else
{$('#langpref').html('<a href="/admin"> 登录</a>');}
});
}
loginp();
</script>
<div id="gc-header">
<div id="logo"><a href="{{ blog.baseurl }}">
//blog后台设置的域名//<img src="/themes/{{ blog.theme_name }}/images/cleardot.gif" alt="xuming.net" id="gc-logo-img">
</a></div>
<div id="search">
<!-- Google CSE Search Box End --><div id="searchForm" class="searchForm">
<form action="{{ blog.baseurl }}/gsearch" id="cse-search-box" >
<table class="gsc-search-box" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gsc-input">
<input type="hidden" name="cx" value="011174782183950134202:hplznclaark" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="text" class="gsc-input" name="q" size="25" value="" />
</td>
<td class="gsc-search-button"><input type="submit" name="sa" class="gsc-search-button" value="搜索"/>
</td>
</tr>
<tr>
<td class="greytext">e.g. "python" or "徐明,xuming"</td>
</tr>
</tbody>
</table>
</form>
</div> <!-- end searchForm --></div> <!-- end search -->
</div> <!-- end gc-header -->
这是header部分. 看到基本的调用部分了吧,
再看
<div id="codesiteContent">
<div id="gc-topnav">
<h1></h1><ul id="home" class="gc-topnav-tabs">
<li id="home_link" class="{%if ishome%}current_page_item{%else%}page_item{%endif%}">
<a href="{{ blog.baseurl }}" >首页</a>
</li>
{{self.m_list_pages}}
//这是后台添加page后的调用//
{% block topmenu %}{% endblock %}
//这里有一个头部调用的导航,也是block</ul>
</div>
<!-- end gc-topnav -->{% block content %}{% endblock %}
//这是主体部分的调用
</div> <!-- end codesite content -->
最后footer
<div id="gc-footer" dir="ltr">
<div id="gc-footer-img"></div>
<div class="text" >
<div style="margin-bottom:6px;">
©2008 <a href="http://xuming.net">徐明的博客</a> Powered by <a href="http://code.google.com/appengine/" rel="nofollow">Google App Engine</a></div>
<div>除非另有声明，本站文章采用 <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/cn/" rel="nofollow">知识共享署名-非商业性使用 2.5 中国大陆许可协议</a> 进行许可。
</div>
</div>
</div><!-- end gc-footer --></div><!-- end gc-containter -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-805972-4");
pageTracker._initData();
pageTracker._trackPageview();
</script></body>
</html>
接下来我们看看illacrimo-plus的文件,他的模板中没有base.html的,需要多个文件组合在一起
分别是:header.php和footer.php
组合后的新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 rel="shortcut icon" href="/themes/{{ blog.theme_name }}/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/themes/{{ blog.theme_name }}/favicon.gif" type="image/gif" />
<link rel="pingback" href="/pingback" />
<link rel="stylesheet" href="/themes/{{ blog.theme_name }}/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/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>
</div><div id="menu"><div id="PageRank"><img id="PageRankImg" alt="PRank" title="PageRank" width="44" height="15" src="/themes/{{ blog.theme_name }}/images/ranking.gif" /></div>
<ul id="nav">
<li class="current_page_item"><a href="{{ blog.baseurl }}">Blog</a></li></ul>
</div>
{% block content %}{% endblock %}
<div id="st-tag-cloud">tag1,tag2</div>
//这里是tag云的代码,我还没有写,呵呵//<div id="footer">
<div id="copying">
<p><strong>Copyright © 2008 - {{ blog.title }} - is proudly powered by <a href="http://www.fly7.cn/">fly7</a></strong><br />
<span title="suna">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>.</p>
</div>
<div id="logos">
</div>
</div></div>
</body>
</html>
好!base.html文件就替换完毕了。
转载自飞启
转载请注明来自 云在天边看世界 http://www.tangblog.info本文永久链接 http://www.tangblog.info/2009/09/2/micolog_theme.html
“Micolog Theme的制作步骤”共有 13 条留言
好的，我明天再给写一下吧，欢迎来访
据说是明文的，我也没注意，呵呵
是可以有的，不过我给删除了，加上也很简单，你可以先看看我的主页源代码，基本上就会明白最新评论显示头像的的写法（呵呵，我那个又重新调用了一个css）。
代码插件，就是使用SyntaxHighlighter啊
大框架是不难修改，但还是会有一点麻烦的……
在这里留下您的脚印吧……