Typecho如何开发一个主题-Hello World

好久不见。笔者最近一直忙着给自己写新的Typecho主题，是基于i.zeimg.top写的，顺带出一期Typecho主题的开发教程，这也算很多站友们提的建议，毕竟笔者之前有做过typecho插件开发教程嘛。
这期就以开发一个“logo+Hello+后台设置名称”为目标写一个基础的主题来讲解typecho开发主题的基础。

正常来说，你编写Typecho主题至少需要前端三件套HTML、CSS和JavaScript，以及后端PHP这四门语言，~~当然如果你开发的主题不需要样式和特效的话只要会HTML和PHP即可~~
可兴的是，它们都非常简单，以至于你只需要3个月就可以学习成为一名优秀的PHP全栈开发工程师，其中还包括前端原生和后端数据库，这些是开发主题几乎不需要用到的。

我们就以Typecho的默认主题“Defeat”作为例子，先看文件结构：
Typecho默认主题文件结构
可以看到有很多文件，笔者给大家解释一下：

文件名	文件解析
404.php	页面未找到模板
archive.php	独立页面、文章通用文件
comments.php	评论区模板
footer.php	页脚模板
functions.php	函数文件、主文件
header.php	头部模板
index.php	首页模板
post.php	文章页模板
page.php	独立页面模板
sidebar.php	侧边栏模板
screenshot.png	预览、主题页展示图

先来看看index.php，可以看见第一个引入眼帘的是一段注释：

<?php
/**
 * Default theme for Typecho
 *
 * @package Typecho Replica Theme
 * @author Typecho Team
 * @version 1.2
 * @link http://typecho.org
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>

index.php部分代码

代码解析，你可以按照这个把代码改成你自己的内容：

<?php
/**
 * 这里写主题简介(支持HTML)
 *
 * @package 这里写主题名字
 * @author 账号写主题作者
 * @version 这里写主题版本
 * @link 这里写主题官网或者作者网站
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;  //此处为必要代码
$this->need('header.php'); //引入头部模板
?>

必要的说一下，header.php是从HTML文档声明到<head>标签或者<header>标签；

head标签用于定义文档头部，包含元数据如字符编码、关键词等，而header标签则用于定义网页或区块的页眉，通常包括标题和导航栏。正确使用这两个标签能提升网页的结构和语义化。

同时，index.php内只需包含一半<body>标签即可，也就是说footer.php要从<footer>标签写到</html>标签，当然了，这个只是笔者个人的建议，也是最常用的写法，可以完全按照个人习惯来写，只要能用即可。

那么接下来就开始编写主题的首页，本期教程只教如何写一个Hello <name>的主题，其中<name>可以在后台设置，具体的开发方法也差不多是这样对堆叠，文末会写typecho的各种钩子核调用方法。

接下来我们打开header.php，并写入如下代码：

<?php
/**
 * helloworld主题
 *
 * @package MengZe2 Hello World
 * @author MengZe2
 * @version 1.0
 * @link 官网
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php $this->options->title(); ?></title>
</head>

然后打开index.php，写入如下代码：

<body>
<h1>Hello World<h1/>

再打开footer.php，写入代码：

</body>

</html>

接下来要实现的是后台设置标题展示hello 名字，同时也能教你们如何创建设置表单并调用设置。
打开functions.php，可以看到里面有代码，清空它，并在文件中添加一个themeConfig($form)函数，这是一个钩子函数，因此函数名也是固定的。在函数中添加一个文本控件就可以了，其它常用的控件还有Checkbox、Radio、Select等，我们可以在Typecho/Widget/Helper/Form/Element文件夹找到，实例代码：

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

function themeConfig($form)
{
    $helloname = new \Typecho\Widget\Helper\Form\Element\Text(
        'helloname',
        null,
        null,
        _t('你的名字'),
        _t('设置一个显示在Hello 后面的名字变量')
    );

    $form->addInput($helloname);
}

再次打开index.php，修改Hello World为：

<h1>Hello <?php $this->options->helloname(); ?></h1>

header.php的title也能改改。也就弄好了。
保存，typecho后台启用主题，设置名字，打开网站即可预览主题啦。

标签：typecho, 主题开发, PHP

Typecho如何开发一个主题-Hello World

2 条评论

你的评论