主题系列教程 ① - Typecho 主题的文件结构

前言

关于 《 面向小白的 Typecho 主题制作教程 》 这个系列

  • 很多独立博客的小白，在折腾完虚拟主机、VPS 甚至独服之后，下一步就是尝试制作主题
  • 打算从小白的视角写一个系列，从最基础的部分讲起，逐步拆解制作一个主题的各种方法和技巧
  • 阅读本系列的前提是，你已经具备了基础 Html + CSS + PHP 知识，至于 JavaScript，并不是必须的
  • 由于是业余时间更新，难免会有错误和疏漏，如有发现，欢迎指出和帮助修正，感激不尽
  • 请勿随意转载

这是系列的第一篇：《 Typecho 主题的文件结构 》

文件结构

以默认主题为例

 TYPECHO 安装目录
   ├─admin
   ├─install
   ├─usr
   │  ├─plugins
   │  ├─themes
   │  │  ├─default                       // 主题文件夹
   │  │  │  ├─img                        // 资源文件的文件夹，默认主题放的是搜索按钮的两张图片
   │  │  │  │  ├─icon-search.png
   │  │  │  │  └─icon-search@2x.png
   │  │  │  ├─404.php                    // 404 页面
   │  │  │  ├─archive.php                // 存档页面，包括分类页、搜索页、作者页、标签页等
   │  │  │  ├─comments.php               // 评论部分
   │  │  │  ├─footer.php                 // 页脚部分
   │  │  │  ├─functions.php              // 各种函数都放在这个文件里，可以在主题的任何地方调用
   │  │  │  ├─header.php                 // 页头部分
   │  │  │  ├─index.php                  // 主页
   │  │  │  ├─page.php                   // 独立页面，对应 后台 -> 管理 -> 独立页面 创建的页面
   │  │  │  ├─post.php                   // 文章详情页，对应 后台 -> 管理 -> 文章 创建的页面
   │  │  │  ├─sidebar.php                // 侧栏目部分
   │  │  │  ├─style.css                  // 样式表 1
   │  │  │  ├─grid.css                   // 样式表 2
   │  │  │  └─screenshot.png             // 主题截图
   │  └─uploads
   ├─var
   ├─config.inc.php
   ├─index.php
   ├─install.php
   └─LICENSE.txt

几个特殊的文件

index.php

这个文件中包含了主题的一些基础信息

/**
 * 这是 Typecho 0.9 系统的一套默认皮肤
 * 
 * @package Typecho Replica Theme 
 * @author Typecho Team
 * @version 1.2
 * @link http://typecho.org
 */

这些信息会自动显示到 “控制台 -> 外观”

Typecho 主题的基础信息.png

screenshot.png

主题截图，用于显示在 “控制台 -> 外观”

  • 只要名称设置为 screenshot，就会自动显示在上图的位置

functions.php

这个文件不是主题所必须的，如果你有一些希望在其他主题文件内调用的工具函数，可以写在这里

默认主题的 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', 
    array('ShowRecentPosts' => _t('显示最新文章'),
    'ShowRecentComments' => _t('显示最近回复'),
    'ShowCategory' => _t('显示分类'),
    'ShowArchive' => _t('显示归档'),
    'ShowOther' => _t('显示其它杂项')),
    array('ShowRecentPosts', 'ShowRecentComments', 'ShowCategory', 'ShowArchive', 'ShowOther'), _t('侧边栏显示'));
    
    $form->addInput($sidebarBlock->multiMode());
}

header.php

这个文件包含了网页头部的一些信息，后面会有一篇文章单独讲解

没有提到的文件

在默认主题中，分类页面、Tag 页面、搜索页面、作者页面都是由 archive.php 定义的，如果你想要单独定义其中某种类型的页面，也可以为其创建单独的文件

例如，当 search.php 存在的时候，搜索页面就会由 search.php 定义，而不是 archive.php

其他常见问题

Typecho 主题的使用方法

  • 将主题文件夹上传到 {Typecho 安装目录}/usr/themes/
  • 在 Typecho 管理后台 -> 控制台 -> 外观 即可查看和启用相应的主题
  • 如果你没有主动修改后台的路由，地址应该是 https://{站点地址}/admin/themes.php 或者 https://{站点地址}/index.php/admin/themes.php

为什么 “编辑当前外观” 页面提示 “此文件无法写入” ？

  • 没有写入权限就会有这个提示
  • 请检查当前这个文件的权限是否为 777