Zmiana kodu HTML produkowanego przez panele: czy to możliwe?


15

Lubię używać paneli, jednak panele są uciążliwe w stylizacji z powodu ogromnej ilości div, które generuje. Również klasy, które stosuje do tych div, nie mają sensu i są również zbyt masywne. Powodując zamieszanie wśród moich kolegów z frontu.

Aby pokazać generowane dane wyjściowe:

Dane wyjściowe z paneli

Problem polega na tym, że używam 960.gs, a panele dodają własne klasy i nieporęczne struktury div, co powoduje, że muszę zastąpić ich klasy. To jest coś, czego nie chcę robić, chcę wyczyścić div. Czy jest na to sposób?

Edytować:

Co zrobiłem, aby wyczyścić niektóre div, które uważałem za bezużyteczne:

Począwszy od wiersza # 388 w pliku elast.in.in (panele / wtyczki / układy / elastyczne)

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

Zrobiłem kopię elastycznego układu i zredagowałem ten, ale gdybym miał więcej czasu na ten projekt, stworzyłbym do tego czystszą wtyczkę.

Uwaga: To nie jest najlepsze rozwiązanie, to była najszybsza możliwa droga do osiągnięcia mojego celu. Tworzenie własnej małej wtyczki to najlepsza droga, zawsze możesz użyć jednej z istniejących wtyczek jako podstawy.

Odpowiedzi:


19

Wcześniej sprawdziłem ten problem. Oto problem, który chcesz przeczytać . Na początku wydaje się to szalone, ale istnieją naprawdę dobre powody, aby tak wyglądać.

Konkluzja: pomyśl o elastycznych układach paneli jako narzędziu do prototypowania . Skorzystaj z niego, aby wypróbować i opracować pomysły na potrzeby programowania, tworzenia scenariuszy, testowania użytkowników itp., A następnie, gdy uzyskasz doskonały podpis, zaimplementuj go do produkcji za pomocą czystego, wyraźnego, zoptymalizowanego ręcznie HTML jako niestandardowego układu paneli (więcej na poniższych).

Oto krótkie podsumowanie tego, dlaczego tak jest, w oparciu o problem, który powiązałem z:

  • Wyjście HTML panelu wymaga wszystkich tych szalonych znaczników, aby móc dostosować się do najbardziej szalonych, elastycznych układów, jakie każdy może chcieć stworzyć - pomyśl o mnóstwie zagnieżdżonych płynów i ustalonych regionów obok siebie.
  • Nic automatycznie generowanego nie będzie wystarczające dla purystów HTML, więc faceci Panels nie próbowali zapewnić im zadowolenia w ramach funkcji elastycznych układów . Nie ma więc algorytmu optymalizatora HTML, który próbowałby zredukować HTML generowany przez twój układ do absolutnego minimum, ponieważ bez względu na to, jak dobry był, nadal nie byłby HTML o najlepszym standardzie.
  • Coś, o czym nie wspominają: gdyby istniał taki optymalizator, pewne zmiany w układzie spowodowałyby zniknięcie zbędnych teraz div i klas. Jeśli zawiesiłeś CSS na nich, będziesz musiał ponownie napisać CSS najczęściej, kiedy wprowadzasz niewielką zmianę w elastycznym układzie Paneli. Oznacza to, że gdyby próbowali (i nie udało się) przekształcić paneli w elastyczne układy w narzędzie produkcyjne o najwyższych standardach, osłabiliby je również jako narzędzie do prototypowania.
  • Możesz uzyskać czysty, szczupły panel HTML . Oczekiwany przepływ pracy, czytanie między wierszami, jest taki:
    • Korzystasz z elastycznych układów paneli na wczesnym etapie rozwoju, próbując pomysłów.
    • Jeśli zdecydujesz się na konkretny układ, jeśli chcesz mieć czysty HTML, zaimplementuj go przy użyciu niestandardowego układu, używając tylko dokładnej ilości znaczników HTML, których potrzebuje układ, z odpowiednimi klasami, semantyką itp. Dla Twojej witryny (instrukcje poniżej) ).

Choć na początku mi się to nie podobało, myślę, że ma to sens. Zamiast próbować robić niemożliwe i stworzyć jedno narzędzie, które idealnie nadaje się zarówno do prototypowania, jak i do zapewnienia najwyższych standardów w kontekście produkcyjnym - które mają bardzo różne potrzeby i mogą doprowadzić tylko do kompromisu, który nie byłby odpowiedni dla żadnego z nich - Nie ma już jednego narzędzia, które idealnie nadaje się do prototypowania, oraz innego oddzielnego narzędzia (niestandardowe układy), które idealnie nadaje się do szczupłej produkcji.

Oznacza to, że możesz uzyskać to, co najlepsze, kosztem nieco więcej pracy, tworząc ostateczny układ jako szablon oparty na HTML o najlepszych standardach - ale purysta HTML i tak będzie musiał wykonać trochę dodatkowej pracy, aby uzyskać ich wydajność idealna.


Jak tworzyć niestandardowe układy paneli? W dokumentacji znajduje się szczegółowy przewodnik, jak to zrobić . Oto krótkie podstawowe podsumowanie:

  1. Skopiuj istniejący układ z, /sites/all/modules/panels/plugins/layoutsaby zostać/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Zmień nazwy plików w nowej kopii, aby pasowały do ​​nazwy nowego folderu. Pamiętaj, że .tpl.phpplik powinien zawierać łączniki zamiast podkreślników.
  3. Dodaj wiersz do pliku informacyjnego motywu: plugins[panels][layouts] = layoutsinformuje panele, że masz niestandardowe układy w tym motywie i gdzie się znajdują (zamień ciąg, layoutsjeśli nie jest to ścieżka od motywu do folderu niestandardowych układów)
  4. Edytuj pliki za pomocą swojego doskonałego, eleganckiego, minimalnego, semantycznego, najlepszego standardu HTML i CSS.

    • Nie zapomnij również zaktualizować .incpliku o informacje o układzie, takie jak nazwa, kategorie, nazwy plików itp.
    • themew pliku .inc powinien pasować do .tpl.phpnazwy pliku, bez rozszerzenia. Wszelkie podkreślenia wprowadzone w themewartości zostaną zamienione na łączniki.
    • Weź również pod uwagę edycję .pngikony, aby lepiej odzwierciedlić swój rzeczywisty układ.
  5. Wyczyść pamięć podręczną. Nowy układ pojawia się jako opcja w panelach z nazwą, kategorią itp. Określoną w .incpliku. Użyj tego.

1
Dzięki człowieku, zajmie mi to resztę popołudnia ... Ale można to zrobić bez „hakowania”, co trochę uspokaja mój umysł. Przy okazji: mam nadzieję, że ten wpis jakoś się pojawi w Google, ponieważ nie mogłem znaleźć żadnych postów dotyczących problemu: S.
thecodeassassin

@Stephen Jestem zaskoczony, jak często szukam czegoś 6 miesięcy + po tym, jak zadam pytanie i skończę na własnych pytaniach. Lub to samo pytanie SE ...
WernerCD,

Myślę, że to pytanie i odpowiedź są bardzo przydatne, dlatego zasugerowałem edycję jego tytułu, która została zaakceptowana. Sam zadałem tam to samo pytanie: drupal.stackexchange.com/questions/69807/theming-panels-html, który jest duplikatem
George Katsanos

5

Możesz również rozważyć moduł Clean Markup Drupal 7 do sterowania wyjściem znaczników dla paneli.

Przeszukałem tę stronę w przeglądarce i nie znalazłem już o niej wzmianki, w tym w naprawdę dobrej kompleksowej odpowiedzi udzielonej przez user568458.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.