Изменение HTML, созданного Panels: возможно ли это?

15

Мне нравится использовать панели, но панели - это боль в стиле, потому что они генерируют огромное количество элементов div. Также классы, которые он применяет к этим элементам, не имеют смысла и слишком громоздки. Вызывает путаницу среди моих собратьев-фронтендеров.

Чтобы показать вам результат, который они генерируют:

Вывод на панели

Проблема в том, что я использую 960.gs и панели добавляют свои собственные классы и громоздкую структуру div, что заставляет меня переопределять их классы. Это то, что я не хочу делать, я хочу очистить div. Есть какой-либо способ сделать это?

Редактировать:

Что я сделал, чтобы очистить некоторые div, которые я посчитал бесполезными:

Начиная со строки № 388 в Flexible.inc (панели / плагины / макеты / гибкие)

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

Я на самом деле сделал копию гибкого макета и отредактировал ее, но если бы у меня было больше времени на этот проект, я бы создал более чистый плагин для этого.

Примечание: это не лучшее решение, это был самый быстрый путь для достижения моей цели. Создание собственного небольшого плагина - лучший способ, вы всегда можете использовать один из существующих плагинов в качестве основы.

thecodeassassin
источник

Ответы:

19

Я изучал эту проблему раньше. Вот проблема, которую вы хотите прочитать . Сначала это кажется сумасшедшим, но на самом деле для этого есть веские причины.

Итог: воспринимайте Panels Flexible Layouts как инструмент для создания прототипов . Используйте его, чтобы опробовать и составить проекты идей по разработке, постановке, пользовательскому тестированию и т. Д., А затем, когда у вас будет подписан идеальный макет, внедрите его для производства с чистым, четким, оптимизированным вручную HTML в качестве пользовательского макета Panels (подробнее на тех, что ниже).

Вот краткое изложение того, почему это так, исходя из той проблемы, с которой я связан:

  • Для вывода HTML-панелей нужна вся эта сумасшедшая разметка, чтобы можно было разместить самые сумасшедшие гибкие макеты, какие только можно захотеть создать - подумайте о множестве вложенных флюидов и фиксированных областей рядом.
  • Ничего автоматически сгенерированного не будет достаточно для пуристов HTML, поэтому ребята из Panels не пытались порадовать их функцией гибких макетов . Так что нет алгоритма оптимизатора HTML, который пытался бы сократить HTML-код, сгенерированный вашим макетом, до минимума, потому что, как бы хорошо он ни был, он все равно не был бы лучшим стандартом HTML.
  • Что-то, о чем они не упоминают: если бы существовал такой оптимизатор, некоторые изменения в макете привели бы к исчезновению теперь лишних элементов div и классов. Если вы повесили CSS на них, вам нужно будет переписывать свой CSS в большинстве случаев, когда вы вносите небольшие изменения в гибкий макет Panels. Это означает, что если бы они попытались (и не смогли) превратить Panels Flexible Layouts в лучший инструмент производства стандартов, они бы также ослабили его как инструмент для создания прототипов.
  • Вы можете получить чистый, худой вывод HTML панелей . Ожидаемый рабочий процесс, чтение между строк, я считаю, что-то вроде этого:
    • Вы используете Гибкие макеты Panels во время ранней разработки, испытывая идеи.
    • После того, как вы остановились на конкретном макете, если вам нужен чистый HTML, вы реализуете его с помощью пользовательского макета, используя только точное количество разметки HTML, которое требуется макету, только с правильными классами, семантикой и т. Д. Для вашего сайта (инструкции ниже). ).

Поначалу мне это не нравилось, но, подумав, думаю, это имеет смысл. Вместо того, чтобы пытаться сделать невозможное и создать один инструмент, который идеально подходит как для прототипирования, так и для наилучших стандартов в производственном контексте, - которые оба имеют совершенно разные потребности и могут привести только к компромиссу, который не совсем подходит для них - они Мы использовали один инструмент, который идеально подходит для создания прототипов, и другой отдельный инструмент (нестандартные макеты), который идеально подходит для бережливого производства.

Это означает, что вы можете получить лучшее от обоих, затратив немного больше усилий на реализацию вашего окончательного макета в качестве шаблона, основанного на лучших стандартах HTML - но пуристу HTML все равно понадобится выполнить эту небольшую дополнительную работу, чтобы получить их выход идеален.


Как создавать собственные макеты панелей? В документации есть подробное руководство о том, как это сделать . Вот краткое краткое изложение:

  1. Скопируйте существующий макет из, /sites/all/modules/panels/plugins/layoutsчтобы стать/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Переименуйте файлы в новой копии, чтобы соответствовать их новому имени папки. Обратите внимание, что .tpl.phpфайл должен иметь дефисы вместо подчеркивания.
  3. Добавить строку в информационный файл темы: plugins[panels][layouts] = layoutsэто сообщает Panels о том, что у вас есть пользовательские макеты в этой теме и где они находятся (замените строку, layoutsесли это не путь от вашей темы к вашей папке пользовательских макетов)
  4. Отредактируйте файлы с помощью вашего идеального, гладкого, минимального, семантического HTML-кода с лучшими стандартами.

    • Не забудьте также обновить .incфайл информацией о вашем макете, такой как имя, категории, имена файлов и т. Д.
    • themeв файле .inc должно совпадать с .tpl.phpименем файла без расширения. Любые подчеркивания, которые вы вводите здесь в themeзначение, будут преобразованы в дефисы.
    • Также рассмотрите возможность редактирования .pngиконки, чтобы лучше отразить фактический макет.
  5. Очистить кеш. Ваш новый макет отображается в виде панели в виде параметра с именем, категорией и т. Д., Указанными в .incфайле. Используй это.
user56reinstatemonica8
источник
1
Thnx человек !, это займет остаток дня для меня ... Но это может быть сделано без "взлома", так что мой разум немного расслабляется. Кстати: я надеюсь, что это сообщение появляется в Google как-то, потому что я не мог найти какие-либо сообщения по этой проблеме: S.
thecodeassassin
@Stephen Я удивлен тем, как часто я ищу что-то 6 месяцев + после того, как я задаю вопрос и заканчиваю своими собственными вопросами. Или тот же вопрос SE ...
WernerCD
Я думаю, что этот вопрос и ответ очень полезны, поэтому я предложил изменить его название, которое было принято. Я сам задал тот же вопрос: drupal.stackexchange.com/questions/69807/theming-panels-html, который является дубликатом
Джордж Кацанос,
5

Вы также можете рассмотреть модуль Clean Markup Drupal 7 для управления выводом разметки для панелей.

Я искал эту страницу в браузере и уже не нашел упоминания о ней, в том числе в действительно хорошем исчерпывающем ответе пользователя 568458.

therobyouknow
источник