Zarządzanie blokami w responsywnym motywie

Właśnie zaczynam responsywny motyw oparty na Omegi, początkowo koncentrując się na układzie mobilnym.

Istnieją pewne bloki, które prawdopodobnie zostaną uznane za zbyt „ciężkie”, aby mogły zostać uwzględnione w układzie mobilnym, i inne bloki, które będą musiały zostać wprowadzone specjalnie dla tego układu (rozwodnione menu, stonowany pasek użytkownika itp.).

Mogę łatwo ukryć niechciane bloki w układzie mobilnym za pomocą CSS i dołączyć bloki specyficzne dla urządzeń mobilnych w domyślnym układzie i ukryć je (więc są pokazane tylko na urządzenia mobilne), ale wydaje się, że to dość wsteczny sposób myślenia o to. Jeśli bloki nie są pokazane, dodatkowy narzut, który ponoszą, byłby naprawdę nie do przyjęcia (szczególnie biorąc pod uwagę liczbę dodatkowych zapytań db, które dodawałaby treść w ukrytych blokach).

Myślę, że musi istnieć dobry, czysty sposób na przechwycenie procesu decyzyjnego dotyczącego bloków na wczesnym etapie kompilacji strony i wykluczenie / włączenie bloków na podstawie niektórych detekcji systemu operacyjnego, ale rysuję puste miejsce na temat tego, jak to może być możliwy.

Dodam też fakt, że Varnish działa przed tą stroną, co powinno sprawić, że będzie fajniej :)

Czy istnieją jakieś moduły / znane strategie, które mogą w tym pomóc?

Powinienem dodać, że korzystanie z modułu Context nie jest opcją, ponieważ strona jest już w pełni rozwinięta, a przeniesienie jej do Context byłoby w tym momencie ogromnym przedsięwzięciem.

przechwytuje proces podejmowania decyzji o blokach na wczesnym etapie kompilacji strony i wyklucza / włącza bloki na podstawie niektórych detekcji systemu operacyjnego

Lakier działa przed tą stroną

Jak już wspomniano w komentarzach, wymaga to skonfigurowania lakieru, aby nie buforował tylko adresu URL żądania, ale także zmieniał się w kliencie użytkownika. Odpowiedni przykład znajduje się na wiki wiki, VCLExampleNormalizeUserAgent .

Gdy wniosek rzeczywiście ma trafić na miejsce, trzeba ustalić, który blokuje pokazać i nie pokazywać. Uważam, że zrobienie tego z eval byłoby nie mniej niż katastrofą , więc najczęściej stosowanymi opcjami są kontekst i panele .

Po zbudowaniu strony. ponawianie wszystkich stron / umieszczanie bloków za pomocą któregokolwiek modułu prawdopodobnie nie jest opcją, ale dzięki profilerowi i zastosowaniu 80-20 , można osiągnąć znaczny wzrost wydajności poprzez ponawianie tylko określonych stron.

Nie mogę wdawać się w wiele szczegółów, ponieważ od wieków nie korzystałem z żadnego modułu (wszystkie strony buduję z kontekstem od samego początku i nie reaguję na coś, czego nie zbudowałem dla chociaż nie miałem tego problemu wcześniej), ale myślę, że powinieneś być w stanie coś połączyć z Narzędziami mobilnymi i przestrzeniami.

Przestrzenie

Spaces to moduł API, którego zadaniem jest, aby opcje konfiguracji były ogólnie dostępne tylko na poziomie witryny, aby były konfigurowalne i zastępowane pojedynczymi „spacjami” na stronie Drupal. Zostało to opisane jako:

• Sposób, aby jedna strona Drupala działała jak kilka stron
• Sposób na zapewnienie znacznie bardziej konfigurowalnych, w pełni funkcjonalnych grup organicznych lub stron głównych użytkowników
• Uogólniony interfejs API do konfiguracji kontekstowej

Narzędzia mobilne

Moduł Narzędzia mobilne udostępnia programistom Drupal niektóre narzędzia pomocne w dostosowywaniu witryny w zależności od urządzenia odwiedzającego.

Strona projektu dla MT mówi jednak, że nie jest jeszcze gotowa do produkcji, co może być problemem - zależy to od ostatniej aktualizacji, ponieważ ostatnie zatwierdzenie miało miejsce w tym miesiącu.

*EDYTOWAĆ

ZUPEŁNIE ZAPOMNIAŁEM O TYM!

Browscap

Browscap zapewnia ulepszoną wersję funkcji get_browser () PHP.

Blok brwiowy

Browscap Block dodaje opcje widoczności do ustawień konfiguracji bloków, umożliwiając ukrywanie lub pokazywanie bloków na urządzeniach mobilnych.

Browscap nie zależy od konfiguracji serwera, ale jeśli możesz go użyć, drugi moduł zapewnia dodatkowe ustawienia widoczności dla każdego bloku na stronie edycji bloku.

możesz skorzystać z obsługi wielu przeglądarek jQuery, aby uzyskać rozdzielczość ekranu:

var browserWidth  = $(window).width();
var browserHeight = $(window).height();

Dodaj prosty skrypt PHP, aby wyświetlić ustawienia pokrewnego bloku.

Możesz użyć Mobile Detect Block, ale obecnie szukam rozwiązania, które działa z szerokością okna i AdaptiveThemezapytaniami o media w module Breakpoints, aby nie powielać tego kodu i nie obciążać pobierania użytkownika końcowego bardziej niż jest. Miałem też mieszane wyniki, ponieważ Mobile Detect nie odbierał na jednym urządzeniu, z którym testowałem, co czyni go raczej bezużytecznym jak Browscap, jeśli nie może zapewnić wiarygodnych wyników.

W niektórych dyskusjach niektórzy ludzie chcą uciec od Browscap z tego czy innego powodu, stąd przejście na Mobile Detect .