如何自定义活动的管理布局?

时间:2011-09-17 04:24:37

标签: ruby-on-rails layout rubygems activeadmin

我需要自定义活动的管理员布局,但我该怎么办呢?

5 个答案:

答案 0 :(得分:28)

活动管理布局实际上并未定义为布局文件,而是以编程方式生成。因此,在布局目录中放置自定义布局实际上不会覆盖默认布局。

但是,您可以在应用程序中对活动的管理布局方法进行修补或破解。

以下内容将在标题中添加特定于ie的样式表:

module ActiveAdmin
  module Views
    module Pages
      class Base < Arbre::HTML::Document

        alias_method :original_build_active_admin_head, :build_active_admin_head unless method_defined?(:original_build_active_admin_head)

        def build_active_admin_head
          within @head do
            meta :"http-equiv" => "Content-type", :content => "text/html; charset=utf-8"
            insert_tag Arbre::HTML::Title, [title, active_admin_application.site_title].join(" | ")
            active_admin_application.stylesheets.each do |path|
              link :href => stylesheet_path(path), :media => "screen", :rel => "stylesheet", :type => "text/css"
            end
            active_admin_application.javascripts.each do |path|
              script :src => javascript_path(path), :type => "text/javascript"
            end
            text_node csrf_meta_tag
            text_node "<!--[if lt IE 7]>
            <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"admin_ie7.css\ />
            <![endif] -->".html_safe
          end
        end

      end
    end
  end
end

显然是一个丑陋的解决方案。

答案 1 :(得分:11)

当在gem和rails应用程序中定义视图时,会提供Rails应用程序中定义的视图。这是一个逻辑优先事项。

因此,如果您需要覆盖所有或部分有效的管理员视图,则必须在应用中复制这些视图并根据需要进行更改。

答案 2 :(得分:3)

也许ActiveAdmin现在确实提供了更好的方法吗?我不知道。 然而,在这个例子中,这是一个更清洁的补丁,在我的例子中,将webpacker gems javascript_pack_tag添加到我的管理区域。

align-items: center;

答案 3 :(得分:1)

(使用rails 5.1.4)我在这里尝试了两个解决方案,它们涉及到对active_admin库的弄乱,它们根本对我不起作用。我在config/initializers/active_admin.rb中找到了解决方案。我在默认布局中添加了少量的引导样式。就链接到样式表,JavaScript等而言,只需将其添加到我的active_admin.rb中,就像其中的注释一样简单:

  # == Register Stylesheets & Javascripts
  #
  # We recommend using the built in Active Admin layout and loading
  # up your own stylesheets / javascripts to customize the look
  # and feel.
  #
  # To load a stylesheet:
  #   config.register_stylesheet 'my_stylesheet.css'
  config.register_stylesheet 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css', { integrity: 'sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk', crossorigin: 'anonymous' }

关于编辑生成的布局,我还没有弄清楚,但是至少可以通过JavaScript间接完成,并且可以通过以下方式将javascipt包含在此文件中

config.register_javascript 'active_admin_view_tweaks.js', { defer: true }

我将要编辑类属性以使页面具有自举响应功能,因此我可能会按照this geeksforgeeks article之类的方法在页面加载后使用JavaScript对其进行编辑。

我不知道是否有一种方法可以更直接地编辑生成的布局,但这在某些情况下应该可行。

答案 4 :(得分:0)

您可以通过将以下代码放入您的 config/intializers/active_admin.rb 文件来覆盖活动的管理页面布局:

module AdminPageLayoutOverride
  def build_page(*args)
    within super do
      render "shared/your_custom_view_partial"
    end
  end
end

ActiveAdmin::Views::Pages::Base.send :prepend, AdminPageLayoutOverride

在上面的例子中,我在 app/views/shared/_your_custom_view_partial.html.erb 位置有一个自定义视图文件,我通过上面的代码将它注入到我所有的活动管理页面中。