RefineryCMSでのTwitterブートストラップの使用

RefineryCMSは別のRoR CMSです。 Rails3.2をサポートします。 ここでプレスリリースを再発表するつもりはありません。興味深い場合は、サイトでデモを再生できます。 彼女は昨日生まれていなかったので、Bootstrapは箱からTwitterをサポートできません。 松葉杖の製油所cms-bootstrapがありますが、彼は私を感心しませんでした。 したがって、ブートストラップを自分ですばやく固定する方法を説明します。 NB! このメモは、RefineryCMSを既に見たことを意味するものではありませんが、正確にそれを伝えるわけではありません。TBをねじ込むことについての話です



設置食事の卵同じくらい簡単です:

$ gem install refinerycms $ cd ~/Projects && refinerycms MyRefineryApp $ cd MyRefineryApp && rails server
      
      





今で localhost:3000



localhost:3000



管理者が利用可能です。 最初の起動時に、ユーザーを作成して先に進みます。



ブートストラップしてください!



ディレクトリ構造は、通常のアプリケーションと変わりません。 管理パネルの主なアクションのための写真付きのスプライトが必要です: ログアウトサイトの表示/app/assets/images/admin_sprite.png



配置し/app/assets/images/admin_sprite.png



)。 いくつかの異なるブートストラップテーマをダウンロードし、名前の下で/vendor/assets/…



分解します(最初のアンダースコアと拡張子.scssが重要です!) __.css.scss



。 RefineryはSassを使用するため、ブートストラップファイルをインポートするだけです。

 @import 'cosmo';
      
      





私はBootswatch (およびもちろんオリジナルの)でトピックについてトレーニングしました。

 $ ls vendor/assets/stylesheets _amelia.css.scss _bootstrap.css.scss _cerulean.css.scss _cosmo.css.scss _spacelab.css.scss
      
      







準備する



デフォルトでは、精製所は自分で上書きおよび編集できる独自の組み込みテンプレートを使用します(アプリケーションディレクトリでの検索がより重要です)。 テンプレートをそれ自体に「クローン」するコマンド:

 rake refinery:override view=_
      
      





編集には次のテンプレートが必要です。

 rake refinery:override view=layouts/application rake refinery:override view=refinery/_header rake refinery:override view=refinery/_menu rake refinery:override view=refinery/_site_bar
      
      





ここにあります:

 $ ls app/views/{refinery,layouts} app/views/layouts: application.html.erb app/views/refinery: _header.html.erb _menu.html.erb _site_bar.html.erb
      
      





コードのスタイルと友達になるだけです。 ファイルapp/assets/stylesheets/application.css.scss



に次のように記述します。

 //@import 'cerulean'; //@import 'spacelab'; @import 'amelia'; //@import 'cosmo'; // This is default size of refinery logo. Arghhh $sb_ref_logo: 29px; $sb_lineheight: 18px; $sb_height: $sb_lineheight * 4; #header { height: $sb_height; } // take care of menu item hover-selection .navbar .nav > li > a { padding: $sb_lineheight; } /////////////////////////////////////////////////////////////////////////////// // Refinery admin menu: images taken from app/assets/images/admin_sprite.png /////////////////////////////////////////////////////////////////////////////// ul#main-menu-right > li > a { &:hover { background-color: transparent; } &#site_bar_refinery_cms_logo { line-height: $sb_ref_logo; height: $sb_ref_logo; margin-top: $sb_ref_logo / 3; padding: 0; overflow: hidden; img { line-height: $sb_ref_logo; } &:hover > img { margin-top: -$sb_ref_logo - 2px; } } } // control buttons @mixin admin_sprite($num,$size:24px) { line-height: $size; height: $size; overflow: hidden; padding: 0; margin: $sb_ref_logo / 2; margin-left: $sb_ref_logo / 1.5; margin-right: 0; img { margin-top: -2*$size*$num - 24px; } &:hover > img { margin-top: -2*$size*$num; } } a#adminsite { @include admin_sprite (0); } a#logout { @include admin_sprite (1); }
      
      







ツールバーを変更



サイトを「表示」する場合にのみ、トップコントロールを変更します。 管理パネルでは、必要ありません。 メインテンプレート( /app/views/layouts/application.html.erb



)で識別子を追加します。

 <!DOCTYPE html> <%= render '/refinery/html_tag' %> <% site_bar = render('/refinery/site_bar', :head => true) -%> <%= render '/refinery/head' %> <body> <%= site_bar -%> <%= render '/refinery/ie6check' if request.env['HTTP_USER_AGENT'] =~ /MSIE/ -%> <div id="page_container" class="container"> <header id="header"> <%= render '/refinery/header' -%> </header> <section id="page"> <%= yield %> </section> <footer id="footer"> <%= render '/refinery/footer' -%> </footer> </div> <%= render '/refinery/javascripts' %> </body> </html>
      
      





/app/views/refinery/_header.html.erb



-マークアップ:

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <%= link_to Refinery::Core.site_name, refinery.root_path, :class => "brand" %> <%= render(:partial => "/refinery/menu", :locals => { :dom_id => 'menu', :css => 'menu' }) %> </div> </div> </div>
      
      





/app/views/refinery/_menu.html.erb



メニュー-マークアップおよび最も重要なこと-精製管理メニューのレンダリング(最後から4行目):

 <% # Collect the root items. # ::Refinery::Menu is smart enough to remember all of the items in the original collection. if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present? dom_id ||= 'menu' css = [(css || 'menu clearfix')].flatten.join(' ') hide_children = Refinery::Core.menu_hide_children if hide_children.nil? -%> <div id="main-menu" class="nav-collapse"> <nav id='<%= dom_id %>' class='<%= css %>'> <ul id="main-menu-left" class="nav"> <%= render :partial => '/refinery/menu_branch', :collection => roots, :locals => { :hide_children => hide_children, :sibling_count => (roots.length - 1), :menu_levels => local_assigns[:menu_levels], :apply_css => true #if you don't care about class='first' class='last' or class='selected' set apply_css to false for speed. } -%> </ul> <%= render :partial => '/refinery/bs_site_bar' %> </nav> </div> <% end -%>
      
      





管理メニューテンプレート( vi app/views/refinery/_bs_site_bar.html.erb



)を作成します:

 <% if refinery_user? && "#{controller_name}##{action_name}" != 'pages#preview' %> <ul id="main-menu-right" class="nav pull-right"> <li><%= link_to image_tag("#{"http://refinerycms.com/images/" unless local_request?}refinery/logo-site-bar.png",:alt => "Refinery (tm) Content Manager"), 'http://refinerycms.com', :target => '_blank', :id => 'site_bar_refinery_cms_logo' %></li> <li><%= #site_bar_switch_link link_to image_tag("admin_sprite.png", :alt => "Administer site"), (if session.keys.map(&:to_sym).include?(:refinery_return_to) and session[:refinery_return_to].present? session[:refinery_return_to] else refinery.admin_root_path end rescue refinery.admin_root_path), :id => 'adminsite' -%></li> <li><%= link_to image_tag("admin_sprite.png", :alt => "Log out"), refinery.destroy_refinery_user_session_path, :id => 'logout' %></li> </ul> <% end %>
      
      





さて、 app/views/refinery/_site_bar.html.erb



から余分なものを削除してapp/views/refinery/_site_bar.html.erb





 <% if refinery_user? && admin? && "#{controller_name}##{action_name}" != 'pages#preview' %> <div id='site_bar'> <div id='site_bar_content' class='clearfix'> <div id='editor_switch'> <%= site_bar_switch_link -%> </div> <%= link_to image_tag("#{"http://refinerycms.com/images/" unless local_request?}refinery/logo-site-bar.png", :alt => "Refinery (tm) Content Manager"), 'http://refinerycms.com', :target => '_blank', :id => 'site_bar_refinery_cms_logo' %> <div id='site_bar_branding'> <span id='site_bar_company_name'> <%= Refinery::Core.site_name %> </span> <%= link_to t('.log_out', site_bar_translate_locale_args), refinery.destroy_refinery_user_session_path, :id => 'logout' %> </div> </div> </div> <% end %>
      
      







準備完了。 application.css.scss



でテーマを切り替えて、デザイナーの想像力に驚かされることがあります。



All Articles