平衡点

2013/09/05

_ Bootstrap と pygments.rb を使ってみることに

この日記を運用しているサーバをさくらVPSへ移行するついでに

tDiary 4.0.0 + Ruby 1.9.3
Bootstrap なテーマと CSS
SyntaxHighlighter を CodeRay から pygments.rb へ

なんて事をしてみた. いろいろ忘れそうなのでまとめておく.

tDiary 4.0.0 + Ruby1.9.3

このサーバは Debian 7.0 (Wheezy) で動かしている. Debian Wheezy のパッケージで提供されている tdiary: Debian Package Tracking System は 3.1 で, 多少(?)古い. pkg-ruby-extras のリポジトリに新しい版を放り込んでおいたので, とりあえずそちらを使うと良いかも

$ sudo aptitude git-buildpackage
$ gbp-clone git://anonscm.debian.org/pkg-ruby-extras/tdiary.git
$ cd tdiary
$ git-buildpackage --git-ignore-new --git-builder='debuild -rfakeroot'

あたりでパッケージができる(ハズ)

Bootstrap なテーマと CSS

テーマに, そのものズバリ「bootstrap」があるので, それを使うと良い. 個人的には「更新」(update.rb へのリンク)を表示させたくないのと fluid layout でメニューをボタンに変更するために, ちょっとだけ手を入れた:

# source: diff
--- bootstrap-navi.rb	2013-08-12 06:35:52.000000000 +0900
+++ bootstrap-navi-custom.rb	2013-09-05 23:25:22.302250094 +0900
@@ -1,6 +1,7 @@
 # Show navi for twitter-bootstrap theme
 #
 # Copyright (c) KAOD Masanori <kdmsnr at gmail.com>
+#               Youhei SASAKI <uwabami at gfd-dennou.org>
 # You can redistribute it and/or modify it under GPL.

 def bootstrap_navi(options = {})
@@ -11,23 +12,23 @@
   }
   options = default_options.merge(options)

-  body = ""
+  brand = ""
   if options[:site_name?]
-    body += <<-EOS
+    brand += <<-EOS
       <a class="brand" href="#{@conf.index}">#{h @conf.html_title}</a>
     EOS
   end

+  body = ""
   body += <<-EOS
       <ul class="nav">
         #{navi_user.gsub(/span/, "li")}
-        #{navi_admin.gsub(/span/, "li")}
       </ul>
   EOS

   if options[:search_form?]
     body += <<-EOS
-      <form class="navbar-search pull-left"
+      <form class="navbar-search pull-right"
         method="get" action="http://www.google.co.jp/search"
         onsubmit="$('#sitesearch').val($(location).attr('host')+$(location).attr('pathname'))">
         <input type="hidden" name="ie" value="UTF8">
@@ -39,9 +40,16 @@
   end

   <<-EOS
-<div class="navbar #{options[:navbar_class]}">
+<div class="navbar">
   <div class="navbar-inner">
     <div class="container">
+    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
+      #{brand}
+    <div class="nav-collapse collapse">
       #{body}
     </div>
   </div>

あとはヘッダ, フッタを適当に指定して, CSS を修正するだけ