تثبيت وتكوين Statamic في بيئة ServBay

ما هو Statamic؟

Statamic هو نظام إدارة محتوى متقدم (CMS) يعتمد على إطار عمل Laravel، ويستخدم لبناء أنواع مختلفة من المواقع الإلكترونية. يُعرف Statamic بمرونته وميزاته القوية، حيث يستخدم نظام الملفات لتخزين المحتوى، لكنه يمكنه أيضًا استخدام قاعدة البيانات.

خطوات تثبيت Statamic

في هذه المقالة، سنشرح كيفية تثبيت وتكوين Statamic في بيئة ServBay باستخدام Composer.

الخطوة 1: إنشاء دليل المشروع

أولاً، قم بإنشاء دليل مشروع جديد في دليل www في ServBay:

bash

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

الخطوة 2: إنشاء مشروع Statamic باستخدام Composer

ServBay يأتي مع Composer، لذلك يمكننا استخدام Composer مباشرةً لإنشاء مشروع Statamic:

bash

composer create-project statamic/statamic .

الخطوة 3: تكوين خادم الويب

إضافة موقع جديد
افتح ServBay، وانقر على علامة التبويب "المضيف"، وأضف موقعاً جديداً:
- الاسم: My Statamic Site
- اسم النطاق: servbay-statamic.local
- نوع الموقع: PHP
- إصدار PHP: اختر الإصدار المناسب من PHP
- دليل الجذر للموقع: /Applications/ServBay/www/servbay-statamic-app/public
حفظ التكوين
احفظ التكوين وأعد تشغيل ServBay.

الخطوة 4: تكوين Statamic

تعديل ملف التكوين البيئي
في دليل المشروع الرئيسي، انسخ ملف .env.example إلى .env:
bash
```
cp .env.example .env
```
1
توليد مفتاح التطبيق
قم بتشغيل الأمر التالي لتوليد مفتاح تطبيق جديد:
bash
```
php artisan key:generate
```
1

الخطوة 5: تشغيل Statamic

زيارة Statamic
افتح المتصفح وزر https://servbay-statamic.local، سترى صفحة الترحيب الخاصة بـ Statamic.
زيارة لوحة التحكم
افتح المتصفح وزر https://servbay-statamic.local/cp، سترى صفحة تسجيل الدخول إلى لوحة التحكم الخاصة بـ Statamic.
إنشاء حساب مدير
اتبع إرشادات الصفحة لإنشاء حساب مدير، أدخل اسم المستخدم وكلمة المرور وعنوان البريد الإلكتروني، ثم انقر على "إنشاء حساب".

الخطوة 6: تثبيت الإضافات والقوالب

تثبيت الإضافات
سجل الدخول إلى لوحة التحكم في Statamic، انقر على أيقونة "+"، ثم انقر على "الإضافات"، وابحث عن الإضافات التي تحتاجها وقم بتثبيتها.
تثبيت القوالب
انقر على أيقونة "+"، ثم انقر على "القوالب"، واختر القالب الذي يعجبك وقم بتثبيته.

استخدام Statamic لبناء الموقع

الآن بعد أن قمت بتثبيت وتكوين Statamic بنجاح في بيئة ServBay، يمكنك البدء في استخدامه لبناء موقعك. فيما يلي بعض العمليات الشائعة:

إنشاء المحتوى والمجموعات

إنشاء مجموعة
في لوحة التحكم في Statamic، انقر على "المحتوى" -> "المجموعات"، أنشئ مجموعة جديدة، أدخل اسم المجموعة والإعدادات الأخرى، ثم انقر على "حفظ".
إنشاء محتوى
انقر على "المحتوى" -> "المجموعات"، اختر المجموعة التي أنشأتها، وانقر على "جديد"، أدخل عنوان المحتوى والمحتوى، ثم انقر على "حفظ".

تكوين قائمة التنقل

إنشاء قائمة
في لوحة التحكم في Statamic، انقر على "المحتوى" -> "التنقل"، أنشئ قائمة جديدة، أدخل اسم القائمة والإعدادات الأخرى، ثم انقر على "حفظ".
إضافة عناصر التنقل
أضف المجموعات والمحتوى إلى القائمة، ثم انقر على "حفظ".

تخصيص القوالب والأنماط

تعديل القوالب

في دليل resources/views، قم بتعديل ملفات قوالب Blade لتخصيص تخطيط الموقع وعرض المحتوى. على سبيل المثال، تعديل ملف default.blade.php:

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

إضافة الأنماط
في دليل resources/css، قم بإنشاء ملف CSS واستدعاؤه في ملف القالب. على سبيل المثال، إنشاء ملف app.css:
css
```
/* resources/css/app.css */
body {
    font-family: Arial, sans-serif;
}
```
1
2
3
4
استدعاء ملف CSS في قالب الملف:
html
```

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```
1
2
إضافة السكريبتات
في دليل resources/js، قم بإنشاء ملف JavaScript واستدعاؤه في ملف القالب. على سبيل المثال، إنشاء ملف app.js:
javascript
```
// resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});
```
1
2
3
4
استدعاء ملف JavaScript في قالب الملف:
html
```

<script src="{{ mix('js/app.js') }}"></script>
```
1
2
تجميع الموارد
قم بتشغيل الأوامر التالية لتجميع ملفات CSS وJavaScript:
bash
```
npm install
npm run dev
```
1
2

من خلال هذه الخطوات، تكون قد قمت بنجاح بتثبيت وتكوين Statamic في بيئة ServBay، وبدأت في استخدامه لبناء موقعك. مرونة وقوة ميزات Statamic تجعله خيارًا مثاليًا لبناء أنواع مختلفة من المواقع.

تثبيت وتكوين Statamic في بيئة ServBay ​

ما هو Statamic؟ ​

خطوات تثبيت Statamic ​

الخطوة 1: إنشاء دليل المشروع ​

الخطوة 2: إنشاء مشروع Statamic باستخدام Composer ​

الخطوة 3: تكوين خادم الويب ​

الخطوة 4: تكوين Statamic ​

الخطوة 5: تشغيل Statamic ​

الخطوة 6: تثبيت الإضافات والقوالب ​

استخدام Statamic لبناء الموقع ​

إنشاء المحتوى والمجموعات ​

تكوين قائمة التنقل ​

تخصيص القوالب والأنماط ​