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

מוצג המסמך של Apigee Edge.
עוברים אל מסמכי תיעוד של Apigee X. מידע

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

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

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

עיצוב	תיאור
עיצוב רספונסיבי של Apigee	על סמך Bootstrap 3, עיצוב ברירת המחדל של בגרסאות מאוחרות יותר של הפורטל. העיצוב הזה תומך במכשירים עם רוחב מ-768 פיקסלים עד 1400 פיקסלים. כל התכונות של Bootstrap 3 זמינות בעיצוב הזה. הערה: כדי להשתמש בעיצוב רספונסיבי של Apigee, יש לוודא שה-אתחול העיצוב 7.x-3.0 מופעל.
עיצוב Apigee DevConnect	עיצוב ברירת המחדל של הפורטל הקודם לעיצוב הרספונסיביות של Apigee. אפשר לשדרג פורטלים קיימים לעיצוב החדש והרספונסיבי של Apigee, אבל קודם צריך לוודא שכל הבלוקים, התבניות ותכנים אחרים תואמים ל-Butstrap 3, וכן שהעיצוב אתחול 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, כולל:

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

1. מעתיקים את התיקייה profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit אל /sites/all/themes .
2. משנים את השם של התיקייה apigee_responsive_starterkit לYour_THEME_NAME.
3. משנים את השם של קובץ apigee_responsive_starterkit.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. ערוך את הקובץ שלך_THEME_NAME.info והחלפת את השורות הבאות:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   סקריפטים[] = js/apigee_ responsive_starterkit.js
   
   עם:
   
   stylesheets[all][] = css/YOUR_THEME_NAME.css
   סקריפטים[] = js/YOUR_THEME_NAME.js
7. משנים את שם העיצוב בקובץ your_THEME_NAME.info מ-Apigee responsive Starter Kit ל-Your THEME שם.
8. אם רוצים להוסיף צילום מסך חדש לעיצוב, מחליפים את הקובץ screenshot.png הקיים.
9. אם רוצים להוסיף לוגו חדש לעיצוב, מחליפים את קובץ logo.png הסוגר.
10. אם רוצים להוסיף סמל אתר חדש לעיצוב, מחליפים את הקובץ favicon.ico הקיים.