如何自定義活動管理布局？

Question

我需要自定義活動管理布局，但我該怎么做？

Answer 1

活動管理布局實際上並未定義為布局文件，而是以編程方式生成的。 因此，在布局目錄中放置自定義布局實際上不會覆蓋默認布局。

但是，您可以對應用程序中的活動管理布局方法進行猴子補丁或鴨打孔。

以下將向標題添加一個特定於 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

顯然是一個丑陋的解決方案。

Answer 2

當在 gem 和 rails 應用程序中定義視圖時，將提供在 Rails 應用程序中定義的視圖。 這是一個邏輯優先級。

因此，如果您需要覆蓋所有或部分活動的管理視圖，則必須在您的應用程序中復制這些視圖並根據需要進行更改。

Answer 3

也許 ActiveAdmin 現在確實提供了一種更好的方法來做到這一點？ 我不知道。 然而，這里將是一個更清晰的補丁示例，在我的示例中，將 webpacker gems 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

Answer 4

（使用 rails 5.1.4）我在這里嘗試了兩種解決方案，它們涉及與 active_admin 庫相沖突，但它們對我根本不起作用。 我在config/initializers/active_admin.rb找到了我的解決方案。 我在默認布局中添加了少量引導程序樣式。 至於鏈接到樣式表、javascripts 等，就像將它添加到我的 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 }

我將編輯類屬性以使我的頁面響應引導程序，因此我可能會按照geeksforgeeks 文章之類的內容在頁面加載后使用 JavaScript 編輯頁面。

我不知道是否有辦法更直接地編輯生成的布局，但這應該適用於某些情況。

Answer 5

您可以通過將以下代碼放在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位置有一個自定義視圖文件，我通過上面的代碼將它注入到我所有活動的管理頁面中。