تركيب ثيم Bootstrap5 على Laravel 10

Programmer Programmers · 17 ديسمبر 2023

هذا مشروع متجر جاهز لدورة تصميم واجهات المستخدم حملته من GitHub اتبعت خطوات تثبيت Bootstrap في Laravel10 Vite

ولكن بقي إدراج هذا المشروع وترتيب هذه الملفات لتتناسق مع Laravel10 وربطها مع بعض.

حاولت تركيب الثيم بنفسي لكن ظهرت مشاكل في المسارات وأيضا في التنسيقات.

ecommerce-main/
├── src/
│   ├── css/style.css
│   ├── fonts/JF-Flat-regular.eot, JF-Flat-regular.svg, JF-Flat-regular.ttf, JF-Flat-regular.woff
│   ├── images/adidas_1.jpg
│   ├── scss/
│       ├── _custom_table.scss
│       ├── _custom_thumbnail.scss
│       ├── _mixins.scss
│       ├── _variables.scss
│       ├── custom.scss
│       └── style.scss
│   ├── checkout.html
│   ├── contact.html
│   ├── index.html
│   ├── index.js
│   ├── payment.html
│   ├── product.html
│   └── search.html
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

ecommerce-main.zip

Adnane Kadri · 18 ديسمبر 2023

يمكن أن نقول أن تركيب ثيم Bootstrap 5 مبني على ويباك في تطبيق لارافيل يتبع المراحل التالية:

تثبيت مختلف الاعتماديات اللازمة في تطبيق لارافيل التي تتعلق بالثيم، مثال:
```
npm install @fortawesome/fontawesome-free bootstrap @popperjs/core
```
.
تضمين مختلف ملفات التنسيقات بملفات التنسيقات التي ينشئها لارافيل ابتداءا، مثل ملف app.scss:
```
@import './theme/style'
```
.
تضمين مختلف ملفات الجافاسكربت بملفات الجافاسكربت التي ينشئها لارافيل ابتداءا، مثل app.js:
```
require('./theme/index.js')
```
.
اعداد vite وتثبيت اعتماديات node بتطبيق لارافيل:
```
npm install
```
.

أنشئ ملفا للنسق العام، وسمه app.blade.php وضع فيه المحتوى المكرر من القالب:

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>متجر عربي</title>
  @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>

<body>
  <div class="container-fluid">

    <!--الشريط العلوي-->
    <div class="row">
      <nav class="navbar custom-navbar navbar-expand-lg">
        <div class="container px-0">
          <div class="navbar-header">
            <button class="navbar-toggler btn btn-icon" data-bs-toggle="collapse"
              data-bs-target="#navbar-collapsed-menu" aria-controls="navbar-collapsed-menu">
              <i class="fas fa-bars fa-xl"></i>
            </button>
            <a href="./checkout.html" class="d-lg-none btn btn-icon">
              <i class="fas fa-shopping-cart fa-lg"></i>
            </a>
            <a href="." class="me-5">
              <img src="./images/logo.png" alt="متجر عربي">
            </a>
          </div>
          <form class="d-flex align-items-center inline-form">
            <input class="form-control custom-form-control" type="search" placeholder="كلمة البحث ..">
            <div class="dropdown categories">
              <a class="nav-link dropdown-toggle custom-btn" href="#" id="navbarDropdown" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">
                اختر فئة
              </a>
              <ul class="dropdown-menu custom-dropdown-menu">
                <li>
                  <div class="checkbox ms-2">
                    <label>
                      <input type="checkbox" name="search-category" value="men"> رجالي
                    </label>
                  </div>
                </li>
                <li>
                  <div class="checkbox ms-2">
                    <label>
                      <input type="checkbox" name="search-category" value="women"> نسائي
                    </label>
                  </div>
                </li>
                <li>
                  <div class="checkbox ms-2">
                    <label>
                      <input type="checkbox" name="search-category" value="kids"> أطفال
                    </label>
                  </div>
                </li>
              </ul>
            </div>
            <button class="btn search-btn" type="submit">ابحث</button>
          </form>
          <div class="collapse navbar-collapse" id="navbar-collapsed-menu">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link" href="./index.html">الصفحة الرئيسية</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">أقسام المتجر</a>
                <ul class="dropdown-menu custom-dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">رجالي</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">نسائي</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">أطفال</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./search.html">البحث المتقدم</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" aria-current="page" href="./contact.html">تواصل معنا</a>
              </li>
              <li class="d-none d-lg-block mt-2">
                <a href="checkout.html" id="btn-shopping-cart" class="btn btn-icon" title="عربة الشراء"
                  data-bs-toggle="tooltip" data-bs-placement="bottom">
                  <i class="fas fa-shopping-cart"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <!--نهاية الشريط العلوي-->
  
    <div class="container">
    @yield('content')
    </div>

    <!--تذييل الصفحة-->
    <footer class="row">
      <div id="brand-logos" class="text-center">
        <span>المتجر وكيل مُعتمد لكبرى الشركات العالمية</span>
        <div class="img-container">
          <img src="./images/lacoste.png" alt="Lacoste">
          <img src="./images/adidas.png" alt="Adidas">
          <img src="./images/puma.png" alt="Puma">
          <img src="./images/polo.png" alt="Polo">
        </div>
      </div>

      <div id="footer-nav" class="text-center">
        <div class="footer-logo">
          <a href="./">
            <img src="./images/logo_footer.png" alt="عربي">
          </a>
        </div>
        <div class="footer-nav-links d-none d-md-block my-5">
          <a href=".">الصفحة الرئيسية</a>
          <a href="search.html">البحث المتقدّم</a>
          <a href="contact.html">تواصل معنا</a>
        </div>
        <div class="newsletter d-flex align-items-center justify-content-center col-md-6 offset-md-3">
          <form>
            <label for="footer-email">
              تابع النشرة البريديّة لأحدث العروض
            </label>
            <br>
            <div class="input-group">
              <input id="footer-email" class="form-control custom-form-control" type="email"
                placeholder="البريد الإلكتروني" name="email" required>
              <button type="submit" class="btn custom-btn-warning">
                متابعة
              </button>
            </div>
          </form>
        </div>
      </div>

      <div id="footer-copyright-social">
        <div class="container">
          <div class="clearfix">
            <div id="copyright" class="float-start">
            </div>
            <div id="social-icons" class="float-end">
              <a href="https://www.facebook.com">
                <i class="fab fa-facebook-square fa-lg"></i>
              </a>
              <a href="https://www.twitter.com">
                <i class="fab fa-twitter-square fa-lg"></i>
              </a>
              <a href="https://www.instagram.com">
                <i class="fab fa-instagram fa-lg"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!--نهاية تذييل الصفحة-->

  </div>
</body>

</html>

.

البدء في استعمال مكونات وملفات التطبيق بداخل ملفات blade في لارافيل، مثال - صفحة المراسلة:

@extends('layouts.app')

@section('content')
<!--عناصر التّنقّل الفرعيّة-->
      <div class="row" area-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
        <ol class="breadcrumb custom-breadcrumb">
          <li class="breadcrumb-item">
            <a href=".">الصفحة الرئيسية</a>
          </li>
          <li class="breadcrumb-item active">تواصل معنا</li>
        </ol>
      </div>
      <!--نهاية عناصر التّنقّل الفرعيّة-->

      <div id="contact-options" class="row mb-4">

        <!--معلومات التواصل-->
        <div class="col-lg-3 offset-lg-2">
          <h4 class="heading-with-border-bottom ">
            معلومات التواصل
          </h4>
          <div id="contact-info" class="mb-4">
            <div>
              <i class="fas fa-phone fa-lg"></i>
              974.4422.7813
            </div>
            <div>
              <i class="fas fa-envelope fa-lg"></i>
              info@araby.com
            </div>
            <div>
              <i class="fas fa-map-marker-alt fa-lg"></i>
              العنوان: الإمارات العربية المتحدة، دبي، برج خليفة
            </div>
          </div>

          <!--قسم الاشتراك بالنّشرة البريدية-->
          <h4 class="heading-with-border-bottom">اشترك بالنشرة البريدية</h4>
          <form id="form-subscription">
            <div class="input-group">
              <input type="email" class="form-control custom-form-control" placeholder="البريد الإلكتروني" name="email"
                required>
              <button class="btn custom-btn-warning" type="submit">
                متابعة
              </button>
            </div>
          </form>
        </div>
        <!--نهاية معلومات التواصل-->

        <!--قسم اترك رسالة-->
        <div class="col-lg-6">
          <h4 class="pb-2">اترك رسالة</h4>
          <form>
            <div class="row">
              <div class="col-md-6">
                <input class="form-control custom-input-details custom-form-control" name="name" type="text"
                  placeholder="الاسم" required>
              </div>
              <div class="col-md-6">
                <input class="form-control custom-input-details custom-form-control" name="email" type="email"
                  placeholder="البريد الإلكتروني" required>
              </div>
            </div>
            <div class="mt-3">
              <textarea class="form-control custom-input-details custom-form-control" name="message"
              placeholder="نص الرسالة" required></textarea>
            </div>
            <div class="d-flex justify-content-end">
              <button type="submit" class="btn custom-btn-warning custom-btn-with-icon">
                <span>
                  إرسال الرسالة
                  <i class="far fa-paper-plane"></i>
                </span>
              </button>
            </div>
          </form>
        </div>
        <!--نهاية قسم اترك رسالة-->
      </div>
@endsection

.

يمكنك جعل باقي الصفحات تأخذ نفس المنحى.

Programmer Programmers · 19 ديسمبر 2023

بتاريخ 14 ساعة قال Adnane Kadri:

تضمين مختلف ملفات الجافاسكربت بملفات الجافاسكربت التي ينشئها لارافيل ابتداءا، مثل app.js:

ماذا عن استيراد ملفات fonts, images

وأيضا إضافة خصائص module وال plugins الموجودة في ملف webpack.config.js ونقلها الى vite.config.js

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          }
           , 
           "css-loader",
          "sass-loader"],
      },
      {
        test:  /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          'rtlcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./images/[name][ext]"
        }
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./fonts/[name][ext]"
        }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html"
    }),
    new HtmlWebpackPlugin({
      filename: "product.html",
      template: "./src/product.html"
    }),
    new HtmlWebpackPlugin({
      filename: "payment.html",
      template: "./src/payment.html"
    }),
    new HtmlWebpackPlugin({
      filename: "checkout.html",
      template: "./src/checkout.html"
    }),
    new HtmlWebpackPlugin({
      filename: "search.html",
      template: "./src/search.html"
    }),
    new HtmlWebpackPlugin({
      filename: "contact.html",
      template: "./src/contact.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/style.css"
    }),
    new CssMinimizerPlugin()
  ]
};

Adnane Kadri · 19 ديسمبر 2023

بتاريخ الآن قال Programmer Programmers:

ماذا عن استيراد ملفات fonts, images

وأيضا إضافة خصائص module وال plugins الموجودة في ملف webpack.config.js ونقلها الى vite.config.js

module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          }
           , 
           "css-loader",
          "sass-loader"],
      },
      {
        test:  /custom\.scss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          'rtlcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./images/[name][ext]"
        }
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/i,
        type: 'asset/resource',
        generator: {
          filename: "./fonts/[name][ext]"
        }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html"
    }),
    new HtmlWebpackPlugin({
      filename: "product.html",
      template: "./src/product.html"
    }),
    new HtmlWebpackPlugin({
      filename: "payment.html",
      template: "./src/payment.html"
    }),
    new HtmlWebpackPlugin({
      filename: "checkout.html",
      template: "./src/checkout.html"
    }),
    new HtmlWebpackPlugin({
      filename: "search.html",
      template: "./src/search.html"
    }),
    new HtmlWebpackPlugin({
      filename: "contact.html",
      template: "./src/contact.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/style.css"
    }),
    new CssMinimizerPlugin()
  ]
};

ملفات الخطوط سيتم التعامل معها بشكل تلقائي في vite، سوف لن تحتاج أي محمل مخصص.

أما بخصوص الوحدات والاضافات الموجودة في webpack فسوف تحتاج استعمال مكافئاتها في vite، ابحث عن مثيلاتها في vite.

أيضا، يفترض أن تقوم بأخذ نسخة المشروع المبنية وليس تلك الخاصة ببيئة التطوير، أي أنك تحتاج تنفيذ npm run build لتخريج مجلد dist والذي سوف يتم ربطه مع المشروع وليس ذاك الخاص بملفات التطوير.

Programmer Programmers · 19 ديسمبر 2023

بتاريخ 2 ساعة قال Adnane Kadri:

يفترض أن تقوم بأخذ نسخة المشروع المبنية وليس تلك الخاصة ببيئة التطوير

كيف يمكنني أخذ نسخة المشروع المبنية والجاهزة وتركيبها على Laravel10

بعد أن قمت ببنائها بواسطة npm run build

Adnane Kadri · 19 ديسمبر 2023

بتاريخ الآن قال Programmer Programmers:

كيف يمكنني أخذ نسخة المشروع المبنية والجاهزة وتركيبها على Laravel10

بعد أن قمت ببنائها بواسطة npm run build

الأمر بسيط،

قم بتضمين ملفات التنسيقات وملفات الجافاسكربت المبنية في ملف layout العام، وابدأ باستعمال المكونات الجاهزة من القالب بنسخها ولصقها.

Programmer Programmers · 19 ديسمبر 2023

بتاريخ 40 دقائق مضت قال Adnane Kadri:

قم بتضمين ملفات التنسيقات وملفات الجافاسكربت المبنية في ملف layout العام، وابدأ باستعمال المكونات الجاهزة من القالب بنسخها ولصقها.

هل تقصد مجلد public

انا الان انشأت مشروع لارافيل جديد لايحتوي على layout

Mustafa Suleiman · 19 ديسمبر 2023

بتاريخ 2 ساعة قال Programmer Programmers:

هل تقصد مجلد public

انا الان انشأت مشروع لارافيل جديد لايحتوي على layout

ليس مجلد public بل يوجد ملف باسم app.blade.php أو layout.blade.php أيًا كان الملف الرئيسي للمشروع لديك، وستجد بالضغط على مجلد resources ثم ستجد بداخله مجلد views والذي يحوي قوالب blade.

Programmer Programmers · 20 ديسمبر 2023

بتاريخ 19 ساعة قال Mustafa Suleiman:

ليس مجلد public بل يوجد ملف باسم app.blade.php أو layout.blade.php أيًا كان الملف الرئيسي للمشروع لديك، وستجد بالضغط على مجلد resources ثم ستجد بداخله مجلد views والذي يحوي قوالب blade.

فهمت أخي لكن المشكلة في ترتيب الملفات.

أنا الأن أنشأت مشروع لارافيل جديد لايحتوي إلا على ملف welcome.blade.php داخل الview

بتاريخ On 19‏/12‏/2023 at 15:18 قال Adnane Kadri:

يفترض أن تقوم بأخذ نسخة المشروع المبنية وليس تلك الخاصة ببيئة التطوير، أي أنك تحتاج تنفيذ npm run build لتخريج مجلد dist والذي سوف يتم ربطه مع المشروع وليس ذاك الخاص بملفات التطوير.

وقمت بتخريج مجلد dist

هل من الضروري تثبيت حزم Bootstrap أو فقط نسخ ملفات ال dist في المشروع وتعمل بشكل كامل

dist/
├── css/
│   └── style.css
├── fonts/
├── images/
├── 13a946ced0b5cf087e28.js
├── c6423fdef8c6547e6ed7.js
├── checkout.html
├── contact.html
├── index.html
├── main.js
└── payment.html

وبالمناسبة قمت بإدراج مجلدات وملفات dist في مجلد ال public والصفحات في ال view من دون تثبيت أي حزمة Bootstrap وأشتغلت الواجهات بشكل جيد.

هل هذه الخطوة صحيحة أم خطأ؟ مشكلتي في ترتيب مجلدات وملفات ال dist في المشروع وربطها.

أرجوا أنكم فهمتم المشكلة

تركيب ثيم Bootstrap5 على Laravel 10

السؤال

Programmer Programmers

8 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

Programmer Programmers

Adnane Kadri

Programmer Programmers

Adnane Kadri

Programmer Programmers

Mustafa Suleiman

Programmer Programmers

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية