Alterando o HTML produzido pelos painéis: É possível?


15

Eu gosto de usar painéis, no entanto, os painéis são uma dor de cabeça por causa da enorme quantidade de divs que gera. Além disso, as classes que se aplicam a essas divs não fazem sentido e são muito volumosas também. Causando confusão entre meus colegas de front-end.

Para mostrar a saída que eles geram:

Saída por painéis

O problema é que eu estou usando o 960.gs e os painéis adicionando suas próprias classes e estrutura div volumosa, fazendo-me ter que substituir suas classes. Isso é algo que eu não quero fazer, quero limpar os divs. Há alguma maneira de fazer isso?

Editar:

O que fiz para limpar algumas divs que considerei inúteis:

A partir da linha # 388 em Flexible.inc (painéis / plugins / layouts / flexível)

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

Na verdade, fiz uma cópia do layout flexível e editei esse, mas se eu tivesse mais tempo nesse projeto, criaria um plugin mais limpo para isso.

Nota: Esta não é a melhor solução, foi o caminho mais rápido possível para alcançar meu objetivo. Criar o seu próprio plugin pequeno é o melhor caminho a percorrer, você sempre pode usar um dos plugins existentes como base.

Respostas:


19

Eu olhei para esse problema antes. Aqui está o problema que você deseja ler . Parece maluco no começo, mas na verdade existem boas razões para isso.

Conclusão: pense nos Layouts flexíveis dos painéis como uma ferramenta de prototipagem . Usá-lo para experimentar e projectos de idéias em desenvolvimento, teste, de testes de usuário etc, então quando você tem o layout perfeito assinado, implementá-lo para a produção com batata frita, HTML limpo, otimizado-mão como um layout de painéis personalizados (mais naqueles abaixo).

Aqui está um rápido resumo de por que é assim, com base no problema ao qual vinculei:

  • A saída HTML dos painéis precisa de toda essa marcação maluca para poder acomodar os layouts flexíveis mais loucos que alguém poderia querer criar - pense em cargas de fluido aninhado e regiões fixas lado a lado.
  • Nada gerado automaticamente será bom o suficiente para os puristas de HTML; portanto, o pessoal do Panels não tentou mantê-los felizes dentro do recurso de layouts flexíveis . Portanto, não existe um algoritmo otimizador de HTML que tente reduzir o HTML gerado pelo seu layout ao mínimo necessário, porque, por melhor que seja, ainda não seria o HTML dos melhores padrões.
  • Algo que eles não mencionam: se houvesse um otimizador, certas alterações no layout causariam o desaparecimento de divs e classes agora redundantes. Se você retirou o CSS desses, seria necessário reescrevê-lo na maioria das vezes que fizer uma pequena alteração no layout flexível de painéis. Isso significa que, se tentassem (e falhassem) transformar os Layouts flexíveis de painéis em uma ferramenta de produção com os melhores padrões, eles também a teriam enfraquecido como uma ferramenta de prototipagem.
  • Você pode obter uma saída HTML limpa e enxuta de painéis . O fluxo de trabalho esperado, lendo nas entrelinhas, é que acredito em algo assim:
    • Você usa layouts flexíveis de painéis durante o desenvolvimento inicial, enquanto experimenta idéias.
    • Depois de escolher um layout específico, se você quiser HTML limpo, implemente-o usando um layout personalizado, usando apenas a quantidade precisa de marcação HTML necessária para o layout, com as classes, semânticas etc. adequadas para o seu site (como fazer abaixo )

Embora eu não tenha gostado no começo, na reflexão, acho que faz sentido. Em vez de tentar fazer o impossível e criar uma ferramenta perfeita tanto para a prototipagem quanto para os melhores padrões em um contexto de produção - que têm necessidades muito diferentes e só podem resultar em um comprometimento que não é adequado para ambos - eles foi com uma ferramenta ideal para prototipagem e outra ferramenta separada (layouts personalizados) ideal para produção enxuta.

Isso significa que você pode obter o melhor de ambos, com o custo de um pouco mais de trabalho implementando seu layout final como um modelo com base nos melhores padrões HTML - mas um purista de HTML desejará fazer um pouco de trabalho extra de qualquer maneira para obter sua saída perfeita.


Como criar layouts de painéis personalizados? um guia detalhado na documentação sobre como fazer isso . Aqui está um rápido resumo básico:

  1. Copie um layout existente /sites/all/modules/panels/plugins/layoutspara se tornar/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. Renomeie os arquivos na nova cópia para corresponder ao novo nome da pasta. Observe que o .tpl.phparquivo deve ter hífens em vez de sublinhados.
  3. Adicionar uma linha ao arquivo de informações do tema: plugins[panels][layouts] = layoutsIsso indica aos painéis que você tem layouts personalizados nesse tema e onde eles estão (substitua a sequência layoutsse não for o caminho do tema para a pasta de layouts personalizados)
  4. Edite os arquivos com seus HTML e CSS perfeitos, elegantes, mínimos e semânticos.

    • Não se esqueça de atualizar também o .incarquivo com informações sobre o layout, como nome, categorias, nomes de arquivos etc.
    • themeno arquivo .inc deve corresponder ao .tpl.phpnome do arquivo, sem a extensão. Quaisquer sublinhados inseridos aqui no themevalor serão convertidos em hífens.
    • Considere também editar o .pngícone para refletir melhor seu layout real.
  5. Limpe o cache. Seu novo layout aparece como uma opção em Painéis com o nome, categoria, etc. especificados no .incarquivo. Use-o.

11
Thnx man !, isso vai levar o resto da tarde para mim ... Mas isso pode ser feito sem "piratear", para facilitar a minha mente. Btw: espero que este post apareça no google de alguma forma, porque não consegui encontrar nenhum post sobre o assunto: S.
Thecodeassassin

@ Stephen Estou surpreso com a frequência com que procuro algo 6 meses ou mais depois de fazer uma pergunta e terminar com minhas próprias perguntas. Ou a mesma pergunta SE ...
WernerCD

Eu acho que essa pergunta e resposta são super úteis, portanto sugeri uma edição do título que foi aceita. Eu fiz a mesma pergunta me lá: drupal.stackexchange.com/questions/69807/theming-panels-html que é uma duplicata
George Katsanos

5

Você também pode considerar o módulo Clean Markup Drupal 7 para controlar a saída de marcação para painéis.

Pesquisei esta página no navegador e não encontrei uma menção a ela, inclusive na resposta abrangente realmente boa fornecida pelo usuário568458.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.