模板的制作并非难事,只要你写好了HTML和CSS,嵌套模板就非常简单了,你无需了解标签的内部结构,你只要会使用,模板就能迅速完成。这篇文章只简单的介绍了常用标签的使用方法,希望能带你进入模板的世界。
本篇文章以Typecho都默认模板为例,您可以打开默认模板default边看边学习。该模板所在的路径为 /usr/themes/default
进入该目录后,我们可以看到有许多文件,别犯愁,我们将在下文一一介绍,所有在当前目录下的文件都能在后台的模板编辑页面进行编辑。
index.php
模板信息
我们先从主文件说起,打开这个文件,首先看到的是注释:
/**
* 这是typecho系统的一套默认皮肤。你可以在<a href="http://typecho.org">typecho的官方网站</a>获得更多关于此皮肤的信息
*
* @package Typecho Default Theme
* @author typecho
* @version 1.0.0
* @link http://typecho.org
*/这是模板信息存放的地方,它将在后台都模板选择页显示。前两行是简短的介绍,每个“*”表示一个段落。@package 表示模板名,@author 表示作者名,@version 是模板的版本号,@link 是作者的网站连接。
紧挨着注释下方的 include('header.php'),在结尾处也会看到 include('sidebar.php') 和 include('footer.php')。这些语句用来调用模板的其它模块。header故名思议是页首,sidebar是侧栏,footer是页脚。
显示文章
<?php while($this->next()): ?>
<div class="post">
<h2 class="entry_title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h2>
<div class="entry_data">
Published by <a href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?></a> on <?php $this->date('F j, Y'); ?> in <?php $this->category(','); ?>.
<?php $this->commentsNum('%d Comments'); ?>.
</div>
<div class="entry_text">
<?php $this->content('Continue Reading...'); ?>
</div>
</div>
<?php endwhile; ?>进入文章循环,输出文章,剥开html代码,一句一句介绍
<?php $this->permalink() ?>
文章所在的连接
<?php $this->title() ?>
文章标题
<?php $this->author(); ?>
文章作者
<?php $this->author->permalink(); ?>
文章作者地址
<?php $this->date('F j, Y'); ?>
文章的发布日期,格式可参考PHP日期格式
<?php $this->category(','); ?>
文章所在分类
<?php $this->commentsNum('%d Comments'); ?>
文章评论数及连接
<?php $this->content('Continue Reading...'); ?>
文章内容,其中的“Continue Reading…”是显示摘要时隐藏部分的邀请连接
好了,文章显示结束,别忘了结束循环。
文章分页
<?php $this->pageNav(); ?>文章输出结束后别忘了增加分页,至此,index.php的常见内容结束,应该不糊涂吧。
header.php
编码
打开这个文件,见到的第一个php代码就是:
<meta http-equiv="content-type" content="text/html; charset=<?php $this->options->charset(); ?>" />调用默认的编码,现在最经常用的大都是utf-8吧。所以我通常是直接写成utf-8,省去php处理时间。
页面标题
<title><?php $this->options->title(); ?><?php $this->archiveTitle(); ?></title>通常情况下直接复制使用,如果你没有时间的话。
导入样式
<link rel="stylesheet" type="text/css" media="all" href="<?php $this->options->themeUrl('style.css'); ?>" />其中style.css是样式文件相对模板目录的路径和文件名。
其它HTML头部信息
<?php $this->header(); ?>别忘了这句,它关系到RSS信息、客户端程序以及插件的正常使用。
页面导航
<ul class="clearfix" id="nav_menu">
<li><a href="<?php $this->options->siteUrl(); ?>">Home</a></li>
<?php $this->widget('Widget_Contents_Page_List')
->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
</ul>本处使用了无序列的页面列表,其中{permalink}是页面的地址,{title}是页面的标题
网站名称
<h1><a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a></h1>
<span><?php $this->options->description() ?></span><?php $this->options->siteUrl(); ?>
网站的首页地址
<?php $this->options->title() ?>
网站名称
<?php $this->options->description() ?>
网站的一些简短描述、介绍
站内搜索
<form method="post" action="">
<div><input type="text" name="s" class="text" size="32" /> <input type="submit" class="submit" value="Search" /></div>
</form>当你的文章很多很多,这个搜索就必不可少。
sidebar.php
最新文章列表
<ul>
<?php $this->widget('Widget_Contents_Post_Recent')
->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
</ul>获取最新的10篇文章标题,得到的html是
<ul>
<li><a href="http://example.com/2008/12/31/sample-post-one">文章1的标题</a></li>
<li><a href="http://example.com/2008/12/31/sample-post-two">文章2的标题</a></li>
<!-- 省略n个重复 -->
<li><a href="http://example.com/2008/12/31/sample-post-ten">文章10的标题</a></li>
</ul>最新回复列表
<ul>
<?php $this->widget('Widget_Comments_Recent')->to($comments); ?>
<?php while($comments->next()): ?>
<li><?php $comments->author(false); ?>: <a href="<?php $comments->permalink(); ?>"><?php $comments->excerpt(10, '[...]'); ?></a></li>
<?php endwhile; ?>
</ul>获取最新的10个回复,得到的html是
<ul>
<li>回复人名字: <a href="http://example.com/2008/12/31/sample-post#comments-12">回复的内容[...]</a></li>
<li>回复人名字: <a href="http://example.com/2008/12/31/sample-post#comments-11">回复的内容[...]</a></li>
<!-- 省略n个重复 -->
</ul>其中<?php $comments->excerpt(10, '[...]'); ?>,“10”代表要回复内容截取的字的
个数,“[…]”代表省略的意思,你可以自行修改。
文章分类列表
<ul>
<?php $this->widget('Widget_Metas_Category_List')
->parse('<li><a href="{permalink}">{name}</a> ({count})</li>'); ?>
</ul>输出:
<ul>
<li><a href="http://example.com/category/uncategories">Uncategories</a>(10)</li>
<li><a href="http://example.com/category/category-1">Category-1</a>(2)</li>
</ul>其中{count}是获取该分类下的文章数目。
按月归档
<ul>
<?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=F Y')
->parse('<li><a href="{permalink}">{date}</a></li>'); ?>
</ul>输出:
<ul>
<li><a href="http://example.com/2008/11">November 2008</a></li>
<li><a href="http://example.com/2008/10">October 2008</a></li>
</ul>其它连接
<ul>
<?php if($this->user->hasLogin()): ?>
<li class="last"><a href="<?php $this->options->index('Logout.do'); ?>">Logout (<?php $this->user->screenName(); ?>)</a></li>
<?php else: ?>
<li class="last"><a href="<?php $this->options->adminUrl('login.php'); ?>">Login</a></li>
<?php endif; ?>
</ul>这些是可有可无的,只是为了方便登录登出。
footer.php
RSS地址
页脚文件,推荐大家把一些较大的js放在这个文件中最后载入,不会影响阅读。看看我们的footer要讲解些什么?
<a href="<?php $this->options->feedUrl(); ?>">Entries (RSS)</a> <!-- 文章的RSS地址连接 -->
<a href="<?php $this->options->commentsFeedUrl(); ?>">Comments (RSS)</a>. <!-- 评论的RSS地址连接 -->另外别忘了添加
<a href="http://typecho.org">Typecho</a>以示对Typecho的支持,简单吧。
现在,你已完成了75%的嵌套,休息一下,后面的会轻松许多
post.php
post页和index是差不多的,但是我们还是要说一下不同之处。
Tag 标签
Tags: <?php $this->tags(',', true, 'none'); ?>这是获取当前单篇文章的标签,用“,”符号隔开。
调用评论页
<?php include('comments.php'); ?>comments.php
评论列表
<h4><?php $this->commentsNum('No Response', 'One Response to"' . $this->title . '"', '%d Responses to "' . $this->title . '"'); ?></h4>
<ol id="comment_list">
<?php $this->comments()->to($comments); ?>
<?php while($comments->next()): ?>
<li id="<?php $comments->theId(); ?>">
<div class="comment_data">
<?php echo $comments->sequence(); ?>.
<strong><?php $comments->author(); ?></strong>
on <?php $comments->date('F jS, Y'); ?> at <?php $comments->date('h:i a'); ?>
</div>
<div class="comment_body"><?php $comments->content(); ?></div>
</li>
<?php endwhile; ?>
</ol>还是循环输出评论:
<?php $comments->theId(); ?>
每个评论的唯一ID
<?php $comments->sequence(); ?>
评论所在楼层
<?php $comments->responseUrl(); ?>
回复地址
<?php $comments->responseId(); ?>
回复框ID
<?php $comments->trackbackUrl(); ?>
trackback地址
<?php $comments->author(); ?>
评论者的名字
<?php $comments->date('F jS, Y'); ?>
评论日期
<?php $comments->date('h:i a'); ?>
评论时间
<?php $comments->content(); ?>
评论内容
结束循环。我们用有序列表<ol>,因为评论的发表是有先后顺序的。
评论输入表单
<!-- 判断设置是否允许对当前文章进行评论 -->
<?php if($this->allow('comment')): ?>
<h4 id="response">Leave a Reply</h4>
<!-- 输入表单开始 -->
<form method="post" action="<?php $this->commentUrl() ?>" id="comment_form">
<!-- 如果当前用户已经登录 -->
<?php if($this->user->hasLogin()): ?>
<!-- 显示当前登录用户的用户名以及登出连接 -->
<p>Logged in as <a href="<?php $this->options->adminUrl(); ?>"><?php $this->user->screenName(); ?></a>.
<a href="<?php $this->options->index('Logout.do'); ?>" title="Logout">Logout »</a></p>
<!-- 若当前用户未登录 -->
<?php else: ?>
<!-- 要求输入名字、邮箱、网址 -->
<p><input type="text" name="author" class="text" size="35" value="<?php $this->remember('author'); ?>" /><label>Name (Required)</label></p>
<p><input type="text" name="mail" class="text" size="35" value="<?php $this->remember('mail'); ?>" /><label>E-mail (Required *will not be published)</label></p>
<p><input type="text" name="url" class="text" size="35" value="<?php $this->remember('url'); ?>" /><label>Website</label></p>
<?php endif; ?>
<!-- 输入要回复的内容 -->
<p><textarea rows="10" cols="50" name="text"><?php $this->remember('text'); ?></textarea></p>
<p><input type="submit" value="Submit Comment" class="submit" /></p>
</form>
<?php endif; ?>很多情况下并不对评论文件进行修改,可以直接拿来使用写入相应的css。
其它文件
page.php
页面的显示方式,通常情况下和 single.php 无差别
archive.ph
p
显示某分类下的文章列表、搜索结果列表显示时调用的文件
结束语
OK,这篇简短的入门讲解结束了,希望你看着不累,同时能对Typecho的模板系统了解一二,这样文章的目的也就达到了,针对当前文章的不明白的地方,欢迎到社区提出问题。谢谢。
发表回复