Mengelola blok dalam tema responsif


15

Saya baru saja memulai tema responsif berdasarkan Omega, berkonsentrasi pada tata letak ponsel pada awalnya.

Ada beberapa blok yang mungkin akan dianggap terlalu 'berat' untuk dimasukkan dalam tata letak seluler, dan blok-blok lain yang perlu diperkenalkan secara khusus untuk tata letak itu (menu encer, bilah pengguna yang langsing, dll).

Saya dapat dengan mudah menyembunyikan blok yang tidak diinginkan pada tata letak seluler dengan CSS, dan menyertakan blok khusus seluler pada tata letak default dan menyembunyikannya (jadi itu hanya diperlihatkan untuk seluler), tapi itu sepertinya cara berpikir yang terbelakang. Itu. Jika blok tidak ditampilkan, overhead tambahan yang mereka keluarkan akan benar-benar tidak dapat diterima (terutama mengingat jumlah kueri db tambahan yang akan ditambahkan konten dalam blok tersembunyi).

Saya berpikir harus ada cara bersih yang bagus untuk mencegat proses pengambilan keputusan blok sejak awal di halaman build, dan mengecualikan / menyertakan blok berdasarkan beberapa os-deteksi, tapi saya tidak tahu bagaimana itu mungkin terjadi. bisa jadi.

Saya juga akan melemparkan fakta bahwa Varnish berjalan di depan situs ini, yang seharusnya membuat semuanya lebih menyenangkan :)

Apakah ada modul / strategi yang dikenal di luar sana yang dapat membantu dengan ini?

Saya harus menambahkan bahwa menggunakan modul Konteks bukan merupakan pilihan karena situs tersebut sudah lengkap, dan memindahkannya ke dalam Konteks akan menjadi usaha besar pada saat ini.


4
Saya pasti akan menggunakan Panel dan plugin akses agen-pengguna yang relevan. Konteks mungkin bisa melakukan hal yang sama, tetapi seperti yang sudah Anda katakan, itu bukan pilihan. Tentu saja ada kemungkinan mengerikan eval: ing visibilitas blok, tapi ... Di sisi lain, dengan Varnish di depan, db-query tambahan yang dilakukan oleh blok ini, mungkin bukan masalah besar?
Letharion

@Letharion Ya itu pemikirannya, biarkan Varnish menghilangkan ketegangannya. Situs ini memiliki beberapa ratus ribu pengguna aktif, dan Varnish hanya terlibat untuk lalu lintas anonim. Kami akan bermain dengan ESI cukup cepat tetapi bahkan kemudian saya bisa memikirkan masalah ... dari sudut pandang SEO, markup / menu tambahan akan berat dan berpotensi membingungkan, belum lagi bobot ekstra (tidak perlu) pada halaman untuk pengguna ponsel. Itu yang sulit!
Clive

1
Mungkin menambahkan handler blok yang lebih cerdas (Panel / Konteks / lainnya) ke halaman terberat, sehingga Anda bisa mendapatkan beberapa keuntungan dari itu tanpa perlu mengulang seluruh situs?
Letharion

1
Saya tidak setuju bahwa itu membuat pertanyaan bodoh, atau pengubah total permainan. Varnish dapat dikonfigurasikan untuk menangani masalah dengan baik, itu tidak akan tahu bagaimana dengan konfigurasi di luar kotak.
Letharion

2
@Clive: ada pepatah lama: "Tidak ada yang namanya pertanyaan bodoh, hanya jawaban bodoh!" ;-)
AjitS

Jawaban:


4

intersep proses pengambilan keputusan blok sejak awal di halaman build, dan kecualikan / sertakan blok berdasarkan pada beberapa os-deteksi

Varnish berjalan di depan situs ini

Seperti disebutkan dalam komentar sudah, ini mengharuskan Anda untuk mengkonfigurasi pernis untuk tidak hanya cache pada URL permintaan, tetapi juga bervariasi pada agen-pengguna. Ada contoh yang relevan di wiki pernis, VCLExampleNormalizeUserAgent .

Setelah permintaan benar - benar mengenai situs, Anda perlu menentukan blok mana yang akan ditampilkan dan tidak ditampilkan. Saya akan menganggap itu tidak kurang dari bencana untuk melakukan ini dengan eval , jadi pilihan paling umum yang tersisa adalah Konteks dan Panel .

Dengan situs yang sudah dibangun. mengulang semua halaman / blok penempatan dengan modul mana pun mungkin bukan opsi, tetapi dengan profiler, dan menerapkan 80-20 , bisa dimungkinkan untuk membuat keuntungan kinerja yang signifikan dengan mengulang halaman tertentu saja.


Itu sangat menarik, terima kasih. Situs yang dimaksud adalah di Pantheon jadi saya tidak berpikir mengonfigurasi Varnish adalah pilihan, tetapi ini telah berubah menjadi pertanyaan yang lebih umum 'bagaimana seseorang melakukan ini secara teoritis' sekarang jadi ini sangat membantu
Clive

Pantheon memungkinkan Anda mengatur cookie STYXKEY (menjelang akhir helpdesk.getpantheon.com/customer/portal/articles/425726 ), dan mereka memungkinkan Anda untuk mengelompokkan apa yang cache / servis Varnish untuk pengguna lain.
Jimajamma

Benar-benar berjarak pada karunia ini, saya ingin membaginya antara kedua jawaban tetapi hidup tidak seperti itu. Sistem memilih Chapabu's untuk memberikan hadiah, jadi centang hijau kecil pergi ke Anda sobat :)
Clive

10

Saya tidak bisa membahas banyak detail, karena saya sudah lama tidak menggunakan salah satu modul (saya membangun semua situs saya dengan Konteks dari kata go dan saya belum mengambil responsif pada sesuatu yang belum saya buat untuk sementara, jadi saya belum pernah mengalami masalah ini sebelumnya), tetapi saya pikir Anda harus dapat menyatukan sesuatu dengan Alat dan Ruang Seluler.

Spasi

Spaces adalah modul API yang dimaksudkan untuk membuat opsi konfigurasi yang secara umum tersedia hanya pada tingkat seluruh situs agar dapat dikonfigurasi dan diganti oleh "ruang" individual di situs Drupal. Itu telah digambarkan sebagai:

  • Cara untuk membuat satu situs Drupal bertindak seperti beberapa situs
  • Cara untuk menyediakan Grup Organik atau homepage pengguna yang jauh lebih dapat dikonfigurasi dan berfitur lengkap
  • API umum untuk konfigurasi kontekstual

Alat Seluler

Modul Alat Seluler memberi pengembang Drupal beberapa alat untuk membantu membuat penyesuaian ke situs Anda berdasarkan perangkat pengunjung.

Halaman proyek untuk MT mengatakan tidak siap untuk produksi, yang mungkin menjadi masalah - tergantung kapan terakhir diperbarui, karena komit terakhir adalah bulan ini.

* EDIT

SAYA BENAR-BENAR LUPA TENTANG INI!

Peramban

Browscap menyediakan versi peningkatan fungsi get_browser () PHP.

Blok peramban

Blok Browscap menambahkan opsi visibilitas untuk memblokir pengaturan konfigurasi untuk memungkinkan Anda menyembunyikan atau menampilkan blok di perangkat seluler.

Browscap memang tergantung pada pengaturan server Anda, tetapi jika Anda dapat menggunakannya maka modul kedua memberi Anda pengaturan visibilitas tambahan untuk setiap blok pada halaman edit blok.

masukkan deskripsi gambar di sini


Blok Browscap terlihat sangat menjanjikan terima kasih, saya akan memeriksanya dalam beberapa hari ke depan dan memberi tahu Anda
Clive

Ups, ini benar-benar menjauh dari saya, maaf untuk hadiah setengahnya!
Clive

0

Anda dapat menggunakan dukungan browser jQuery cross untuk mendapatkan resolusi layar:

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

Tambahkan skrip PHP sederhana untuk menampilkan pengaturan blok terkait.


Terima kasih, tetapi bukankah itu berarti mengonversi seluruh situs untuk menggunakan AJAX untuk blok? Saya ingin melakukan sisi server ini jika memungkinkan
Clive

0

Anda dapat menggunakan Blok Deteksi Seluler tetapi saat ini saya sedang mencari solusi yang bekerja dengan lebar jendela dan salah satu AdaptiveThemeatau kueri media modul Breakpoints agar tidak menduplikasi kode itu dan mengurangi unduhan pengguna akhir lebih dari itu. Saya juga memiliki hasil yang beragam dengan Mobile Detect yang tidak mengambil pada satu perangkat yang saya uji, yang membuatnya agak tidak berguna seperti Browscap jika tidak dapat memberikan hasil yang dapat diandalkan.

Beberapa diskusi memiliki beberapa orang yang ingin keluar dari Browscap karena satu dan lain alasan, karenanya pindah ke Mobile Detect .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.