菜 单

Typecho主题开发快速入门

December 24, 2023 • 折腾

前言

主题的制作并非难事 只要写好了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日期格式

<?php $this->date('F j, Y'); ?>

文章所在分类

<?php $this->category(','); ?>

文章评论数及连接

<?php $this->commentsNum('%d Comments'); ?>

文章内容 其中的Continue Reading…是显示摘要时隐藏部分的邀请连接

文章显示结束 别忘了结束循环

文章分页

<?php $this->pageNav(); ?>

文章输出结束后别忘了增加分页
至此 index.php的常见内容结束

header.php 通用头部模板

html编码设置
打开这个文件 见到的第一个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头部信息

别忘了这句 它关系到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() ?>

站点关键词 对应用后台的关键词

<?php $this->options->keywords() ?>

站内搜索

<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="https://blog.233cn.cn/sample- 
post-one">文章1的标题</a></li>
<li><a 
href="https://blog.233cn.cn/sample- 
post-two">文章2的标题</a></li>
<!-- 省略n个重复 -->
<li><a 
href="https://blog.233cn.cn/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="https://blog.233cn.cn/sample- 
post#comments-12">回复的内容[...]</a> 
</li>
<li>回复人名字: <a 
href="https://blog.233cn.cn/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="https://blog.233cn.cn/category/uncateg 
ories">Uncategories</a>(10)</li>
<li><a href="https://blog.233cn.cn/category/categor 
y-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="https://blog.233cn.cn/2023/11">Novembe 
r 2023</a></li>
<li><a href="https://blog.233cn.cn/2023/10">October  
2023</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 底部文件或是脚部文件

页脚文件 推荐把一些较大的js放在这个文件中最后载入
并不会影响阅读

<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的支持 可以更好的帮助 typecho 发扬光大 扬眉吐气
到目前为至 已完成了75%的嵌套

post.php 文章页

post页和index是差不多的 但是还是要说一下不同之处

Tag 标签

Tags: <?php $this->tags(',', true, 
'none'); ?>

这是获取当前单篇文章的tags标签 用“,”符号隔开

说明
(',', true, 'none') 第一个单引号间的逗号代表标签与标签的间隔用逗号隔开
true 是标签以超链接形式输出
false 则只输出文字
none 为该文章没有标签时显示的提示信息可为空

文章的上一篇和下一篇

上一篇文章$this->thePrev()

下一篇文章$this->theNext()

说明 上述输出中包含有a标签

相关文章

用文本编辑器或网站后台的外观
打开你所要修改的模板的文件夹中的post.php文件

<?php $this->related(5)- 
>to($relatedPosts); ?>
<ul>
<?php while ($relatedPosts->next()): ?>
<li><a href="<?php $relatedPosts- 
>permalink(); ?>" title="<?php 
$relatedPosts->title(); ?>"><?php 
$relatedPosts->title(); ?></a></li>
<?php endwhile; ?>
</ul>

相关文章函数说明

调用方法

$this->related($limits, $type);

这个函数有两个参数

参数名称说明
$limits默认值为 5 表示显示的相关文章数量
$type默认值为 NULL 表示文章的相关方式 只接受 author 当 $type 为 author 时 根据用户显示相关文章；为其他值时 根据标签显示相关文章

调用评论页

<?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>

还是循环输出评论

每个评论的唯一ID

<?php $comments->theId(); ?>

评论所在楼层

<?php $comments->sequence(); ?>

回复地址

<?php $comments->responseUrl(); ?>

回复框ID

<?php $comments->responseId(); ?>

trackback地址

<?php $comments->trackbackUrl(); ?>

评论者的名字

<?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 &raquo;</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.php 文章列表展示页模板

显示某分类下的文章列表 搜索结果列表显示时调用的文件
（官方文档没有详细介绍 需自己摸索）

Leave a Comment

COPY © 2024 江东笔记


粤ICP备 2023032699-1 号