已經可以在後台管理資料、也可以在前台顯示頁面了
接下來我想知道:如何替模組新增欄位呢?這是 CMS 的核心功能
目前的 pages 模組,編輯的後台有 title 與 description 兩個欄位(都是用 <input type="text" />
管理)
在 resources/views/site/page.blade.php
也可以輕易取得這兩個欄位的值
{{ $item->title }}
<br />
{{ $item->description }}
這兩個值實際存在資料庫的哪裡呢?
會發現並不在 pages
table 內,而是出現在 page_translations
table 內
(我猜測,如果沒開啟多語功能,應該就是出現在 pages
table 內了?)
除此之外,也會在 page_revisions
的 payload 看到這兩個欄位的值,但這應該是「歷史修改紀錄」
類似 log 的功能,主要是以 page_translations
欄位為主吧!
值得一提的是,title 與 description 是原生的預設欄位
上次輸入 php artisan twill:make:module pages
指令時,就自動在 migration 內出現這兩行了
$table->string('title', 200)->nullable();
$table->text('description')->nullable();
這個設計顯然是 seo 考量,大家有把握的話,migration 內容隨意修改,我認為無所謂。
假設我今天想要擴充這個模組,讓每個頁面下方可以顯示一段「備註」
我想增加 notes
欄位,並且希望在後台使用 <textarea><textarea/>
管理,該怎麼做呢?
首先,打開 Twill/PageController 檔案
會看到 getForm 那邊有 description 的定義
我直接這樣加一段試試看
$form->add(
Input::make()->name('notes')->label('Notes')->type('textarea')->translatable()
);
參考資料:https://twillcms.com/docs/form-fields/input.html
打開後台看看,會看到真的出現了 Notes 欄位的文字區塊!這非常方便
目前我們還沒新增 migration 檔案,所以實際上資料庫存不了這欄位
但就硬著頭皮按下 Update 看看吧?
結果居然跳出 Content saved. All good!
查看資料庫,會看到 page_revisions
的 payload 有出現 notes
但我更新 page.blade.php
{{ $item->title }}
<br />
{{ $item->description }}
<br />
{{ $item->notes }}
根本就沒有內容。所以這邊的設計有點小奇怪,按下 Update 應該跳出 error 比較好。
但是沒關係 瑕不掩瑜
來正式修改資料表吧
php artisan make:migration add_notes_to_pages_module
內容就放
public function up(): void
{
Schema::table('page_translations', function (Blueprint $table) {
$table->text('notes')->nullable();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('page_translations', function (Blueprint $table) {
$table->dropColumn('notes');
});
}
然後打開 Models/Page.php
在 $fillable
跟 $translatedAttributes
陣列加入 'notes'
(我猜測,根據開啟多語功能與否,這兩個陣列其實擇一修改即可?沒關係先硬上)
這樣就大功告成囉!
打開網址 http://twill-play.local/pages/my-1st 會看到新的欄位正確顯示!
這次的 commit 內容可參考 https://github.com/howtomakeaturn/twill-play/commit/fef0e19a0e5d2ecaf3e87da683fb9690bda34976
順帶一提,官方文件 https://twillcms.com/docs/form-fields/input.html
提到新增欄位是寫
Schema::table('articles', function (Blueprint $table) {
...
$table->string('subtitle', 100)->nullable();
...
});
// OR
Schema::table('article_translations', function (Blueprint $table) {
...
$table->string('subtitle', 250)->nullable();
...
});
注意那個 OR
這邊應該是看有否開啟多語設定
也就是只要更新一張 table 即可
這流程真的非常棒,包含 wordpress 在內的許多 CMS,在新增欄位的時候,程式碼本身不需修改
欄位定義會出現在 database 內。雖然方便,但是後續很難以維護、擴充
反觀上述 twill 流程,幾乎就是平常 laravel 工程師的工作流程而已
後續就算交給一個只熟 laravel 而完全不會 twill 的人也沒關係,他可以自行在 page.blade
使用模組的資料
自由地開發他想要的頁面與樣式!