从零开始做一个 Typecho 主题系列

Typecho是一款轻量级、高效的开源博客程序,由国内开发者团队开发维护。它采用PHP语言编写,支持MySQL、SQLite等多种数据库,安装包体积仅有500KB左右,运行时内存占用极低,却能提供出色的性能表现。这款博客程序最大的特点就是简洁高效。它没有臃肿的功能,核心代码经过精心优化,数据库结构设计合理,使得页面加载速度非常快。同时,Typecho保持着清晰直观的后台界面,让用户可以专注于写作本身,而不会被复杂的功能干扰。

config文件

类似wp的wp-config.php文件,typecho也有一个config.inc.php文件完成类似的任务,这个文件里也定义了几个常量,可以直接供主题调用。通过系统提供的常量,或自定义一些有语义的常量,我们可以更方便的组装出对应资源的文件路径或链接,而不是频繁的去调用系统内置函数。

Typecho博客系统中的config.inc.php文件

typecho目录结构

typecho的默认主题是一个很好的参考案例,包含了必要的文件,常用的内容调用方式,后台设置以及文章自定义字段的处理。此外,github上大佬们免费分享的主题也是很棒的学习资料。

关于typecho的目录结构

主题信息与版本号管理

有点跑题但又没有完全跑题的插播内容,在资源文件后添加一个版本号,当改动这个版本号的时候,可以强制让浏览器将已有的缓存文件更新为新的版本,这样就不需要再简单粗暴的去清理浏览器缓存、清空浏览记录或开启浏览器匿名访问。更为麻烦的是,我的缓存确实由我不由天,用户老爷的缓存你总不能说清就清吧:

typecho如何实时更新被修改后的style.css文件

那这个版本号从何而来呢,我们可以考虑直接使用主题的版本号,通过获取index.php主题信息拿到版本号并将其作为style.css等文件的后缀,需要强制更新浏览器缓存内容时,修改一下index.php文件里的版本号就可以了;

Typecho尝试获取主题的一些基础信息

后台设置:三军未动,粮草先行

这是一段typecho默认主题的后台设置代码,代码位于default主题的 functions.php 文件内,如果我们自己动手来搭建一个后台设置也,也可以依样画葫芦,就是这个样有点儿小,我们要画的葫芦有点大:

function themeConfig($form)
{
    $logoUrl = new \Typecho\Widget\Helper\Form\Element\Text(
        'logoUrl',
        null,
        null,
        _t('站点 LOGO 地址'),
        _t('在这里填入一个图片 URL 地址, 以在网站标题前加上一个 LOGO')
    );

    $form->addInput($logoUrl);

    $sidebarBlock = new \Typecho\Widget\Helper\Form\Element\Checkbox(
        'sidebarBlock',
        [
            'ShowRecentPosts'    => _t('显示最新文章'),
            'ShowRecentComments' => _t('显示最近回复'),
            'ShowCategory'       => _t('显示分类'),
            'ShowArchive'        => _t('显示归档'),
            'ShowOther'          => _t('显示其它杂项')
        ],
        ['ShowRecentPosts', 'ShowRecentComments', 'ShowCategory', 'ShowArchive', 'ShowOther'],
        _t('侧边栏显示')
    );

    $form->addInput($sidebarBlock->multiMode());
}

初识wp的时候自己对twentyten主题修修改改,倒也有模有样的展现了几个页面的效果,但这种修改仅仅是将代码直接写死在了各个分页文件里,不具备什么通用性,比如换一个域名,换个站点logo,都要去手动调整一下代码。这种方式对于没有编程基础的用户来说显然是不友好的,后台设置页统一提供一个页面,供自己或用户动态修改一些参数,是一个正经主题都应该提供的基础设施。

写一个typecho后台设置页之文本框

写一个typecho后台设置页之单选框

写一个typecho后台设置页之下拉列表

写一个typecho后台设置页之复选框

写一个typecho后台设置页之多行文本

写一个typecho后台设置页之隐藏域

后台设置扩展

如何让typecho后台设置的代码更为易读

typecho后台设置页番外篇—已有类的调用

typecho后台设置页番外篇—设置页的美化

typecho 后台设置番外篇—数据的备份管理

typecho的多语言设置

找不到站点语言设置选项?实锤了,亲用的一定是正版typecho~

typecho站点多语言设置简介

Typecho 模板中的翻译函数 _t 与 _e

利用python来提取typecho安装包中的待翻译项

页面不可见的那一部分

聊聊html里的head部分

typecho里的 header() 与footer()

typecho模块与调用

一篇普通的文档,往往会分为页眉、内容、页脚等几个部分,到了网页上,如果亲仔细观察,很多站点也沿用了类似的设置,因为显示器可见区域较宽,内容部分往往又会分成好几个目栏,一部分用于展示变化多端的网页内容,另一部分则用来作为内容版式相对固定的侧边栏。之前记录过一篇关于wp的模块调用的文章,因为原理类似,贴在这里供亲们参考。

wordpress常用的模板调用函数

至于typecho的各个模块的调用,统一使用以下的命令:

//根目录下的模块
<?php $this->need('header.php'); ?>
//子目录下的模块,比如下面的代码就调用了public子目录
<?php $this->need('public/header.php'); ?>

在 Typecho 中,$this->need() 是用于动态加载组件(如头部、尾部、侧边栏等)的语法,通常用在主题模板文件中。$this->need() 的作用是加载指定的 PHP 文件(通常是模板片段),类似于 include 或 require,但更安全(Typecho 封装的方法)。常用于模块化主题开发(如分离 header.php、footer.php、sidebar.php 等)。对了,另外在typecho中,header、sidebar、footer之类只是比较常见的约定俗成的命名方法,并没有严格要求必须采用这些名称做为文件名。

等了好久终于等到今天

模板与优先级

虽然typecho的极简主题甚至可以压缩成单文件,但如果希望能够多一些展现形式的话,比如标签页有标签页的样式,分类页有分类页的样式,归档页也有属于自己的模板文件,typecho默认就提供了对应类型的解析,我们只需要了解一下这些模板命名的优先级,通过正确命名,就能够区分并分别对其进行美化。

typecho模板解析优先级

模板与模块的概念

typecho 主题中的模板与模块的概念

header部分

header可能会是我们遇到的最为复杂最耗时间的模块,处理好了这个模块,我们通常会面临两个选择,一是:
哎呀,累死我了,还是找个现成的吧~
也可能是:哎呀,累死我了,先休息几天吧~

typecho主题的页眉header部分常用代码

面包屑导航

面包屑导航比较常见的形式,就是网站主菜单下方那一排小字,告诉用户当前所在的位置。很难想象吧,要深度自定义这样一个小东西,在wp里面有时会用到上百行代码,但在typecho里,因为功能相对单一,所以代码量的减少也肉眼可见。

在typecho里实现面包屑导航

内容模块之轮播图

处理了最难啃的header部分,接下来就是花亿点点时间来完善内容模块以及侧边栏模块了。内容模块中首当其冲的就是轮播图,轮播图比较方便的办法是直接提取需要关联的地址,以及想要使用的图片,自行组装成轮播插件所需要的格式,然后按照插件示例修改好代码就可以了。需要提取文章或页面信息附加在轮播图内的,可以通过typecho文章对应的id(cid)来获取,因为和后续的内容有重复,这里就不展开了。

Jquery幻灯插件Slidesjs使用详解

js轮播图组件swiper应用一例

文章循环调用

typecho的几种常见的文章列表调用

标签: typecho

移动端可扫我直达哦~

推荐阅读

thumbnail 2025-06-08

typecho前台ajax登录与错误处理

尝试了在主题前台做一个登录框,登陆的功能是实现了,有一个小小的不便,就是如果输错了密码,因为页面又跳回了首页,所以弹出式登录框又被隐藏了,登录成功与否不够明显,二次登录的场合操作也较繁琐,所以想实现前台以ajax的方式登录。实现aja...

建站相关 typecho

thumbnail 2025-06-08

聊聊html里的head部分

HTML文档的<head>部分是一个容器,用于包含文档的元数据(metadata)和链接到外部资源的信息,这些内容不会直接显示在网页上,但对网页的功能和表现至关重要。主要元素和功能1. 基础元素<title>:...

建站相关 typecho

thumbnail 2025-06-04

typecho前端实现站点语言的切换

前端修改的数据能及时反馈到后端,那当然需要一个前后端都可以无障碍读取的东西,所以最初是想要用localstorage,但发现php无法直接读取其值,所以就换成了cookie。前端通过js来设置参数值:document.cookie='...

建站相关 typecho

thumbnail 2025-06-02

typecho 主题中的模板与模块的概念

模板是 typecho 主题中一个重要的概念,我们说过typecho的极简主题可以只存在 index.php 这一个文件,但需要展现分类页的时候,typecho事实上会先去寻找名为 category.php 的分类页模板,文章页当然也...

建站相关 typecho

thumbnail 2025-06-02

typecho的几种常见的文章列表调用

处理好了header与面包屑,接下来就按照自己的需求自由发挥了,先放一个分类列表,再挑出一个喜欢的标签,自定义一个该标签下内容展示模块。Typecho 提供了多种文章循环方式,以下是常用的几种方法:标准文章循环<?php whi...

建站相关 typecho

thumbnail 2025-06-02

在typecho里实现面包屑导航

什么是面包屑导航面包屑导航是一种网站导航方式,通常在网站顶部显示,大多会放在站点header的下方,用于显示用户当前位置。 面包屑导航由导航元素构成,每个元素代表一个网站导航项,各个元素通常包含对应链接,供用户跳转。面包屑导航示例首页...

建站相关 typecho

thumbnail 2025-05-29

关于typecho中的路由知识

路由(Routing)是博客系统中将URL地址映射到具体处理逻辑的机制,它决定了当用户访问某个网址时,系统应该执行什么操作、显示什么内容。typecho站点一般都会开启伪静态,伪静态通过URL重写将"漂亮"的URL映射到实际的文件路径...

建站相关 typecho

thumbnail 2025-05-29

Typecho 模板中的翻译函数 _t 与 _e

在 Typecho 模板开发中,_t 和 _e 是用于国际化处理的函数,核心区别在于输出方式:"_t" 函数‌‌功能‌:获取翻译后的字符串但不直接输出,需结合 echo 使用。‌示例‌:<?php echo _t('欢迎语');...

建站相关 typecho

thumbnail 2025-05-26

typecho文章自定义字段的删除与修改

涉及数据库的操作,务必请提前做好备份!提前做好备份!!做好备份!!!小鸟数据的当前主题的缩略图字段命名为augPostThumb,这几天在尝试完善一下原有主题,下载了原站的数据库导入了测试站用于测试页面效果,测试主题的缩略图相关字段拟...

建站相关 typecho

thumbnail 2025-05-26

typecho的文章自定义字段的知识笔记

在typecho中,除了可以自定义设置项之外,我们也可以给文章自定义一些额外的字段,比如给文章编辑界面添加一个缩略图选项,或者增加一个keywords输入框,用来修改编辑当前内容页的关键词信息。// 主题设置 function th...

建站相关 typecho