web-dev-qa-db-ja.com

パネルによって生成されたHTMLの変更：可能ですか？

私はパネルを使用するのが好きですが、大量のdivが生成されるため、パネルはスタイルの悩みの種です。また、これらのdivに適用されるクラスは意味がなく、非常にかさばることもあります。私の仲間のフロントエンドの間で混乱を引き起こしています。

それらが生成する出力を表示するには：

Output by panels

問題は、960.gsを使用していて、パネルが独自のクラスとかさばるdiv構造を追加しているため、クラスをオーバーライドする必要があることです。これは私がやりたくないことです。divをクリーンアップしたいのです。これを行う方法はありますか？

編集：

私が役に立たないと考えたいくつかのdivをクリーンアップするために私がしたこと：

Flex.incの388行目から（パネル/プラグイン/レイアウト/フレキシブル）

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

私は実際にフレキシブルレイアウトのコピーを作成して編集しましたが、このプロジェクトにもっと時間があれば、よりクリーンなプラグインを作成します。

注：これは最良の解決策ではありません。これは、私の目標を達成するための最速のルートでした。独自の小さなプラグインを作成するのが最善の方法です。既存のプラグインの1つをいつでもベースとして使用できます。

7themingpanels
15
thecodeassassin

以前にこの問題を調査しました。これが 読みたい問題 です。最初は気が狂っているように見えますが、実際にはこのようになっていることには十分な理由があります。

結論：Panels Flexible Layoutsはプロトタイピングツールと考えてください。開発、ステージング、ユーザーテストなどのアイデアを試してドラフトするために使用し、完璧なレイアウトにサインオフしたら、クリーンで鮮明な手作業で最適化されたHTMLを使用して本番環境に実装しますカスタムパネルのレイアウト（以下の詳細）。

これが私がリンクした問題に基づいて、なぜそれがそうであるかについての簡単な要約です：

  • パネルのHTML出力には、誰もが作成したいクレイジーで柔軟なレイアウトに対応できるように、すべてのクレイジーなマークアップが必要です。入れ子になった流体と固定領域の負荷を並べて考えてください。
  • 自動的に生成されるものはHTML純粋主義者にとって十分なものではないので、Panelsの連中はそれらを満足させようとはしていません柔軟なレイアウト機能内。したがって、レイアウトによって生成されたHTMLを最小限に抑えることを試みるHTMLオプティマイザーアルゴリズムはありません。それがどれほど優れていても、それでも最高の標準HTMLにはならないからです。
  • 彼らが言及していない何か：そのようなオプティマイザがあった場合、レイアウトに特定の変更を加えると、冗長なdivとクラスが消えてしまいます。 CSSをこれらから外してしまった場合は、ほとんどの場合、Panelsフレキシブルレイアウトに小さな変更を加えるときにCSSを書き直す必要があります。つまり、Panels Flexible Layoutsを最高の標準のプロダクションツールにしようとした（そして失敗した）場合、プロトタイピングツールとして弱体化していたことになります。
  • あなたはクリーンで無駄のないPanels HTML出力を取得できます。予想されるワークフローは、行の間を読んで、次のように思われます。
    • 開発の初期段階でアイデアを試しながら、パネルフレキシブルレイアウトを使用します。
    • 特定のレイアウトに落ち着いたら、クリーンなHTMLが必要な場合は、カスタムレイアウトを使用して実装します。レイアウトに必要なHTMLマークアップの正確な量だけを使用して、サイトに適切なクラス、セマンティクスなどを追加します（以下のハウツー） ）。

最初は気に入らなかったのですが、振り返ってみると理にかなっていると思います。プロトタイピングとプロダクションのベストスタンダードの両方に最適な1つのツールを作成しようとするのではなく、どちらも非常に異なるニーズを持ち、どちらかにはあまり適切ではない妥協をもたらすだけでした。プロトタイピングに最適な1つのツールと、無駄のない生産に最適な別のツール（カスタムレイアウト）を使用しました。

つまり、最高の標準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ファイルも更新することを忘れないでください。
    • .incファイルのthemeは、拡張子なしで.tpl.phpファイルのファイル名と一致する必要があります。ここでtheme値に入力したアンダースコアはハイフンに変換されます。
    • また、実際のレイアウトをより適切に反映するように.pngアイコンを編集することを検討してください。
  5. キャッシュをクリアします。新しいレイアウトは、.incファイルで指定した名前、カテゴリなどのパネルとしてオプションとして表示されます。これを使って。
19
user56reinstatemonica8

パネルのマークアップ出力を制御するための Clean Markup Drupal 7モジュールを検討することもできます。

私はブラウザでこのページを検索しましたが、user568458によって与えられた非常に優れた総合的な回答を含めて、それについての言及はまだ見つかりませんでした。

5
therobyouknow