فصل چهارم: خلق یک شاهکار بصری: طراحی تم سفارشی پارسی برای Nextcloud¶

هدف فصل: رنگ و بوی پارسی به فضای ابری¶

تصور کنید Nextcloud شما با رنگ‌های جذاب، فونت‌های روان پارسی، و چیدمانی راست‌به‌چپ، به یک اثر هنری تبدیل شود که نه‌تنها کاربردی، بلکه چشم‌نواز و کاملاً بومی است! در این فصل، با ساخت یک تم سفارشی برای Nextcloud ۳۲.۰.۰، پروژه‌تان را به سطحی جدید می‌برید. از افزودن فونت Vazir و پشتیبانی RTL تا هماهنگی کامل با اپلیکیشن‌های Calendar و Talk، این تم به کاربران حس آشنایی و افتخار پارسی می‌دهد. آماده‌اید که فضای ابری‌تان را به یک تجربه بصری بی‌نظیر تبدیل کنید؟

---

۴.۱ ایجاد تم: پایه‌گذاری یک هویت پارسی¶

تم‌ها در Nextcloud راهی برای تغییر ظاهر و حس رابط کاربری هستند. ما تمی به نام Persian Cloud می‌سازیم که با فرهنگ پارسی هم‌راستا باشد.

۴.۱.۱ ساخت ساختار تم¶

1. ایجاد پوشه تم:

   mkdir -p themes/persian-theme
   cp -r themes/example/* themes/persian-theme/

1. تعریف مشخصات تم: فایل: themes/persian-theme/theme.json

   {
       "name": "Persian Cloud",
       "slogan": "فضای ابری پارسی: جایی برای آینده دیجیتال شما",
       "color": "#2a5db0",
       "color-text": "#ffffff",
       "color-element": "#1a4a8c",
       "color-element-bright": "#3b6fc9",
       "logo": "/themes/persian-theme/core/img/logo.svg",
       "logoMime": "image/svg+xml",
       "background": "/themes/persian-theme/core/img/background.jpg",
       "backgroundMime": "image/jpeg"
   }

1. فعال‌سازی تم: فایل: server/config/config.php

   <?php
   $CONFIG = [
       'theme' => 'persian-theme',
       'default_language' => 'fa',
       'default_locale' => 'fa_IR',
   ];

چک سریع:

• بررسی کنید که پوشه themes/persian-theme شامل زیرپوشه‌های core/img و core/css باشد.
• لوگو و پس‌زمینه را با ابزارهایی مثل Inkscape یا Figma طراحی کنید.

---

۴.۲ SCSS و RTL: جادوی استایل پارسی¶

برای ایجاد ظاهری یکپارچه و راست‌به‌چپ، از SCSS و RTL استفاده می‌کنیم.

۴.۲.۱ تعریف استایل‌های پایه¶

فایل: themes/persian-theme/core/css/server.scss

$primary-color: #2a5db0;
$secondary-color: #f4f4f4;
$text-color: #ffffff;

@font-face {
    font-family: 'Vazir';
    src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'Vazir', 'Segoe UI', sans-serif;
    background-color: $secondary-color;
    color: #333;
}

[dir="rtl"] {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.header {
    background-color: $primary-color;
    color: $text-color;
    padding: 1rem;
}

button, .btn {
    background-color: $primary-color;
    color: $text-color;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

۴.۲.۲ کامپایل SCSS و تولید RTL¶

cd server
npm install -g sass rtlcss
sass themes/persian-theme/core/css/server.scss themes/persian-theme/core/css/server.css
rtlcss themes/persian-theme/core/css/server.css themes/persian-theme/core/css/server.rtl.css

۴.۲.۳ افزودن لوگو و پس‌زمینه¶

1. لوگوی SVG را در themes/persian-theme/core/img/logo.svg ذخیره کنید.
2. تصویر پس‌زمینه را در themes/persian-theme/core/img/background.jpg قرار دهید.

---

۴.۳ ادغام با اپلیکیشن‌ها: هماهنگی کامل¶

۴.۳.۱ سفارشی‌سازی اپلیکیشن Calendar¶

فایل: themes/persian-theme/apps/calendar/css/custom.css

.fc-daygrid-day-number {
    font-family: 'Vazir', sans-serif;
    color: #2a5db0;
    font-weight: bold;
}

.fc-button {
    background-color: #2a5db0;
    color: #ffffff;
    border-radius: 4px;
}

[dir="rtl"] .fc {
    direction: rtl;
    text-align: right;
}

.fc .fc-daygrid-day-top {
    justify-content: flex-end;
}

۴.۳.۲ سفارشی‌سازی اپلیکیشن Talk¶

فایل: themes/persian-theme/apps/spreed/css/custom.css

.message {
    font-family: 'Vazir', sans-serif;
    direction: rtl;
}

.message-bubble {
    background-color: #e6f0fa;
    border-radius: 8px;
    padding: 0.5rem;
}

[dir="rtl"] .message-timestamp {
    text-align: left;
}

---

۴.۴ تست: لحظه نمایش شاهکار!¶

1. فعال‌سازی تم: اطمینان حاصل کنید که 'theme' => 'persian-theme' در config/config.php تنظیم شده است.

2. تست در مرورگر:

   curl http://localhost:8080

• به http://localhost:8080 بروید.

• بررسی کنید که لوگو، پس‌زمینه، فونت Vazir، و RTL درست هستند.

• تست اپلیکیشن‌ها:

• در Calendar، اعداد روزها و دکمه‌ها را بررسی کنید.

• در Talk، چت‌ها و زمان‌ها را چک کنید.

• تست پاسخ‌گویی:

• صفحه را در موبایل و دسکتاپ تست کنید.
• از ابزارهای توسعه مرورگر (F12) استفاده کنید.

تست لبه:

• تغییر زبان به انگلیسی و بازگشت به فارسی.
• بررسی تم تیره با prefers-color-scheme.

---

نکات حرفه‌ای¶

• دسترسی‌پذیری: با WAVE یا Lighthouse کنتراست و خوانایی را بررسی کنید.
• تم تیره:

  @media (prefers-color-scheme: dark) {
      body {
          background-color: #1a1a1a;
          color: #e0e0e0;
      }
  }

• مستندسازی: در README.fa.md نحوه نصب تم را توضیح دهید.
• بهینه‌سازی: تصاویر را با imagemin فشرده کنید.