| Comments

Category List Aside

The code for the awesome category list you can see in the aside here.

It will:

  • display all your categories with a post counter (using Bootstrap’s badge class)
  • highlight when you’re on the matching category page
  • be installed in 3 minutes !

The Trick

OK, here it is:

(category_list.html)

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

<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:category_url }}">
        <span class="badge">{{ category | last | size }}</span>
        {{ category | first }}
      </a>
    {% endfor %}
  </div>
</section>

Put it in the source/_includes/custom/asides directory and then adapt your _config.yml accordingly. As example, here is how it is done on this site:

_config.yml 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# ...
# 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,
    custom/asides/category_list.html
]

# Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below
# and add an array with the asides you want to use.
blog_index_asides: [
    asides/what_is_octostrap3.html,
    asides/recent_posts.html,
    custom/asides/category_list.html,
    asides/github.html
]
# post_asides:
# page_asides:
# ...

Comments