RailsでTwitterBootstrap Railsで使えるGem

RedcarpetでTOC表示

投稿日:

Redcarpet

github.com/vmg/redcarpet

#272 Markdown with Redcarpet

Redcarpetの使い方

基本的な使い方

そして、render

設定 extentions

  1. :no_intra_emphasis
  2. :tables
  3. :fenced_code_blocks
  4. :autolink
  5. :disable_indented_code_blocks
  6. :strikethrough
  7. :lax_spacing
  8. :space_after_headers
  9. :superscript
  10. :underline
  11. :highlight
  12. :quote
  13. :footnotes

設定 render options

  1. :filter_html
  2. :no_images
  3. :no_links
  4. :no_styles
  5. :escape_html
  6. :safe_links_only
  7. :with_toc_data
  8. :hard_wrap
  9. :xhtml
  10. :prettify
  11. :link_attributes

そして、viewで

TOCを表示する

TOCはtable of contentsの略で、一文のH要素を集めたもの

TOC用のリンクを追加

rendererのオプションの:with_toc_dataをtrueにする

TOCを表示する

rendererにHTML_TOCを使う.ヘルパー内に記述した.

なお、nesting_levelオプションでh1~h6のどこまでtocで抜き出すか指定できる

できた

screenshot

Bootstrapのaffixとscrollspy

affixは要素を固定するJavascript.
scrollspyはスクロールに合わせてli要素にactiveクラスをつけてくれるJavascript.

affix.js

position: fixedに変わってしまうと、サブメニューの位置が変なところになってしまうので、affixクラスの位置を固定するしかなかった.

余談だけど、Turbolinksとインラインリンクは相性が悪い.
リンクをクリックすると#の左にid要素が追加されるという意味不明な状態.
例えば、#helloをクリックすると、posts/2hello#helloになっちゃう.
で、Turbolinkはオフにした.

scrollspy.js

指定するtargetはulを含むdivクラスでもよい.

そして、いまのところコントロールの方はnavクラスが必要.
redcarpetのtocジェネレータには適当なオプションがないぽいのでsub!(最初にマッチしたパターンを置き換え)で.

screenshot

nav-pillsを辞めて、cssを適当に設定すれば本家ぽい感じに

screenshot

scrollNav.js

scrollNavは対象の要素から、h1~h6の好きな要素を抜き出して自動的にリストを作ってくれる.
そして、そこまでスクロールしてくれる.
また、スクロールを検知して、現在地にactiveとin-viewクラスをつけてくれる.
というわけで、RedcarpetのTOCもいらないし、Bootstrapのscrollspyもいらない感じになる.
scrollnav.com/

Download

公式からダウンロードして、解凍したら、vendor/assets/javasctipts/に移動する.
application.jsも設定.

設定

メニューを突っ込む場所を指定することと、できるメニューにクラスとかをつける方法がよくわからなかったので、callback関数でクラスをつけた.
基本的にいる場所にactiveクラスを1箇所だけつけてくれるけど、最後の章が短いとactiveクラスはつかない.
in-viewクラスは見えている場所すべてにつけてくれる.

screenshot

-RailsでTwitterBootstrap, Railsで使えるGem
-, , , ,

執筆者:

関連記事

Rails3.2でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …

no image

Rails3.2でテーブルの並び替えをリファクタリング~ヘルパー

環境 Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現 テストができたのでHelper化 目次1 現状2 helper3 index.html.erb 現状 共通部分が …

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-59e95 …

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …