سفارشی کردن تم

شما در حال مشاهده اسناد Apigee Edge هستید.
به مستندات Apigee X بروید .
اطلاعات

تم مجموعه ای از فایل ها است که ظاهر و احساس یک سایت را مشخص می کند. پورتال Developer Services در ابتدا با یک موضوع پیش فرض تعریف شده است که می توانید آن را سفارشی کنید. این به شما امکان می دهد تنظیمات برگزیده خود را برای ظاهر و احساس پورتال خود انتخاب کنید. به طور دقیق تر، می توانید رنگ پیوندها، پس زمینه، متن و سایر عناصر تم را تغییر دهید. همچنین می توانید پیام خوش آمدگویی را که در صفحه اول پورتال توسعه دهنده شما ظاهر می شود تغییر دهید.

می‌توانید طرح زمینه را از طریق رابط کاربری پورتال توسعه‌دهنده سفارشی کنید، یا با نوشتن کد در یک فایل تم سفارشی، فایل تم پیش‌فرض را لغو کنید.

بسته به نسخه پورتال توسعه دهنده خود، چندین تم خواهید داشت که می توانید از بین آنها انتخاب کنید:

تم توضیحات

تم پاسخگو Apigee

بر اساس Bootstrap 3 ، تم پیش‌فرض برای نسخه‌های بعدی پورتال. این تم از دستگاه هایی با عرض 768 پیکسل تا 1400 پیکسل پشتیبانی می کند. تمام ویژگی های Bootstrap 3 در این موضوع موجود است.

توجه : برای استفاده از تم پاسخگوی Apigee، مطمئن شوید که تم Bootstrap 7.x-3.0 فعال است.

تم Apigee DevConnect

تم پورتال پیش‌فرض قبل از تم پاسخگوی Apigee.

پورتال های موجود را می توان به تم جدید Apigee Responsive ارتقا داد، اما ابتدا باید اطمینان حاصل شود که همه بلوک ها، قالب ها و سایر محتواها با Bootstrap 3 سازگار هستند و تم Bootstrap 7.x-3.0 فعال است.

تم پایه Apigee

یک تم والد برای تم Apigee DevConnect و قرار نیست به تنهایی استفاده شود.

تنظیم تم پیش فرض

اگر پورتال شما همچنان از طرح زمینه قدیمی Apigee DevConnect استفاده می‌کند، ممکن است هشداری به این شکل ببینید:

"Apigee DevConnect theme" is out of date 

می توانید از روش زیر برای تنظیم تم پیش فرض برای پورتال استفاده کنید. شما همیشه باید یک تم جدید را ابتدا روی یک سیستم غیر تولیدی قبل از استقرار موضوع در تولید آزمایش کنید.

برای تنظیم تم پیش فرض:

  1. به عنوان یک کاربر با امتیازات مدیریت یا ایجاد محتوا وارد پورتال خود شوید.
  2. در منوی مدیریت دروپال، Appearance را انتخاب کنید. لیست تم های فعال ظاهر می شود.
  3. برای موضوعی که می‌خواهید به عنوان پیش‌فرض استفاده کنید، تنظیم پیش‌فرض را انتخاب کنید.
    برای استفاده از تم پاسخگوی Apigee، مطمئن شوید که تم Bootstrap 7.x-3.0 در آن صفحه نیز فعال باشد.
  4. پیکربندی را ذخیره کنید.

سفارشی کردن تم پاسخگو Apigee

این بخش نحوه پیکربندی تم پاسخگوی Apigee را شرح می دهد، از جمله:

  • سفارشی سازی فرم های مدال
  • سفارشی کردن تنظیمات عمومی

برای سفارشی کردن پشتیبانی فرم مدال:

این پورتال از ماژول جعبه سندباد فرم های Bootstrap Modal دروپال برای نمایش فرم های دروپال به عنوان مدال استفاده می کند. فرم های ورود و ثبت نام به طور پیش فرض به عنوان مدال عمل می کنند. می‌توانید این عملکرد را غیرفعال کنید تا آن فرم‌ها به‌عنوان صفحات جداگانه ظاهر شوند.

  1. به عنوان یک کاربر با امتیازات مدیریت وارد پورتال توسعه دهنده شوید.
  2. Configuration > User Interface > Bootstrap Modal forms را در منوی مدیریت دروپال انتخاب کنید.
  3. فعال یا غیرفعال کردن پشتیبانی مودال برای فرم ها.
  4. Save configuration را انتخاب کنید.

برای سفارشی کردن تنظیمات کلی موضوع Apigee Responsive:

  1. به عنوان یک کاربر با امتیازات مدیریت یا ایجاد محتوا وارد پورتال خود شوید.
  2. در منوی مدیریت دروپال، Appearance را انتخاب کنید. لیست تم های فعال ظاهر می شود.
  3. در قسمت Apigee Responsive (موضوع پیش فرض) صفحه، تنظیمات را انتخاب کنید (دکمه تنظیمات را در بالای صفحه انتخاب نکنید).
  4. صفحه تنظیمات برای تم Apigee Responsive ظاهر می شود.
  5. جدول زیر مناطقی را در آن صفحه که می توانید برای پیکربندی موضوع استفاده کنید، توضیح می دهد. اگر هر یک از این تنظیمات را تغییر دادید، Save configuration را انتخاب کنید.

    منطقه بخش توضیحات

    تنظیمات بوت استرپ

    اجزاء

    نمایش پودرهای سوخاری، موقعیت منوی اصلی (که در تنظیمات به نام نوار ناوبری نامیده می شود) و نمایش چاه های منطقه را کنترل کنید:

    • Breadcrumbs : مخفی کردن/نمایش پودر سوخاری، روشن/خاموش کردن لینک Home در داخل پودر سوخاری.
    • نوار نوار : موقعیت نوار نوار (منوی اصلی) را به موقعیت‌های ثابت/ایستا/عادی تغییر دهید تا طرح‌بندی پویاتر شود.
    • چاه‌های منطقه : یک کلاس چاه را به هر منطقه در سایت اضافه کنید تا پس‌زمینه تیره‌تری به منطقه اضافه کنید.

    جاوا اسکریپت

    نمایش لنگرها، پاپاورها و راهنمای ابزار را کنترل کنید:

    • لنگرها : موقعیت های لنگر را ثابت کنید و پیمایش صاف را فعال کنید.
    • Popovers : Popover ها پوشش های کوچکی از محتوا را به هر عنصر اضافه می کنند. پاپاورها را فعال/غیرفعال کنید و نحوه استفاده از پاپاورها را پیکربندی کنید.
    • راهنمای ابزار : نحوه استفاده از راهنمای ابزار را پیکربندی کنید. می‌توانید هر نکته ابزار را مجبور کنید در سمت راست، چپ، بالا یا پایین هر عنصر فرم نمایش داده شود و سایر گزینه‌های نمایش را تنظیم کنید.

    پیشرفته

    نحوه استفاده پورتال از BootstrapCDN برای به‌روزرسانی فایل‌های تم Bootstrap را کنترل می‌کند. شما می توانید اتکای پورتال به BootstrapCDN را غیرفعال کنید، اما پس از آن باید پیاده سازی خود را از چارچوب Bootstrap ارائه دهید.

    تنظیمات DevConnect

    پیام خوشامدگویی، رنگ‌های پیش‌فرض و اندازه لوگوی ظاهر شده در منوی اصلی را تنظیم کنید.

    لغو تنظیمات جهانی

    نمایشگر را تغییر دهید

    نمایش نواحی مختلف پورتال را فعال و غیرفعال کنید.

    تنظیمات تصویر لوگو

    تصویر نمایش داده شده در منوی اصلی را مشخص می کند.

    تنظیمات آیکون میانبر

    تصویر نمایش داده شده در نوار آدرس مرورگر یا نشانک در پورتال را مشخص می کند.

سفارشی کردن تم Apigee DevConnect

تم Apigee DevConnect تم پورتال پیش‌فرض برای نسخه‌های قدیمی‌تر پورتال است و می‌توان آن را به تم جدید Apigee Responsive ارتقا داد. با این حال، ابتدا باید اطمینان حاصل کنید که همه بلوک‌ها، قالب‌ها و سایر محتواها با Bootstrap 3 سازگار هستند قبل از انجام ارتقا.

برای سفارشی کردن تنظیمات کلی تم Apigee DevConnect :

  1. به عنوان یک کاربر با امتیازات مدیریت یا ایجاد محتوا وارد پورتال خود شوید.
  2. Appearance > Apigee DevConnect theme > Settings را در منوی مدیریت دروپال انتخاب کنید. این تنظیمات اولیه تم را نمایش می دهد. تنظیمات رنگ به عنوان مقادیر هگزادسیمال مشخص می شود.

  3. تنظیمات را مطابق با اولویت خود تغییر دهید.
    به عنوان مثال، پیام خوش آمد گویی را اضافه یا تغییر دهید یا رنگ پس زمینه هدر را تغییر دهید. رنگ پس‌زمینه هدر ابتدا روی چیزی نزدیک به نارنجی تنظیم می‌شود (FF4300#). می توانید آن را به رنگ دیگری مانند آبی (#0000FF) تغییر دهید.
  4. وقتی تغییر تنظیمات را تمام کردید، روی ذخیره کلیک کنید.

سفارشی کردن یک تم با ایجاد یک موضوع فرعی

همه فایل‌ها و دارایی‌هایی که مضامین پیش‌فرض ارسال شده با پورتال را تعریف می‌کنند، در فهرست profiles/apigee/themes زیر فهرست نصب پورتال قرار دارند. اگر پورتال را در مکان پیش فرض نصب کرده باشید، این دایرکتوری در /var/www/html/profiles/apigee/themes قرار دارد.

برای ویرایش یک تم برای تغییر ظاهر و احساس سایت، فایل‌های تم را مستقیماً تحت پروفایل‌ها/apigee/themes تغییر ندهید. اگر این کار را انجام دهید، دفعه بعد که پورتال را ارتقا دهید، تغییرات شما بازنویسی خواهد شد.

در عوض، یک تم فرعی از تم ایجاد کنید که می‌خواهید با کپی کردن فایل‌های تم پیش‌فرض در فهرست /sites/all/themes، آن را تغییر دهید. برای دستورالعمل‌های مربوط به موضوعات فرعی، به مستندات دروپال در https://www.drupal.org/node/225125 مراجعه کنید.

اسناد دروپال مشخص شده در بالا دارای اطلاعات دقیقی در مورد ایجاد یک تم فرعی است، اما مراحل کلی برای ایجاد یک موضوع فرعی تم پاسخگو Apigee در زیر ذکر شده است:
  1. پوشه profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit را در پوشه /sites/all/themes کپی کنید.
  2. نام پوشه apigee_responsive_starterkit را به YOUR_THEME_NAME تغییر دهید.
  3. نام فایل apigee_responsive_starterk it.info را به YOUR_THEME_NAME.info تغییر دهید.
  4. نام css/apigee_responsive_starterkit.css را به css/YOUR_THEME_NAME.css تغییر دهید.
  5. js/apigee_responsive_starterkit.js را به YOUR_THEME_NAME.js تغییر نام دهید.
  6. فایل YOUR_THEME_NAME.info را ویرایش کنید و خطوط زیر را جایگزین کنید:

    شیوه نامه[همه][] = css/apigee_responsive_starterkit.css
    اسکریپت ها[] = js/apigee_responsive_starterkit.js


    با:

    شیوه نامه[همه][] = css/YOUR_THEME_NAME.css
    اسکریپت ها[] = js/YOUR_THEME_NAME.js
  7. نام طرح زمینه را در فایل YOUR_THEME_NAME.info از کیت شروع پاسخگوی Apigee به نام تم خود تغییر دهید.
  8. اگر می خواهید یک اسکرین شات جدید برای طرح زمینه خود اضافه کنید، فایل screenshot.png موجود را جایگزین کنید.
  9. اگر می خواهید یک لوگوی جدید به طرح زمینه خود اضافه کنید، فایل logo.png خروجی را جایگزین کنید.
  10. اگر می خواهید یک فاویکون جدید به تم خود اضافه کنید، فایل favicon.ico موجود را جایگزین کنید.