Chủ đề

Trong phần này, chúng tôi sẽ hướng dẫn bạn cách tạo chủ đề mới, tham chiếu chế độ xem chủ đề và thêm các tùy chọn chủ đề cho chủ đề cụ thể của bạn.


Tạo chủ đề

Để tạo chủ đề, bạn sẽ cần tạo một thư mục mới bên trongwave/docs/themes . Hãy gọi thư mục nàysample-theme . Sau đó, bên trong thư mục này, chúng tôi cần một tên tệp phù hợp được gọi làsample-theme.json :

{
    "name": "Sample Theme",
    "version": "1.0"
}

Bây giờ, nếu bạn truy cập/admin/themes , bạn sẽ thấy chủ đề mới này có sẵn để kích hoạt.

Bạn có thể thấy hình ảnh bị hỏng trong quản trị viên nếu bạn không có hình ảnh cho chủ đề đó. Bên trong thư mục chủ đề của bạn, bạn sẽ cần một.jpg tệp có cùng tên với thư mụcsample-theme.jpg (khuyến nghị 800x500px)

Chế độ xem chủ đề

Sau khi kích hoạt một chủ đề, bạn có thể hiển thị bất kỳ chế độ xem nàofile.blade.php hoặc làfile.php bằng cách gọitheme::file .

Ví dụ: nếu chúng tôi đã tạo một tệp mới bên trong chủ đề mẫu của chúng tôi tạiwave/docs/themes/sample-theme/home.blade.php sau đó chúng tôi có thể trả lại chế độ xem trong một bộ điều khiển như sau:

public function home(){
    return view('theme::home');
}

Hoặc, bạn có thể thực hiện việc này bên trong tệp routing của mình:

Route::view('/', 'theme::home');

Tùy chọn chủ đề

Mỗi chủ đề có thể bao gồm các tùy chọn như logo, bảng màu, v.v. Bạn có thể chọn lập trình bất kỳ số lượng tùy chọn nào vào chủ đề của mình.

Để tạo trang tùy chọn cho chủ đề của bạn, bạn cần tạo một tệp mới bên trong thư mục chủ đề của bạn có tênoptions.blade.php . Ví dụ, hãy xem các tùy chọn chủ đề Tailwind có tạiwave/docs/themes/tailwind/options.blade.php , bạn sẽ thấy một đoạn mã tương tự như:

<div id="branding" class="tab-pane fade in active">

    {!! theme_field('image', 'logo', 'Site Logo') !!}

    {!! theme_field('image', 'footer_logo', 'Footer Logo') !!}

</div>

Điều này sẽ cho phép chúng tôi tạo một số trường chủ đề động. Điều này được cung cấp bởiGói chủ đề DevDojo . Bạn có thể dễ dàng tạo các trường đầu vào cho các tùy chọn chủ đề của mình.

Để biết thêm thông tin về các loại trường khác nhau, hãy nhớ truy cập gói chủ đề có tạihttps://github.com/thedevdojo/themes

Nội dung chủ đề

Các chủ đề hiện tại sử dụng Webpack để kết hợp nội dung của chúng. Để chạy các nội dung cho mỗi chủ đề, bạn sẽ cần phải vào thư mục chủ đề và chạy:

npm run watch

Ngoài ra, để biên dịch nội dung và làm cho chúng sẵn sàng sản xuất, bạn sẽ cần sử dụng:

npm run production

Trước khi biên dịch nội dung trong mỗi chủ đề, bạn có thể cần bao gồm các phụ thuộc nội dung bằng cách chạynpm install bên trong thư mục chủ đề.


Giờ đây, bạn có thể nhanh chóng và dễ dàng tạo các chủ đề có thể định cấu hình cho ứng dụng của mình 🎉