9

我想使用 Bootstrap 模板主题重新皮肤 ActiveAdmin。但是我需要更改页面的布局以适应。

是否可以覆盖 ActiveAdmin 的布局以适合我想要的?它看起来与普通的 Rails 约定不同——我宁愿使用常规模板完成它,然后按照我需要的顺序生成我需要的部分内容。

4

4 回答 4

12

我以前做过类似的事情。看看这个要点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

然后在您的布局中,您可以像这样active_admin_reskin调用 Arbre 上的方法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 回答
1

一个简单的答案是把

@import "引导程序";

进入 active_admin.css.scss

官方目前不支持它https://github.com/gregbell/active_admin/issues/1027

于 2014-04-19T16:32:38.860 回答
0

取决于您使用的 AA 版本。

(0.6.0 < 提交:ec9996406df5c07f4720eabc0120f710ae46c997):

包括您的 scss,但将您的 css 选择器封装在body.active_admin组中。此外,特异性很重要,因此如果您想覆盖 AA 的默认样式,您可能需要确保覆盖完整的选择器以获得您想要的行为。

如果您想找到这些样式来覆盖它们,请查看AA 的样式表以了解它们如何将站点设置为默认样式。只需在包含 AA 样式表后包含您的自定义样式。

提交后:ec9996406df5c07f4720eabc0120f710ae46c997

样式表的命名空间最近已被删除,我还没有彻底测试它的含义。

于 2013-07-17T03:39:29.413 回答
0

BigFive 接受的答案一开始对我有用,但在渲染自定义部分或在表单中渲染错误时产生了一些错误。

受他方法的启发,我转而覆盖 AA 用于动态生成布局的各个方法(因为 AA 不使用可以轻松修改的静态布局文件)。

您可以在源代码中找到可用的方法,但它非常不言自明,并且从html 元素开始。

例子:

添加一些类并重新组织元素:

你可以把你的风格放在:

资产/样式表/active_admin.css.scss

以及您的 html 描述:

配置/初始化程序/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 回答