Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

Octopressを導入した際に行った色々な設定

| Comments

Octopressに、色々と細かな設定をカスタマイズしました。
多くの先人達が、様々な記録を残していっているので、後出しは色々と楽です。
すごく助かります。

はてブボタンの追加とシェアボタンの日本語設定、JavaScriptの非同期読み込み

デフォルトでは、シェアボタンはTwitterだけしか有効になってません。_config.ymlを編集し、他のを有効にします。また、日本語設定や、FacebookアプリケーションIDの設定なども追加しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Twitter
twitter_tweet_button: true
twitter_tweet_button_lang: ja

# Google +1
google_plus_one: true
google_plus_one_size: medium
google_plus_one_lang: ja

# Facebook Like
facebook_like: true
facebook_lang: ja_JP
facebook_appID:

次に、source/_includes/post/sharing.htmlを編集して、はてブボタンを追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="sharing">
  {% if site.twitter_tweet_button %}
  <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" {% if site.twitter_tweet_button_lang %}data-lang="{{ site.twitter_tweet_button_lang }}"{% endif %}>Tweet</a>
  {% endif %}
  {% if site.google_plus_one %}
  <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div>
  {% endif %}
  <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button"
      data-hatena-bookmark-layout="standard"
      data-hatena-bookmark-url="{{ site.url }}{{ page.url }}">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
        alt="このエントリーをはてなブックマークに追加" width="20" height="20"
        style="border: none">
  </a>
  {% if site.facebook_like %}
    <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
  {% endif %}
</div>

source/_includes/after_footer.htmlのファイルを編集して、以下のようにfacebook、giigle+1,twitterのところをコメントアウトします。

1
2
3
4
5
6
7
{% include disqus.html %}
{% comment %}
{% include facebook_like.html %}
{% include google_plus_one.html %}
{% include twitter_sharing.html %}
{% endcomment %}
{% include custom/after_footer.html %}

source /_includes/after_footer.htmlを編集して、シェアボタンの日本語設定とJavaScriptの非同期読み込みを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% comment %}
  Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example)
{% endcomment %}
<script>
(function(w,d){
    var c,e=d.createDocumentFragment(),f=d.getElementsByTagName("script")[0],
    a=function(a,b){if(!d.getElementById(b)){c=d.createElement("script");
    c.src=a;c.id=b||null;c.async=true;e.appendChild(c);}};
{% if site.google_plus_one %}{% if site.google_plus_one_lang %}
    w.___gcfg={lang:"ja"};{% endif %}
    a("https://apis.google.com/js/plusone.js");
{% endif %}
{% if site.twitter_follow_button or site.twitter_tweet_button %}
    a("//platform.twitter.com/widgets.js");
{% endif %}
{% if site.facebook_like %}
    a("//connect.facebook.net/{% if site.facebook_lang %}{{ site.facebook_lang }}{% else %}en_US{% endif %}/all.js#{% if site.facebook_appID %}appId={{ site.facebook_appID }}&{% endif %}xfbml=1","facebook-jssdk");
{% endif %}
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    f.parentNode.insertBefore(e,f);
})(this,document);
</script>

パーマリンクの設定

デフォルトのパーマリンク状態では、設定したドメイン/blog/年/月/日/タイトル/のように日付が入っています。
このパーマリンクを変更したい場合は、_config.ymlを編集します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ----------------------- #
# Jekyll & Plugins #
# ----------------------- #

# If publishing to a subdirectory as in http://site.com/project set 'root: /project'
root: /
permalink: /blog/:year/:month/:day/:title/
source: source
destination: public
plugins: plugins
code_dir: downloads/code
category_dir: blog/categories
markdown: rdiscount
rdiscount:
  extensions:
    - autolink
    - footnotes
    - smart
pygments: false # default python pygments have been replaced by pygments.rb

上の7行目にあるpermalink: /blog/:year/:month/:day/:title/の部分を

permalink: /blog/:categories/:title/

に変更することで、日付からカテゴリ名に変更することができます。カテゴリ名以外にも設定できるので、お好きなものに変更するといいでしょう。

ハイパーリンクの設定

ハイパーリンクを付けたときに別のウィンドウで開くようにするためには、_include/custom/head.htmlに以下を追加します。

1
2
3
4
5
<script language="JavaScript">
$(document).ready( function () {
   $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

下書きとmetaのdescriptionとkeywordsの設定

記事を編集しているファイルは下書きにして、deployしたときに公開したくない場合は、published: falseを追加する必要があります。また、meta descriptionを変更したい場合は、description:を追加します。これを追加しなければ、ブログ記事の最初から150文字がデフォルトで勝手に設定されます。同じようにmeta keywordsも、keywords:を追加することで変更できます。
記事を作るたびに、いちいち書くのは面倒なのでnew_postしたときに、自動で追記してくれるようRakefileを以下のように変更すると便利です。
下書きにしていても、previewなどのhttp://localhost:4000/で、見て確認できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
puts "Creating new post: #{filename}"
  open(filename, 'w') do |post|
    post.puts "---"
    post.puts "layout: post"
    post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
    post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
    post.puts "comments: true"
    post.puts "categories: "
    post.puts "published: false"
    post.puts "description: "
    post.puts "keywords: "
    post.puts "---"
  end

綺麗なtableタグをmarkdownで入力

ちゃんとcssが定義されていないのかデフォルトの状態では、markdownで上手くテーブルを書くことができません。
なので、まずsource/stylesheets/data-table.cssを新しく作成し、以下のcssを書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* + table {
  border-style:solid;
  border-width:1px;
  border-color:#e7e3e7;
}

* + table th, * + table td {
  border-style:dashed;
  border-width:1px;
  border-color:#e7e3e7;
  padding-left: 3px;
  padding-right: 3px;
}

* + table th {
  border-style:solid;
  font-weight:bold;
  background: url("/images/noise.png?1330434582") repeat scroll left top #F7F3F7;
}

* + 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>の中にdata-table.cssを以下のように書いて追加します。

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

そして、以下のようにmarkdownを書くと

th1(left)|th2(center)|th3(right)|
:--------|:---------:|---------:|
td1      |td2        |td3       |

このように、ちゃんとテーブルが表示されます。

th1(left)|th2(center)|th3(right)| :——–|:———:|———:| td1 |td2 |td3

おわりに

設定では無いですが、今回ソースコードを書くに当たりLiquidのテンプレートエンジンのエスケープ方法を知るのに、ちょっと手こずりました。しかし、stackoverflowの回答を参考に、エスケープタグの{\% raw %}{\% endraw %}の間にソースをハサむことで、今回は無事解決して、うまく書くことができました。実際書くときは、バックスラッシュは要りません。ここに書くためにエスケープさせただけです。stackoverflowサマサマです。いつもお世話になっております。
コレは、ほとんど使うことがないかもしれませんが、覚えておくと時たま役立つかもです。

参考先:

Octopressの初期設定時に気にしておきたい9箇所
How to escape {{ in markdown on Octopress?

Comments