我想使用 Bootstrap 模板主题重新皮肤 ActiveAdmin。但是我需要更改页面的布局以适应。
是否可以覆盖 ActiveAdmin 的布局以适合我想要的?它看起来与普通的 Rails 约定不同——我宁愿使用常规模板完成它,然后按照我需要的顺序生成我需要的部分内容。
我想使用 Bootstrap 模板主题重新皮肤 ActiveAdmin。但是我需要更改页面的布局以适应。
是否可以覆盖 ActiveAdmin 的布局以适合我想要的?它看起来与普通的 Rails 约定不同——我宁愿使用常规模板完成它,然后按照我需要的顺序生成我需要的部分内容。
我以前做过类似的事情。看看这个要点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
生成器创建的文件并发疯。
一个简单的答案是把
@import "引导程序";
进入 active_admin.css.scss
官方目前不支持它https://github.com/gregbell/active_admin/issues/1027
取决于您使用的 AA 版本。
(0.6.0 < 提交:ec9996406df5c07f4720eabc0120f710ae46c997):
包括您的 scss,但将您的 css 选择器封装在body.active_admin
组中。此外,特异性很重要,因此如果您想覆盖 AA 的默认样式,您可能需要确保覆盖完整的选择器以获得您想要的行为。
如果您想找到这些样式来覆盖它们,请查看AA 的样式表以了解它们如何将站点设置为默认样式。只需在包含 AA 样式表后包含您的自定义样式。
提交后:ec9996406df5c07f4720eabc0120f710ae46c997
样式表的命名空间最近已被删除,我还没有彻底测试它的含义。
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