Ändern des von Panels erzeugten HTML: Ist es möglich?

Ich benutze gerne Panels, aber das Stylen von Panels ist wegen der enormen Menge an Divs, die es erzeugt, ein Problem. Auch die Klassen, die für diese Divs gelten, ergeben keinen Sinn und sind auch viel zu sperrig. Verwirrung unter meinen Frontendkollegen.

So zeigen Sie die von ihnen generierte Ausgabe:

Das Problem ist, dass ich 960.gs verwende und Panels ihre eigenen Klassen und sperrige Div-Struktur hinzufüge, so dass ich ihre Klassen überschreiben muss. Das ist etwas, was ich nicht tun möchte, ich möchte die divs aufräumen. Gibt es eine Möglichkeit, dies zu tun?

Bearbeiten:

Was ich getan habe, um einige Divs zu säubern, die ich für nutzlos hielt:

Ab Zeile 388 in flexible.inc (Panels / Plugins / Layouts / flexible)

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

Ich habe tatsächlich eine Kopie des flexiblen Layouts erstellt und dieses bearbeitet, aber wenn ich mehr Zeit für dieses Projekt hätte, würde ich ein saubereres Plugin dafür erstellen.

Hinweis: Dies ist nicht die beste Lösung. Dies war der schnellste Weg, um mein Ziel zu erreichen. Das Erstellen eines eigenen kleinen Plugins ist der beste Weg. Sie können immer eines der vorhandenen Plugins als Basis verwenden.

Ich habe dieses Problem bereits untersucht. Hier ist die Ausgabe, die Sie lesen möchten . Es scheint zunächst verrückt zu sein, aber es gibt gute Gründe dafür.

Fazit: Stellen Sie sich Panels Flexible Layouts als Prototyping-Tool vor . Verwenden Sie es, um Ideen in Entwicklung, Inszenierung, Benutzertests usw. auszuprobieren und zu entwerfen. Wenn Sie das perfekte Layout erhalten haben, implementieren Sie es für die Produktion mit klarem, klarem und handoptimiertem HTML als benutzerdefiniertes Panel-Layout (mehr auf die unten).

Hier ist eine kurze Zusammenfassung, warum es so ist, basierend auf dem Thema, mit dem ich verbunden bin:

• Die HTML-Ausgabe von Panels benötigt all das verrückte Markup, um die verrücktesten, flexiblen Layouts zu erstellen, die man sich nur wünschen kann - denken Sie an jede Menge verschachtelter flüssiger und fester Bereiche nebeneinander.
• Nichts, was automatisch generiert wird, ist gut genug für HTML-Puristen, daher haben die Panels-Leute nicht versucht, sie mit der Funktion für flexible Layouts zufrieden zu stellen . Es gibt also keinen HTML-Optimierungsalgorithmus, der versucht, den von Ihrem Layout generierten HTML-Code auf das Nötigste zu beschränken, denn egal wie gut er war, es wäre immer noch kein HTML-Code mit den besten Standards.
• Etwas, das sie nicht erwähnen: Wenn es ein solches Optimierungsprogramm gäbe, würden bestimmte Änderungen am Layout dazu führen, dass jetzt redundante Divs und Klassen verschwinden. Wenn Sie CSS von diesen abhängen, müssen Sie Ihr CSS meistens neu schreiben, wenn Sie eine kleine Änderung an einem flexiblen Layout für Panels vornehmen. Das heißt, wenn sie versucht hätten (und es nicht geschafft hätten), Panels Flexible Layouts zu einem Produktionswerkzeug mit den besten Standards zu machen, hätten sie es auch als Prototyping-Werkzeug geschwächt.
• Sie können eine saubere, schlanke Panels-HTML-Ausgabe erhalten . Der erwartete Arbeitsablauf beim Lesen zwischen den Zeilen ist meiner Meinung nach ungefähr so:
  • Sie verwenden Panels Flexible Layouts in der frühen Entwicklungsphase, während Sie Ideen ausprobieren.
  • Wenn Sie sich für ein bestimmtes Layout entschieden haben und sauberes HTML wünschen, implementieren Sie es mit einem benutzerdefinierten Layout, wobei Sie nur die genaue Menge an HTML-Markup verwenden, die das Layout mit den richtigen Klassen, Semantiken usw. für Ihre Site benötigt (siehe unten) ).

Obwohl es mir anfangs nicht gefallen hat, halte ich es für sinnvoll, darüber nachzudenken. Anstatt das Unmögliche zu versuchen und ein Werkzeug zu entwickeln, das sowohl für das Prototyping als auch für Best-Standards in einem Produktionskontext perfekt ist - beide haben sehr unterschiedliche Anforderungen und könnten nur zu einem Kompromiss führen, der für beide nicht ganz richtig war - sie Ich habe ein Werkzeug gewählt, das sich ideal für das Prototyping eignet, und ein anderes Werkzeug (benutzerdefinierte Layouts), das sich ideal für die schlanke Produktion eignet.

Dies bedeutet, dass Sie das Beste aus beiden Möglichkeiten herausholen können, wenn Sie etwas mehr Arbeit aufwenden, um Ihr endgültiges Layout als Vorlage zu implementieren, die auf HTML nach den besten Standards basiert. Ein HTML-Purist wird jedoch trotzdem ein wenig zusätzliche Arbeit auf sich nehmen wollen ihre Ausgabe perfekt.

Wie erstelle ich benutzerdefinierte Panel-Layouts? Eine ausführliche Anleitung finden Sie in der Dokumentation . Hier ist eine kurze grundlegende Zusammenfassung:

1. Kopieren Sie ein vorhandenes Layout aus /sites/all/modules/panels/plugins/layouts, um zu werden/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
2. Benennen Sie die Dateien in der neuen Kopie um, damit sie dem neuen Ordnernamen entsprechen. Beachten Sie, dass die .tpl.phpDatei Bindestriche anstelle von Unterstrichen enthalten sollte.
3. Hinzufügen einer Zeile zur Design-Info-Datei: plugins[panels][layouts] = layoutsDies teilt Panels mit, dass Sie benutzerdefinierte Layouts in diesem Design haben und wo sich diese befinden (ersetzen Sie die Zeichenfolge, layoutswenn dies nicht der Pfad von Ihrem Design zu Ihrem benutzerdefinierten Layout-Ordner ist).

4. Bearbeiten Sie die Dateien mit Ihrem perfekten, schlanken, minimalen und semantischen HTML- und CSS-Standard.

   • Vergessen Sie nicht, die .incDatei auch mit Informationen über Ihr Layout wie Name, Kategorien, Dateinamen usw. zu aktualisieren .
   • themein der .inc-Datei sollte mit dem .tpl.phpDateinamen der Datei übereinstimmen , ohne die Erweiterung. Alle Unterstriche, die Sie hier in den themeWert eingeben, werden in Bindestriche umgewandelt.
   • Bearbeiten Sie auch das .pngSymbol, um das tatsächliche Layout besser wiederzugeben.
5. Leeren Sie den Cache. Ihr neues Layout wird als Option in den Bedienfeldern mit dem Namen, der Kategorie usw. angezeigt, die Sie in der .incDatei angegeben haben. Benutze es.

Sie können auch das Modul Clean Markup Drupal 7 zur Steuerung der Markup-Ausgabe für Panels in Betracht ziehen .

Ich habe diese Seite im Browser durchsucht und keine Erwähnung gefunden, auch nicht in der wirklich guten umfassenden Antwort von user568458.