yalcin https://github.com/moesaid/cleopatra/tree/master/dist bu klasördeki dosyalar sizin ihtiyacınız olan dosyalar. Bu klasörü public klasörü içerisine eklediğinizde temanız hazır olmuş oluyor. Geriye sadece örnek html sayfalarına bakıp Blade ya da Vue dosyalarını oluşturmak kalıyor. Tabi Blade ya da Vue hangisini kullanacaksanız onlarda template ve layout sistemi hakkında bilgi sahibi olmanız lazım.
https://github.com/moesaid/cleopatra/blob/master/dist/blank.html bu dosya header, menu gibi alanlar eklenmiş ama ortası sizin için bırakılmış başlangıç dosyası.
Mesela bu dist klasörünün adını admin yaptınız ve public içine koydunuz:
app
config
boostrap
...
public
admin
css
img
js
şeklinde bir dosya yapısı elde ettiniz.
Inertia kullanacaksanız resurces/views/app.blade php dosyası içeriği şu şekilde olacak:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('/admin/img/fav.png') }}" type="image/x-icon">
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.12.1/css/pro.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/admin/css/style.css') }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
<title>Welcome To Cleopatra</title>
</head>
<body class="bg-gray-100">
@inertia
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="{{ asset('/admin/js/scripts.js') }}"></script>
</body>
</html>
resources/js/layout.vue ise (ya da resources/js içinde istediğiniz yere koyarsınız)
<template>
<div>
<!--
Bu kısma blank.html içindeki <body class="bg-gray-100">ile
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> arasındaki
içerik gelecek
...
-->
<!-- Bu içeriğin içinde şu kısma ise slot ekleyeceksiniz: -->
<!-- strat content -->
<div class="bg-gray-100 flex-1 p-6 md:mt-16">
<slot></slot> <!-- Buraya. Normalde burada Content here yazıyordu -->
</div>
<!-- end content -->
<!-- ... -->
</div>
</template>
Artık bir sayfa oluşturmak istediğinizde, mesela resources/js/Pages/Dashboard/Index.vue:
<template>
<layout>
<!-- Buraya dashboard içeriği... -->
</layout>
</template>
<script>
import Layout from '../../layout'
export default {
components: {
Layout,
}
}
</script>
Hepsi bu. İlla temanın webpack özelliğini kullanıp script ve stil dosyalarını sizin derlemenize gerek yok. Eğer admin temasının script ve stil dosyalarını da Inertia'nın app.js ve app.css dosyası ile birleştirmek istiyorsanız import edip kullanırsınız.