GitHub Pages + Octopress カスタマイズ vol.2

前回の続きです｡テーマは､octostrap3を使います｡

Mobile

モバイルサイトでリンク文字(a)やコード表現(code)が記事(body)をはみ出す問題を解決します。

sass/custom/_styles.scss

code {
word-break: break-all;
white-space: inherit;
}

a {
word-break: break-all;
}

Top image

source/_includes/custom/navigation.html

<div class="container2">
  <a href="/"><img src="URL"></a>
</div>

sass/custom/_styles.scss

.container2 {
  padding-right: 160px;
  padding-left: 160px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #000000;
  background-color: #000000;
}

Plugin

octopress-tagcloud

タグクラウドをサイドバーに表示します｡

https://github.com/tokkonopapa/octopress-tagcloud

.
├─ plugins/
│  └── tag_cloud.rb
└─ source/
   └─ _includes/
      └─ custom/
         └─ asides/
            ├─ category_list.html
            └─ tag_cloud.html

octopress/_config.yml

default_asides: [
    asides/recent_posts.html,
    custom/asides/about.html,
    custom/asides/tag_cloud.html
]

octopress-category-list

タグリストをサイバーに表示します｡

https://github.com/ctdk/octopress-category-list
http://kaworu.github.io/octopress/blog/2013/10/03/category-list-aside/

custom/asides/category_list.html

<section class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Categories</h3>
  </div>
  <div class="list-group">
    {% for category in site.categories %}
    {% capture category_url %}{{ site.category_dir }}/{{ category | first | slugize | downcase | replace:' ','-' | append:'/index.html'}}{% endcapture %}
    <a class="list-group-item {% if category_url == page.url %}active{% endif %}" href="{{ root_url | append:'/' | append:category_url }}">
        <span class="badge">{{ category | last | size }}</span>
        {{ category | first }}
      </a>
    {% endfor %}
  </div>
</section>

octopress/_config.yml

default_asides: [
    asides/recent_posts.html,
    custom/asides/category_list.html
]

Qiita Widget

http://qiita-widget.suin.org/

custom/asides/qiita.html

<a class="qiita-timeline" href="https://qiita.com/users/{ユーザ名}" data-qiita-username="{ユーザ名}">{ユーザ名}のtips</a>
<script src="//qiita-widget.suin.org/widget.js"></script>

octopress/_config.yml

default_asides: [
    asides/recent_posts.html,
    custom/asides/qiita.html
]

Hatena Widget

http://b.hatena.ne.jp/guide/blogparts

sass/custom/_styles.scss

.hatena-bookmark-widget-body ul {
background-color: transparent !important;
padding: 10px 10px 0px 10px;
}

.hatena-bookmark-widget ul li {
}

.hatena-bookmark-widget-title {
display:none;
}

.hatena-bookmark-widget-footer {
}

custom/asides/hatena.html

ここにタグを貼り付ける

octopress/_config.yml

default_asides: [
    asides/recent_posts.html,
    custom/asides/hatena.html