历时一周左右,自制Typecho主题终于初步成型了。之前就有自制主题的想法,但是Typecho官方开发者文档中相关介绍太少,网上能搜到关于自制Typecho主题的文章也很有限,加上对PHP知识一点都不了解,所以一直没敢动手。最近慢慢摸索着,终于完成了这件事。

Typecho官网上说,自制主题需要HTML、CSS知识以及少的可怜的PHP知识,一开始我还比较怀疑。不过花一点时间在菜鸟教程上看了看PHP基本语法,一点一点竟然也做成了。记录一下文件结构之类的,帮助想要开发或修改主题的小伙伴避避坑。

0x01 主题简介

screenshot

  • 主题名称:拾捌px(18px)
  • 演示站:传送门
  • 下载地址:GitHub地址
  • 主题风格:简洁、圆角

0x02 使用方法

2.1 下载及安装

  1. 下载realease版本(传送门)。
  2. 在本地解压,并将文件夹命名为 18px 。(请严格按照规范命名,主题中有一处使用到包含主题文件夹名称的路径,命名不规范可能导致静态资源加载失败)
  3. 将整个文件夹上传到网站根目录下的 /usr/themes/ 目录。
  4. 在后台 外观 中切换到 18px 主题。
  5. 设置主题外观。

2.2 友链配置

友链配置部分需要填入一个JSON对象。

keyvalue
url站点地址
name站点名称
desc站点描述
logoUrl站点logo图片地址,留空将使用默认图标

示例如下👇

[
    {
        "url": "https://shaunyoung.cn/",
        "name": "小扬Shaun",
        "desc": "求实求真,大气大为",
        "logoUrl":"https://backgroung-1300864610.cos.ap-chengdu.myqcloud.com/my_info.png"
    },
    {
        "url": "https://18px.shaunyoung.cn/",
        "name": "拾捌px主题演示站",
        "desc": "自制Typecho主题演示"
    }
]

0x03 主题亮点

3.1 SEO优化

head 标签中加入了多个 meta 标签,动态写入网站描述和关键词,方便搜索引擎爬虫对网站进行收录。

3.2 canvas背景

您可选择使用canvas绘制的动态背景,v1.0.0版本目前仅有“代码雨”特效可选,后续会加入更多特效。

3.3 布局

采用响应式布局,兼容PC、平板、手机等尺寸,让您的博客拥有良好的阅读体验。

对于宽屏采用三栏布局,中等屏幕两栏布局,较窄屏幕一栏布局。

3.4 CSS效果

  • 对于大部分圆形头像,鼠标悬浮头像会有旋转动效。
  • 对于窄屏下的折叠菜单,同样有丝滑的展示效果。
  • 侧边栏鼠标悬浮会有动效。

image-20200728001511583

3.5 圆角风格

圆角设计是一种趋势,越来越多的设计正在采用圆角以及无框线设计。这样的设计理念都融入在 18px 中。

0x04 开发主题

4.1 文件结构

首先展示一下拾捌px的文件结构📂。

image-20200728215842172

文件(夹)名作用
assets静态资源文件夹,用于存放css、js、以及图片等静态资源文件
404.php404页面文件
archive.php归档页面文件,当点击某个分类或归档时用这个页面展示该分类下的文章
comments.php评论组件,每篇文章下方评论使用的就是这个组件
footer.php页面底部组件,每个需要展示底部版权信息等的页面都需要这个组件
functions.php功能定义和编写函数的地方,主题后台可选的配置以及撰写文章时可选的字段都在这里定义
header.php每个页面都需要用到的文件,html文件的head标签以及顶部导航栏在这个文件中
index.php首页文件,同时也是注释主题作者以及相关信息的地方
page.php默认独立页面文件,新建默认独立页面时使用这个模板
page-links.php自定义独立页面文件,新建独立页面使用的页面模板从这里来
post.php文章页面,发布的文章具体内容由这个页面来呈现
screenshot.png主题截图文件,在后台看到的主题预览图就是这张图片
sidebar.php侧边栏组件,默认主题的右边侧边栏就是由这个组件生成的

细心的小伙伴可能发现了有些文件叫做“组件”,而有些文件就叫“文件”。一般来说,组件复用的需求会更大,它们经常需要被别的文件使用,因而我叫它们组件。

4.2 所需技能

开发主题主要需要掌握CSS,了解一些HTML以及PHP的基本语法会更轻松。

如果不会CSS也没关系,可以快速入门一下Bootstrap(我还没用过,也不知道难不难……)。默认主题似乎就是用bootstrap开发的。

4.3 环境搭建

开发主题最好选择在本地(localhost)搭建一个Typecho博客,这样改文件以及预览效果会比较方便。

4.3.1 下载phpstudy_pro

这是一个对国内程序员非常友好的本地服务器环境搭建利器(官网传送门)。

下载安装完成后,开启apache或nginx、MySQL。

4.3.2 安装MySQL可视化工具

安装一个MySQL可视化工具会方便很多,phpstudy中就有可以一键安装的可视化工具,可以直接使用。

image-20200728222133941

这里我安装的是SQL_Front,使用phpMyAdmin当然也没问题。

4.3.3 新建数据库

新建一个名为Typecho的数据库,记住用户名和密码。

4.3.4 安装Typecho

从官网下载Typecho的文件,放在网站根目录下,在浏览器地址栏输入localhost,按照提示即可完成安装。

4.4 开发前了解

在开始开发之前,首先要了解以下方面。

  • 在后台 设置外观 中设置的内容,可以通过 $this->options->变量名$this->fields->变量名 来获取到。
  • 默认主题所带的大部分文件和语句都无需修改,只需要改变顺序、增加元素等即可。
  • php语法的基本规则是以 <?php 开头,并以 ?> 结尾,中间语句需要分号作为结束。

4.5 文件详解

接下来,我们从头到尾对Typecho官方默认主题进行分析。大多Typecho主题都是从默认主题修改而来,有些只不过加入了许多自定义的函数,使得主题功能更加完善而已。

4.5.1 header.php

image-20200728222719171

这里包含了一个html文件的开始。在这里可以做的修改有:👇

  • 更改title标签,可以向其中加入网站副标题。
<head>
    <title>
        <?php $this->archiveTitle(array(
        'category' => _t('分类 %s 下的文章'),
        'search' => _t('包含关键字 %s 的文章'),
        'tag' => _t('标签 %s 下的文章'),
        'author' => _t('%s 发布的文章'),
    ), '', ' - ');?><?php $this->options->title();?><?php echo $this->options->subTitle ? " - {$this->options->subTitle}" : ''; ?>
    </title>
</head>

看不懂也没关系,只需要知道这里在原有标题的基础上,可以加入副标题,而网站副标题可以在后台 设置外观 中进行设置。

  • 加入meta标签。
<head>
    <meta name="description" content="<?php $this->options->description();?>">
    <meta name="keywords" content="<?php $this->options->keywords()?>">
</head>

meta标签是做网站SEO优化的一种手段。其中 description()keywords() 是预先定义好的函数,将返回在后台 基本设置 中设置的网站描述和关键词。

image-20200728224354144

  • 引入样式文件。
<head>
    <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/style.css');?>">
</head>

这里可以用内置函数 $this->options->themeUrl(),这个函数需要传入一个路径,该路径会被加到以主题所在路径为根路径的后面。注意开头不需要斜线。

  • 修改头部导航

头部导航栏在header标签中,可以根据需要进行修改。

image-20200729000756320

4.5.2 index.php等

  • 引入组件。

header.php的结尾是一个几个标签的头,而没有结尾,这是因为这些标签的结尾在index.php、archive.php、page.php、post.php等文件中。

这些文件是如何将header.php引入的呢?

<?php $this->need('header.php');?>

通过这个语句就可以引入相应的组件啦。

  • 声明主题的名称、作者等信息。

image-20200729001155110

可以看到,在index.php文件的开头第一个 <?php?> 中,有几行注释。主题的相关信息就是在这里进行设置的。设置完成后会在后台看到主题的相关信息。👇

image-20200729001327022

4.5.3 footer.php

image-20200729001649172

  • 引入需要的js文件。
  • 设置底部的版权信息以及备案号等。

4.5.4 functions.php

  • themeConfig:主题配置函数,这里配置的选项都可以在后台 设置外观 界面看到并进行调整。其中声明的变量用 $this->options->变量名 可以获取到。
  • themeFields:文章自定义字段函数,发布文章时出现在下方,可以进行配置。其中声明的变量用 $this->fields->变量名 可以获取到。
  • themeInit:主题初始化函数,可以设置主页和归档页默认一页显示多少文章。
// 自定义首页和分类页面每页显示文章数
function themeInit($archive)
{
    if ($archive->is('index')) {
        $archive->parameter->pageSize = 6; // 自定义首页显示主题数
    } elseif ($archive->is('archive')) {
        $archive->parameter->pageSize = 6; // 自定义分类页显示主题数
    }
}

0x05 后记

开发主题的过程中,细节很多,难以在这里一一列举。文中有任何不完善之处还请见谅,有任何错误欢迎批评指正。

欢迎有兴趣开发一套属于自己的博客主题的小伙伴一起来交流。

也欢迎有设计有想法的小伙伴前来合作,您提供设计稿,商量妥当后可以由我来完成实现😁。

感谢MWordStar主题,本主题中有一些功能借鉴于这个开源项目🙏。

最后,希望大家能提出改进意见,希望大家能喜欢这款主题。

标签: Typecho, 主题

  1. 主题是不是有bug。。。还是我打开的方式不对。 详情打不开,一直是列表页

  2. 叶子 叶子

    请问博主,在设置中友链配置部分填写完JSON对象之后,顶部的选项上还是只有首页和关于呀,求解

    1. 好像是要添加一个新的独立页面,在右侧选择模板

  3. 发现一个问题,这个高亮代码复制按钮不好使

    1. 那个用的一个插件,可能是插件配置出问题了

      1. 古老的评论,我都快记不住了

  4. 本地测试,出错,提示syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF), AP环境,PHP7.0 (PHPSTUDY 2018)

    1. 看报错意思是有一个if语句没有elseif或else或endif作为结尾,您看一下是不是代码里面哪里出问题了

      1. 确实是少了endif ,我加上后,CSS错乱,不排除是我环境问题,毕竟是本地测试。大佬有空可以检查一下Gitub源码里header.php的完整性。

        1. 您修改一下header.php里面第22行,style11.css改成style.css,你可能下载的开发版本,发布版好像没这个问题,我回头把开发版那个也改一下😁

          1. header.php里面第22行 就是 assets/css/style.css ! ,选了代码雨 也没有效果, CSS 错乱。 F12 报错 Uncaught TypeError: Cannot read property 'addEventListener' of null

            at index.js:24 // 地址:htp://127.0.0.1/us/themes/18px/assets/js/indx.js:24
            1. 您方便的话加一下我的微信,1226194033,主题确实有些bug,您现在说的情况我也不知道是哪个地方引起的,我给您看一下😁

              1. QQ 497986354 可以吗? 我很少玩微信。 我可以截图给你看 ,喜欢你这个有个性的主题

  5. 感谢博主,讲解的很详细!(✪ω✪)

    1. 谢谢😄,欢迎多交流👍👍👍

  6. xyx xyx

    猛!

已有 18 条评论