قالب مدیریتی پریمیوم اکسلیت

اکسلیت

دریافت پشتیبانی

از اینکه axelit را از راست‌چین خریداری کردید بسیار متشکریم.

نسخه: 1.0
نویسنده: la-themes
بومی شده توسط: Amir-A-M

تاریخ ایجاد: 26 فوریه 2025
به‌روزرسانی: 26 فوریه 2025
تاریخ انتشار نسخه بومی: 14 مهر 1404

اگر سوالی دارید که فراتر از محدوده‌ی این فایل راهنما است، لطفاً از طریق تیکت راستچین با ما در میان بگذارید.

نصب

برای تنظیم قالب سایت خود مراحل زیر را دنبال کنید:

بسته دانلود شده را از حالت فشرده خارج کرده و پوشه /axelit را باز کنید تا همه فایل‌های قالب را پیدا کنید. برای استفاده از آن در وب‌سایت خود، باید این فایل‌ها را با استفاده از FTP یا localhost در سرور میزبانی وب خود آپلود کنید.
ساختار پوشه زیر نشان داده شده است و باید در دایرکتوری ریشه وب‌سایت یا localhost شما آپلود شود:
- axelit/template - شامل تمام صفحات ارجاع شده
  - axelit/assets/css - فایل‌های Stylesheet
  - axelit/assets/images - فایل‌های تصاویر
  - axelit/assets/js - فایل‌های جاوا اسکریپت
  - axelit/assets/sass - فایل‌های Sass
  - axelit/assets/vendor - تمام کتابخانه‌های خارجی.
- axelit/template/index.html - صفحه اصلی
شما باید تمام یا برخی از فایل‌های HTML را طبق نیاز خود آپلود کنید.
حالا می‌توانید محتوای خود را اضافه کنید!
اگر می‌خواهید قالبی را از طریق وب‌پک کامپایل یا اجرا کنید، ابتدا از npm i و سپس npm run watch استفاده کنید.

برای استفاده از npm نیاز به نصب NodeJs دارید!

لطفا تا حدال امکان فقط استفاده تئوری داشته باشید و برای جلوگیری از تداخل، کد های مورد نیاز خود را از قسمت کیت‌های رابط کاربری قالب اصلی کپی و یا استخراج کنید.

وب‌پک

وب‌پک ابزاری قدرتمند برای بسته‌بندی و مدیریت دارایی‌ها (assets) در برنامه‌های وب است. پیکربندی وب‌پک برای پنل مدیریت شما باعث می‌شود جاوااسکریپت، CSS و سایر دارایی‌ها به‌صورت کارآمد بسته‌بندی شوند، عملکرد بهینه گردد و روندهای توسعه بهبود یابند.

کانفیگ وب‌پک در پروژه موجود می‌باشد و الزامی به انجام این مراحل نیست!

راه‌اندازی:

01. نصب

مطمئن شوید که وب‌پک به صورت سراسری یا محلی در پروژه شما نصب شده است.

                              
                                  npm install webpack webpack-cli --save-dev

02. ساختار پروژه:

ساختار پروژه پنل مدیریت خود را طوری سازماندهی کنید که با قابلیت‌های بسته‌بندی ماژول webpack هماهنگ باشد.

پیکربندی:

01. `webpack.config.js` :

یک فایل پیکربندی webpack در ریشه پروژه خود ایجاد کنید.

  
    const path = require('path');
    module.exports = {
        entry: './src/admin/index.js',
        output: {
            filename: 'admin.bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
                // در صورت نیاز، قوانین بیشتری برای انواع دارایی‌های دیگر اضافه کنید
            ],
        },
    };

02. نقطه ورود:

نقطه ورود اصلی برای webpack را مشخص کنید. (entry) .

03. خروجی:

تعریف کنید که webpack باید فایل‌های بسته‌بندی شده را در کجا خروجی دهد. (output) .

04. لودرها:

بارگذارها را برای پردازش انواع مختلف فایل پیکربندی کنید. (مثلاً جاوا اسکریپت با Babel، CSS با style-loader و css-loader). .

ساختار پوشه HTML

axelit
assets

responsive.css
style.css

fonts

Estedad
calendar
flag-icons-master
fontawesome
tabler
weather

icons
images
js

apexchart
Calender
emoji-picker
map
photoswipe
simpale-datatable
swiper-slider
add_product.js
advance_table.js
alert.js
analytics_dashboard.js
animation.js
apex_chart.js
area_charts.js
avtar.js
bar.js
blank.js
blog.js
boxplot.js
bubble.js
calendar.js
candlestick_charts.js
cart.js
chart.js
chat.js
cheatsheet.js
checkout.js
clipboard.js
column.js
coming_soon.js
count_down.js
countup.js
customizer.js
custom-select.js
data_table.js
date_picker.js
...
wow-custom.js

scss

app
responsive.scss
style.scss

vendor

template

index.html

webpack.config.js
package-lock.json
package.json
postcss.config.js

ساختار HTML

axelit از یک ساختار کدنویسی ساده و آسان برای سفارشی‌سازی پیروی می‌کند.

                     
     <!DOCTYPE html>
     <html lang="fa" dir="rtl">
     <header>
     <!-- css files links -->
     </header>

     <body class="rtl">
     <div class="app-wrapper">

     <!-- Menu Navigation starts -->
     <nav>
        ...
     </nav>
     <!-- Menu Navigation end -->

     <div class="app-content">
       <!-- Header Section starts -->
         <header class="header-main">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
                 ...
               </div>
             </div>
           </div>
         </header>
       <!-- Header Section end -->

       <!-- Body main section starts -->

         <main>
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
                    ...
               </div>
             </div>
           </div>
         </main>
       <!-- Body main section ends -->

       <!-- Footer Section starts-->
         <footer>
           <div class="container-fluid">
             <div class="row">
                 <div class="col-12">
                      ...
                 </div>
             </div>
           </div>
         </footer>
       <!-- Footer Section ends-->
       </div>
     </div>

     <!-- scripts files links -->

     </body>
     </html>

SCSS

ما فایل‌های SASS .scss را به قالب اضافه کرده‌ایم. اگر نحوه استفاده از SASS را می‌دانید، می‌توانید فایل‌های sass را تغییر دهید و css را نیز کامپایل کنید. می‌توانید فایل sass را اینجا پیدا کنید - axelit/assets/sass/app

اگر می‌خواهید فایل scss جدیدی اضافه کنید، می‌توانید فایل _stylesheet.scss را در پوشه app قرار دهید و فایل را در style.scss وارد کنید و به راحتی از آن استفاده کنید.

sass/app/_variables.scss را باز کنید و مقادیر را مطابق نیاز خود ویرایش کنید. اگر به تنظیمات پیشرفته‌تری نیاز دارید، می‌توانید فایل‌های مربوطه را که در همان پوشه شاخه‌بندی شده‌اند، ویرایش کنید. کاملاً به صلاحدید شماست که فایل‌های .scss مورد نیاز خود را برای به حداقل رساندن مقدار CSS و فقط شامل کردن سبک‌های بلوک‌های مورد نیاز خود، اضافه کنید. این می‌تواند در فایل style.scss شما تنظیم شود.

متغیرهای رنگ

تمام متغیرهای SCSS مربوط به رنگ را می‌توان در axelit/asset/scss/app/_variables.scss

یافت.


    .default{
   --primary: 79,201,218;
    --secondary: 139, 132, 118;
    }

    .gold{
     --primary: 192,127,0;
    --secondary: 76,61,61;
    }

سفارشی‌سازی قالب

ما یک فایل CSS سفارشی را در پوشه‌ی css قرار داده‌ایم تا بتوانید سفارشی‌سازی‌های خود را برای سبک‌های جدید یا جایگزینی سبک‌های پیش‌فرض قالب سند <head> بعد از css/style.css پیونددهی، بهتر مدیریت کنید. همچنین مطمئن شوید که این آخرین فایل CSS پیوند شده در سند head است تا سبک‌های CSS سفارشی شما به درستی بازنویسی شوند.


    <head>
    <!--font-awesome-css-->
    <link rel="stylesheet" href="assets/vendor/fontawesome/css/all.css">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">

    <!-- tabler icons-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/tabler-icons/tabler-icons.css">

    <!--flag Icon css-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/flag-icons-master/flag-icon.css">

    <!-- Bootstrap css-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/bootstrap.min.css">

    <!-- simplebar css-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/simplebar/simplebar.css">

    <!-- App css-->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Responsive css-->
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.101.css">
    </head>

تنظیمات لوگو

بخش لوگو را می‌توانید در قسمت هدر پیدا کنید - <header>


    <!-- Logo -->
    <div class="app-logo">
    <a class="logo d-inline-block" href="index.html" title="iDocs">
     <img src="assets/images/logo/1.png" alt="Logo"/>
    </a>
    </div>
    <!-- Logo End -->

Provided Features

بوت‌استرپ
چارچوب
W3C
اعتبارسنجی
SASS
درجه حرفه ای
Apex Chart
نمودارها
Chart js
نمودارها
Webpack
باندلر ماژول
فونت استعداد
فونت‌ها
فونت‌های گوگل
فونت‌ها
Google Map
نقشه‌ها
نقشه نشان
نقشه‌ها
کیت‌های UI
کامپوننت‌ها
برنامه‌ها
برنامه‌ها
NPM
مدیر بسته
Fullcalendar
تقویم شمسی
انتخابگر تاریخ
انتخابگر شمسی

طرح‌بندی

مستندات و مثال‌هایی برای هدر، نوار ناوبری، نوار کناری، پاورقی

طرح‌بندی Ltr

برای فعال کردن طرح‌بندی Ltr در وب‌سایت خود، کافیست کلاس ltr را به تگ body اعمال کنید و ویژگی dir="ltr" را به تگ HTML خود اضافه کنید.

  
  <html lang="en" dir="ltr">
    <body class="ltr">
        ...
    </body>
  </html>

طرح‌بندی Rtl

برای فعال کردن طرح‌بندی راست‌چین در وب‌سایت خود، کافیست کلاس rtl را به تگ body اعمال کنید و ویژگی dir="rtl" را به تگ HTML خود اضافه کنید.

  
  <html lang="fa" dir="rtl">
    <body class="rtl">
        ...
    </body>
    </html>

طرح جعبه‌ای

برای فعال کردن طرح جعبه‌ای در وب‌سایت خود، کافیست کلاس rtl box-layout یا ltr box-layout را به تگ body اعمال کنید.

  
  <html lang="fa" dir="rtl">
    <body class="rtl box-layout">
        ...
    </body>
  </html>

سربرگ

مستندات و مثال‌هایی برای سربرگ


    <!-- Header Section starts -->

    <header class="header-main">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-6 d-flex align-items-center header-left">
                    <span class="header-toggle me-2">
                      <i class="ti ti-category"> </i>
                    </span>

                    <div class="header-searchbar">
                      ...
                    </div>
                  </div>
                  <div class="col-6 d-flex align-items-center justify-content-end header-right">
                    <ul class="d-flex align-items-center">

                      <li class="header-language">
                      ...
                       </li>

                      <li class="header-apps">
                      ...
                      </li>

                      <li class="header-cart d-none d-sm-block">
                      ...
                      </li>

                      <li class="header-dark head-icon">
                       ...
                      </li>

                      <li class="header-notification">
                       ...
                      </li>

                      <li class="header-profile">
                        ...
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Header Section ends -->

نوار کناری

مستندات و مثال‌هایی برای نوار کناری

نوار کناری عمودی

نوار کناری عمودی برای اطلاعات بیشتر به تصویر و کد زیر مراجعه کنید.

  
  <nav class="vertical-sidebar">
      ...
  </nav>

نوار کناری تیره

رنگ پس‌زمینه تیره و متن روشن برای نوار کناری تیره. برای اطلاعات بیشتر به تصویر و کد زیر مراجعه کنید.

  
  <nav class="dark-sidebar">
    ...
  </nav>

نوار کناری افقی

نوار کناری افقی برای اطلاعات بیشتر به تصویر و کد زیر مراجعه کنید.

  
  <nav class="horizontal-sidebar">
  ...
  </nav>

پاورقی

لیست انواع مختلف پاصفحه و توضیحات آن در زیر برای مرجع شما ارائه شده است:

  
  <!-- Footer Section starts-->
  <footer>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-9 col-12">
          <ul class="footer-text">
            <li>
              <p class="mb-0">کپی‌رایت ۲۰۲۵ © قالب اکسلیت. تمامی حقوق محفوظ است 💖</p>
            </li>
            <li><a href="#">ورژن 1.1.0</a></li>
          </ul>
        </div>
        <div class="col-md-3">
          <ul class="footer-text text-end">
            <li>
              <a href="https://www.rtl-theme.com/dashboard/#/ticket">
                <i class="ti ti-headset"></i>
                نیاز به کمک دارید؟
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- Footer Section ends-->

برنامه ها

لیست توضیحات برنامه ها در زیر برای ارجاع شما ارائه شده است:

تقویم شمسی

پیش‌نمایش رسمی

هنگام استفاده از جاوا اسکریپت، حتماً تگ‌های style و script زیر را اضافه کنید..

  
  <!-- Full calendar -->
  <link
    href="../assets/vendor/fullcalendar/jalali/main.5.11.min.css"
    rel="stylesheet"
    type="text/css"
  />

  <!-- fullcalendar js -->
  <script src="../assets/vendor/fullcalendar/jalali/fullcalendar-shamsi.min.js"></script>

  <!-- fullcalendar locales - FA  -->
  <script src="../assets/vendor/fullcalendar/locales/fa.js"></script>
  <!-- calendar js -->
  <script src="../assets/js/calendar.js"></script>

کلاس کمکی

ما چند کلاس کمکی واقعاً مفید برای شما ایجاد کرده‌ایم.

Id	Name	Position	Office	Status	Salary	Contact
1	Tiger Nixon	Architect	Edinburgh	active	$320,800	+1 (025) 466-7506
2	Garrett	Accountant	Tokyo	pending	$170,750	+1 (790) 476-9505
3	Aston Cox	Technical	Francisco	pending	$86,000	+1 (227) 375-6641
4	Cedric Kelly	Developer	Edinburgh	active	$433,060	+1 (213) 619-7749
5	Airi Satu	Accountant	Tokyo	pending	$162,700	+1 (152) 465-2290
6	Williamson x	Integration	New York	active	$372,000	+1 (185) 793-6446

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	$3674.55	$320,800
Garrett Winters	Accountant	Tokyo	63	2011-07-25	$170,750
Aston Cox	Junior Technical Author	San Francisco	66	2009-01-12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012-03-29	$433,060

اکسلیت

نصب

وب‌پک

راه‌اندازی:

01. نصب

02. ساختار پروژه:

پیکربندی:

01. webpack.config.js :

02. نقطه ورود:

03. خروجی:

04. لودرها:

ساختار پوشه HTML

ساختار HTML

SCSS

متغیرهای رنگ

سفارشی‌سازی قالب

تنظیمات لوگو

Provided Features

بوت‌استرپ

W3C

SASS

Apex Chart

Chart js

Webpack

فونت استعداد

فونت‌های گوگل

Google Map

نقشه نشان

کیت‌های UI

برنامه‌ها

NPM

Fullcalendar

انتخابگر تاریخ

طرح‌بندی

طرح‌بندی Ltr

طرح‌بندی Rtl

طرح جعبه‌ای

سربرگ

نوار کناری

نوار کناری عمودی

نوار کناری تیره

نوار کناری افقی

پاورقی

برنامه ها

تقویم شمسی

کلاس کمکی

عنوان ها

اندازه فونت

وزن فونت

رنگ متن

رنگ پس زمینه متن

ترازبندی و تزئین متن

کیت‌های رابط کاربری

دکمه

نشان‌ها

آکاردئون‌ها

Accordion Item #1

Accordion Item #2

Accordion Item #3

هشدار

نوار پیشرفت

رابط کاربری پیشرفته

Sweetalert

Tour

Slick slider

Tooltip

جداول

جدول پایه

Data Table

فرم‌ها

انتخابگر تاریخ شمسی

اعتبارسنجی فرم

فرم عمودی پیش‌فرض

نقشه‌ها

نقشه نشان

کد جایگذاری (Embed)

نقشه گوگل

نقشه Leaflet

نمودار

ChartJs

01. `webpack.config.js` :