Modifica dell'HTML prodotto dai pannelli: è possibile?

Mi piace usare i pannelli, tuttavia i pannelli sono una seccatura per lo stile a causa della grande quantità di div che genera. Anche le classi che applica a quei div non hanno senso e sono troppo ingombranti. Causando confusione tra i miei compagni front-end.

Per mostrarti l'output che generano:

Il problema è che sto usando 960.gs e i pannelli aggiungono le loro classi e la loro struttura ingombrante div, costringendomi a scavalcare le loro classi. Questo è qualcosa che non voglio fare, voglio ripulire i div. C'è un modo per fare questo?

Modificare:

Quello che ho fatto per ripulire alcuni div che ho considerato inutile:

A partire dalla linea 388 in flexible.inc (pannelli / plugin / layout / flessibile)

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

In realtà ho fatto una copia del layout flessibile e modificato quello, ma se avessi più tempo su questo progetto, creerei un plugin più pulito per questo.

Nota: questa non è la soluzione migliore, questa è stata la strada più veloce possibile per raggiungere il mio obiettivo. Creare il tuo piccolo plugin è il modo migliore per andare, puoi sempre usare uno dei plugin esistenti come base.

Ho già esaminato questo problema in precedenza. Ecco il problema che vuoi leggere . All'inizio sembra pazzesco, ma in realtà ci sono buone ragioni per essere così.

Conclusione: pensare ai layout flessibili dei pannelli come uno strumento di prototipazione . Usalo per provare e redigere idee in sviluppo, messa in scena, test utente ecc., Quindi quando hai il layout perfetto firmato, implementalo per la produzione con HTML pulito, nitido e ottimizzato a mano come layout di pannelli personalizzati (altro su quelli sotto).

Ecco un breve riassunto del perché è così, in base a quel problema a cui ho collegato:

• L'output HTML di Panels ha bisogno di tutto quel markup pazzo per essere in grado di soddisfare i layout flessibili più folli che chiunque possa desiderare di creare - pensa a un sacco di fluido nidificato e regioni fisse fianco a fianco.
• Nulla generato automaticamente sarà abbastanza buono per i puristi HTML, quindi i ragazzi dei pannelli non hanno cercato di renderli felici all'interno della funzionalità di layout flessibile . Quindi non esiste un algoritmo di ottimizzazione HTML che tenti di ridurre al minimo l'HTML generato dal layout, perché non importa quanto sia buono, non sarebbe comunque l'HTML dei migliori standard.
• Qualcosa che non menzionano: se ci fosse un tale ottimizzatore, alcune modifiche al layout farebbero scomparire div e classi ora ridondanti. Se hai sospeso CSS su questi, dovrai riscrivere il tuo CSS la maggior parte delle volte che apporti una piccola modifica a un layout flessibile dei pannelli. Ciò significa che se avessero provato (e non fossero riusciti) a trasformare i pannelli flessibili in pannelli in uno strumento di produzione dei migliori standard, lo avrebbero anche indebolito come strumento di prototipazione.
• È possibile ottenere un output HTML dei pannelli pulito e snello . Il flusso di lavoro atteso, leggendo tra le righe, credo sia qualcosa del genere:
  • Utilizzate i layout flessibili dei pannelli durante lo sviluppo iniziale, mentre provate le idee.
  • Una volta stabilito un determinato layout, se si desidera un HTML pulito, lo si implementa utilizzando un layout personalizzato, utilizzando solo la quantità precisa di markup HTML di cui il layout necessita con le giuste classi, semantica, ecc. Per il proprio sito (come fare ).

Anche se all'inizio non mi è piaciuto, penso che abbia senso. Invece di provare a fare l'impossibile e creare uno strumento perfetto sia per la prototipazione sia per i migliori standard in un contesto di produzione - che hanno entrambi esigenze molto diverse e potrebbero solo portare a un compromesso che non era del tutto giusto per entrambi - essi abbiamo scelto uno strumento ideale per la prototipazione e un altro strumento separato (layout personalizzati) ideale per una produzione snella.

Ciò significa che puoi ottenere il meglio da entrambi, al costo di un po 'più di lavoro impiantando il layout finale come modello basato sull'HTML dei migliori standard - ma un purista HTML vorrà comunque fare quel po' di lavoro extra per ottenere la loro uscita perfetta.

Come creare layout di pannelli personalizzati? C'è una guida dettagliata nella documentazione su come farlo . Ecco un breve riepilogo di base:

1. Copia un layout esistente da /sites/all/modules/panels/plugins/layoutsper diventare/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
2. Rinominare i file nella nuova copia in modo che corrispondano al nome della nuova cartella. Si noti che il .tpl.phpfile dovrebbe contenere trattini anziché caratteri di sottolineatura.
3. Aggiungi una linea al file di informazioni sul tema: plugins[panels][layouts] = layoutsquesto dice ai pannelli che hai layout personalizzati in questo tema e dove sono (sostituisci la stringa layoutsse non è il percorso dal tuo tema alla cartella dei layout personalizzati)

4. Modifica i file con HTML e CSS perfetti, eleganti, minimi e semantici.

   • Non dimenticare di aggiornare anche il .incfile con informazioni sul layout come nome, categorie, nomi di file, ecc.
   • themenel file .inc dovrebbe corrispondere al .tpl.phpnome file del file, senza l'estensione. Tutti i caratteri di sottolineatura che inserisci qui nel themevalore verranno convertiti in trattini.
   • Considera anche di modificare l' .pngicona per riflettere meglio il tuo layout attuale.
5. Cancella la cache. Il nuovo layout viene visualizzato come opzione in Pannelli con il nome, la categoria, ecc. Specificati nel .incfile. Usalo

È inoltre possibile prendere in considerazione il modulo Clean Markup Drupal 7 per il controllo dell'output di markup per i pannelli.

Ho cercato questa pagina nel browser e non ne ho già parlato, inclusa l'ottima risposta completa fornita da user568458.