LoginSignup
2
4

More than 5 years have passed since last update.

ActiveAdminで各ページ共通でレイアウトの構成要素をいじる

Last updated at Posted at 2015-05-26

シチュエーション

ActiveAdminは特に何もしなくてもデフォルトのレイアウトが適用されてかなり見やすいページを作成できます。
ただ、たまに、そのレイアウトを一部変更したくなったりすることがあります。レイアウトのテンプレートファイルがどこかにあったりするわけではないので、普通には変更できません。

実装

例えば、全てのページのコンテンツの上にTwitterのボタンを置きたい場合。

lib/monkey_patches/active_admin/views/pages/base.rb
module ActiveAdmin
  module Views
    module Pages
      class Base
        def build_main_content_wrapper
          div id: "main_content_wrapper" do
            div id: "main_content" do
              para <<-'EOS'.html_safe
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
              EOS
              main_content
            end
          end
        end
      end
    end
  end
end

解説

ActiveAdminの描画処理は、箇所ごとに分かれた描画コンポーネントが行っているので、これにモンキーパッチを当てます。
prependなりでスマートにできると良いのですが、コンポーネントの構成によって出来ない場合があり、その場合はこの例のようにメソッドを上書きしたりもします。(上記の例は、元々の処理からの変更はparaの一文を追加しているだけです)
パッチを当てるべきコンポーネントとメソッドは、当てる前のページの、該当の要素のidで、ActiveAdminのソースコードをgrepすれば、だいたいすぐわかります。

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4