web-dev-qa-db-fra.com

Changer le HTML produit par les Panels: est-ce possible?

J'aime utiliser des panneaux, mais les panneaux sont difficiles à coiffer en raison de la quantité massive de div qu'elle génère. De plus, les classes qu'il applique à ces divisions n'ont aucun sens et sont également trop volumineuses. Causant la confusion parmi mes collègues front-enders.

Pour vous montrer la sortie qu'ils génèrent:

Output by panels

Le problème est que j'utilise 960.gs et les panneaux ajoutent leurs propres classes et une structure div volumineuse, ce qui me oblige à remplacer leurs classes. C'est quelque chose que je ne veux pas faire, je veux nettoyer les divs. Y a-t-il un moyen de faire ça?

Modifier:

Ce que j'ai fait pour nettoyer des div que je considérais comme inutiles:

À partir de la ligne # 388 dans flexible.inc (panneaux/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";

J'ai en fait fait une copie de la mise en page flexible et édité celle-ci, mais si j'avais plus de temps sur ce projet, je créerais un plugin plus propre pour cela.

Note: Ce n'est pas la meilleure solution, c'était la voie la plus rapide possible pour atteindre mon objectif. Créer votre propre petit plugin est la meilleure façon de procéder, vous pouvez toujours utiliser l'un des plugins existants comme base.

7themingpanels
15
thecodeassassin

J'ai déjà étudié cette question. Voici le problème que vous souhaitez lire . Cela semble fou au début, mais il y a en fait de bonnes raisons pour que ce soit comme ça.

Conclusion: considérez les Panneaux Flexible Layouts comme un outil de prototypage . Utilisez-le pour essayer et rédiger des idées dans le développement, la mise en scène, les tests utilisateur, etc., puis lorsque vous avez signé la mise en page parfaite, implémentez-la pour la production avec du HTML propre, net et optimisé à la main en tant que personnalisé Disposition des panneaux (plus sur ceux ci-dessous).

Voici un bref résumé des raisons pour lesquelles il en est ainsi, en fonction de ce problème auquel je suis lié:

  • La sortie HTML des panneaux a besoin de tout ce balisage fou pour pouvoir accueillir les mises en page flexibles les plus folles que l'on puisse créer - pensez à des charges de fluide imbriqué et de régions fixes côte à côte.
  • Rien de généré automatiquement ne sera assez bon pour les puristes HTML, donc les gars de Panels n'ont pas essayé de les satisfaire dans la fonctionnalité de mise en page flexible. Il n'y a donc pas d'algorithme d'optimiseur HTML qui essaie de réduire le HTML généré par votre mise en page au strict minimum, car peu importe sa qualité, ce ne serait toujours pas le meilleur standard HTML.
  • Quelque chose qu'ils ne mentionnent pas: s'il y avait un tel optimiseur, certaines modifications de la disposition entraîneraient la disparition des divisions et classes désormais redondantes. Si vous avez suspendu CSS à ceux-ci, vous devrez réécrire votre CSS la plupart du temps lorsque vous apportez une petite modification à une disposition flexible des panneaux. Cela signifie que s'ils avaient essayé (et échoué) de faire des mises en page flexibles des panneaux un outil de production aux meilleures normes, ils l'auraient également affaibli en tant qu'outil de prototypage.
  • Vous pouvez obtenir une sortie HTML propre et légère des panneaux . Le flux de travail attendu, en lisant entre les lignes, est, je crois, quelque chose comme ceci:
    • Vous utilisez les panneaux de mise en page flexible pendant les premiers développements, tout en essayant des idées.
    • Une fois que vous avez choisi une mise en page particulière, si vous voulez du HTML clair, vous l'implémentez en utilisant une mise en page personnalisée, en utilisant uniquement la quantité précise de balisage HTML dont la mise en page a besoin avec juste les bonnes classes, la sémantique, etc. pour votre site (comment faire ci-dessous ).

Bien que je ne l'aimais pas au début, à la réflexion, je pense que cela a du sens. Plutôt que d'essayer de faire l'impossible et de créer un outil parfait à la fois pour le prototypage et pour les meilleures normes dans un contexte de production - qui ont tous deux des besoins très différents et ne peuvent aboutir qu'à un compromis qui n'était pas tout à fait approprié - ils 'ai opté pour un outil idéal pour le prototypage et un autre outil séparé (dispositions personnalisées) idéal pour la production allégée.

Cela signifie que vous pouvez tirer le meilleur parti des deux, au prix d'un peu plus de travail implémentant votre mise en page finale en tant que modèle basé sur les meilleurs standards HTML - mais un puriste HTML voudra faire ce petit travail supplémentaire de toute façon pour obtenir leur sortie est parfaite.

Comment créer des dispositions de panneaux personnalisés? Il y a n guide détaillé dans la documentation sur la façon de le faire . Voici un bref résumé de base:

  1. Copiez une mise en page existante de /sites/all/modules/panels/plugins/layouts devenir /sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Renommez les fichiers dans la nouvelle copie pour qu'ils correspondent à leur nouveau nom de dossier. Notez que le .tpl.php le fichier doit avoir des tirets au lieu de traits de soulignement.
  3. Ajoutez une ligne au fichier d'informations sur le thème: plugins[panels][layouts] = layouts Cela indique aux panneaux que vous avez des dispositions personnalisées dans ce thème et où elles se trouvent (remplacez la chaîne layouts si ce n'est pas le chemin de votre thème vers votre dossier de dispositions personnalisées)

  4. Modifiez les fichiers avec votre code HTML et CSS parfait, élégant, minimal et sémantique.

    • N'oubliez pas de mettre également à jour le .inc fichier contenant des informations sur votre mise en page comme le nom, les catégories, les noms de fichiers, etc.
    • theme dans le fichier .inc doit correspondre à .tpl.php nom de fichier du fichier, sans l'extension. Tous les traits de soulignement que vous entrez ici dans la valeur theme seront convertis en tirets.
    • Pensez également à modifier le .png icône pour mieux refléter votre mise en page réelle.
  5. Videz le cache. Votre nouvelle mise en page apparaît comme une option dans les panneaux avec le nom, la catégorie, etc. que vous avez spécifié dans le .inc fichier. Utilise le.
19
user56reinstatemonica8

Vous pouvez également envisager le module Clean Markup Drupal 7 pour contrôler la sortie de balisage pour les panneaux).

J'ai cherché cette page dans le navigateur et je n'en ai pas encore trouvé mention, y compris dans la très bonne réponse complète donnée par user568458.

5
therobyouknow