Wivern Blog

Personal-Tech memorandum

Octopress-サイドバーにGravatar追加

サイドバーにProfileを表示させるようにしたのでついでにGravatarも表示させてみる。

Gravatarに開発者向け資料があったので 見てみるとJSONでプロフィール情報を返すAPIを提供しているようなのでそれ使って情報を持ってきて、 画面に反映させなきゃいけないと思っていてGithubを眺めていたらOctopressでGravatarを表示させる プラグインがあったのでそれを使用してみることにした。

joet3ch/gravatar-octopress
簡単に説明するとGravatarの画像をimgタグでひっぱってこれるようになるので、 それを参考にしつつ、souce/_include/custom/asides/about.html を編集するという流れ。

以下手順

インストール

1

$ git clone https://github.com/joet3ch/gravatar-octopress.git

gravatar.htmlを_includes/custom/asidesにコピー

1
2

$ cd gravatar-octopress
$ cp gravatar.html [directory_name]/_includes/custom/asides

_config.ymlに追記

_config.yml 
1
2

 + # Gravatar  
 + gravatar_email: youraddress@example.com

_config.ymlのdefault_asides変数にgravatar.htmlを追加

1
2
3
4
5
6
7
8
9
10
11
12
13

# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
# default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]
default_asides: [
  + custom/asides/about.html,
    asides/recent_posts.html,
    custom/asides/category_list.html,
    custom/asides/tag_cloud.html,
    asides/github.html, 
    asides/delicious.html,
    asides/pinboard.html, 
    asides/googleplus.html
    ]

Gravatar導入前

Gravatar導入前

Gravatar導入後

Gravatar導入後

Gravatarの画像がProfileの上に来ているのでconfig.ymlのasidesに設定するのではなく souce/_include/custom/asides/about.htmlを編集するように変更。

_config.ymlの編集

1
2
3
4
5
6
7
8
9
10
11
12
13

# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
# default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]
default_asides: [
  - custom/asides/about.html,
    asides/recent_posts.html,
    custom/asides/category_list.html,
    custom/asides/tag_cloud.html,
    asides/github.html, 
    asides/delicious.html,
    asides/pinboard.html, 
    asides/googleplus.html
    ]

souce/_include/custom/asides/about.html編集

about.htmlを以下のように変更

1
2
3
4
5
6
7
8

<section>
  <h1>Profile</h1>
  
    <img src="http://www.gravatar.com/avatar/d193dda398c5fa836f1d8007d64be8de" alt="Gravatar of wivern" title="Gravatar of wivern" align="left" style="margin-right:10px;" />
  
  Hoge Hoge
  <br clear="left">
</section>

about.html編集後

about.html編集後

Gravatarの画像イメージサイズはgravatar.htmlを編集することで可能

1

<img src="http://www.gravatar.com/avatar/d193dda398c5fa836f1d8007d64be8de?s=200" alt="Gravatar of wivern " title="Gravatar of wivern" />