התאמה אישית של העיצוב

כרגע מוצג התיעוד של Apigee Edge.
כניסה למסמכי התיעוד של Apigee X. מידע

עיצוב הוא אוסף של קבצים שמגדיר את המראה והסגנון של אתר. פורטל השירותים למפתחים מוגדר בהתחלה עם עיצוב ברירת מחדל, שאותו אפשר להתאים אישית. כך תוכלו לבחור את ההעדפות שלכם מבחינת העיצוב והסגנון של הפורטל. באופן ספציפי, אפשר לשנות את הצבע של קישורים, רקעים, טקסט ורכיבי עיצוב אחרים. אפשר לשנות גם את הודעת הפתיחה שמופיעה בדף הראשי של הפורטל למפתחים.

אפשר להתאים אישית את העיצוב דרך ממשק המשתמש של הפורטל למפתחים, או על ידי כתיבת קוד בקובץ עיצוב בהתאמה אישית כדי לשנות את קובץ העיצוב שמוגדר כברירת מחדל.

תוכלו לבחור מבין כמה עיצובים, בהתאם לגרסה של פורטל המפתחים:

עיצוב	תיאור
עיצוב עם יכולת תגובה של Apigee	על סמך Bootstrap 3, עיצוב ברירת המחדל לגרסאות מאוחרות יותר של הפורטל. העיצוב הזה תומך במכשירים ברוחב של 768 פיקסלים עד 1,400 פיקסלים. כל התכונות של Bootstrap 3 זמינות בנושא הזה. הערה: כדי להשתמש בעיצוב הרספונסיביות של Apigee, צריך לוודא שהעיצוב Bootstrap 7.x-3.0 מופעל.
עיצוב של Apigee DevConnect	עיצוב ברירת המחדל בפורטל הקודם לעיצוב הרספונסיבית של Apigee. ניתן לשדרג פורטלים קיימים לעיצוב החדש עם יכולת התגובה Apigee, אבל תחילה יש לוודא שכל החסימות, התבניות והתכנים האחרים תואמים ל-Bootstrap 3, ושהעיצוב של Bootstrap 7.x-3.0 מופעל.
עיצוב בסיסי ל-Apigee	עיצוב הורה לעיצוב Apigee DevConnect ולא מיועד לשימוש בפני עצמו.

הגדרת עיצוב ברירת המחדל

אם הפורטל שלך עדיין משתמש בעיצוב הישן של Apigee DevConnect, יכול להיות שתוצג לך אזהרה בטופס:

"Apigee DevConnect theme" is out of date 

תוכלו להשתמש בתהליך הבא כדי להגדיר את עיצוב ברירת המחדל של הפורטל. תמיד מומלץ לבדוק עיצוב חדש במערכת ללא ייצור לפני פריסת העיצוב בסביבת הייצור.

כדי להגדיר את עיצוב ברירת המחדל:

1. אתם יכולים להתחבר לפורטל שלכם כמשתמשים עם הרשאות אדמין או יצירת תוכן.
2. בוחרים באפשרות מראה בתפריט הניהול של Drupal. תופיע רשימת העיצובים.
3. לעיצוב שרוצים להשתמש בו כברירת המחדל, בוחרים באפשרות הגדרה כברירת מחדל.
   כדי להשתמש בעיצוב הרספונסיביות של Apigee, צריך לוודא שהעיצוב Bootstrap 7.x-3.0 מופעל גם בדף הזה.
4. שומרים את התצורה.

התאמה אישית של העיצוב עם יכולת התגובה ל-Apigee

בקטע הזה מוסבר איך להגדיר את העיצוב הרספונסיביות של Apigee, כולל:

• התאמה אישית של טפסים מודאליים
• התאמה אישית של הגדרות כלליות

כדי להתאים אישית את התמיכה בטופסי העזר:

בפורטל נעשה שימוש במודול ה-Sandbox של Drupal Bootstrap Modal Forms כדי להציג טפסים מסוג Drupal כחלון ראווה. הטפסים להתחברות ולרישום פועלים כברירת מחדל כמודלים. אפשר להשבית את הפונקציונליות הזו כדי שהטפסים האלה יופיעו כדפים בודדים.

1. צריך להתחבר לפורטל למפתחים בתור משתמש עם הרשאות אדמין.
2. בתפריט הניהול של Drupal, בוחרים באפשרות Configuration > User Interface > Bootstrap Modal (תצורה > ממשק משתמש > Bootstrap Modal).
3. הפעלה או השבתה של תמיכה מודולרית בטפסים.
4. בוחרים באפשרות Save configuration (שמירת ההגדרות האישיות).

כדי להתאים אישית את ההגדרות הכלליות של העיצוב הרספונסיביות של Apigee:

1. אתם יכולים להתחבר לפורטל שלכם כמשתמשים עם הרשאות אדמין או יצירת תוכן.
2. בוחרים באפשרות 'מראה' בתפריט הניהול של Drupal. תופיע רשימת העיצובים.
3. באזור Apigee רספונסיבי (עיצוב ברירת מחדל) בדף, בוחרים באפשרות Settings (הגדרות) (בלי ללחוץ על הלחצן Settings (הגדרות) בחלק העליון של הדף).
4. דף ההגדרות של העיצוב הרספונסיביות ל-Apigee יופיע.
5. בטבלה הבאה מתוארים האזורים בדף שאפשר להשתמש בהם כדי להגדיר את העיצוב. אם תשנה אחת מההגדרות האלה, בחר באפשרות 'שמור תצורה'.
   
   

   אזור	קטע	תיאור
   הגדרות של Botstrap
   	רכיבים	אפשר לשלוט בתצוגה של נתיבי ניווט, במיקום של התפריט הראשי (שנקרא סרגל הניווט בהגדרות) ובתצוגה של מאגרי נתונים אזוריים: נתיבי ניווט: הסתרה/הצגה של נתיב ניווט, הפעלה/השבתה של הקישור לדף הבית שבתוך נתיב הניווט. סרגל הניווט: אפשר לשנות את המיקום של סרגל הניווט (בתפריט הראשי) למיקומים קבועים/סטטיים/רגילים, כדי שהפריסה תהיה דינמית יותר. בארות אזוריות: אפשר להוסיף סיווג טוב לכל אזור באתר כדי להוסיף רקע כהה יותר לאזור.
   	JavaScript	שלוט בתצוגה של עוגנים, חלונות קופצים ותיאורי כלים: עוגן: תיקון מיקומי עוגן והפעלת גלילה חלקה. חלונות קופצים: חלונות קופצים מוסיפים שכבות-על קטנות של תוכן לכל רכיב. הפעלה/השבתה של חלונות קופצים והגדרת אופן השימוש בחלונות קופצים. טיפים: להגדרת אופן השימוש בהסברים קצרים. אפשר לאלץ הצגת הסבר קצר בצד ימין, שמאל, למעלה או למטה של כל רכיב טופס, ולהגדיר אפשרויות תצוגה אחרות.
   	מתקדמים	המדיניות קובעת איך הפורטל משתמש ב-BootstrapCDN כדי לעדכן את קובצי העיצוב של Bootstrap. אפשר להשבית את ההסתמכות של הפורטל ב-BootstrapCDN, אבל לאחר מכן תצטרכו לספק הטמעה משלכם של framework של Bootstrap.
   	הגדרות DevConnect	מגדירים את הודעת הפתיחה, את צבעי ברירת המחדל ואת גודל הלוגו שיופיע בתפריט הראשי.
   שינוי ההגדרות הגלובליות
   	החלפת התצוגה	הפעלה והשבתה של התצוגה של אזורים שונים בפורטל.
   	הגדרות של תמונת לוגו	מציין את התמונה שמוצגת בתפריט הראשי.
   	הגדרות של סמל קיצור הדרך	מציינת את התמונה שתוצג בסרגל הכתובות של הדפדפן או בסימניות בפורטל.

התאמה אישית של העיצוב של Apigee DevConnect

העיצוב של Apigee DevConnect הוא עיצוב הפורטל שמוגדר כברירת מחדל לגרסאות ישנות של הפורטל, ואפשר לשדרג אותו לעיצוב החדש Apigee רספונסיבי. עם זאת, לפני ביצוע השדרוג צריך לוודא שכל הבלוקים, התבניות והתכנים האחרים תואמים ל-Bootstrap 3.

כדי להתאים אישית את ההגדרות הכלליות של העיצוב ב-Apigee DevConnect:

1. אתם יכולים להתחבר לפורטל שלכם כמשתמשים עם הרשאות אדמין או יצירת תוכן.
2. בתפריט הניהול של Drupal, בוחרים באפשרות מראה > העיצוב של Apigee DevConnect > הגדרות. יוצגו ההגדרות הראשוניות של העיצוב. הגדרות הצבע מצוינות כערכים הקסדצימליים.

   

3. משנים את ההגדרות בהתאם להעדפות.
   לדוגמה, אתם יכולים להוסיף או לשנות את הודעת הפתיחה או לשנות את צבע הרקע של הכותרת. צבע הרקע של הכותרת מוגדר בהתחלה כצבע כתום (#FF4300). אפשר לשנות אותו לצבע אחר, כמו כחול (#0000FF).
4. כשמסיימים לשנות את ההגדרות, לוחצים על Save.

התאמה אישית של העיצוב על ידי יצירת עיצוב משנה

כל הקבצים והנכסים שמגדירים את העיצובים שמוגדרים כברירת מחדל ונשלחים עם הפורטל נמצאים בספרייה profiles/apigee/themes בספריית ההתקנה של הפורטל. הספרייה הזו נמצאת בכתובת /var/www/html/profiles/apigee/themes אם התקנתם את הפורטל במיקום ברירת המחדל.

כדי לערוך עיצוב במטרה לשנות את המראה והסגנון של האתר, אל תשנו ישירות את קובצי העיצוב בקטע profiles/apigee/themes. אם תעשו זאת, השינויים יוחלפו בפעם הבאה שתשדרגו את הפורטל.

במקום זאת, אפשר ליצור תת-עיצוב של העיצוב שרוצים לשנות. לשם כך, מעתיקים את קובצי העיצוב שמוגדרים כברירת מחדל לספרייה /sites/all/themes. הוראות לגבי תתי-נושאים זמינות במסמכי התיעוד של Drupal בכתובת https://www.drupal.org/node/225125.

1. מעתיקים את התיקייה profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit התקינה לתיקייה profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit.
2. משנים את השם של התיקייה apigee_responsive_starterkit ל-YOU_THEME_NAME.
3. משנים את השם של הקובץ apigee_responsive_starterkit.info ל-YOU_THEME_NAME.info.
4. משנים את השם של css/apigee_responsive_starterkit.css ל- css/YOUR_THEME_NAME.css.
5. משנים את השם של js/apigee_responsive_starterkit.js ל-YOU_THEME_NAME.js.
6. עורכים את קובץ Your_THEME_NAME.info ומחליפים את השורות הבאות:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   הסקריפטים[] = js/apigee_responsive_starterkit.js
   
   באמצעות:
   
   style[all][] = css/YOURcs_THE_js
   ME_ THEjs
   MES/YOURcs_THE_js
   
7. צריך לשנות את שם העיצוב בקובץ Our_THEME_NAME.info מ-Apigee responsive Starter Kit לשם העיצוב שלך.
8. כדי להוסיף צילום מסך חדש לעיצוב, צריך להחליף את הקובץ screenshot.png הקיים.
9. כדי להוסיף לוגו חדש לעיצוב, צריך להחליף את הקובץ logo.png שיוצא.
10. כדי להוסיף סמל אתר חדש לעיצוב, צריך להחליף את הקובץ favicon.ico הקיים.