9

Bootstrap テンプレート テーマを使用して ActiveAdmin のスキンを変更したいと考えています。ただし、ページのレイアウトを適切に変更する必要があります。

必要に応じて ActiveAdmin のレイアウトをオーバーライドすることはできますか? 通常の Rails の規則とは見た目が異なります。通常のテンプレートを使用してそれを実現し、必要な順序でコンテンツの必要な部分を生成したいと思います。

4

4 に答える 4

12

私は以前に似たようなことをしました。このGistをチェックしてください https://gist.github.com/bigfive/6017435

:determine_active_admin_layout基本的に、メソッドをオーバーライドして新しいレイアウトを使用するように、アクティブな管理ベース コントローラーにパッチを適用します。

# config/initializers/active_admin_patch.rb
module ActiveAdmin
  class BaseController
    def determine_active_admin_layout
      'active_admin_reskin'
    end
  end
end

次に、レイアウトで Arbre のメソッドを次のようactive_admin_reskinに呼び出すことができますview_factory

view_factory[#{params[:action]}_page"].new(Arbre::Context.new(assigns, self)).send(:build_header)

要旨( https://gist.github.com/bigfive/6017435 )では、これらのメソッドを簡単に呼び出せるように、小さなビュー ヘルパーを作成しました。

アクティブな管理者のソース コードを調べて、さまざまな Arbre ドキュメントで使用できるメソッドを確認してください。特にこちら: https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base .rb

マークアップが好きなように変更されたら、ジェネレーターが作成したファイルに@include 'bootstrap'取り込んで、夢中になることができます。active_admin.css.scss

于 2013-07-17T03:40:42.683 に答える
0

BigFive の受け入れられた回答は、最初はうまくいきましたが、カスタム パーシャルをレンダリングするとき、またはフォームでエラーをレンダリングするときに、いくつかのバグが発生しました。

彼のアプローチに触発されて、AA がレイアウトを動的に生成するために使用する個々のメソッドをオーバーライドすることに切り替えました (AA は簡単に変更できる静的レイアウト ファイルを使用しないため)。

使用可能なメソッドはソース コードで見つけることができますが、一目瞭然であり、html 要素で始まります。

例：

いくつかのクラスを追加して要素を再編成するには:

スタイルを次の場所に配置できます。

アセット/スタイルシート/active_admin.css.scss

そしてあなたのhtmlの説明：

config/initializers/active_admin_patch.rb:

module ActiveAdmin
  module Views
    class Header

      alias_method :original_build_site_title, :build_site_title
      alias_method :original_build_global_navigation, :build_global_navigation
      alias_method :original_build_utility_navigation, :build_utility_navigation

      def build_site_title
        div class: "side_bar_top" do
          original_build_site_title
        end
      end

      def build_global_navigation
        div class: "side_bar_content" do
          original_build_global_navigation
        end
      end

      def build_utility_navigation
        div class: "side_bar_footer" do
          original_build_utility_navigation
        end
      end
    end

    module Pages
      class Base

        alias_method :original_build, :build

        # This should be the same as add_classes_to_body but for the html main element
        def add_classes_to_html_tag
          document.add_class(params[:action])
          document.add_class(params[:controller].gsub('/', '_'))
          document.add_class("active_admin")
          document.add_class("logged_in")
          document.add_class(active_admin_namespace.name.to_s + "_namespace")
        end

        def build(*args)
          original_build
          add_classes_to_html_tag
        end

        def build_page
          within @body do
            div id: "wrapper" do
              div id: "details_view" do
                build_title_bar
                build_page_content  
                #build_footer
              end
              div id: "master_view" do
                build_header
              end
            end
          end
        end
      end
    end
  end
end
于 2014-08-17T07:59:18.080 に答える
0

使用している AA のバージョンによって異なります。

(0.6.0 < commit:ec9996406df5c07f4720eabc0120f710ae46c997):

scss を含めますが、css セレクターをbody.active_adminグループにカプセル化します。さらに、具体性は重要であるため、AA のデフォルトのスタイリングをオーバーライドする場合は、必要な動作を得るために完全なセレクターをオーバーライドしていることを確認する必要がある場合があります。

これらのスタイルを見つけてオーバーライドする場合は、AA のスタイルシートを見て、デフォルトでサイトがどのようにスタイル設定されているかを確認してください。AA スタイルシートをインクルードした後に、カスタム スタイルをインクルードするだけです。

コミット後:ec9996406df5c07f4720eabc0120f710ae46c997

スタイルシートの名前空間は最近削除されましたが、私はその影響をまだ徹底的にテストしていません。

于 2013-07-17T03:39:29.413 に答える