Zarządzanie blokami w responsywnym motywie

15

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.

Clive
źródło
4
Bez wątpienia użyłbym Paneli i odpowiedniej wtyczki dostępu do klienta użytkownika. Kontekst prawdopodobnie mógłby zrobić to samo, ale jak już powiedziałeś, nie jest to opcja. Istnieje oczywiście okropna możliwość ewaluacji: widoczność bloku, ale ... Z drugiej strony, z Varnish z przodu, dodatkowe zapytania DB, które wykonują te bloki, mogą nie stanowić większego problemu?
Letharion
@Letharion Tak to jest myśl, pozwól Varnish usunąć napięcie. Strona ma jednak kilkaset tysięcy aktywnych użytkowników, a Varnish angażuje się tylko w anonimowy ruch. Wkrótce będziemy grać z ESI, ale nawet wtedy mogę myśleć o problemach ... z punktu widzenia SEO dodatkowe znaczniki / menu byłyby ciężkie i potencjalnie mylące, nie mówiąc już o dodatkowej (niepotrzebnej) wadze na stronach użytkownicy mobilni. To trudne!
Clive
1
Być może dodaj bardziej inteligentną obsługę bloków (panele / kontekst / inne) do najcięższych stron, abyś mógł z niej czerpać zyski bez konieczności ponawiania całej witryny?
Letharion
1
Nie zgadzam się, że to sprawia, że ​​pytanie jest głupie, lub całkowita zmiana gry. Lakier można skonfigurować tak, aby ładnie poradził sobie z tym problemem, po prostu nie będzie wiedział, jak to zrobić po skonfigurowaniu.
Letharion
2
@Clive: istnieje stare powiedzenie: „Nie ma czegoś takiego jak głupie pytanie, tylko głupia odpowiedź!” ;-)
AjitS

Odpowiedzi:

4

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.

Letharion
źródło
To naprawdę bardzo interesujące, dzięki. Witryna, o której mowa, znajduje się w Panteonie, więc nie sądzę, aby konfiguracja Lakieru była opcją, ale zmieniło się to w bardziej ogólne pytanie typu „jak zrobić to teoretycznie”, więc jest to bardzo pomocne
Clive
Panteon umożliwia konfigurację plików cookie STYXKEY (pod koniec helpdesk.getpantheon.com/customer/portal/articles/425726 ) i pozwala na segmentowanie zawartości pamięci podręcznej / usług dla użytkowników anonimowych.
Jimajamma
Całkowicie podzielony na tę nagrodę, chciałbym podzielić ją na obie odpowiedzi, ale życie nie jest takie. System wybrał nagrodę Chapabu za nagrodę, więc mały zielony tyk trafia do ciebie kolego :)
Clive
10

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.

wprowadź opis zdjęcia tutaj

Chapabu
źródło
Browscap Block wygląda naprawdę obiecująco dzięki, sprawdzę to w ciągu najbliższych kilku dni i dam ci znać
Clive
Ups, to całkowicie mnie uciekło, przepraszam za pół nagrody!
Clive
0

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.

monymirza
źródło
Dzięki, ale czy to nie oznaczałoby konwersji całej witryny na AJAX do blokowania? Chcę zrobić to po stronie serwera, jeśli to w ogóle możliwe
Clive
0

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 .

deanflory
źródło