Laravel Wave 테마 만들기

Wave는 완전한 테마 지원을 제공하므로, 뷰를 별도의 테마로 분리할 수 있습니다. 이를 통해 사이트의 새로운 버전을 쉽게 생성하고 필요 시 이전 버전으로 되돌릴 수 있습니다. 또한 백엔드 로직과 프론트엔드를 많이 분리하는 데 도움이 됩니다.

 

Create a Theme

 

테마를 생성하려면 `resources/views/themes` 폴더 안에 새 폴더를 만들어야 합니다. 이 폴더의 이름을 `sample-theme`라고 해봅시다. 그런 다음 이 폴더 안에 `sample-theme.json`이라는 파일을 만들어야 합니다. 

다음과 같이 진행할 수 있습니다:

1. `resources/views/themes/sample-theme` 폴더 생성.
2. `sample-theme` 폴더 안에 `sample-theme.json` 파일 생성.

이렇게 하면 새로운 테마를 위한 기본 구조가 완성됩니다.

 

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

 

이제 /admin/themes를 방문하면, 새로운 테마가 활성화 가능하다는 것을 확인할 수 있습니다.

 

테마에 이미지가 없는 경우 관리자 페이지에서 깨진 이미지가 표시될 수 있습니다. 이를 방지하려면 테마 폴더 안에 폴더 이름과 동일한 이름의 .jpg 파일을 추가해야 합니다. 예를 들어, public/themes/sample-theme 폴더 안에 sample-theme.jpg 파일을 추가하세요(권장 크기: 800x500px).

 

Theme Views

테마를 활성화한 후에는 `theme::file`을 호출하여 `file.blade.php` 또는 `file.php` 뷰 파일을 렌더링할 수 있습니다.

예를 들어, `sample-theme` 폴더 안에 `resources/views/themes/sample-theme/home.blade.php` 파일을 생성한 후, 컨트롤러에서 다음과 같이 뷰를 반환할 수 있습니다:

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

이렇게 하면 `sample-theme` 테마의 `home.blade.php` 파일이 렌더링됩니다. 라우트 파일에서도 다음과 같이 설정할 수 있습니다:

Route::get('/home', function () {
    return view('theme::home');
});

이렇게 하면 `/home` URL에 접근할 때 `sample-theme` 테마의 `home.blade.php` 파일이 렌더링됩니다. 이 방법으로 라우트 파일 안에서 직접 테마 뷰를 호출할 수 있습니다.

 

Theme Options

모든 테마는 로고, 색상 구성 등과 같은 옵션을 포함할 수 있습니다. 원하는 만큼의 옵션을 테마에 프로그래밍할 수 있습니다.

테마에 대한 옵션 페이지를 만들려면 테마 폴더 내에 options.blade.php라는 새 파일을 만들어야 합니다. 예를 들어, Tailwind 테마 옵션은 resources/views/themes/tailwind/options.blade.php에 위치해 있으며, 다음과 같은 코드 조각을 볼 수 있습니다:

 

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

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

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

</div>

 

이렇게 하면 동적인 테마 필드를 생성할 수 있습니다. 이는 DevDojo Themes 패키지에 의해 지원됩니다. 테마 옵션에 대한 입력 필드를 쉽게 생성할 수 있습니다.

다양한 유형의 필드에 대한 자세한 정보는 https://github.com/thedevdojo/themes 에 있는 테마 패키지를 참조하십시오.

 

Theme Assets

현재 테마들은 Webpack을 사용하여 자산을 혼합합니다. 각 테마의 자산을 실행하려면 테마 폴더로 이동하여 다음 명령을 실행해야 합니다:

 

npm run watch

 

또한, 자산을 컴파일하고 프로덕션 준비를 하려면 다음 명령어를 사용해야 합니다:

 

npm run production

 

각 테마에서 자산을 컴파일하기 전에 테마 폴더 안에서 `npm install`을 실행하여 자산 종속성을 포함해야 할 수도 있습니다.