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

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

立即解鎖你的轉職秘笈

再來新增一個模組試試看,假設官網要顯示各地辦公室的資訊

來建立辦公室模組,這次選「不用支援多語」

php artisan twill:make:module offices

其餘參數都按照教材輸入

https://twillcms.com/guides/page-builder-with-blade/creating-the-page-module.html


完成之後,看一下 migration 檔案

會發現少了 xxx_translations 那張 table

然後 title 跟 description 出現在 offices 資料表,果然跟之前猜測的一樣!


同樣在 AppServiceProdiver 加入

        TwillNavigation::addLink(
            NavigationLink::make()->forModule('offices')
        );

就可以在後台管理檔案了


接著修改 routes/web.php

Route::get('offices/{slug}', [\App\Http\Controllers\OfficeDisplayController::class, 'show'])->name('frontend.office');

並且新增控制器

<?php

namespace App\Http\Controllers;

use App\Repositories\OfficeRepository;
use Illuminate\Contracts\View\View;

class OfficeDisplayController extends Controller
{
    public function show(string $slug, OfficeRepository $officeRepository): View
    {
        $office = $officeRepository->forSlug($slug);

        if (! $office) {
            abort(404);
        }

        return view('site.office', ['item' => $office]);
    }
}

就可以在前台查看網頁囉!


目前後台的導覽列,有 PagesOffices 兩個項目

假設我們想整理一下後台導覽列,把 pages 跟 offices 都視為「About」的資訊,該怎麼做呢?

https://twillcms.com/docs/getting-started/navigation.html

我先試試看只更新 routes,不更新 AppServiceProvider

這樣搞,應該會讓後台壞掉

// TwillRoutes::module('pages');
// TwillRoutes::module('offices');

Route::group(['prefix' => 'about'], function () {
    TwillRoutes::module('pages');
    TwillRoutes::module('offices');
});

結果打開後台面板,居然沒有故障!

倒是兩個模組,網址前面真的多了 /about

所以 TwillRoutes 不只是對應網址&控制器的功能

更是會根據 route group 前綴,去更新對應,太神奇了,不知道怎麼寫的?


現在後台導覽只有網址改變,導覽列 UI 結構沒變,還沒完成

我要讓導覽列只剩下 About,然後有次級導覽列

About -> Pages

About -> Offices

我在官網找不到設定方法

https://twillcms.com/docs/getting-started/navigation.html

但是翻閱原始碼之後

https://github.com/area17/twill/blob/3.x/src/View/Components/Navigation/NavigationLink.php

會發現這樣寫即可

    public function boot(): void
    {
        // TwillNavigation::addLink(
        //     NavigationLink::make()->forModule('pages')
        // );

        // TwillNavigation::addLink(
        //     NavigationLink::make()->forModule('offices')
        // );

        TwillNavigation::addLink(
            NavigationLink::make()->forModule('pages')
                ->title('About')
                ->doNotAddSelfAsFirstChild()
                ->setChildren([
                    NavigationLink::make()->forModule('pages'),
                    NavigationLink::make()->forModule('offices'),
                ])
        );
    }

乍看之下,好像有點複雜,但實際測試一下相關函數的行為,會發現妙不可言!

這種設計給予了工程師極大的自由,可以把導覽列整理成各種樣子!

我真心認為寫出相關類別的工程師,具有非常深厚的功底、經驗!


相關 commit 1 https://github.com/howtomakeaturn/twill-play/commit/87849d8963b10412ccb7f3eaa46204f3202e6c08

相關 commit 2 https://github.com/howtomakeaturn/twill-play/commit/1e441eb81bb24642058d1826fc5b77a3d3873545


共有 0 則留言


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

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

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

立即解鎖你的轉職秘笈