在 Typecho 官方的主題開發文檔中,很少有關於文章自定義字段和主題設置相關的開發說明。我也是查看了一些開源主題的代碼才搞懂自定義字段和主題設置的開發。這裏就簡單寫一下文章自定義字段和主題設置的定義和調用。
文章自定義字段
文章自定義字段定義後會顯示在文章編輯界面的編輯框下方,用戶可以使用定義好的選項來設置每篇文章的偏好,在輸出文章的時候可以調用用戶的設置,實現一些個性化功能。
文章自定義字段需要在主題目錄下的 functions.php 文件中的 themeFields 函數中定義。
input 輸入框
下面定義一個 input 輸入框:
function themeFields($layout) {
$image = new Typecho_Widget_Helper_Form_Element_Text('image', null, null, _t('文章頭圖'), _t('文章頭圖會顯示在文章的頂部。'));
$layout->addItem($image); // 註冊
}Typecho_Widget_Helper_Form_Element_Text 的第一個參數是字段名。
第二個參數目前暫時未知。
第三個參數是默認值。
第四個參數是提示信息,會顯示在輸入框關聯的 label 標籤中。
第五個參數是更詳細的提示信息,會顯示在輸入框下方。
在輸出文章的時候可以通過 $this->fields->image() 輸出自定義字段的內容,其中的 image 就是字段名稱。如果要判斷字段是否有內容可以直接用 if 來判斷 $this->fields->image ,如果有內容就會返回 true ,否則就返回 false 。
select 下拉選擇
定義一個 select 下拉選擇
function themeFields($layout) {
$articleCopyright = new Typecho_Widget_Helper_Form_Element_Select('articleCopyright', array(
'show' => '顯示',
'hide' => '不顯示'
), 'show', _t('顯示原創聲明'), _t('開啓後會在本篇文章底部顯示版權聲明。'));
$layout->addItem($articleCopyright); // 註冊
}注意!只要是文章的自定義字段都需要寫在 themeFields 函數內,多個字段也只需要寫在一個 themeFields 函數內。
Typecho_Widget_Helper_Form_Element_Select 的第一個參數是字段名稱。第二個參數是下拉選擇的內容,需要傳入一個數組。第三個參數是默認值,默認值的類型爲字符串,需要傳入一個數組的鍵名。第四個參數是 label 標籤關聯的提示信息。第五個參數是更詳細的提示信息。
在輸出文章的時候可以用 if 來判斷 $this->fields->articleCopyright 的值,其中 articleCopyright 就是字段名。下面判斷 $this->fields->articleCopyright 的值:
if ($this->fields->articleCopyright == 'show') {
// 如果是選中狀態就返回 true
}Typecho 文章自定義字段 input 輸入框 和 select 下拉選擇的效果
主題設置字段
主題設置字段定義後會顯示在主題的外觀設置頁,用戶可以使用定義好的選項來設置主題的外觀和功能。
主題設置的字段需要在主題目錄下的 funcions.php 中的 themeConfig 函數中定義。
定義一個 input 輸入框
function themeConfig($cfg) {
$logoUrl = new Typecho_Widget_Helper_Form_Element_Text('logoUrl', null, null, _t('站點 Logo 地址'), _t('Logo 會顯示在標籤頁的標題前面。'));
$cfg->addInput($logoUrl); // 註冊
}主題設置字段的 Typecho_Widget_Helper_Form_Element_Text 參數和文章自定義字段的 Typecho_Widget_Helper_Form_Element_Text 的參數是一樣的。
主題設置字段可以在任何一個頁面使用 $this->options->logoUrl() 輸出,其中的 logoUrl 就是字段名。如果要判斷字段是否有內容也可以用 if 來判斷 $this->options->logoUrl ,如果有內容就會返回 true ,否則返回 false 。
textarea 輸入框
定義一個 textarea 輸入框
function themeConfig($cfg) {
$cssCode = new Typecho_Widget_Helper_Form_Element_Textarea('cssCode', null, null, _t('自定義 CSS'), _t('通過自定義 CSS 您可以很方便的設置頁面樣式,自定義 CSS 不會影響網站源代碼。'));
$cfg->addInput($cssCode); // 註冊
}注意!所有的主題設置字段都需要寫在 themeConfig 函數中,多個字段也只需要寫在一個 themeConfig 函數中。
Typecho_Widget_Helper_Form_Element_Textarea 的參數和 input 輸入框的參數是一樣的。
textarea 的輸出和查詢和上面的 input 是一樣的。
checkbox 複選框
定義一組 checkbox 複選框
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()); // 註冊
}Typecho_Widget_Helper_Form_Element_Checkbox 的第一個參數是字段名。第二個參數是複選框的內容,需要傳入一個數組。第三個參數是複選框的選中狀態,需要傳入一個數組,數組的內容就是第二個參數中數組的鍵名。第四個參數是複選框組的標題,會顯示在複選框的上方。
注意!在註冊的時候需要傳入 Typecho_Widget_Helper_Form_Element_Checkbox 的 multiMode() 方法。
如果需要判斷複選框的選中狀態可以使用 in_array 函數來查找 $this->options->sidebarBlock 的選項。
下面判斷 顯示最新回覆 是否選中 :
if (is_array($this->options->sidebarBlock) && in_array('ShowRecentComments', $this->options->sidebarBlock)) {
// 返回 true
}如果一組複選框中沒有一個被選中,$this->options->sidebarBlock 的值就是 null 。只使用 in_array() 查找的話可能會報錯,需要先用 is_array() 判斷是否是數組。
定義一組 radio 單選框
function themeConfig($cfg) {
$navbarColor = new Typecho_Widget_Helper_Form_Element_Radio('navbarColor', array(
'white' => '白色',
'black' => '黑色'
), 'black', _t('導航欄顏色'));
$cfg->addInput($navbarColor);
}Typecho_Widget_Helper_Form_Element_Radio 的第一個參數是字段名。第二個參數是單選框的內容,需要傳入一個數組。第三個參數是單選框的選中狀態,需要傳入第二個參數數組的鍵名。第四個參數是單選框組的標題,會顯示在單選框的上方。
如果要判斷單選框的選中狀態可以用 if 來判斷 $this->options->navbarColor 的值,其中的 navbarColor 是字段名。
判斷單選框的選中狀態
if ($this->options->navbarColor == 'black') {
// 如果黑色選中就返回 true
}