typecho的文章自定义字段的知识笔记

在typecho中，除了可以自定义设置项之外，我们也可以给文章自定义一些额外的字段，比如给文章编辑界面添加一个缩略图选项，或者增加一个keywords输入框，用来修改编辑当前内容页的关键词信息。

//  主题设置
function themeConfig($form) {}
//  文章字段
function themeFields($layout) {}
}

下面是facile主题（作者：misterma）里的的文章自定义字段的代码，摘录其中一部分作为示范，facile是个无边框的主题，纯粹利用文字大小、字体对齐以及文字色差组织出一个错落有致的页面，很佩服设计者的功力：

//  文章的自定义字段
function themeFields($layout) {
    // 文章列表显示设置
    $layout->addItem(new Typecho_Widget_Helper_Form_Element_Select('postListStyle', array(
        'default' => '使用系统设置',
        'fullText' => '文章列表直接显示全文',
        'summary' => '文章列表显示摘要和文章头图'
    ), 'default', _t('文章列表显示'), _t('文章列表包括首页、搜索页、归档 左侧的文章列表。在显示全文的情况下，文章列表不会显示文章头图，显示全文也支持使用 <b style="color: #C7254E;">&lt!--more--&gt</b> 来手动分隔摘要。')));

    // 文章头图显示设置
    $layout->addItem(new Typecho_Widget_Helper_Form_Element_Select('headerImgDisplay', array(
        'default' => '使用系统设置',
        'post-page-list' => '在文章列表和文章页显示文章头图',
        'post-list' => '只在文章列表显示文章头图',
        'post-page' => '只在文章页显示文章头图',
        'hide' => '不显示文章头图'
    ), 'default', _t('文章头图显示设置'), _t('您可以单独给文章设置文章头图显示。')));

    // 文章头图样式
    $layout->addItem(new Typecho_Widget_Helper_Form_Element_Select('postListHeaderImageStyle', array(
        'default' => '使用系统设置',
        'max' => '大图（文章头图在上方，标题和摘要在下方）',
        'mini' => '小图（文章标题和摘要在左侧，图片在右侧）'
    ), 'default', _t('文章列表的头图样式'), _t('您可以给文章设置单独的文章头图样式。大图的图片长宽比为 18 比 9，小图的长宽比为 4 比 3，如果图片长宽比不符合要求，主题会自动裁剪图片来适配长宽比。')));

    //  文章头图来源
    $layout->addItem(new Typecho_Widget_Helper_Form_Element_Select('imageSource', array(
        'article' => '使用文章中的第一张图片作为文章头图',
        'url' => '在文章头图输入框手动输入图片URL',
        'default' => '使用系统设置'
    ), 'article', _t('文章头图来源'), _t('如果选择了使用文章中的第一张图片作为文章头图，在文章不包含图片的情况下将不会显示文章头图。如果选择了使用系统设置，需要在主题设置的默认文章头图输入框填写图片 URL，系统会在默认文章头图中随机选择一个 URL 加载。')));
}

如果您之前尝试过为主题自定义一个设置页面，就会惊喜的发现，这几个new的语法不能说非常相似，简直就是一模一样。所以博主又要祭出deepseek，把自定义字段也写成一个类文件了。还是那句话，对于主题运行完全没有正向增益，纯粹就是添加删除项目的时候看着更舒服一点。

故技重施

一个用于设置文章自定义字段的类：

function themeFields($layout) {
    $settings = new Aug_Fields($layout);
    
    $settingsConfig = [
        //全局设置，参数顺序name、type、label、options、default、description 下同
        [
            '_Postthumb',
            'Select',
            _t('缩略图设置'),
           [],
            null,
            _t('修改站点的默认显示语言。')
        ]
    ];
    
    $settings->create_setting($settingsConfig);
}

if (!class_exists('Aug_Fields')) {

    class Aug_Fields {
        private $layout;
        public function __construct($layout) {
            $this->layout = $layout;
        }
        public function create_setting($items) {
            foreach ($items as $item) {
                $this->create_element($item);
            }
        }
        private function create_element($item) {
            $name = $item[0];
            $type = $item[1];
            $label = $item[2];
            $options = $item[3];
            $default = $item[4];
            $description = $item[5];
            $className = '\\Typecho\\Widget\\Helper\\Form\\Element\\' . $type;
            $element = new $className( $name, $options, $default, $label, $description );
            $this->layout->addItem($element);
        }
    }
}

博主的自定义字段里有一个缩略图选项，选项是由后台设置页里定义的参数Augpostthumbs提供的，所以在生成选项之前，还需要做一点与后台设置数据的交互，这里提供了一个演示。

function themeFields($layout) {
    $settings = new Aug_Fields($layout);
    
    $settingsConfig = [
        //全局设置，参数顺序name、type、label、options、default、description 下同
        [
            '_Postthumb',
            'Select',
            _t('缩略图设置'),
            $settings->thumbs,
            null,
            _t('修改站点的默认显示语言。')
        ]
    ];
    
    $settings->create_setting($settingsConfig);
}

if (!class_exists('Aug_Fields')) {

    class Aug_Fields {

        private $layout;

        public $thumbs; 

        public function __construct($layout) {
            $this->layout = $layout;
            $this->thumbs = ['' => '不使用缩略图'];
            $thumbs_lib = Helper::options()->Augpostthumbs;
            if ($thumbs_lib) {
                $thumb_arr = explode("\r\n", $thumbs_lib);
                foreach ($thumb_arr as $item) {
                    $name = explode("_" , $item)[0];
                    $value = Helper::options()->themeUrl.'/thumbs/'.$item;
                    $this->thumbs[$value] = $name;
                }
            }
        }
    
        public function create_setting($items) {
            foreach ($items as $item) {
                $this->create_element($item);
            }
        }

        private function create_element($item) {
            $name = $item[0];
            $type = $item[1];
            $label = $item[2];
            $options = $item[3];
            $default = $item[4];
            $description = $item[5];
            $className = '\\Typecho\\Widget\\Helper\\Form\\Element\\' . $type;
            $element = new $className( $name, $options, $default, $label, $description );
            $this->layout->addItem($element);
        }
    }
}