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`을 실행하여 자산 종속성을 포함해야 할 수도 있습니다.
'프로그래밍 > Web' 카테고리의 다른 글
Vue 3 Composition API 관련 심화 내용 (1) | 2024.01.26 |
---|---|
Laravel Inertia - Shared data (0) | 2024.01.18 |
Laravel Inertia - Validation (0) | 2024.01.18 |
Laravel Inertia - File uploads (0) | 2024.01.18 |
Laravel Inertia - Forms (0) | 2024.01.18 |
댓글