Dostosowywanie motywu

Przeglądasz dokumentację Apigee Edge.
Przejdź do Dokumentacja Apigee X.
informacje.

Motyw to zbiór plików, które określają wygląd i charakter witryny. W portalu Usługi dla deweloperów początkowo jest stosowany motyw domyślny, który możesz dostosować. Możesz wybrać ustawienia wyglądu i sposobu działania portalu. Więcej w szczególności możesz zmienić kolor linków, tła, tekstu i innych elementów motywu. Ty możesz też zmienić wiadomość powitalną wyświetlaną na pierwszej stronie portalu dla programistów.

Motyw możesz dostosować, korzystając z interfejsu portalu dla programistów lub pisząc kod w niestandardowym interfejsie pliku motywu, który zastępuje domyślny plik motywu.

W zależności od wersji portalu dla deweloperów możesz wybrać kilka motywów od:

Motyw Opis

Motyw elastyczny Apigee

Na podstawie Bootstrap 3, domyślny motyw kolejnych wersji portalu. Ten motyw jest obsługiwany na urządzeniach o szerokości od 768 pikseli do 1400 pikseli. W tym motywie dostępne są wszystkie funkcje Bootstrap 3.

Uwaga: aby korzystać z motywu elastycznego Apigee, upewnij się, że tag wczytywania Motyw 7.x–3.0 jest włączony.

Motyw DevConnect Apigee

Domyślny motyw portalu poprzedni do motywu elastycznego Apigee.

Istniejące portale można uaktualnić do nowego motywu elastycznego Apigee, ale najpierw należy to zrobić upewnić się, że wszystkie bloki, szablony i inne treści są zgodne z Bootstrap 3; że jest włączony motyw Bootstrap 7.x–3.0.

Podstawowy motyw Apigee

Motyw nadrzędny motywu DevConnect Apigee i nie powinien być używany w własnych.

Ustawianie motywu domyślnego

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

"Apigee DevConnect theme" is out of date 

Domyślny motyw portalu możesz ustawić, wykonując czynności opisane poniżej. Zalecenia zawsze najpierw przetestuj nowy motyw w systemie nieprodukcyjnym, zanim wdrożysz go w produkcji.

Aby ustawić motyw domyślny:

  1. Zaloguj się w portalu jako użytkownik z uprawnieniami administratora lub do tworzenia treści.
  2. W menu administrowania Drupalem wybierz Wygląd. Lista włączonych motywów.
  3. W przypadku motywu, którego chcesz użyć jako domyślnego, wybierz Ustaw jako domyślny.
    Aby używać motywu elastycznego Apigee, sprawdź, czy motyw Bootstrap 7.x-3.0 jest włączone na tej stronie.
  4. Zapisz konfigurację.

Dostosowywanie motywu elastycznego Apigee

W tej sekcji dowiesz się, jak skonfigurować motyw elastyczny Apigee, w tym:

  • Dostosowywanie formularzy modalnych
  • Dostosowywanie ustawień ogólnych

Aby dostosować obsługę formularzy modalnych:

Portal używa procesu rozruchowego Drupala Formularze modalne – moduł piaskownicy do wyświetlania formularzy Drupala w postaci elementów modalnych. Formularze logowania i rejestracji domyślnej funkcji w postaci plików modalnych. Możesz wyłączyć tę funkcję, aby formularze były wyświetlane jako poszczególnych stron.

  1. Zaloguj się w portalu dla deweloperów jako użytkownik z uprawnieniami administratora.
  2. Wybierz Konfiguracja > Interfejs użytkownika > W klastrze Bootstrap Modal Menu administrowania Drupalem.
  3. Włącz lub wyłącz modalną obsługę formularzy.
  4. Kliknij Zapisz konfigurację.

Aby dostosować ogólne ustawienia motywu elastycznego Apigee:

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

    Obszar Sekcja Opis

    Ustawienia wczytywania

    Komponenty

    Steruj wyświetlaniem menu nawigacyjnego, czyli pozycji menu głównego i wyświetlanie głębin regionów:

    • Menu nawigacyjne: ukrywanie/pokazywanie menu nawigacyjnego oraz włączanie i wyłączanie linku do strony głównej. w menu nawigacyjnym.
    • Navbar: zmień położenie paska nawigacyjnego (menu głównego) na stałe/statyczne/normalne, dzięki czemu układ jest bardziej dynamiczny.
    • Regiony: dodaj klasę dobrego do dowolnego regionu witryny do dodaj ciemniejsze tło do obszaru.

    JavaScript

    Zarządzaj wyświetlaniem kotwic, wyskakujących okienek i etykietek:

    • Reklamy zakotwiczone: popraw pozycje zakotwiczonych i włącz wygładzanie. przewijanie.
    • Popowery: jedne z nich dodają małe nakładki treści . Włączanie/wyłączanie wyskakujących okienek oraz konfigurowanie ich używania.
    • Etykietki: skonfiguruj sposób używania etykietek. Możesz wymusić etykietkę, która ma być wyświetlana z prawej, lewej, górnej i dolnej części każdego elementu formularza oraz ustaw inne opcje wyświetlania.

    Zaawansowane

    Kontroluje sposób używania przez portal BootstrapCDN aby zaktualizować pliki motywu wczytywania. Możesz wyłączyć zrzeczenie się portalu w BootstrapCDN, ale potem musisz udostępnić własną implementację Bootstrap platformy.

    Ustawienia DevConnect

    Ustaw wiadomość powitalną, domyślne kolory i rozmiar logo, które się pojawi 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 stanowiący zakładkę do portalu.

Dostosowywanie motywu DevConnect Apigee

motyw Apigee DevConnect jest domyślnym motywem w starszych wersjach portalu; można uaktualnić do nowego motywu elastycznego Apigee. Najpierw jednak należy upewnić się, że wszystkie bloki, szablony i inne treści są zgodne z Bootstrap 3. .

Aby dostosować ogólne ustawienia Apigee DevConnect motyw:

  1. Zaloguj się w portalu jako użytkownik z uprawnieniami administratora lub do tworzenia treści.
  2. Wybierz Wygląd > Motyw DevConnect Apigee > Ustawienia w Drupalu w menu administracji. Spowoduje to wyświetlenie początkowych ustawień motywu. Ustawienia kolorów: podana jako wartości szesnastkowe.

  3. Zmień ustawienia zgodnie ze swoimi preferencjami.
    Na przykład możesz dodać lub zmienić wiadomość powitalną albo zmienić kolor tła nagłówka. kolor tła nagłówka jest początkowo ustawiony na około pomarańczowy (#FF4300). Możesz zmienić na inny kolor, na przykład niebieski (#0000FF).
  4. Po zakończeniu zmieniania ustawień kliknij Zapisz.

Dostosowywanie motywu przez utworzenie motywu podrzędnego

Wszystkie pliki i zasoby definiujące domyślne motywy udostępniane w portalu znajdują się w profiles/apigee/themes, w katalogu instalacyjnym portalu. Ten katalog jest dostępny pod adresem /var/www/html/profiles/apigee/themes, jeśli użytkownik zainstalował portal w domyślnej lokalizacji.

Aby edytować motyw i zmienić wygląd i styl witryny, nie modyfikuj plików motywu w profiles/apigee/themes. Jeśli to zrobisz, zmiany zostaną zastąpione podczas następnego uaktualnienia portalu.

Zamiast tego utwórz motyw podrzędny motywu, który chcesz zmodyfikować, kopiując motyw domyślny. /sites/all/themes katalogu. Instrukcje dotyczące podtematów znajdziesz na stronie Drupal dokumentacji znajdziesz na https://www.drupal.org/node/225125.

Opisana powyżej dokumentacja Drupala zawiera szczegółowe informacje o tworzeniu podmotywu, ale poniżej znajdziesz ogólne instrukcje tworzenia podtematu motywu elastycznego Apigee:
  1. Skopiuj folder profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit. do /sites/all/themes folderu Dysku.
  2. Zmień nazwę folderu apigee_responsive_starterkit. do: YOUR_THEME_NAME.
  3. Zmień nazwę pliku apigee_responsive_starterkit.info na NAZWA_TEMATU.info.
  4. Zmień nazwę pliku css/apigee_responsive_starterkit.css na css/NAZWA_TWOJEGO_TEMATU.css.
  5. Zmień nazwę pliku js/apigee_responsive_starterkit.js na NAZWA_TWOJEGO_TEMATU.js.
  6. Edytuj plik YOUR_THEME_NAME.info i zastąp następujące wiersze:

    stylesheets[wszystkie][] = css/apigee_responsive_starterkit.css
    skrypty[] = js/apigee_Elastyczne_starterkit.js


    z:

    stylesheets[wszystkie][] = css/NAZWA_TWOJEGO_TEMATU.css
    skrypty[] = js/NAZWA_TWOJEGO_TEMATU.js
  7. Zmień nazwę motywu w pliku YOUR_THEME_NAME.info z Apigee Responsive Starter Kit na YOUR THEME. IMIĘ I NAZWISKO
  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 wyjściowy plik logo.png.
  10. Jeśli chcesz dodać do motywu nową favikonę, zastąp istniejący plik favicon.ico.