阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

已經可以在後台管理資料、也可以在前台顯示頁面了

接下來我想知道:如何替模組新增欄位呢?這是 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 使用模組的資料

自由地開發他想要的頁面與樣式!


共有 0 則留言


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈