[英]How can I customize the active admin layout?
我需要自定义活动管理布局,但我该怎么做?
活动管理布局实际上并未定义为布局文件,而是以编程方式生成的。 因此,在布局目录中放置自定义布局实际上不会覆盖默认布局。
但是,您可以对应用程序中的活动管理布局方法进行猴子补丁或鸭打孔。
以下将向标题添加一个特定于 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
显然是一个丑陋的解决方案。
当在 gem 和 rails 应用程序中定义视图时,将提供在 Rails 应用程序中定义的视图。 这是一个逻辑优先级。
因此,如果您需要覆盖所有或部分活动的管理视图,则必须在您的应用程序中复制这些视图并根据需要进行更改。
也许 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
(使用 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 编辑页面。
我不知道是否有办法更直接地编辑生成的布局,但这应该适用于某些情况。
您可以通过将以下代码放在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
位置有一个自定义视图文件,我通过上面的代码将它注入到我所有活动的管理页面中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.