如何自定义Active Admin的布局？

Question

我需要自定义Active Admin布局，但是我应该如何做呢？

- zolter

Answer 1

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

但是，您可以在应用程序内部的代码中使用Monkey-patch或Duck-punch技术来修改活动的管理布局方法。

以下代码将在头部添加一个面向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

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

- Toby Hede

---

@jalcine 我将这个添加到了初始化器中 - Toby Hede

那么加上以下代码：module ActiveAdmin module Views module Pages layout :application end end end就可以了吗？ - jackyalcine

我知道我有点晚加入这个派对，但这是包含所有视图定义的git目录链接：https://github.com/gregbell/active_admin/tree/master/lib/active_admin/views - omninonsense

@TobyHede：鸭子打拳？ - dax

@dax 鸭子打补丁 - New Alexandria

ActiveAdmin v1.4及以上版本应该使用head替换@head。因此，代码块应该写成within(head) do ... end。 - Hari Gopal

Answer 2

当一个视图在 gem 和 rails 应用程序中都被定义时，以 Rails 应用程序中定义的为准。这是一种逻辑优先级。

所以如果你需要覆盖所有或一些 active admin 视图，你需要将它们复制到你的应用程序中，并按照你的需求进行更改。

- apneadiving

---

我在哪里可以找到它们呢？我已经在 Git 上找了好久，但就是找不到！ - Mexxer

我也一样@Mexxer; 我花了很多时间来找到正确覆盖它的方法。 - jackyalcine

Answer 3

也许现在ActiveAdmin已经提供了更好的方法？我不确定。 不过下面是一个稍微简洁一点的补丁示例，用于将Webpacker gem的javascript_pack_tag添加到我的管理员区域。

module MyApp
  module ActiveAdmin
    module Views
      module Pages
        module BaseExtension
          def build_active_admin_head
            super
            within @head do
              text_node(javascript_pack_tag('application'))
            end
          end
        end
      end
    end
  end
end

class ActiveAdmin::Views::Pages::Base < Arbre::HTML::Document
  prepend MyApp::ActiveAdmin::Views::Pages::BaseExtension
end

- trueunlessfalse

---

这是我个人认为最好的答案。然而，我们可以使用一种更简洁的方式来添加模块：https://gist.github.com/francois-ferrandis/1dc749262e7376e62074f908ee70356b - François F

Answer 4

您可以通过将以下代码放入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位置的自定义视图文件，并通过以上代码将其注入到我所有的活动管理页面中。

- K M Rakibul Islam

Answer 5

（使用rails 5.1.4）我尝试了两种解决方案，涉及到修改active_admin库，但都没有起作用。我在config/initializers/active_admin.rb中找到了解决方案。我正在为默认布局添加少量的bootstrap样式。至于链接到样式表、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间接完成，并通过此文件包含该JavaScript。

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

我将编辑类属性以使用Bootstrap使我的页面具有响应能力，因此我可能会像this geeksforgeeks article这样，在页面加载后使用JavaScript来编辑页面。

我不知道是否有一种更直接地编辑生成的布局的方法，但这对某些情况应该有效。

- Ethan Groat