Octopress Tips

以前書いて以降にOctopressに関して変更した部分や、調べた事のメモです。

faviconの変更
404 not found
画像の挿入
自分のpostへのリンク
Markdown記法でのtable
見出し目次の追加
footnote
テンプレートの変更
Markdown拡張子の変更
関連記事
タグクラウド

faviconの変更

小さいサイズの絵を用意してsource/favicon.pngと取り替えるだけです。

404 not found

Octopress+GitHub Pagesで自分のurl以下でページ下で存在しないページにアクセスすると、

この様に全てGitHub Pagesの404 Page not found が出てきます。これを、自分のurl以下では自分用の物を表示させるためには

rake new_page["404.md"]

でsource/404.mdを作り、中身を適当に編集します。 source/404.htmlを直接作ってもこれがそのままコピーされるのでそれも可能です ¹。

source/index.htmlなんかを元にして上の方にページがみつかりませんでした、的なものを付けて作るのが手っ取り早いです。

こんな感じで書いておくと、

source/404.md

---
layout: page
title: "404 Page Not Found"
comments: false
sharing: false
footer: false
published: true
---

{% if site.pic_404nf %}
<a href="{{ site.root_url }}/"><img src="{{ site.pic_404nf }}" alt="notfound" ></a>
{% endif %}

<br>
*Sorry, Page Not Found!*

Here are recent posts:

<div id="blog-archives" class="missing">
  {% for post in site.posts limit: 10 %}
  <article>
    {% include archive_post.html %}
  </article>
  {% endfor %}
</div>

こんな感じになります。

追記: 2014/02/14

404.mdのコードを追加。

追記ここまで

画像の挿入

Ref: 公式ブログ

より

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

Octopressと同じサイト内で画像を挿入させるには、通常source/images/に画像を入れ、

{% img /images/pic.png %}

と言うように呼び出すことが出来ます。勿論、画像ファイルは通常のurlでも構いません。

上の公式にあるように、左寄せにして、サイズを100 x 200 にしたいときは

{% img left /images/pic.png 100 200 %}

とします。

追記: 2014/02/14

上のOctopress用のimgタグの両側にrawを入れ忘れて普通の<img...>になってしまっていたので修正。

追記ここまで

取り敢えず色々試した感じ、width以降に関しては

imageファイル直後に数字が1つ若しくは2つある順にweight、heightになる。
2つめが数字でない場合、"で囲っていなくてもtitleになる。
ただし、数字から始まる文字列(10aaa)みたいな場合は10だけがheightの値になりaaaは無視される。
数字の後、"で囲った言葉ひとつだと、それが"も含めた言葉として認識されてtitle、altの両方になる。

ちょっと挙動が良くわからないですが、title、altを気にしなければ、取り敢えず 1つ数字を入れればwidthに、2つ入れればheightにも数字が入る、と。

また、Markdownの通常の画像挿入も使えます。

![alt](/images/pic.png "title")

これを使っておけば、GitHubやBitbucketでのプレビューでも画像がみれるのでそちらでも見たいような物はなるべくOctopress(jekyll)独特の文法は避けた方が無難かと。

ただ、これだと画像のサイズが調整できないので、直接htmlを書いてもokです。

<img src="/images/pic.png" alt="alt" title="title" width="100" height="100">

これもちょっと注意が必要で、必ず<p>~</p>が前後に挿入されるためインライン的には使えません。 (このラインの前後を他の文章とつなげると、つなげたもの全てが<p>でくくられる様です。)

それから、heightだけを指定することが出来ませんでした。出来上がったhtmlファイルを見ると正しくheightの部分も変換されていて、そのファイルを直接見ると大きさが正しくブラウザで表示されるのですが、多分どこかでスタイルが邪魔してOctopressで出来上がったページを見るとサイズ指定が無視されます(bugなのか使用なのか…?)

とりあえず両方共設定してやれば思い通りにはいきます (高さだけ揃えて横幅が違う物も一揃えに、とやるやり方が今のところ分かりません。)

自分のpostへのリンク

postはpublishされる時にデフォルトだと

2013-03-07-setup-octopress.markdown

といったpostは

/blog/2013/03/07/setup-octopress

的な物に変更されますが(_config.yml内のpermalinkの値)、これだと少し面倒だし、これらのページヘのリンクを書くと、ディレクトリ構造を変えた時に全て手で書き換えないといけなくなってしまいます。

そこで、post_url.rb というものを導入します (ダウンロードしてpluginフォルダに入れる)。これを使うと

[link to the post]({% post_url 2013-03-07-setup-octopress %})

といった、そのままの形で書くことが出来ます。

Markdown記法でのtable

Markdownでは

 left column | center column | right column
:-----------|:------------:|------------:
a|a|a
b|b|c

と書くと表組みが簡単に書けるわけですが(二段目の:---等の部分で:が左だけなら左寄せ、両側なら中寄せ、右だけなら右寄せ)、Octopressでは

~~どうやら表組みはHTMLで書きなさいと言うことで最初はサポートされてません~~

スタイルがちゃんと用意されてないので表示が微妙ですが、一応最初から表組みにはなってます。。

これを有効にするには次の様な表組み用スタイルシートを source/stylesheets/data-table.cssに用意し

data-table.css

* + table {
border-style:solid;
border-width:1.5px;
border-color:#CCCCCC;
}

* + table th, * + table td {
border-style:solid;
border-width:1.5px;
border-color:#CCCCCC;
}

* + table th {
border-style:solid;
font-weight:bold;
background: #FFFFFF;
}

* + table tr:nth-child(2n+1) {
  background: #F8F8F8;
}

* + table tr:nth-child(even) {
  background: #FFFFFF;
}

* + table th[align="left"], * + table td[align="left"] {
text-align:left;
}

* + table th[align="right"], * + table td[align="right"] {
text-align:right;
}

* + table th[align="center"], * + table td[align="center"] {
text-align:center;
}

更にsource/_includes/head.htmlのhead内に

<link href="/stylesheets/data-table.css" media="screen, projection" rel="stylesheet" type="text/css" />

の一行を加えます。

追記

stylesheetはせっかくsassでまとめる様になってるので data-table.cssの内容をsass/custom/_styles.scssに書いてあげるのが素直。

追記ここまで

上の表組みもこのように表示されます。

left column	center column	right column
a	a	a
b	b	b
c	c	c
d	d	d

Note: 通常のMarkdownと違って、両側に|を入れてしまうと、左端は余計な区切りに、右端は|文字の最後に挿入される様な形になってしまうので、 Octopressで使う場合は両端の|は入れない様にしないといけません。 (もしかしたらどこか変な使い方をしてるだけかもしれませんが)

Ref.: Octopress Table Stylesheet

追記: 2015/11/14

以前まで上のSCSSの中でtable要素について上の参考記事に従って* + tableみたいに隣接要素を要求してましたが、今は下の様な変更を行っています。

HTMLでブラウザの表示幅が狭い時にテーブルの右側が切れるのを防ぐ

追記ここまで

見出し目次の追加

上のContents下に出している各見出しをまとめた目次の出し方です。 _config.ymlに

rdiscount:
  extensions: ['generate_toc']
  toc_token: "{TOC}"

を追加。記事に

{:TOC}

を入れればそこに目次が出来ます。

ただ、これだけだと日本語の見出しを使った場合

Liquid Exception: incompatible character encodings: UTF-8 and ASCII-8BIT in atom.xml

と怒られるので、

~/.rvm/gems/ruby-1.9.3-p392/gems/jekyll-0.12.1/lib/jekyll/converters/markdown.rb

(Macで$HOMEにインストールした場合)

または、

/lib/ruby/gems/1.9.1/gems/jekyll-0.12.1/lib/jekyll/converters/markdown.rb

(cygwinでcommonディレクトリにインストールした場合)

の中身をここで紹介されてるように変更します。

footnote

~~https://github.com/fmcypriano/footnote-octopress~~から footnote.rbをインストール(/plugins/に追加)します。

追記: 2013/05/01

書いた人がユーザー名を変更したらしく (fmcyprianofcy) 現在はこちら https://github.com/fcy/footnote-octopress になってます。

追記ここまで

追記: 2013/12/20

Latexの様にその場で書けて番号等を気にしなくても自動で投資番号を振ってくれることが出来るプラグインを作りました。

footnote-extra: Octopress用footnoteのプラグイン

footnote-inline: Octopress用footnoteのプラグイン

追記ここまで

フットノートは

{% footnote_ref 2 %}

を挿入するとリンクが出来て² 下記を記事の下に書き込めばOK。

{% footnotes %}
  {% fn %} このように下に表示されます。
{% endfootnotes %}

リンクにマウスを持って行くとノートがポップアップもしてくれる。

これはmarkdownのコンバーターにrdiscountを使っている場合で、 kramdownなどを使うと通常のMarkdownの様な[^1]でリンクを作って [^1]:で参照先を書く、と言うことも出来ます。

(kramdownソースコード表示を変更したくてちょっと変えてみましたが、色々あって取り敢えず保留中です)

テンプレートの変更

Rakefileにちょっと手を加えて、 rake new_post['xxx']で作る段階でYAMLブロックに挿入される要素を増やします。

Rakefile内の110行目辺りにnew_postにあたる部分があるのでここのCreating new post...以下にある部分を変更します。

...
  puts "Creating new post: #{filename}"
  open(filename, 'w') do |post|
    post.puts "---"
    post.puts "layout: post"
    post.puts "title: \"#{title.gsub(/&/,'&')}\""
    post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
    post.puts "comments: true"
    post.puts "categories: [#{title.gsub(' ',',')}]"
    post.puts "keywords: #{title.gsub(' ',',')}"
    post.puts "tags: [#{title.gsub(' ',',')}]"
    post.puts "published: false"
    post.puts ""
    post.puts "---"
    post.puts ""
    post.puts "<!-- more -->
    post.puts ""
    post.puts "<h2>Contents</h2>"
    post.puts "{:TOC}"
  end
...

初期値がpublished: falseにしておいた方が気楽にnew_postできると思います。 (間違って作った中途半端なファイルがいつの間にかアップロードされることが無い様に)

それから、ほぼ毎回使う下に区切りのmoreと、目次の項目も最初から書いてあります。

categories等にタイトル名をそのまま入れていますが、通常rake new_postをするときには、カテゴリーになるような言葉をいくつか入れる様にして、最初からそれをcategoriesとkeywardsとtagsに入れてしまっています。 (タイトル名はいずれにしろ変更するので)

同じ日に同じカテゴリーの投稿をするときには変更する必要がありますが、それくらいなら手作業で良いと思いますので。

それから、YAMLブロックの最後に空白を入れてあります。こうしないとブロックの一番最後の行がMarkdownエディタで見出し文字になってしまいますので。

categoriesとtagsについては、今のところちゃんと使い切れてないので、取り敢えず両方に同じ値を入れています。

直ぐ下のnew_pageにあたる部分にも、取り敢えず published: falseだけ追加してあります。

Markdown拡張子の変更

Rakefileでついでに26行目あたりにある

new_post_ext    = "markdown"  # default new post file extension when using the new_post task
new_page_ext    = "markdown"  # default new page file extension when using the new_page task

の行を

new_post_ext    = "md"  # default new post file extension when using the new_post task
new_page_ext    = "md"  # default new page file extension when using the new_page task

として、新しくnew_postした時に出来るファイルの拡張子を.mdにして短くしておきました。

ここから related_posts.rbをとってきてpluginsディレクトリに入れます。

次に、

<div class="related_posts">
<h3>You may also like...</h3>
<ul>
{% for post in site.related_posts limit:5 %}
<li><a href="{{ post.url }};">{{post.title }}</a></li>
{% endfor %}
</ul>
</div>

と言った形の内容で、source/_includes/post/related_posts.htmlと言うファイルを作ります。

次に、source/_layouts/post.htmlを編集して、

{% unless site.related_posts == false %}
{% include post/related_posts.html %}
{% endunless %}

の3行をfooter内に挿入する。(一番下に入れました。)

下にあるYou may also like...のところです。

さらに_config.ymlへ

# Related post
related_posts: true
related_posts_limit: 5

と入れておきます。

このプラグインではtagsの値をみて、関連ある投稿を集めます。プラグインの中身を見れば直ぐ分かるのですが、最初、categoriesだけを設定していたので、全然関連付け記事が取れなくてちょっと悩みました

タグクラウド

Ref: Octopress用Tag Cloudプラグインをリリースします

で公開されているプラグインを使いました。このレポジトリをcloneするなり中身をダウンロードしてくるなりして、

octopress-tagcloud/plugin/tag_cloud.rbをplugin/フォルダに、
octopress-tagcloud/source/_includes/custom/asdies/にある tag_cloud.htmlとcategory_list.htmlを source/_includes/custom/asdies/に

コピーします。

後は _config.yml内のdefault_asides:の配列に