Typecho使用themeFileds增加自定义字段和主题设置-马春杰杰

文章目录

给 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);
}

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;
    }

/**

* 配置功能是否存在

* @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);
}

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 }  ?>

<?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);
}

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);
}

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>';
}

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 = 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 } ?>

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

<?php } ?>

四、效果：

Typecho使用themeFileds增加自定义字段和主题设置

本文最后更新于2021年4月8日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

赞一个 (387)收藏 (0)

Typecho使用themeFileds增加自定义字段和主题设置

二、`functions/themeConfig()` 方法

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

1、增加 `input` 及值的获取

2、增加 `textarea`

3、增加 `radio`

4、增加 `checkbox`

四、效果：

马春杰杰

相关推荐

留个评论吧~ 抢沙发评论前登陆可免验证码！

文章推荐

最新修改文章

最新评论文章

最新评论

精彩直达

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

TG群

微信群

注册

订单信息（价格单位：马杜币）

收货信息商店（虚拟商品除邮箱外可不填）

二、functions/themeConfig() 方法

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

1、增加 input 及值的获取

2、增加 textarea

3、增加 radio

4、增加 checkbox

四、效果：

马春杰杰

相关推荐

留个评论吧~ 抢沙发 评论前登陆可免验证码！

文章推荐

最新修改文章

最新评论文章

最新评论

精彩直达

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

TG群

微信群

登录

注册

订单信息（价格单位：马杜币）

收货信息商店（虚拟商品除邮箱外可不填）

二、`functions/themeConfig()` 方法

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

1、增加 `input` 及值的获取

2、增加 `textarea`

3、增加 `radio`

4、增加 `checkbox`

留个评论吧~ 抢沙发评论前登陆可免验证码！