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
-, , , ,

執筆者:

関連記事

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Rails4.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

  目次1 jQuery ajax送信側2 app/views/folders/show.js.coffee3  で、コントローラーを設定4 今までのは置いといてJsonでやり取りするアプロ …

Rubyで静的ページをジェネレート〜middleman

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで middlemanもそんな静的なページのメジャーなジェネレータの1つ middlemanの利点は次の …

Railsのテーブル並び替えを実装する

    環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails 参考 #147 Sortable Lists (revise …