Paneller tarafından üretilen HTML'yi değiştirme: Mümkün mü?


15

Panelleri kullanmayı seviyorum, ancak paneller, oluşturduğu büyük miktarda div nedeniyle stilin poposunda bir acı. Ayrıca bu div'lara uyguladığı sınıflar da anlamsız ve çok hantal. Diğer ön uçlarım arasında kafa karışıklığı yaratıyor.

Ürettikleri çıktıyı göstermek için:

Panellerle çıktı

Sorun 960.gs ve panelleri kullanıyorum kendi sınıflarını ve hantal div yapısını ekliyor, bu yüzden sınıflarını geçersiz kılmak zorunda kalıyorum. Bu yapmak istemediğim bir şey, div'leri temizlemek istiyorum. Bunu yapmanın bir yolu var mı?

Düzenle:

Ne işe yaramaz kabul div bazı temizlemek için yaptım:

Flexible.inc içindeki 388. satırdan başlayarak (paneller / eklentiler / düzenler / esnek)

$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";

Aslında esnek düzenin bir kopyasını yaptım ve bunu düzenledim, ancak bu projede daha fazla zamanım olsaydı, bunun için daha temiz bir eklenti yaratacağım.

Not: Bu en iyi çözüm değil, hedefime ulaşmak için mümkün olan en hızlı yoldu. Kendi küçük eklentinizi oluşturmak en iyi yoldur, her zaman mevcut eklentilerden birini temel olarak kullanabilirsiniz.

Yanıtlar:


19

Bu konuya daha önce baktım. İşte okumak istediğiniz sorun . İlk başta fındık gibi görünüyor, ama aslında bunun böyle olması için iyi nedenler var.

Alt satır: Paneller Esnek Düzenleri bir prototipleme aracı olarak düşünün . Denemek ve geliştirme taslak fikirler için kullanın, evreleme, kullanıcı test vs, o zaman kapalı imzalanan mükemmel düzen alınca, bir temiz, berrak, el-optimize HTML ile üretim için bunu uygulamaya özel Panelleri düzeni (daha aşağıda olanlar).

Bağlantı verdiğim konuyu temel alarak neden böyle olduğunun kısa bir özeti:

  • Panellerin HTML çıktısı, herkesin oluşturmak isteyebileceği en çılgın esnek düzenleri barındırabilmek için tüm bu çılgın biçimlendirmeye ihtiyaç duyuyor - iç içe sıvı yüklerini ve sabit bölgeleri yan yana düşünün.
  • Otomatik olarak oluşturulan hiçbir şey HTML geliştiricileri için yeterince iyi olmayacaktır, bu yüzden Paneller adamları onları esnek düzenler özelliği içinde mutlu etmeye çalışmadılar . Bu nedenle, düzeniniz tarafından oluşturulan HTML'yi çıplak minimum seviyeye indirmeye çalışan bir HTML optimize edici algoritması yoktur, çünkü ne kadar iyi olursa olsun, yine de en iyi standart HTML olmayacaktır.
  • Bahsetmedikleri bir şey: Böyle bir optimize edici olsaydı, düzendeki bazı değişiklikler artık yedekli div ve sınıfların kaybolmasına neden olur. CSS'yi bunlardan asarsanız, Paneller esnek düzeninde küçük bir değişiklik yaptığınızda CSS'nizi çoğu kez yeniden yazmanız gerekir. Bu, Panelleri Esnek Düzenleri en iyi standartlara sahip bir üretim aracına dönüştürmeye çalışırlarsa (ve başarısız olurlarsa), onu bir prototipleme aracı olarak da zayıflatacakları anlamına gelir.
  • Sen temiz alabilirsiniz, yağsız Paneller çıkışını HTML . Çizgiler arasında okuma beklenen iş akışı, böyle bir şeye inanıyorum:
    • Fikirleri denerken, Paneller Esnek Düzenleri erken gelişim sırasında kullanırsınız.
    • Belirli bir düzene yerleştikten sonra, temiz HTML istiyorsanız, özel bir düzen kullanarak uygularsınız, yalnızca düzenin siteniz için doğru sınıflar, anlambilim vb. İle ihtiyaç duyduğu kesin HTML biçimlendirmesini kullanarak (nasıl yapılır aşağıda) ).

İlk başta hoşuma gitmediğimde, düşünürken bunun mantıklı olduğunu düşünüyorum. İmkansızı yapmaya çalışmaktan ve hem prototip oluşturma hem de üretim bağlamında en iyi standartlar için mükemmel olan ve her ikisinin de çok farklı ihtiyaçları olan ve sadece ikisi için de doğru olmayan bir ayrımla sonuçlanabilecek bir araç yaratmaya çalışmak yerine, prototipleme için ideal bir araç ve yalın üretim için ideal olan ayrı bir araç (özel düzenler) ile gittik.

Bu, son düzeninizi en iyi standartlar HTML'sine dayanan bir şablon olarak yansıtan biraz daha fazla işin pahasına, her ikisinden de en iyi şekilde yararlanabileceğiniz anlamına gelir - ancak bir HTML uzmanı, almak için bu biraz fazladan işi yapmak isteyecektir. çıktıları mükemmel.


Özel panel düzenleri nasıl oluşturulur? Orada bunu yapmak için nasıl belgelerinde ayrıntılı bir rehber . İşte temel bir özet:

  1. Mevcut bir düzeni /sites/all/modules/panels/plugins/layoutsolmak için/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Yeni kopyadaki dosyaları yeni klasör adlarıyla eşleşecek şekilde yeniden adlandırın. .tpl.phpDosyada alt çizgi yerine kısa çizgi olması gerektiğini unutmayın .
  3. Tema bilgi dosyasına bir satır ekleyin: plugins[panels][layouts] = layoutsBu, Panellere bu temada özel mizanpajlarınızın olduğunu ve nerede olduklarını söyler (temanızdan layoutsözel mizanpajlar klasörünüze giden yol değilse dizeyi değiştirin )
  4. Dosyaları mükemmel, şık, minimal, anlamsal en iyi standart HTML ve CSS ile düzenleyin.

    • .incDosyayı adınız, kategorileriniz, dosya adlarınız gibi düzeninizle ilgili bilgilerle güncellemeyi de unutmayın .
    • theme.inc dosyasındaki .tpl.phpdosya uzantısı olmadan dosyanın dosya adıyla eşleşmelidir . Buraya girdiğiniz themedeğerin alt çizgileri tireye dönüştürülecektir.
    • Ayrıca .png, gerçek düzeninizi daha iyi yansıtmak için simgeyi düzenlemeyi de düşünün .
  5. Önbelleği temizleyin. Yeni düzeniniz Panellerde .incdosyada belirttiğiniz ad, kategori vb. İle birlikte bir seçenek olarak görünür . Kullanın.

1
Thnx man !, bu benim için öğleden sonra geri kalanı alacak ... Ama "hack" olmadan yapılabilir, böylece zihnimi biraz kolaylaştırır. BTW: Umarım bu yazı google'da bir şekilde ortaya çıkar çünkü sorunla ilgili herhangi bir mesaj bulamadık: S.
thecodeassassin

@Stephen Bir soru sorduktan ve kendi sorularıma ulaştıktan 6 ay sonra ne sıklıkta arama yaptığım için şaşırdım. Veya aynı SE sorusu ...
WernerCD

Bu soru ve cevabın çok yararlı olduğunu düşünüyorum, bu yüzden başlığında kabul edilen bir düzenleme önerdim. Ben de aynı soruyu orada kendime sordum: drupal.stackexchange.com/questions/69807/theming-panels-html yinelenen
George Katsanos

5

Paneller için biçimlendirme çıktısını kontrol etmek için Clean Markup Drupal 7 modülünü de düşünebilirsiniz .

Bu sayfayı tarayıcıda aradım ve user568458 tarafından verilen gerçekten iyi kapsamlı cevap da dahil olmak üzere bundan bir söz bulamadım.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.