历时一周左右,自制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, 主题

已有 20 条评论

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

    1. 您好,我看一下

      1. Ehua Ehua

        我换linux环境部署 就正常

      2. Ehua Ehua

        已经解决了,感觉像是框架的问题,win环境下部署,url会失效,所有链接都指向首页

  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

    猛!

添加新评论