一、需求

给 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() 方法

归根结底,themeFieldsthemeConfig 本质是一样的,但是我没在文档中发现 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 } ?>

四、效果:

a.jpg