Mengubah HTML yang dihasilkan oleh Panel: Apakah mungkin?

15

Saya suka menggunakan panel, tetapi panel adalah rasa sakit di pantat untuk gaya karena jumlah besar div itu menghasilkan. Juga kelas yang berlaku untuk divs itu tidak masuk akal dan terlalu besar juga. Menyebabkan kebingungan di antara sesama front-ender saya.

Untuk menunjukkan kepada Anda output yang mereka hasilkan:

Output oleh panel

Masalahnya adalah bahwa saya menggunakan 960.gs dan panel menambahkan kelas mereka sendiri dan struktur div besar, membuat saya harus mengganti kelas mereka. Ini adalah sesuatu yang tidak ingin saya lakukan, saya ingin membersihkan divs. Apakah ada cara untuk melakukan ini?

Edit:

Apa yang saya lakukan untuk membersihkan beberapa div yang saya anggap tidak berguna:

Mulai dari baris # 388 di fleksibel.inc (panel / plugin / tata letak / fleksibel)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

Saya sebenarnya membuat salinan tata letak yang fleksibel dan mengeditnya, tetapi jika saya memiliki lebih banyak waktu di proyek ini, saya akan membuat plugin yang lebih bersih untuk ini.

Catatan: Ini bukan solusi terbaik, ini adalah rute tercepat untuk mencapai tujuan saya. Membuat plugin kecil milik Anda sendiri adalah cara terbaik, Anda selalu dapat menggunakan salah satu plugin yang ada sebagai basis.

thecodeassassin
sumber

Jawaban:

19

Saya telah melihat ke masalah ini sebelumnya. Inilah masalah yang ingin Anda baca . Kelihatannya gila pada awalnya, tetapi sebenarnya ada alasan bagus untuk itu menjadi seperti ini.

Intinya: pikirkan Panel Layout Fleksibel sebagai alat prototyping . Gunakan untuk mencoba dan menyusun ide dalam pengembangan, pementasan, pengujian pengguna dll, lalu ketika Anda mendapatkan tata letak yang sempurna yang ditandatangani, implementasikan untuk produksi dengan HTML yang bersih, jernih, dioptimalkan dengan tangan sebagai tata letak Panel khusus (selengkapnya pada yang di bawah).

Berikut ini ringkasan singkat mengapa itu terjadi, berdasarkan masalah yang saya tautkan ke:

  • Output HTML panel membutuhkan semua markup gila untuk dapat mengakomodasi tata letak fleksibel paling gila yang bisa dibuat oleh siapa pun - pikirkan banyak cairan bersarang dan area yang diperbaiki berdampingan.
  • Tidak ada yang dihasilkan secara otomatis akan cukup baik untuk puritan HTML, jadi para Panel belum mencoba membuatnya bahagia dalam fitur tata letak yang fleksibel . Jadi tidak ada algoritma pengoptimal HTML yang mencoba untuk memilah-milah HTML yang dihasilkan oleh tata letak Anda ke minimum, karena tidak peduli sebagus apa pun itu, tetap saja bukan HTML standar terbaik.
  • Sesuatu yang tidak mereka sebutkan: jika ada optimiser seperti itu, perubahan tata letak tertentu akan menyebabkan div dan kelas yang berlebihan sekarang menghilang. Jika Anda menggantung CSS dari ini, Anda harus menulis ulang CSS Anda paling sering Anda membuat perubahan kecil ke tata letak yang fleksibel Panel. Ini berarti bahwa jika mereka mencoba (dan gagal) untuk membuat Panel Layout Fleksibel menjadi alat produksi standar terbaik, mereka juga akan melemahkannya sebagai alat prototyping.
  • Anda bisa mendapatkan hasil bersih, ramping Panel HTML . Alur kerja yang diharapkan, membaca yang tersirat, adalah saya percaya sesuatu seperti ini:
    • Anda menggunakan Tata Letak Panel Fleksibel selama pengembangan awal, saat mencoba ide.
    • Setelah Anda menetapkan tata letak tertentu, jika Anda ingin membersihkan HTML, Anda menerapkannya menggunakan tata letak khusus, hanya menggunakan jumlah tepat markup HTML yang dibutuhkan tata letak dengan hanya kelas yang tepat, semantik dll untuk situs Anda (caranya di bawah ini ).

Meskipun pada awalnya saya tidak suka, pada refleksi saya pikir itu masuk akal. Alih-alih mencoba melakukan hal yang mustahil dan menciptakan satu alat yang sempurna untuk pembuatan prototipe dan standar terbaik dalam konteks produksi - yang keduanya memiliki kebutuhan yang sangat berbeda dan hanya dapat menghasilkan kompromi yang juga tidak tepat untuk keduanya - mereka Sudah dengan satu alat yang ideal untuk prototyping dan alat terpisah lainnya (tata letak khusus) yang ideal untuk produksi ramping.

Ini berarti Anda bisa mendapatkan yang terbaik dari keduanya, dengan biaya sedikit lebih banyak pekerjaan memakaikan tata letak akhir Anda sebagai templat yang didasarkan pada HTML standar-terbaik - tetapi pembuat puritan HTML ingin melakukan sedikit pekerjaan ekstra untuk mendapatkan output mereka sempurna.


Bagaimana cara membuat tata letak panel khusus? Ada panduan terperinci dalam dokumentasi tentang cara melakukannya . Berikut ringkasan dasar cepat:

  1. Salin tata letak yang ada dari /sites/all/modules/panels/plugins/layoutsmenjadi/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Ganti nama file dalam salinan baru agar sesuai dengan nama folder baru mereka. Perhatikan bahwa .tpl.phpfile tersebut harus memiliki tanda hubung bukan garis bawah.
  3. Tambahkan baris ke file info tema: plugins[panels][layouts] = layoutsIni memberitahu Panel bahwa Anda memiliki tata letak khusus di tema ini, dan di mana mereka berada (ganti string layoutsjika bukan jalur dari tema Anda ke folder tata letak khusus Anda)
  4. Edit file dengan HTML dan CSS standar terbaik yang sempurna, ramping, minimal, semantik.

    • Jangan lupa juga memperbarui .incfile dengan info tentang tata letak Anda seperti nama, kategori, nama file, dll.
    • themedalam file .inc harus sesuai dengan .tpl.phpnama file file, tanpa ekstensi. Setiap garis bawah yang Anda masukkan di sini dalam themenilai akan dikonversi menjadi tanda hubung.
    • Juga pertimbangkan untuk mengedit .pngikon untuk lebih mencerminkan tata letak Anda yang sebenarnya.
  5. Bersihkan cache. Layout baru Anda muncul sebagai opsi di Panel dengan nama, kategori, dll yang Anda tentukan dalam .incfile. Gunakan.
user56reinstatemonica8
sumber
1
Terima kasih !, ini akan menghabiskan sisa sore untukku ... Tapi itu bisa dilakukan tanpa "peretasan" sehingga sedikit memudahkan pikiranku. Btw: saya harap postingan ini muncul di google entah bagaimana karena saya tidak dapat menemukan posting mengenai masalah ini: S.
thecodeassassin
@Stephen Saya terkejut dengan seberapa sering saya mencari sesuatu 6 bulan + setelah saya mengajukan pertanyaan dan berakhir pada pertanyaan saya sendiri. Atau pertanyaan SE yang sama ...
WernerCD
Saya pikir pertanyaan dan jawaban ini sangat berguna, oleh karena itu saya menyarankan edit untuk judulnya yang diterima. Saya mengajukan pertanyaan yang sama sendiri di sana: drupal.stackexchange.com/questions/69807/theming-panels-html yang merupakan duplikat
George Katsanos
5

Anda juga dapat mempertimbangkan modul Clean Markup Drupal 7 untuk mengontrol output markup untuk Panel.

Saya mencari halaman ini di browser dan belum menemukan yang menyebutkannya, termasuk dalam jawaban komprehensif yang sangat bagus yang diberikan oleh user568458.

therobyouknow
sumber