Изменение HTML-кода, создаваемого панелями: Возможно ли это?


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

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

Output by panels

Проблема в том, что я использую 960.gs и панели добавляют свои собственные классы и громоздкую структуру 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";

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

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

Author: kenorb, 2012-08-10

2 answers

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

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

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

  • HTML-вывод панелей требует всей этой сумасшедшей разметки, чтобы иметь возможность размещать самые сумасшедшие гибкие макеты, которые кто-либо может захотеть создать - подумайте о множестве вложенных текучих и фиксированных областей бок о бок.
  • Ничто автоматически сгенерированное не будет достаточно хорошим для HTML-пуристов, поэтому ребята из панелей не пытались сделать их счастливыми в рамках функция гибких компоновок. Таким образом, нет алгоритма оптимизатора HTML, который пытается свести HTML, сгенерированный вашим макетом, к минимуму, потому что, каким бы хорошим он ни был, он все равно не будет соответствовать лучшим стандартам HTML.
  • Кое-что, о чем они не упоминают: если бы такой оптимизатор существовал, некоторые изменения в макете привели бы к исчезновению избыточных теперь divs и классов. Если бы вы повесили CSS на них, вам пришлось бы переписывать CSS в большинстве случаев, когда вы вносите небольшие изменения в панели гибкая планировка. Это означает, что если бы они попытались (и потерпели неудачу) превратить гибкие макеты панелей в инструмент производства по лучшим стандартам, они также ослабили бы его как инструмент прототипирования.
  • Вы можете получить чистый, скудный вывод HTML панелей . Ожидаемый рабочий процесс, читая между строк, я полагаю, что-то вроде этого:
    • Вы используете гибкие макеты панелей на ранних стадиях разработки, пробуя идеи.
    • Как только вы остановитесь на определенном макете, если вам нужен чистый 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 Это сообщит панелям, что у вас есть пользовательские макеты в этой теме, и где они находятся (замените строку layouts, если это не путь от вашей темы к папке пользовательских макетов)
  4. Редактируйте файлы с помощью вашего идеального, гладкого, минимального, семантического HTML и CSS лучших стандартов.

    • Не забудьте также обновить файл .inc информацией о вашем макете, такой как имя, категории, имена файлов и т.д.
    • theme в файле .inc должно совпадать с именем файла .tpl.php без расширения. Любые подчеркивания, которые вы вводите здесь в значение theme, будут преобразовано в дефисы.
    • Также рассмотрите возможность редактирования значка .png, чтобы лучше отразить ваш фактический макет.
  5. Очистите кэш. Ваш новый макет отображается в качестве опции на панелях с именем, категорией и т. Д., Которые вы указали в файле .inc. Используйте его.
 19
Author: user56reinstatemonica8, 2016-04-11 13:05:52

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

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

 5
Author: therobyouknow, 2013-09-18 10:13:03