一、需求

给 typecho 开发主题的时候，往往可以给用户一些自定义的内容或者是选项，以更加优化用户的使用。

同时，也是为了能够无缝的使得用户插入自己的 css 代码和 js 代码，

或者是需要第三方的 js 代码，如果 百度统计 等。

typecho 文档中说明了 themeFields 的作用，但是介绍的特别简单：

在 Typecho 的 最新开发版中，为开发者们提供了一个有用的功能 themefields。

打开默认主题的 functions.php ，取消如下代码的注释，就可以为你的主题增加一个自动绑定的输入框

function themeFields($layout) {
    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('站点LOGO地址'), _t('在这里填入一个图片URL地址, 以在网站标题前加上一个LOGO'));
    $layout->addItem($logoUrl);
}

我在使用 themeFields 的时候，没有效果，但是我在另外一个主题中，发现了 themeConfig。

二、functions/themeConfig() 方法

归根结底，themeFields 和 themeConfig 本质是一样的，但是我没在文档中发现 themeConfig()，我反正是很吐槽 typecho 的文档的。

在 typecho 的 Config.php 中有代码判断 themeConfig 方法是否存在，如果是，则加载表单内容，部分代码如下：

    /**
     * 配置功能是否存在
     * 
     * @access public
     * @return boolean
     */
    public static function isExists()
    {
        $options = Typecho_Widget::widget('Widget_Options');
        $configFile = $options->themeFile($options->theme, 'functions.php');

        if (file_exists($configFile)) {
            require_once $configFile;
            
            if (function_exists('themeConfig')) {
                return true;
            }
        }        
        return false;
    }

三、通过 themeConfig($form) 扩展主题配置

扩展主题配置的主要目的其实是为了在 $this->options 上挂载一些自定义的属性，并且赋值。

下面的方式，代码都是在 functions.php/themeConfig() 方法中。

1、增加 input 及值的获取

如果要增加一个 input 表单，则需要如下的代码

function themeConfig($form) {
    $logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', NULL, NULL, _t('站点 LOGO 地址'), _t('在这里填入一个图片 URL 地址, 以在网站标题前加上一个 LOGO'));
    $form->addInput($logoUrl);
}

关键的参数（其中最后两个是固定的，后面不再重复）：

  • logoUrl：挂载到 $this->options 的属性名
  • _t('站点 LOGO 地址')：label 内容
  • _t('在这里填入一个图...)：表单下面的文字

获取配置内容（每次需要判断一下是否存在）：

<?php if($this->options->postbirdIcp){ ?>
   <img src="<?php $this->options->logoUrl(); ?>">
<?php }  ?>

2、增加 textarea

textarea 和 input 唯一的不同就是方法名不一样，其他的获取是一样的

function themeConfig($form) {
    $postbirdStylesheet = new Typecho_Widget_Helper_Form_Element_Textarea('postbirdStylesheet', NULL, NULL, _t('表单 label'), _t('表单下面的说明文字'));
    $form->addInput($postbirdStylesheet);
}

3、增加 radio

function themeConfig($form) {
    $showThumbnail = new Typecho_Widget_Helper_Form_Element_Radio('showThumbnail',
        array('0' => _t('不显示'),
            '1' => _t('显示')),
        '1', _t('显示缩略图'));
    $form->addInput($showThumbnail);
}

数组实际上是 radio 的各个单项，而后面的 ‘1’ 代表的是默认选中那个。

判断的时候，比较值即可，比如：

if($this->options->lazyLoad){
    $format = '<a class="post-cover pull-right lazy" href="{permalink}" data-original="{thumbnail}" title="{title}"></a>';
}else{
    $format = '<a class="post-cover pull-right lazy" href="{permalink}" style="background-image:url(\'{thumbnail}\')" title="{title}"></a>';
}

4、增加 checkbox

如果要开启多选，需要使用 Typecho_Widget_Helper_Form_Element_Checkbox 这个方法，并且在添加 form 的时候，需要使用 $sidebarBlock->multiMode()，和上面均不一样

$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('侧边栏显示内容'),
_t('表单下面的说明文字'));
    
$form->addInput($sidebarBlock->multiMode());

sidebarBlock挂载到 $this->options 上的属性名，第一个 array 中，key 表示值，后面则是显示的文字，第二个 array 是默认选择多少项。当用户选中了其中一项，则会将 key 加入到 $this->options->sidebarBlock` 中。

要判断是否选中，则可以使用下面的方式：

<?php if (!empty($this->options->sidebarBlock) && in_array('ShowArchive', $this->options->sidebarBlock)){ ?>

<?php } ?>

四、效果：