142 lines
5.9 KiB
Markdown
142 lines
5.9 KiB
Markdown
# ساختار پروژه
|
||
|
||
این ریپوزیتوری شامل ساختار و کدهای فرانت‌اند قالب وردپرس پروژه است که با Vite، HTML، CSS و JavaScript توسعه داده می‌شود.
|
||
|
||
## درباره پروژه
|
||
|
||
این ریپوزیتوری بخش فرانت‌اند قالب وردپرس پروژه اصلی است. اینجا تمام طراحی‌ها، کامپوننت‌ها و assetها با استفاده از Vite توسعه داده می‌شود.
|
||
|
||
## پیش‌نیازها
|
||
|
||
- Node.js 18+
|
||
- npm 10+
|
||
- Git
|
||
- Visual Studio Code
|
||
- Prettier(extention)
|
||
|
||
## نصب و اجرا
|
||
|
||
npm run dev
|
||
|
||
```bash
|
||
# کلون کردن پروژه
|
||
git clone <git url>
|
||
|
||
# ورود به پوشه
|
||
cd inova-frontend
|
||
|
||
# نصب وابستگی‌ها
|
||
npm install
|
||
|
||
# اجرای محیط توسعه
|
||
npm run dev
|
||
```
|
||
|
||
## ساختار فایل ها
|
||
|
||
- پوشه assets:
|
||
|
||
فایل آیکون‌ها در این بخش قرار داده شده است
|
||
تمامی ایکون های استفاده شده در این پروژه باید در این فایل تعریف شوند و برای صفحات مختلف فایل آیکون مجزا نخواهیم داشت.
|
||
|
||
- ساختار آیکون هاicons.svg:
|
||
|
||
آیکون ها بصورت SVG Symbol ایجاد و استفاده می شوند
|
||
تمام آیکون‌ها icons.svg در فایل
|
||
src/assets/icons/icons.svg
|
||
نگهداری می‌شوند
|
||
و در html با دستور زیراستفاده می شوند
|
||
```html
|
||
<svg aria-hidden="true">
|
||
<use href="./src/assets/icons/svgicon.svg#<svgID>"/>
|
||
</svg>
|
||
```
|
||
|
||
- پوشه components:
|
||
|
||
ساختارهای تکرارشونده در فولدر components قرار داده شده است .
|
||
و سکشن و یا بخش هایی که در صفحات مختلف پروژه تکرار شده اند در این بخش تعریف شده و برای جلوگیری از تکرار کد در صفحات مختلف فراخوانی شده و استفاده می شوند ،مثل پیجینیشن و اسلایدر و ....
|
||
|
||
این بخش از قبل توسط تیم توسعه در این فایل ایجاد شده است
|
||
|
||
- پوشه core:
|
||
|
||
تمام متغیرها، رنگ‌ها، فونت‌ها، فاصله‌ها و استایل‌های پایه پروژه در این فایل قرار دارند
|
||
این فایل با توجه به طراحی هر پروژه (Figma) سفارشی می‌شود.
|
||
این بخش برای کل پروژه تعریف شده و استفاده می شود و برای هر صفحه نباید بطور جدا تعریف شود
|
||
|
||
- پوشه layouts:
|
||
|
||
در این بخش لیوت هایی که در پروژه داریم قرار داده می شود، مثل فوتر و هدر و...
|
||
|
||
- پوشه pages :
|
||
|
||
در این بخش کدهای صفحات مختلف به تفکیک توسعه داده می شود.
|
||
هر صفحه یک پوشه ی جدا دارد که شامل فایل html - css- js و عکس های مربوط به هر صفحه می باشد
|
||
نام هر پوشه، نام همان صفحه می باشد و نام فایل های html - css - js هم باید هم نام با صفحه ی در حال توسعه باشد
|
||
|
||
برای مثال فایل های صفحه homepage به شرح زیر می باشد
|
||
|
||
```
|
||
-pages
|
||
--homepage
|
||
---assets
|
||
----css
|
||
homepage.css
|
||
----images
|
||
----js
|
||
homepage.js
|
||
----videos
|
||
homepage.html
|
||
```
|
||
|
||
|
||
|
||
- ساختار css :
|
||
|
||
کدهای CSS در دو فایل مجزا ایجاد می شود و کدهای مربوط به ریسپانسیو در فایل responsive.css ایجاد می شود
|
||
|
||
- پوشه utils:
|
||
|
||
در این بخش فانکشن هایی که در کل پروژه استفاده می شود قرار داده شده تا از تکرار کد جلوگیری شود
|
||
مثل فانکشن ismobile برای تشخیص اندازه ی موبایل و اعمال موردی خاص در آن اندازه
|
||
|
||
- فرمت تصاویر :
|
||
|
||
تصاویر با فرمت webp در پروژه استفاده شود
|
||
تصاویر هر صفحه باید در پوشه ی مربوط به همان صفحه قرار داده شود
|
||
برای مثال در صفحه ی homepage تصاویر باید در ادرس زیر قرار بگیرند
|
||
src/pages/homepage/assets/images/image1.webp
|
||
|
||
و آیکون ها بصورت svg طبق ساختاری که بالاتر توضیح داده شد اعمال شوند
|
||
|
||
|
||
- قوانین نامگذاری کلاس ها :
|
||
برای جلوگیری از تداخل نام کلاس ها در پروژه موارد زیر را رعایت کنید:
|
||
1- برای نامگذاری همه ی کلاس های یک سکشن ، نام آن سکشن را در نامگذاری داشته باشید
|
||
```html
|
||
hero-section__title
|
||
```
|
||
2- از نام گذاری های جنرال بپرهیزید
|
||
|
||
btn- txt - title و....
|
||
|
||
|
||
- محدودیت ها و قوانین:
|
||
-
|
||
1- از cdn ها و یا کتابخانه ها در پیاده سازی استفاده نشود و همه ی موارد در local
|
||
پیاده سازی شود
|
||
|
||
2- کد باید بصورتی توسعه داده شود که دقیقا مشابه فایل (فیگا) باشد
|
||
|
||
3- چک لیست نهایی:
|
||
|
||
بعد از اتمام کار قبل از تحویل نهایی ،
|
||
از همه ی جوانب اعم از رفتار سکشن ها، اندازه ی فونت ها، رنگ ها ، فاصله ها و...
|
||
فایل را بطور کامل بررسی کنید و در صورت مغایرت با فیگمااطلاحات لازم انجام شود
|
||
|
||
4- برای این پروژه یک ریپازیتوری در گیت تعریف شده است
|
||
در هنگام push کردن کد بر روی گیت حتما چک شود که بر روی برنچی که در اختیارتان قرار گرفته push انجام شود
|
||
برای مشاهده ی برنچ فعال روی سیستم خود در ترمینال دستور زیر را وارد کنید
|
||
|
||
git branch --show-current |