Dostosowywanie motywu

Przeglądasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X. Informacje

Motyw to zbiór plików określających wygląd i styl witryny. Początkowo pojawia się w nim domyślny motyw, który możesz dostosować. Dzięki temu możesz wybrać preferencje dotyczące wyglądu i sposobu działania portalu. Dokładniej rzecz ujmując, możesz zmieniać kolor linków, tła, tekstu i innych elementów motywu. Możesz też zmienić wiadomość powitalną wyświetlaną na stronie głównej portalu dla deweloperów.

Motyw możesz dostosować w interfejsie portalu dla programistów lub pisząc kod w pliku niestandardowego motywu, aby zastąpić domyślny plik motywu.

W zależności od wersji portalu dla programistów masz do wyboru kilka motywów:

Motyw	Opis
Elastyczny motyw Apigee	Na podstawie Bootstrap 3 – domyślny motyw późniejszych wersji portalu. Ten motyw jest obsługiwany na urządzeniach o szerokości od 768 do 1400 pikseli. W tym motywie dostępne są wszystkie funkcje Bootstrap 3. Uwaga: aby używać motywu elastycznego Apigee, włącz motyw Bootstrap 7.x-3.0.
Motyw Apigee DevConnect	Domyślny motyw portalu poprzedzający motyw elastyczny Apigee. Istniejące portale można uaktualnić do nowego motywu elastycznego Apigee, ale najpierw należy się upewnić, że wszystkie bloki, szablony i inne treści są zgodne z programem Bootstrap 3 oraz że motyw Bootstrap 7.x-3.0 jest włączony.
Podstawowy motyw Apigee	Motyw nadrzędny motywu Apigee DevConnect, który nie powinien być używany samodzielnie.

Ustawianie motywu domyślnego

Jeśli portal nadal używa starszego motywu Apigee DevConnect, możesz zobaczyć ostrzeżenie w tym formularzu:

"Apigee DevConnect theme" is out of date 

Aby ustawić domyślny motyw portalu, wykonaj czynności opisane poniżej. Przed wdrożeniem motywu w środowisku produkcyjnym zawsze warto przetestować nowy motyw w systemie nieprodukcyjnym.

Aby ustawić motyw domyślny:

1. Zaloguj się w portalu jako użytkownik z uprawnieniami administratora lub z uprawnieniami do tworzenia treści.
2. Wybierz Wygląd w menu administrowania Drupal. Pojawi się lista włączonych motywów.
3. Jako motyw, którego chcesz używać jako domyślnego, wybierz Ustaw jako domyślny.
   Aby używać motywu elastycznego Apigee, upewnij się, że motyw Bootstrap 7.x-3.0 jest też włączony na tej stronie.
4. Zapisz konfigurację.

Dostosowywanie motywu elastycznego Apigee

W tej sekcji opisaliśmy, jak skonfigurować motyw elastyczny Apigee, w tym:

• Dostosowywanie formularzy modalnych
• Dostosowywanie ustawień ogólnych

Aby dostosować obsługę formularzy modalnych:

Portal używa modułu piaskownicy Formularze modalne w aplikacji Drupal, aby wyświetlać formularze Drupal jako bloki modalne. Formularze logowania i rejestracji domyślnie pełnią funkcję modalnego. Możesz wyłączyć tę funkcję, aby formularze wyświetlały się jako pojedyncze strony.

1. Zaloguj się w portalu dla programistów jako użytkownik z uprawnieniami administratora.
2. W menu administrowania Drupal wybierz Konfiguracja > Interfejs użytkownika > Formularze modalne do wczytywania.
3. Włącz lub wyłącz modalną obsługę formularzy.
4. Wybierz Zapisz konfigurację.

Aby dostosować ogólne ustawienia motywu elastycznego Apigee:

1. Zaloguj się w portalu jako użytkownik z uprawnieniami administratora lub z uprawnieniami do tworzenia treści.
2. Wybierz Wygląd w menu administrowania Drupal. Pojawi się lista włączonych motywów.
3. W obszarze Elastyczny Apigee (motyw domyślny) wybierz Ustawienia (nie klikaj przycisku Ustawienia u góry strony).
4. Pojawi się strona ustawień motywu elastycznego Apigee.
5. W tabeli poniżej opisano obszary na tej stronie, których możesz używać do konfigurowania motywu. Jeśli zmienisz którekolwiek z tych ustawień, wybierz Zapisz konfigurację.
   
   

   Powierzchnia	Sekcja	Opis
   Ustawienia wczytywania
   	Komponenty	Możesz kontrolować wyświetlanie menu nawigacyjnego, pozycji menu głównego (nazywanego w ustawieniach paskiem nawigacyjnym) oraz wyświetlaniem studni regionalnych: Menu nawigacyjne: ukrywanie lub wyświetlanie menu nawigacyjnego oraz włączanie i wyłączanie w nim linku do strony głównej. Pasek nawigacyjny: zmień położenie paska nawigacyjnego (menu głównego) na stałe/statyczne/normalne położenie, dzięki czemu układ będzie bardziej dynamiczny. Regionalnie: dodaj klasę „well” do dowolnego regionu w witrynie, aby dodać ciemniejsze tło regionu.
   	JavaScript	Określ, jak mają być wyświetlane reklamy zakotwiczone, wyskakujące okienka i etykietki: Kotwice: ustalaj pozycje kotwic i umożliwiają płynne przewijanie. Wyskakujące okienka: wyskakujące okienka dodają do dowolnego elementu małe nakładki z treścią. Włącz/wyłącz wyskakujące okienka i skonfiguruj sposób ich wykorzystania. Wskazówki: skonfiguruj sposób korzystania z etykietek. Możesz wymusić wyświetlanie każdej etykietki z prawej, lewej, górnej lub dolnej części każdego elementu formularza i ustawić inne opcje wyświetlania.
   	Zaawansowane	Określa, w jaki sposób portal używa BootstrapCDN do aktualizowania plików motywów Bootstrap. Możesz wyłączyć zależność portalu od BootstrapCDN, ale musisz później udostępnić własną implementację platformy Bootstrap.
   	Ustawienia DevConnect	Ustaw wiadomość powitalną, domyślne kolory i rozmiar logo wyświetlanego w menu głównym.
   Zastąp ustawienia globalne
   	Przełącz wyświetlacz	Włącz lub wyłącz wyświetlanie różnych obszarów portalu.
   	Ustawienia obrazu logo	Określa obraz wyświetlany w menu głównym.
   	Ustawienia ikon skrótów	Określa obraz wyświetlany na pasku adresu przeglądarki lub zakładki do portalu.

Dostosowywanie motywu Apigee DevConnect

Motyw Apigee DevConnect jest domyślnym motywem portalu w starszych wersjach portalu i można go uaktualnić do nowego motywu elastycznego Apigee. Jednak przed przeprowadzeniem uaktualnienia musisz się upewnić, że wszystkie bloki, szablony i inne treści są zgodne z Bootstrap 3.

Aby dostosować ogólne ustawienia motywu Apigee DevConnect:

1. Zaloguj się w portalu jako użytkownik z uprawnieniami administratora lub z uprawnieniami do tworzenia treści.
2. W menu administrowania Drupal wybierz Wygląd > Motyw DevConnect Apigee > Ustawienia. Spowoduje to wyświetlenie początkowych ustawień motywu. Ustawienia kolorów są podawane w postaci wartości szesnastkowych.

   

3. Zmień ustawienia zgodnie ze swoimi preferencjami.
   Możesz na przykład dodać lub zmienić wiadomość powitalną albo zmienić kolor tła nagłówka. Kolor tła nagłówka jest początkowo ustawiony na zbliżony do pomarańczowego (#FF4300). Możesz zmienić kolor na inny, na przykład niebieski (#0000FF).
4. Gdy skończysz zmieniać ustawienia, kliknij Zapisz.

Dostosowywanie motywu przez utworzenie podtematu

Wszystkie pliki i zasoby, które definiują domyślne motywy udostępniane z portalem, znajdują się w katalogu profiles/apigee/themes w katalogu instalacji portalu. Jeśli portal został zainstalowany w lokalizacji domyślnej, katalog ten znajduje się w katalogu /var/www/html/profiles/apigee/themes.

Aby edytować motyw w celu zmiany wyglądu i stylu witryny, nie modyfikuj plików motywu bezpośrednio w sekcji profiles/apigee/themes. Jeśli to zrobisz, zmiany zostaną zastąpione przy następnym uaktualnieniu portalu.

Zamiast tego utwórz podtemat motywu, który chcesz zmodyfikować, kopiując pliki domyślnego motywu do katalogu /sites/all/themes. Instrukcje dotyczące podtematów znajdziesz w dokumentacji Drupala na https://www.drupal.org/node/225125.

1. Skopiuj folder profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit do folderu /sites/all/themes.
2. Zmień nazwę folderu apigee_responsive_starterkit na YOUR_THEME_NAME.
3. Zmień nazwę pliku apigee_responsive_starterkit.info na YOUR_THEME_NAME.info.
4. Zmień nazwę pliku css/apigee_responsive_starterkit.css na css/NAZWA_TWOJEGO_TEKSTU.css.
5. Zmień nazwę pliku js/apigee_responsive_starterkit.js na YOUR_THEME_NAME.js.
6. Edytuj plik YOUR_THEME_NAME.info i zastąp te wiersze:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   clusters[] = js/apigee_responsive_starterkit.js
   
   za pomocą:
   
   stylesheets[all][NAME]/NAZWA_WŁAŚCICIELA
   
7. Zmień nazwę motywu w pliku YOUR_THEME_NAME.info z Elastycznego pakietu startowego Apigee na TWOJA NAZWA MOTYWU.
8. Jeśli chcesz dodać nowy zrzut ekranu do motywu, zastąp istniejący plik screenshot.png.
9. Jeśli chcesz dodać do motywu nowe logo, zastąp zamykający plik logo.png.
10. Jeśli chcesz dodać do motywu nową favikonę, zastąp istniejący plik favicon.ico.