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

**نام قالب:** Portifolismo
**نام فارسی:** پورتیفولیسم
**نام نویسنده:** [سجاد اسدی](https://sajjadasadi.ir)
**زمان انتشار:** 1405/06/15
**نسخه:** 1.5
**نوع:** قالب HTML / CSS / JavaScript
**وضعیت:** آماده انتشار

---

## فهرست مطالب

1. [ساختار داده‌ها](#1-ساختار-دادهها)
2. [شخصی‌سازی رنگ‌ها](#2-شخصیسازی-رنگها)
3. [حالت شب و روز](#3-حالت-شب-و-روز)
4. [سیستم کامنت‌های تو در تو](#4-سیستم-کامنتهای-تو-در-تو)
5. [مدیریت تصاویر](#5-مدیریت-تصاویر)
6. [بهینه‌سازی برای موبایل](#6-بهینهسازی-برای-موبایل)
7. [آپدیت‌ها و پشتیبانی](#7-آپدیتها-و-پشتیبانی)

---

# 1. ساختار داده‌ها

تمام داده‌های پویا و محتوای اصلی قالب در فایل `script.js` و داخل متغیر `DATA` مدیریت می‌شوند.

این ساختار به شما اجازه می‌دهد بدون نیاز به تغییر در ساختار HTML، اطلاعاتی مانند موارد زیر را به‌سادگی ویرایش یا موارد جدیدی به آن‌ها اضافه کنید:

* پروژه‌ها
* مقالات
* کامنت‌ها
* اطلاعات اولیه دمو

### نمونه ویرایش پروژه

```javascript
const DATA = {
  projects: [
    {
      id: "p1",
      title: "پروژه نمونه",
      tag: "WordPress",
      desc: "توضیحات پروژه..."
    },

    // پروژه جدید خود را در این قسمت اضافه کنید
    {
      id: "p2",
      title: "نام پروژه جدید",
      tag: "HTML",
      desc: "توضیحات پروژه جدید..."
    }
  ]
};
```

> **نکته:** هنگام اضافه کردن اطلاعات جدید، ساختار آبجکت‌ها را مطابق نمونه‌های موجود حفظ کنید تا عملکرد JavaScript دچار مشکل نشود.

---

# 2. شخصی‌سازی رنگ‌ها

رنگ‌های اصلی قالب در فایل `style.css` و داخل بخش `:root` تعریف شده‌اند.

با تغییر متغیرهای CSS می‌توانید ظاهر کلی قالب را بدون نیاز به ویرایش بخش‌های مختلف فایل CSS شخصی‌سازی کنید.

### رنگ اصلی قالب

```css
:root {
  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.15);
}
```

### متغیرهای مهم

| متغیر            | کاربرد                       |
| ---------------- | ---------------------------- |
| `--primary`      | رنگ اصلی قالب                |
| `--primary-glow` | افکت درخشش و شفافیت رنگ اصلی |

برای تغییر رنگ اصلی، کافی است مقدار `--primary` را تغییر دهید.

مثلاً:

```css
--primary: #7c3aed;
```

---

# 3. حالت شب و روز

قالب از سیستم **Dark Mode / Light Mode** پشتیبانی می‌کند.

این قابلیت با استفاده از موارد زیر پیاده‌سازی شده است:

* متغیرهای CSS
* JavaScript
* `localStorage`

### امکانات سیستم تغییر تم

* دکمه تغییر حالت در هدر قرار دارد.
* کاربر می‌تواند بین حالت روشن و تاریک جابه‌جا شود.
* انتخاب کاربر در `localStorage` ذخیره می‌شود.
* پس از مراجعه مجدد، آخرین انتخاب کاربر حفظ خواهد شد.

### شخصی‌سازی حالت تاریک

برای اعمال استایل‌های اختصاصی در حالت تاریک، می‌توانید از سلکتور زیر استفاده کنید:

```css
[data-theme="dark"] {
  /* استایل‌های مخصوص حالت تاریک */
}
```

---

# 4. سیستم کامنت‌های تو در تو

سیستم نظرات قالب به‌صورت **درختی (Nested Comments)** طراحی شده است.

کاربران می‌توانند به نظرات موجود پاسخ دهند و یک ساختار سلسله‌مراتبی برای گفتگو ایجاد کنند.

### ویژگی‌ها

* امکان ثبت کامنت جدید
* امکان پاسخ به کامنت‌ها
* نمایش ساختار درختی نظرات
* پشتیبانی از چند سطح تو در تو
* محدودیت عمق کامنت‌ها برای حفظ خوانایی در موبایل

حداکثر عمق کامنت‌های تو در تو روی **۵ سطح** تنظیم شده است.

این محدودیت برای جلوگیری از شلوغ شدن رابط کاربری و حفظ تجربه کاربری مناسب در نمایشگرهای کوچک در نظر گرفته شده است.

### افزودن کامنت جدید

برای ثبت کامنت جدید، کافی است فرم موجود در بالای لیست نظرات را تکمیل کنید.

---

# 5. مدیریت تصاویر

تصاویر استفاده‌شده در دموهای قالب از لینک‌های مستقیم و مطلق **Picsum Photos** دریافت می‌شوند.

به همین دلیل، در حالت عادی حتی هنگام باز کردن فایل‌های HTML به‌صورت مستقیم و بدون استفاده از سرور محلی نیز تصاویر قابل بارگذاری هستند.

### تغییر تصاویر

برای جایگزین کردن تصاویر، کافی است مقدار `src` مربوط به تصویر موردنظر را در فایل `index.html` تغییر دهید.

نمونه:

```html
<img
  src="https://example.com/image.jpg"
  alt="عنوان تصویر"
>
```

> **توصیه:** برای نسخه نهایی محصول، استفاده از تصاویر اختصاصی یا تصاویر دارای مجوز مناسب را بررسی کنید.

---

# 6. بهینه‌سازی برای موبایل

قالب به‌صورت **Responsive** طراحی شده و برای نمایش صحیح در اندازه‌های مختلف صفحه‌نمایش بهینه شده است.

استایل‌های مربوط به نمایشگرهای کوچک در فایل `style.css` و داخل Media Queryها قرار دارند.

### پشتیبانی از

* دسکتاپ
* لپ‌تاپ
* تبلت
* موبایل

ساختار صفحات به‌گونه‌ای طراحی شده است که در نمایشگرهای کوچک:

* اسکرول افقی غیرضروری ایجاد نشود.
* متن‌ها دچار فشردگی و به‌هم‌ریختگی نشوند.
* عناصر رابط کاربری از محدوده صفحه خارج نشوند.
* چیدمان بخش‌های مختلف به‌صورت واکنش‌گرا تغییر کند.

---

# 7. آپدیت‌ها و پشتیبانی

تغییرات هر نسخه در فایل زیر ثبت می‌شود:

```text
changelog.txt
```

در صورت انتشار نسخه جدید، اطلاعات مربوط به تغییرات، اصلاحات و قابلیت‌های جدید در این فایل درج خواهد شد.

برای دریافت نسخه‌های جدید یا دریافت پشتیبانی، می‌توانید با توسعه‌دهنده قالب در ارتباط باشید.

---