はてブボタン追加やsharingの表示位置の追加、サイドメニューのカスタマイズ、続きを読むボタン表示、設定の見直しなどについてのメモ(1)。

色々設定変更してみた

はてブボタン追加

はてなは使うことないけど、使ってる人は多いので媚売っとこってことで。

source/_includes/post/sharing.html

<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 }}" >Tweet</a> {% endif %} {% if site.hatena_bookmark_button %} <a href="http://b.hatena.ne.jp/entry/{{ site.url }}{{ page.url }}" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> {% endif %} {% if site.google_plus_one %} <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div> {% endif %} {% if site.facebook_like %} <div class="fb-like" data-send="true" data-width="400" data-show-faces="false"></div> {% endif %} </div>

5～7の部分がそれ。後述のコンフィグファイルで表示制御も追加してます。

記事タイトルの直下に sharing を追加

スクロールせずに押したいかもしれないので。

source/_includes/article.html

{% unless page.no_header %} <header> {% if index %} <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1> {% else %} <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1> {% include post/sharing.html %} {% endif %} {% unless page.meta == false %} <p class="meta"> {% include post/date.html %}{{ time }} {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %} | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Comments</a> {% endif %} </p> {% endunless %} </header> {% endunless %} {% if index %} <div class="entry-content">{{ content | excerpt }}</div> {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} {% if excerpted == 'true' %} <footer> <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a> </footer> {% endif %} {% else %} <div class="entry-content">{{ content }}</div> {% endif %}

~~8行目に読み込み処理追加しただけ。~~

(2012/02/24 追記) {% endif %} の後に {% include post/sharing.html %} を続けると、indexページにも表示されてしまうので、7行目に追加に修正しました。

「続きを読む →」の表示方法

excerpt_linkで設定した、「続きを読みたい場合わっふるわっふる」を追加するのは、記事中にHTMLコメントを書くだけ。

　：
index にも表示される記事

<!-- more -->

個別ページに遷移しないと表示されない記事
　：

設定とか要らない。

右メニューのカスタマイズ

AboutMeを追加

これを流用。READMEにはcloneしてくる手順が書いてあるが、直接ファイルを開いて中身をコピペしてもOK。ツイッターのフォローをこっちに追加したので、Latest Tweets のフォローボタンは削除。

{% if site.twitter_user %} <section> <h1>About Me</h1> <div id="twitter-profile" style="margin-top:0.5em;"> <p> <strong>{{site.author}}</strong> (<a href="http://twitter.com/{{site.twitter_user}}">@{{ site.twitter_user }}</a>) </p> <p>Getting profile from Twitter...</p> </div> <script type="text/javascript"> $.domReady(function(){ var container = $('#twitter-profile'), user = "{{site.twitter_user}}"; function parseTwLinks(s) { var twUrl = "http://www.twitter.com/" s = s.replace(/ (@([\w]+))/g, function(match, p1, p2) { return " <a href='"+twUrl+p2+"'>"+p1+"</a>" }).replace(/ (#([\w]+))/g, function(match, p1, p2) { return " <a href='"+twUrl+"#!/search?q=%23"+p2+"'>"+p1+"</a>" }) return s } $.ajax({ url: "http://api.twitter.com/1/users/show.json?include_entities=false&screen_name="+user+"&callback=?" , type: 'jsonp' , error: function (err) { $('#twitter-profile').addClass('error'); } , success: function(data) { container.html('<img class="left" src="http://api.twitter.com/1/users/profile_image/'+user+'.json?size=bigger" alt="@'+user+'"><div><strong>'+data.name+'</strong> (<a href="http://twitter.com/'+user+'">@'+user+'</a>)</div><div style="font-size:80%">'+data.location+'</div><div><a href="http://twitter.com/{{ site.twitter_user }}" class="twitter-follow-button" data-show-count="{{ site.twitter_show_follower_count }}">Follow @{{ site.twitter_user }}</a></div><p style="clear:both;font-size:80%">'+parseTwLinks(data.description)+'</p>'); } }) }); </script> </section> {% endif %}

作成したファイルは source/_includes/custom/asides/aboutmetwitter.html に配置して使った。

_config.yml で変更したもの

# 続きを読む場合のリンクメッセージ
excerpt_link: "続きを読む &rarr;"

# 右メニューに aboutmetwitter.html 追加
default_asides: [custom/asides/aboutmetwitter.html, asides/recent_posts.html...

* Disqus Comments を有効化
disqus_short_name: awalog
disqus_show_comment_count: true

# Google Analytics 有効化
google_analytics_tracking_id: UA-xxxxxxxx-x

# ツイートボタンの表示
twitter_tweet_button: true

# フォローボタン非表示
twitter_follow_button: false

# Google+1ボタン表示
google_plus_one: true

# Facebook Like
facebook_like: true

Disqus Comments は、Twitterアカウントで認証して short name を取得。Google Analytics も手持ちのgmail用のアカウントで取得。

あと、変えることはない気がするけど

# hatena bookmark
hatena_bookmark_button: true

も足してみた。

とりあえず、これくらいかな。

あうあう寝なきゃ。

AwAlog

めもちょー

Octopressカスタマイズ1