تبدیل به Laravel

اگر پروژه شما Laravel است، می‌توانید همین قالب را در چند گام به Blade تبدیل کنید. هیچ‌کدام از این مراحل اجباری نیست؛ قالب به‌صورت استاتیک هم کامل کار می‌کند.

گام ۱ — ساخت خروجی

npm run build

محتوای dist/ را در public/ پروژه Laravel کپی کنید:

cp -r dist/* /path/to/laravel/public/

از این لحظه سایت روی https://example.com/ کار می‌کند و همه CSS/JS/فونت‌ها نسبی هستند.

گام ۲ — تبدیل صفحات به Blade (اختیاری)

صفحات تولیدشده در src/pages/** و قطعه‌های مشترک در src/partials/** قرار دارند. یک‌بار قطعه‌ها را به layout تبدیل کنید:

{{-- resources/views/layouts/app.blade.php --}}
<!doctype html>
<html lang="{{ config('nova.default_language') }}" dir="{{ config('nova.default_direction') }}" data-theme="{{ config('nova.default_theme') }}">
<head>
  @include('partials.head')
  <title>@yield('title', 'پنل مدیریت')</title>
</head>
<body class="app-body" data-page="@yield('page')" data-section="@yield('section')">
  @include('partials.sidebar')
  <div class="app-main">
    @include('partials.header')
    <div class="app-content">
      <div class="container-fluid">
        <main id="main-content" class="page-body">
          @yield('content')
        </main>
      </div>
    </div>
    @include('partials.footer')
  </div>
  @include('partials.overlays')
  @include('partials.scripts')
</body>
</html>

و هر صفحه:

{{-- resources/views/dashboards/analytics.blade.php --}}
@extends('layouts.app')

@section('page', 'dashboards/analytics.html')
@section('title', 'داشبورد آنالیتیکس')

@section('content')
  <div class="dashboard-shell" data-dashboard="analytics" data-range="30d">…</div>
@endsection

گام ۳ — مسیرها

// routes/web.php
use App\Http\Controllers\DashboardController;

Route::middleware('auth')->group(function () {
    Route::get('/', [DashboardController::class, 'analytics'])->name('dashboard');
    Route::get('/orders', [DashboardController::class, 'orders'])->name('orders');
    Route::get('/api/orders', [Api\OrderController::class, 'index']);
});

لینک‌های داخل قالب نسبی هستند (../users/list.html)، پس پس از تبدیل به Blade آن‌ها را با route() یا url() جایگزین کنید:

<a class="landing-demo" href="{{ route('orders') }}">…</a>

گام ۴ — API

سرویس‌های فرانت‌اند همان قرارداد REST را انتظار دارند:

// routes/api.php
Route::apiResource('orders', Api\OrderController::class);

سپس در src/config/config.js مقدار api.useMocks را false بگذارید و api.baseUrl را روی /api تنظیم کنید. اگر پاسخ Laravel را در پاکت دلخواه می‌فرستید، همان‌جا در کنترلر آن را به شکل استاندارد برگردانید:

return response()->json([
    'items' => $orders->items(),
    'total' => $orders->total(),
    'page' => $orders->currentPage(),
    'perPage' => $orders->perPage(),
    'pages' => $orders->lastPage(),
    'hasNext' => $orders->hasMorePages(),
    'hasPrev' => $orders->currentPage() > 1,
]);

گام ۵ — دارایی‌ها با Vite لاراول

اگر می‌خواهید Vite لاراول باندل را بسازد، vite.config.js قالب را با تنظیمات Laravel جایگزین کنید و در resources/js/app.js فایل src/main.js را import کنید. SCSS را هم در همان ورودی import کنید تا در باندل Laravel بیاید.

نکات

موضوع	پیشنهاد
زبان	`app()->getLocale()` و انتخاب دیکشنری fa/en/ar را از یک میدل‌ور مدیریت کنید
تقویم	تبدیل تاریخ در سمت سرور یا با همان `jalali.js` در فرانت
مجوزها	نقش‌ها را با Gate/Policy بررسی کنید و آیتم‌های منو را شرطی کنید
اعتبارسنجی	پیام‌های فارسی را از `resources/lang/fa/validation.php` بگیرید

نکته: قالب Blade لازم ندارد؛ اگر می‌خواهید سریع منتشر کنید، همان خروجی استاتیک dist/ در public/ کافی است

هشدار: نام‌گذاری و ساختار این قالب عمداً فریم‌ورک‌محور نیست

اگر سمت سرور شما PHP است، سرویس‌های فرانت را دست‌نخورده نگه دارید و فقط client.js را با API خودتان هماهنگ کنید.

Converting to Laravel

If your project is Laravel, you can turn this template into Blade in a few steps. None of these steps is mandatory; the template also works fully as a static site.

Step 1 — build the output

npm run build

Copy the contents of dist/ into the Laravel project's public/:

cp -r dist/* /path/to/laravel/public/

From then on the site works at https://example.com/ and all CSS/JS/fonts are relative.

Step 2 — convert pages to Blade (optional)

Generated pages live in src/pages/** and shared fragments in src/partials/**. Convert the fragments into a layout once:

{{-- resources/views/layouts/app.blade.php --}}
<!doctype html>
<html lang="{{ config('nova.default_language') }}" dir="{{ config('nova.default_direction') }}" data-theme="{{ config('nova.default_theme') }}">
<head>
  @include('partials.head')
  <title>@yield('title', 'Admin panel')</title>
</head>
<body class="app-body" data-page="@yield('page')" data-section="@yield('section')">
  @include('partials.sidebar')
  <div class="app-main">
    @include('partials.header')
    <div class="app-content">
      <div class="container-fluid">
        <main id="main-content" class="page-body">
          @yield('content')
        </main>
      </div>
    </div>
    @include('partials.footer')
  </div>
  @include('partials.overlays')
  @include('partials.scripts')
</body>
</html>

And each page:

{{-- resources/views/dashboards/analytics.blade.php --}}
@extends('layouts.app')

@section('page', 'dashboards/analytics.html')
@section('title', 'Analytics dashboard')

@section('content')
  <div class="dashboard-shell" data-dashboard="analytics" data-range="30d">…</div>
@endsection

Step 3 — routes

// routes/web.php
use App\Http\Controllers\DashboardController;

Route::middleware('auth')->group(function () {
    Route::get('/', [DashboardController::class, 'analytics'])->name('dashboard');
    Route::get('/orders', [DashboardController::class, 'orders'])->name('orders');
    Route::get('/api/orders', [Api\OrderController::class, 'index']);
});

Links inside the template are relative (../users/list.html), so after converting to Blade replace them with route() or url():

<a class="landing-demo" href="{{ route('orders') }}">…</a>

Step 4 — API

The front-end services expect the same REST contract:

// routes/api.php
Route::apiResource('orders', Api\OrderController::class);

Then set api.useMocks to false in src/config/config.js and api.baseUrl to /api. If Laravel returns responses in a custom envelope, convert it to the standard shape right there in the controller:

return response()->json([
    'items' => $orders->items(),
    'total' => $orders->total(),
    'page' => $orders->currentPage(),
    'perPage' => $orders->perPage(),
    'pages' => $orders->lastPage(),
    'hasNext' => $orders->hasMorePages(),
    'hasPrev' => $orders->currentPage() > 1,
]);

Step 5 — assets with Laravel Vite

If you want Laravel's Vite to build the bundle, replace the template's vite.config.js with the Laravel settings and import src/main.js in resources/js/app.js. Import the SCSS in the same entry so it ends up in the Laravel bundle.

Notes

Topic	Suggestion
Language	Handle `app()->getLocale()` and the fa/en/ar dictionary choice in a middleware
Calendar	Convert dates on the server or with the same `jalali.js` on the front end
Permissions	Check roles with Gate/Policy and make menu items conditional
Validation	Take localized messages from `resources/lang/<locale>/validation.php`

Tip: the template does not need Blade; if you want to ship quickly, the static dist/ output in public/ is enough

Warning: this template's naming and structure are deliberately framework-agnostic

If your server side is PHP, keep the front-end services untouched and only align client.js with your API.

التحويل إلى Laravel

إذا كان مشروعك مبنياً على Laravel، فيمكنك تحويل هذا القالب إلى Blade في بضع خطوات. لا شيء من هذه الخطوات إلزامي؛ فالقالب يعمل بالكامل كموقع ثابت أيضاً.

الخطوة ١ — بناء المخرجات

npm run build

انسخ محتوى dist/ إلى public/ في مشروع Laravel:

cp -r dist/* /path/to/laravel/public/

من هذه اللحظة يعمل الموقع على https://example.com/ وجميع ملفات CSS/JS/الخطوط نسبية.

الخطوة ٢ — تحويل الصفحات إلى Blade (اختياري)

توجد الصفحات المولّدة في src/pages/** والأجزاء المشتركة في src/partials/**. حوّل الأجزاء إلى تخطيط مرة واحدة:

{{-- resources/views/layouts/app.blade.php --}}
<!doctype html>
<html lang="{{ config('nova.default_language') }}" dir="{{ config('nova.default_direction') }}" data-theme="{{ config('nova.default_theme') }}">
<head>
  @include('partials.head')
  <title>@yield('title', 'لوحة الإدارة')</title>
</head>
<body class="app-body" data-page="@yield('page')" data-section="@yield('section')">
  @include('partials.sidebar')
  <div class="app-main">
    @include('partials.header')
    <div class="app-content">
      <div class="container-fluid">
        <main id="main-content" class="page-body">
          @yield('content')
        </main>
      </div>
    </div>
    @include('partials.footer')
  </div>
  @include('partials.overlays')
  @include('partials.scripts')
</body>
</html>

وكل صفحة:

{{-- resources/views/dashboards/analytics.blade.php --}}
@extends('layouts.app')

@section('page', 'dashboards/analytics.html')
@section('title', 'لوحة التحليلات')

@section('content')
  <div class="dashboard-shell" data-dashboard="analytics" data-range="30d">…</div>
@endsection

الخطوة ٣ — المسارات

// routes/web.php
use App\Http\Controllers\DashboardController;

Route::middleware('auth')->group(function () {
    Route::get('/', [DashboardController::class, 'analytics'])->name('dashboard');
    Route::get('/orders', [DashboardController::class, 'orders'])->name('orders');
    Route::get('/api/orders', [Api\OrderController::class, 'index']);
});

الروابط داخل القالب نسبية (../users/list.html)؛ لذا استبدلها بعد التحويل إلى Blade بـ route() أو url():

<a class="landing-demo" href="{{ route('orders') }}">…</a>

الخطوة ٤ — API

تتوقع خدمات الواجهة الأمامية عقد REST نفسه:

// routes/api.php
Route::apiResource('orders', Api\OrderController::class);

ثم اضبط api.useMocks على false في src/config/config.js وapi.baseUrl على /api. إذا كان Laravel يرسل الاستجابة في غلاف مخصص، فأعدها إلى الشكل القياسي في المتحكم نفسه:

return response()->json([
    'items' => $orders->items(),
    'total' => $orders->total(),
    'page' => $orders->currentPage(),
    'perPage' => $orders->perPage(),
    'pages' => $orders->lastPage(),
    'hasNext' => $orders->hasMorePages(),
    'hasPrev' => $orders->currentPage() > 1,
]);

الخطوة ٥ — الأصول مع Vite الخاص بـ Laravel

إذا أردت أن يبني Vite الخاص بـ Laravel الحزمة، فاستبدل vite.config.js الخاص بالقالب بإعدادات Laravel واستورد src/main.js في resources/js/app.js. واستورد SCSS في نقطة الدخول نفسها ليدخل في حزمة Laravel.

ملاحظات

الموضوع	الاقتراح
اللغة	أدِر `app()->getLocale()` واختيار قاموس fa/en/ar من وسيط (middleware)
التقويم	تحويل التاريخ من جهة الخادم أو بـ `jalali.js` نفسه في الواجهة الأمامية
الصلاحيات	تحقّق من الأدوار بـ Gate/Policy واجعل عناصر القائمة شرطية
التحقق	خذ الرسائل المحلية من `resources/lang/<اللغة>/validation.php`

ملاحظة: لا يحتاج القالب إلى Blade؛ إذا أردت النشر بسرعة، فالمخرجات الثابتة dist/ داخل public/ تكفي

تحذير: تسمية هذا القالب وبنيته مستقلتان عن أي إطار عمل عمداً

إذا كانت جهة الخادم لديك PHP، فأبقِ خدمات الواجهة الأمامية كما هي ووائم client.js فقط مع واجهتك البرمجية.