In Typecho’s official theme development documents, there are very few development instructions related to article custom fields and theme settings. I also looked at the code of some open source themes to understand the development of custom fields and theme settings. Here I will briefly write about the definition and invocation of article custom fields and theme settings.
Article custom fields
After the article custom fields are defined, they will be displayed below the edit box on the article editing interface. Users can use the defined options to set preferences for each article. When outputting the article, the user's settings can be called to implement some personalized functions.
Article custom fields need to be defined in the themeFields function in the functions.php file in the theme directory.
input input box
Define an input input box below:
function themeFields($layout) {
$image = new Typecho_Widget_Helper_Form_Element_Text('image', null, null, _t('文章头图'), _t('文章头图会显示在文章的顶部。'));
$layout->addItem($image); // 注册
}The first parameter of Typecho_Widget_Helper_Form_Element_Text is the field name.
The second parameter is currently unknown.
The third parameter is the default value.
The fourth parameter is the prompt information, which will be displayed in the label associated with the input box.
The fifth parameter is more detailed prompt information, which will be displayed below the input box.
When outputting an article, you can use $this->fields->image() to output the content of the custom field, where image is the field name. If you want to determine whether the field has content, you can directly use if to determine $this->fields->image. If there is content, it will return true, otherwise it will return false.
select drop-down selection
Define a select drop-down selection
function themeFields($layout) {
$articleCopyright = new Typecho_Widget_Helper_Form_Element_Select('articleCopyright', array(
'show' => '显示',
'hide' => '不显示'
), 'show', _t('显示原创声明'), _t('开启后会在本篇文章底部显示版权声明。'));
$layout->addItem($articleCopyright); // 注册
}Attention! As long as the custom fields of the article need to be written in the themeFields function, multiple fields only need to be written in one themeFields function.
The first parameter of Typecho_Widget_Helper_Form_Element_Select is the field name. The second parameter is the content of the drop-down selection and needs to be passed in an array. The third parameter is the default value. The type of the default value is a string, and you need to pass in the key name of an array. The fourth parameter is the prompt information associated with the label label. The fifth parameter is more detailed prompt information.
When outputting an article, you can use if to determine the value of $this->fields->articleCopyright, where articleCopyright is the field name. The following determines the value of $this->fields->articleCopyright:
if ($this->fields->articleCopyright == 'show') {
// 如果是选中状态就返回 true
}Typecho article custom field input input box and select drop-down selection effect
Theme settings field
After the theme setting fields are defined, they will be displayed on the theme's appearance settings page. Users can use the defined options to set the theme's appearance and functionality.
The fields set by the theme need to be defined in the themeConfig function in funcions.php in the theme directory.
Define an input input box
function themeConfig($cfg) {
$logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', null, null, _t('站点 Logo 地址'), _t('Logo 会显示在标签页的标题前面。'));
$cfg->addInput($logoUrl); // 注册
}The Typecho_Widget_Helper_Form_Element_Text parameter of the theme setting field is the same as the Typecho_Widget_Helper_Form_Element_Text parameter of the article custom field.
The theme setting field can be output on any page using $this->options->logoUrl(), where logoUrl is the field name. If you want to determine whether the field has content, you can also use if to determine $this->options->logoUrl. If there is content, it will return true, otherwise it will return false.
textarea input box
Define a textarea input box
function themeConfig($cfg) {
$cssCode = new Typecho_Widget_Helper_Form_Element_Textarea('cssCode', null, null, _t('自定义 CSS'), _t('通过自定义 CSS 您可以很方便的设置页面样式，自定义 CSS 不会影响网站源代码。'));
$cfg->addInput($cssCode); // 注册
}Attention! All theme setting fields need to be written in the themeConfig function, and multiple fields only need to be written in one themeConfig function.
The parameters of Typecho_Widget_Helper_Form_Element_Textarea are the same as those of the input input box.
The output and query of textarea are the same as input above.
checkbox checkbox
Define a set of checkboxes
function themeConfig($cfg) {
$sidebarBlock = new Typecho_Widget_Helper_Form_Element_Checkbox('sidebarBlock',
array(
'ShowRecentPosts' => _t('显示最新文章'),
'ShowRecentComments' => _t('显示最近回复'),
'ShowCategory' => _t('显示分类'),
'ShowTag' => _t('显示标签云'),
'ShowArchive' => _t('显示归档'),
'ShowOther' => _t('显示其它杂项'),
'HideLoginLink' => _t('隐藏登录入口')
),
array(
'ShowRecentPosts',
'ShowRecentComments',
'ShowCategory'
), _t('侧边栏显示')
);
$cfg->addInput($sidebarBlock->multiMode()); // 注册
}The first parameter of Typecho_Widget_Helper_Form_Element_Checkbox is the field name. The second parameter is the content of the check box and needs to be passed in an array. The third parameter is the selected state of the check box and needs to be passed in an array. The content of the array is the key name of the array in the second parameter. The fourth parameter is the title of the checkbox group, which will be displayed above the checkboxes.
Attention! When registering, you need to pass in the multiMode() method of Typecho_Widget_Helper_Form_Element_Checkbox.
If you need to determine the selected state of the check box, you can use the in_array function to find the options of $this->options->sidebarBlock.
Determine whether Show latest reply is selected below:
if (is_array($this->options->sidebarBlock) && in_array('ShowRecentComments', $this->options->sidebarBlock)) {
// 返回 true
}If none of the checkboxes in a set are selected, the value of $this->options->sidebarBlock is null . If you only use in_array() to search, you may get an error. You need to use is_array() to determine whether it is an array.
Define a set of radio button boxes
function themeConfig($cfg) {
$navbarColor = new Typecho_Widget_Helper_Form_Element_Radio('navbarColor', array(
'white' => '白色',
'black' => '黑色'
), 'black', _t('导航栏颜色'));
$cfg->addInput($navbarColor);
}The first parameter of Typecho_Widget_Helper_Form_Element_Radio is the field name. The second parameter is the content of the radio button and needs to be passed in an array. The third parameter is the selected state of the radio button, and the key name of the second parameter array needs to be passed in. The fourth parameter is the title of the radio button group, which will be displayed above the radio button box.
If you want to determine the selected state of the radio button, you can use if to determine the value of $this->options->navbarColor, where navbarColor is the field name.
Determine the checked state of a radio button
if ($this->options->navbarColor == 'black') {
// 如果黑色选中就返回 true
}
