# تحديث لوحة المظهر على Windows

هذا الدليل مخصص لمن لديه نسخة تعمل بالفعل من **Housa Studio** ويريد إضافة أدوات المظهر الجديدة. استخدم **حزمة تحديث المظهر**، ثم ادمج ملفاتها داخل مجلد مشروعك الحالي. سيستمر الموقع في استخدام قاعدة البيانات والصور وحسابات الدخول الموجودة لديك.

التحديث لا يحتاج إلى إنشاء قاعدة بيانات، أو حساب مدير جديد، أو تشغيل برنامج ترحيل. لا تُعد تشغيل `php bin/setup.php` أو `bin/import_template.py` عند تطبيقه.

## 1. حدد مجلد الموقع الحالي

افتح المجلد الذي تشغّل منه الموقع الآن. ستجد بداخله المجلدات `app` و`public` و`storage`، وملف `README.md`. هذا هو **مجلد المشروع** الذي ستنسخ إليه التحديث.

إذا كان اسم المجلد `housa-cms`، فلا تنشئ مجلدًا آخر بالاسم نفسه داخله. يجب أن تصل ملفات التحديث إلى المسارات الحالية، مثل `app/renderer.php` و`public/admin/`.

احتفظ بنفس إعدادات PHP ومسار تشغيل الموقع. إذا كنت تستخدم المتغير `CMS_STORAGE_PATH` لتحديد مكان آخر لقاعدة البيانات، احتفظ بقيمته وسجّل مكان ذلك المجلد أيضًا.

## 2. احفظ العمل وأوقف الخادم

احفظ أي تعديلات مفتوحة في لوحة التحكم، ثم أوقف تشغيل الموقع مؤقتًا قبل نسخ الملفات:

- إذا كنت تشغّل خادم PHP من نافذة الأوامر، اضغط `Ctrl+C` في النافذة التي يعمل فيها.
- إذا كنت تستخدم XAMPP، أوقف خدمة **Apache** من لوحة XAMPP.
- إذا كان الموقع على استضافة، استخدم طريقة إيقاف الخدمة أو وضع الصيانة الذي توفره الاستضافة، وتأكد من توقف الكتابة إلى قاعدة البيانات قبل أخذ النسخة الاحتياطية.

## 3. انسخ المشروع كاملًا للاحتياط

انسخ **مجلد المشروع كاملًا** إلى مكان منفصل قبل التحديث، مثل:

```text
C:\SiteBackups\housa-cms-before-appearance
```

ضع النسخة الاحتياطية خارج `public` وخارج مجلد الموقع الذي سيُحدَّث. لا تكتفِ بنسخ ملفات PHP أو قاعدة البيانات وحدها.

| ما يجب حفظه | المحتوى الذي يحميه |
| --- | --- |
| مجلد `storage/` كاملًا | قاعدة البيانات، حسابات الدخول، المحتوى، الإعدادات، الرسائل، والملفات الخاصة بالتطبيق. |
| مجلد `public/uploads/` كاملًا | الصور والملفات التي رفعتها من لوحة التحكم. |
| بقية ملفات المشروع | الكود والقوالب والأصول والإعدادات الموجودة قبل التحديث. |
| المجلد المحدد في `CMS_STORAGE_PATH`، إن كنت تستخدمه | قاعدة البيانات والملفات الخاصة عندما تكون محفوظة خارج المشروع. |

انسخ جميع ملفات مجلد التخزين كما هي، بما فيها ملفات SQLite الإضافية إن وُجدت. لا تحذف ملفًا منه لتجهيز التحديث.

**تصدير JSON من لوحة التحكم لا يغني عن هذه النسخة الكاملة:** فهو لا يتضمن حسابات المستخدمين أو الرسائل أو بيانات الصور المرفوعة نفسها.

## 4. فك ضغط حزمة التحديث وادمج الملفات

1. فك ضغط **حزمة تحديث المظهر** في مجلد مؤقت منفصل.
2. افتح المجلد المفكوك حتى ترى مسارات التحديث، مثل `app` و`public` و`docs`. الحزمة المخصصة للتحديث لا تحتوي على `storage/` أو `public/uploads/` أو قاعدة بيانات جاهزة.
3. انسخ محتويات مجلد التحديث إلى **مجلد مشروعك الحالي** الذي حددته في الخطوة الأولى.
4. وافق على **دمج المجلدات** واستبدال الملفات البرمجية المتطابقة عندما يطلب Windows ذلك.
5. اترك المجلدات والملفات الأخرى الموجودة في مشروعك في مكانها. لا تحذف مجلد `public` أو مجلد المشروع قبل النسخ.

تأكد بعد النسخ من أن `storage/` و`public/uploads/` ما زالا يحتويان على ملفاتك السابقة، وأنك لم تنشئ نسخة متداخلة مثل `housa-cms/housa-cms/`.

اترك إعداداتك المحلية، مثل ملفات إعداد PHP أو متغيرات البيئة أو إعدادات الاستضافة، كما كانت. إذا سبق أن عدلت ملفات PHP أو CSS يدويًا، قارن تلك التعديلات بملفات التحديث قبل استبدالها؛ تعديلات المحتوى التي أجريتها من لوحة التحكم محفوظة في قاعدة البيانات.

هذا التحديث يحافظ على معرّفات الحقول والأقسام الحالية. لا تحتاج إلى إعادة توليد القوالب أو استيراد المحتوى التجريبي.

## 5. شغّل الموقع بنفس الطريقة السابقة

أعد تشغيل الخادم من **مجلد المشروع الحالي** وبنفس الإعدادات التي كان يعمل بها. إذا كنت تستخدم خادم PHP المحلي، فالأمر المعتاد هو:

```bat
php -S 127.0.0.1:8000 -t public public/router.php
```

إذا كنت تستخدم XAMPP، أعد تشغيل **Apache** وافتح عنوان الموقع المعتاد. احتفظ بنفس إعداد جذر الموقع؛ يجب أن يظل `public/` هو المجلد المتاح للزوار.

افتح `/admin/` وسجّل الدخول **بنفس البريد الإلكتروني وكلمة المرور**. اضغط `Ctrl+F5` لتحديث ملفات الواجهة في المتصفح إذا ظهرت الواجهة القديمة.

إذا ظهرت شاشة إنشاء أول حساب بدلًا من تسجيل الدخول، **لا تنشئ حسابًا جديدًا**. أوقف الخادم وتحقق من أنك تشغّل المشروع الصحيح، وأن ملفات `storage/` ما زالت موجودة، وأن قيمة `CMS_STORAGE_PATH` لم تتغير إن كنت تستخدمها.

## 6. تحقق من النتيجة

- افتح صفحة سبق أن عدلتها وتأكد من بقاء محتواها.
- افتح مكتبة الوسائط وتأكد من ظهور صورك المرفوعة.
- افتح إعدادات المظهر **Appearance** وتأكد من ظهور أدوات التخصيص الجديدة.
- راجع الموقع على شاشة واسعة وعلى الهاتف بعد حفظ أي تغييرات في المظهر.

ستبدأ أدوات المظهر الجديدة بالقيم الافتراضية أو بالقيم الموجودة لديك؛ يمكنك تخصيصها من لوحة التحكم بعد التحديث. لا يلزم استعادة تصدير JSON أو إعادة رفع الصور لإكمال التحديث.

## استخدام أدوات المظهر الجديدة

افتح **Appearance** من لوحة التحكم. تعرض مساحة العمل قائمة بالأجزاء والأقسام، ومعاينة للموقع، ولوحة إعدادات للجزء المحدد. على الشاشات الصغيرة يمكنك التنقل بينها باستخدام **Structure** و**Preview** و**Style**.

المعاينة تعرض تعديلاتك أثناء العمل، لكنها لا تنشرها تلقائيًا. ابدأ باختيار نوع التعديل:

| الوضع | استخدامه | طريقة الحفظ |
| --- | --- | --- |
| **Global theme** | الهوية والمظهر المشترك بين صفحات الموقع. | **Save appearance** يطبق التغييرات العامة مباشرة على الموقع. |
| **Page designer** | تصميم صفحة محددة وترتيب أقسامها، مع إعدادات خاصة بها. | **Save draft** يحفظ مسودة خاصة؛ **Publish design** ينشر مسودة الصفحة. |

### ضبط الهوية والهيدر والفوتر على مستوى الموقع

داخل **Global theme** اختر الجزء المطلوب من القائمة:

- **Brand & logos:** اسم الموقع، الشعار الرئيسي، شعار الفوتر، وأيقونة المتصفح. استخدم **Choose image** لاختيار صورة من مكتبة الوسائط. عند ترك شعار الفوتر فارغًا، يُستخدم الشعار الرئيسي بدلًا منه.
- **Colors & typography:** لوحة الألوان العامة، نوع الخط، الحجم الأساسي للنص، استدارة الزوايا، واتجاه الكتابة. للعربية اختر **Right to left · العربية** من **Text direction**.
- **Header** و**Footer:** لون وخلفية كل جزء، ألوان النصوص والروابط، الخط والمسافات، وحجم الشعار. يمكنك مثلًا جعل الهيدر فاتحًا والفوتر داكنًا، مع حجم شعار مختلف لكل منهما.
- **Buttons** و**Cards** و**Form fields** و**Page layout:** المظهر المشترك للأزرار والبطاقات وحقول النماذج ومساحة الصفحة.

اختر صفحات مختلفة من **Preview page** لمراجعة النتيجة، ثم اضغط **Save appearance**. إذا كانت صفحة أو أحد أقسامها تحمل إعدادًا خاصًا، فسيظل ذلك الإعداد الخاص مقدمًا على القيمة العامة المقابلة له.

### تصميم صفحة أو قسم بصورة مستقلة

انتقل إلى **Page designer**، ثم اختر الصفحة من **Preview page**. اختر **Header** أو **Footer** لتغيير ذلك الجزء على هذه الصفحة فقط، أو اختر **Page canvas** لتعديل مساحة الصفحة العامة.

لتصميم قسم معين، اضغط اسمه في **Page structure** أو اضغط عليه داخل المعاينة. ستظهر إعداداته في لوحة التصميم. يمكنك ضبط الخلفية والألوان والخطوط والمحاذاة والمسافات والأبعاد والحدود والظل بحسب الجزء المختار.

في **Background style** يمكنك اختيار **Solid color** أو **Gradient** أو **Image**. عند استخدام صورة، تتوفر أدوات اختيار الصورة وموضعها وحجمها ولون الطبقة فوقها ودرجة شفافيتها. الصور والشعارات نفسها تظل ملفات مستقلة؛ تغيير لون النص أو الخلفية لا يغير الألوان المرسومة داخل ملف الصورة.

استخدم **Top padding** و**Bottom padding** للمسافة داخل القسم، و**Space after section** للمسافة التي تليه. تعديل المسافة الداخلية وحدها لا يغيّر بالضرورة الفراغ الموجود بين قسمين.

### نقل الهيرو والأقسام وإخفاؤها

اسحب القسم من قائمة **Page structure** إلى موضعه الجديد. يمكنك أيضًا استخدام زري **Move section up** و**Move section down** إذا كنت تفضل النقر أو لا يتوفر السحب على جهازك. يظهر الترتيب الجديد في المعاينة، ويمكنك نقل **Hero / page introduction** مثل بقية الأقسام.

زر **Hide section** يخفي القسم على الصفحة بكل أحجام الشاشات، ويظل اسمه ظاهرًا في القائمة لتتمكن من إعادته بزر **Show section**. اختيار الهيدر أو الفوتر أو مساحة الصفحة من أزرار المناطق مخصص لتصميمها؛ تغيير ترتيب المحتوى يتم من قائمة الأقسام.

**في الصفحة الرئيسية الرابعة فقط:** القسمان **Main hero** و**Linked hero thumbnails** يعملان معًا ضمن عارض الصور نفسه. احتفظ بهما متجاورين، مع الصور المصغرة بعد الهيرو، عند تغيير الترتيب.

### إعدادات الكمبيوتر والتابلت والهاتف

استخدم أزرار الأجهزة أعلى المعاينة لتحديد حجم الشاشة الذي تصممه:

| الاختيار | طريقة تطبيق الإعدادات |
| --- | --- |
| **Desktop / base** | القيم الأساسية التي تستخدمها جميع الأحجام ما لم تخصص قيمة أصغر. |
| **Tablet** | تخصيص للشاشات بعرض 991 بكسل أو أقل؛ الحقول الفارغة ترث القيم الأساسية. |
| **Mobile** | تخصيص للشاشات بعرض 600 بكسل أو أقل؛ الحقول الفارغة ترث قيمة التابلت، ثم القيمة الأساسية. |

مثلًا: اضبط حجم عنوان القسم في **Desktop / base**، ثم انتقل إلى **Mobile** واكتب حجمًا أصغر. ستحتفظ الشاشات الواسعة بالحجم الأساسي. إعدادات اسم الموقع وملفات الشعارات والألوان العامة في **Brand & logos** و**Colors & typography** مشتركة بين جميع الأحجام؛ استخدم إعدادات الأجزاء لتخصيصها حسب الشاشة.

لإخفاء قسم على الهاتف فقط، اتركه ظاهرًا في قائمة الأقسام، واختر **Mobile** ثم **Hidden at this size** من إعدادات ظهوره. الإخفاء بزر العين في قائمة الأقسام يخفيه على جميع الأحجام.

### الوراثة وإعادة الضبط ونسخ التصميم

- **Inherit** أو أيقونة الرجوع بجوار الحقل يزيل القيمة الخاصة بذلك الحقل ويعيد القيمة الموروثة. القيمة `0` تعني صفرًا فعليًا، ولا تعني ترك الحقل فارغًا.
- **Reset overrides at this size** يعيد إعدادات حجم الشاشة المحدد للجزء الحالي إلى الوراثة.
- **Reset this part to inherited styles** يزيل تخصيصات تصميم الجزء الحالي في جميع أحجام الشاشات. لا يحذف القسم أو نصوصه.
- **Copy all styles for this part** ينسخ تصميم الجزء، بما فيه تخصيصات التابلت والهاتف. حدد جزءًا آخر ثم استخدم **Paste copied styles** لتطبيقه عليه. اللصق يستبدل إعدادات تصميم الجزء المستهدف؛ النصوص ومحتوى البطاقات لا يتم نسخهما بهذه الأداة.

إعادة إعداد خاص إلى الوراثة تعني استخدام الإعداد العام أو إعداد القالب المناسب؛ إذا كان هناك تخصيص عام للموقع فسيظل فعالًا.

### حفظ التغييرات ونشرها

في **Page designer**، اضغط **Save draft** للاحتفاظ بتصميم الصفحة دون إظهاره للزوار. بعد المراجعة اضغط **Publish design**. هذا الزر يحفظ وينشر **مسودة الصفحة كاملة، بما فيها المحتوى المحفوظ سابقًا**، وليس إعدادات الألوان والمسافات وحدها؛ راجع أي تعديلات محتوى غير منشورة قبل استخدامه.

حفظ المظهر العام وحفظ تصميم الصفحة عمليتان منفصلتان. **Save appearance** لا ينشر مسودات الصفحات، و**Publish design** لا يحفظ تعديلات عامة لم تحفظها بعد. عند تعديل الاثنين، احفظ المظهر العام وراجع الصفحة ثم انشر مسودتها عندما تكون جاهزة.

## الرجوع إلى النسخة السابقة عند الحاجة

للرجوع مباشرة بعد التحديث، أوقف الخادم، ثم غيّر اسم مجلد المشروع المحدّث للاحتفاظ به مؤقتًا. انسخ **مجلد النسخة الاحتياطية الكامل** الذي أخذته في الخطوة الثالثة إلى المسار الأصلي للمشروع. إذا كان التخزين خارج المشروع، احتفظ بنسخته الحالية في مكان منفصل ثم أعد نسخته الاحتياطية أيضًا مع الحفاظ على إعداد `CMS_STORAGE_PATH`. أعد تشغيل الموقع بنفس الطريقة السابقة.

الاستعادة تعيد الموقع إلى وقت أخذ النسخة الاحتياطية؛ أي تعديلات أُجريت بعد ذلك الوقت لن تكون ضمنها. احتفظ بالنسخة الاحتياطية حتى تتأكد من عمل الموقع ولوحة التحكم كما تتوقع.