Rails アプリケーションのさまざまなページにさまざまなレイアウトを作成したいのですが、特定のページのアセット フォルダーに別のファイルを作成すると、別のページからいくつかの値が取得され、別のファイルからいくつかの値が取得されます。私はこれに腹を立てています。そのために別のレイアウトファイルを作成し、これlayout'home'
を各コントローラー(ホームページのホーム)に含めました。助けてください。
4 に答える
私は答えを見つけました。実際には、他のページとはまったく異なるビューを持つ Web アプリケーションに別のページが必要な場合を除き、実際には良い方法ではありません。あなたがする必要があるのは次のとおりです:
コンソールページにまったく異なるレイアウトが必要だとします。だからここに手順があります
console.html.erb
layouts フォルダーにレイアウトを作成します。- この行
<%= stylesheet_link_tag "application", :media => "all" %>
を に 変更し<%= stylesheet_link_tag "console_layout", :media => "all" %>
ます。 javascript_include_tag
別の JavaScript を含める場合は、行も変更します。- に進み
assets/stylesheets
ます。 - そのフォルダーにファイル
console_layout.css.scss
を作成し、その特定のページに追加する場合はスタイルシートを含めます。bootstrap_and_overrides.less
このコンソール ページのファイルを含めたいとします。このように書く /* *= require 'bootstrap_and_overrides' *= require 'console' */
最後に、application.css から削除
self_tree .
します。
これを行うということは、実際には、そのコンソール ページに対して別のレイアウト、別のスタイル シートを作成していることを意味します。これを作成した後は、他のスタイルシートから値を取得することはありません。まったく異なるスタイルを持ち、他のページのスタイルとは何の関係もないページを作成する必要がある場合にのみ、これを行うことに言及したいと思います.
ありがとう。:)
混乱していると思います。マニフェスト ファイル*= require_tree .
にある場合、各コントローラーによって生成された css ファイル (および他のすべてのファイル) がすべての要求に含まれます。application.css
各レイアウト ファイルの div に一意の ID、場合によってはコントローラー名を設定することをお勧めします。次に、各コントローラーの sass ファイルで id を使用すると、競合する css がなくなります。
例
div#homeController.container
color:red
新しい CSS を作成するには、ビューまたはコントローラーを作成する必要があります。
個別のファイルを作成することはお勧めしません。Railsジェネレーターを使用することをお勧めします。
たとえば、新しいビューを作成する場合は、次のように記述する必要があります。
rails generate controller credit_cards open debit credit close
これにより、ファイル コントローラーcredit_cards
、ビューdebit credit
、およびclose
アセットcredit_cards.scss
と JavaScriptcredit_cards.js.coffee
が生成されます。
あなたのcredit_cards.scss
ファイルは、ビューの他のscssファイルよりも優先されcredit_cards/debit
、.credit_cards/credit
credit_cards/close
レイアウトを手動で作成し、コントローラーまたはコントローラー内のアクションに追加する必要があります。
layout "name_layout"
または各アクションで:
respond_to do |format|
format.html { render :layout => 'name_layout' }
end
特定の .carousel に:
あなたのview.html.erb
<div class="credit_card">
<div class="carousel">
content here..........
</div>
</div>
あなたのfile.scss
.credit_card > .carousel { margin-bottom:0px; width: 10px;}
よろしくお願いします!
次のような行があると思います。
*= require_self
内に存在するapplication.css
ファイル内assets/stylesheets
。
これらのラインは、アセット パイプ ライニング用のスプロケットによって使用されます。すべてのファイルを要求したり、必要なファイルを明示的に宣言したりすることを避けることができます。
同様にapp/views/layouts/application.html.erb
、あなたはこの行を持っています。
'すべて' %>
これには触れたくありませんが、代わりに、その中の特定のビューの特定のスタイルシートを宣言します。
アセット パイプラインの詳細と、それがアプリの高速化にどのように役立つかをお読みください。その素晴らしい読み物。
補足:同じクラスに異なるスタイルが必要かどうかはよくわかりません。長期的には維持するのが難しいことをしようとしているように感じます. むしろ新しいクラスを追加したかったのです。そして、既存のクラスを使用する代わりに、新しいクラスを使用しました。命名規則は、コントローラー名またはビュー名に関連していました。