0

いくつかの大きな CSS ファイルがあり、変更を加えると、変更する適切なセレクターを見つけるだけで数分かかることがあります。CSS 用の素敵な ModX エディターがあれば欲しいのですが、見つけられませんでした。私のサイトがまだレンダリングされている限り、私は自分のファイルを部分に分割することに満足しています。私はそれを行うことができますか？代わりに優れたエディター (プラグイン?) がある場合、どこで見つけることができますか?

4

1 に答える 1

5

本当の問題は、どのようなパーツが受け入れられるかということだと思います。この質問に従うと、ModX が CSS を管理できるようにするプロセスを開始できます。これが発生すると、オプションが大幅に開きます。ModX の専門知識のレベルに応じて、CSS 編集がより簡単になり、時間も短縮されます。この答えは、特定のセレクターをリソースとして追加する方法を簡単に示すため、非常に簡単です。ただし、他のさらなる開発はここから直感的に理解できます。

リソースとしての CSS

CSS がリソースとして管理されると (約 15 分かかります)、テンプレート、テンプレート変数、チャンク、スニペット、およびプラグインを利用できます。これは実際にはかなり驚くべきことですが、セットアップは少し面倒な場合があります。基本的に、将来的に多くの時間を節約するために時間を投資します。次の論理的なステップは、それに応じてセレクターを分割することですが、現在機能しているものを壊したくはありません。getResources アドオンを流動的に理解することは、今後の開発にとって非常に重要です。

どうやってするの：

1. 新しいチャンクを作成する

[要素] タブをクリックし、[新しいチャンク] をクリックします。「css-selector」という名前を付けます。コンテンツを次のように設定します。

[[+pagetitle]] {[[+content]]}

それはそれと同じくらい簡単です。「保存」をクリックすることを忘れないでください！これにより、セレクターをリソースとして設定できます。タイトルはセレクターに、コンテンツはルールに使用されます。これらの中括弧の使用を忘れることができます。あなたの新しいチャンクは、これからそれらを処理します。

2. テンプレートの調整

ここで、全体を忘れないようにするだけでなく、部分を読み取る方法をテンプレートに納得させる必要があります。CSS スタイルシート テンプレートを開きます ([[*content]]その内容を示すテンプレート)。次のようになるようにコードを調整します。

[[!getResources?
  &parent=`[[*id]]`
  &depth=`1`
  &tpl=`css-selector`
  &includeContent=`1`
  &sortby=`menuindex`
  &sortdir=`ASC`
  &limit=`99`
]]
[[*content]]

もう一度、「保存」をクリックします。テンプレートについて簡単に説明します。子がある場合は、メニュー インデックスに応じて最初にレンダリングされます。さらに、後で子ではないドキュメントのコンテンツをレンダリングします。これにより、最も重要なセレクター用の新しいリソースのみを作成し、メイン リソースで決して変更されないものを保持できます。

3. 新しいテンプレートを作成する

これは、セレクターが面白いことをせずにコンテンツをレンダリングするためです。「CSS Selector」という名前の新しいテンプレートを作成します。その内容を次のように設定します。

[[*content]]

4. 新しいリソースを作成する

新しいリソースを作成します。管理したい css ステートメントのセレクターにタイトルを設定します。次に、コンテンツを中括弧なしでルールに設定します。たとえば、css ステートメントが の場合div#header .logo {border:0;}、タイトルをdiv#header .logoに、コンテンツを に設定しborder:0;ます。リソース エイリアスを任意に設定します。それぞれに数字を使っています。テンプレートを新しい「CSS セレクター」に設定します。重要ここで、親ドキュメントをスタイルシートに設定します。[保存] をクリックします。

5. スタイルシートのテスト

まず、新しいリソースを右クリックし、[リソースの表示] を選択します。これは、ステートメントが正しくレンダリングされたことを確認するだけです。ルールを CSS 形式で記述します。

次に、スタイルシート リソースを右クリックし、[リソースの表示] を選択します。上部にセレクターが表示され、その下に他のすべてのルールが表示されます。

最終的な考慮事項

観察

  • 子リソースのドキュメント タイプを「CSS」に変更する必要がないことに気付くでしょう。親スタイルシートのみが必要です。これにより、ModX の専門知識が増えるにつれて、いくつかの優れた機能が可能になります。

  • ルールのメニュー インデックスを変更するだけで、ルールの順序を変更できます。

  • この方法で実行できるルールの数は、テンプレートのステートメントの&limit変数に基づいています。は各スタイルシートに適用されるため、この例では、スタイルシートごとに 99 個のステートメントがあり、個別のリソースである可能性があります。getResources&limit

サーバー負荷に関する注意

これにより、リソースの数が増えるとサーバーに負荷がかかります。開発のために、getResources ステートメントで「キャッシュしないフラグ」(!) を維持します。完了したら、感嘆符を削除して、すべてキャッシュします。これにより、大量の負荷が節約されます。

さらなる発展

  • 私は自分の isEnabled テンプレート変数を追加して、各ルールを好きなようにオン/オフできるようにしました。
  • FormIt を使用して、フロントエンドで CSS の管理を開始する可能性があります。
  • カスタム マネージャー ページは、より適切なオプションである場合もあります。
  • さらに抽象化すると、ステートメントのグループ化を作成して、さらに組織化できる場合があります。
于 2012-06-15T22:58:39.577 に答える