Was ich so treibe...

Uli's IT-Blog - Konzeption, Entwicklung, Betrieb

Themenwolke für Octopress

Gestern bin ich über http://www.ewal.net/2012/09/08/octopress-customizations/ gestolpert. Darin wird beschrieben, wie man eine Themenwolke in Octopress einbindet. Eine Themenwolke sieht in etwa so aus:

Themenwolke

In diesem Artikel beschreibe ich, wie ich die Themenwolke eingerichtet habe.

octopress-category-list-master-20130907.zip

Herunterladen von GitHubZIP-Datei, meine Kopie liegt hier.

Einspielen von octopress-category-list
1
2
3
$ unzip -qqd /tmp octopress-category-list-master-20130907.zip
$ cp /tmp/octopress-category-list-master/source/_includes/custom/asides/category* source/_includes/custom/asides/
$ cp /tmp/octopress-category-list-master/plugins/category* plugins/

_config.yml

In der Konfigurationsdatei von Octopress müssen diese Änderungen durchgeführt werden:

  • default_asides: Erweitern um “custom/asides/category_cloud.html”
  • category_title_prefix: Setzen auf ‘Thema: ’
_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
diff --git a/_config.yml b/_config.yml
index 7371444..47760b3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -52,7 +52,7 @@ titlecase: false       # Converts page and post titles to titlecase

 # 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: [asides/recent_posts.html, custom/asides/category_cloud.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.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.
@@ -100,3 +100,7 @@ google_analytics_tracking_id:

 # Facebook Like
 facebook_like: false
+
+# Category plugin
+category_title_prefix: 'Thema: '
+

source/categories/index.html

Die Datei “source/categories/index.html” wird angelegt, um eine separate Seite mit allen Themen zur Verfügung zu haben. Bei meiner Variante wird oben die Themenwolke angezeigt, unten eine alphabetisch sortierte Themenliste.

source/categories/index.html
1
2
3
4
5
6
7
8
9
10
11
12
---
layout: page
title: Themen
footer: true
body_id: categories
date: 2013-09-07 09:15
---

<div>
  <ul id="tag-cloud"><a href='/blog/categories/blog' style='font-size: 104.61538461538461%'>Blog</a> <a href='/blog/categories/centos' style='font-size: 102.76923076923077%'>CentOS</a> <a href='/blog/categories/chrome' style='font-size: 101.84615384615384%'>Chrome</a> <a href='/blog/categories/cinnamon' style='font-size: 100.92307692307692%'>Cinnamon</a> <a href='/blog/categories/debian' style='font-size: 101.84615384615384%'>Debian</a> <a href='/blog/categories/dovecot' style='font-size: 101.84615384615384%'>Dovecot</a> <a href='/blog/categories/eclipse' style='font-size: 101.84615384615384%'>Eclipse</a> <a href='/blog/categories/fotorama' style='font-size: 101.84615384615384%'>Fotorama</a> <a href='/blog/categories/git' style='font-size: 109.23076923076923%'>Git</a> <a href='/blog/categories/github' style='font-size: 100.92307692307692%'>GitHub</a> <a href='/blog/categories/gpg' style='font-size: 100.92307692307692%'>GPG</a> <a href='/blog/categories/gradle' style='font-size: 100.92307692307692%'>Gradle</a> <a href='/blog/categories/groovy' style='font-size: 100.92307692307692%'>Groovy</a> <a href='/blog/categories/grub' style='font-size: 100.92307692307692%'>Grub</a> <a href='/blog/categories/https' style='font-size: 100.92307692307692%'>HTTPS</a> <a href='/blog/categories/java' style='font-size: 104.61538461538461%'>Java</a> <a href='/blog/categories/jboss' style='font-size: 100.92307692307692%'>JBoss</a> <a href='/blog/categories/jdk' style='font-size: 100.92307692307692%'>JDK</a> <a href='/blog/categories/jmx' style='font-size: 100.92307692307692%'>JMX</a> <a href='/blog/categories/kepler' style='font-size: 100.92307692307692%'>Kepler</a> <a href='/blog/categories/kernel' style='font-size: 101.84615384615384%'>Kernel</a> <a href='/blog/categories/ldap' style='font-size: 100.92307692307692%'>LDAP</a> <a href='/blog/categories/linux' style='font-size: 160.0%'>Linux</a> <a href='/blog/categories/lucid' style='font-size: 103.6923076923077%'>Lucid</a> <a href='/blog/categories/lxc' style='font-size: 106.46153846153847%'>Lxc</a> <a href='/blog/categories/macbook-air' style='font-size: 101.84615384615384%'>Macbook Air</a> <a href='/blog/categories/macbook-air-2013' style='font-size: 100.92307692307692%'>Macbook Air 2013</a> <a href='/blog/categories/markdown' style='font-size: 102.76923076923077%'>Markdown</a> <a href='/blog/categories/mysql' style='font-size: 100.92307692307692%'>MySQL</a> <a href='/blog/categories/octopress' style='font-size: 109.23076923076923%'>Octopress</a> <a href='/blog/categories/openvpn' style='font-size: 100.92307692307692%'>OpenVPN</a> <a href='/blog/categories/packaging' style='font-size: 106.46153846153847%'>Packaging</a> <a href='/blog/categories/pakete' style='font-size: 100.92307692307692%'>Pakete</a> <a href='/blog/categories/passenger' style='font-size: 100.92307692307692%'>Passenger</a> <a href='/blog/categories/pdf' style='font-size: 100.92307692307692%'>PDF</a> <a href='/blog/categories/perl' style='font-size: 100.92307692307692%'>Perl</a> <a href='/blog/categories/pgp' style='font-size: 100.92307692307692%'>PGP</a> <a href='/blog/categories/pigdeonhole' style='font-size: 101.84615384615384%'>Pigdeonhole</a> <a href='/blog/categories/podcast' style='font-size: 100.92307692307692%'>Podcast</a> <a href='/blog/categories/precise' style='font-size: 130.46153846153845%'>Precise</a> <a href='/blog/categories/proxy' style='font-size: 101.84615384615384%'>Proxy</a> <a href='/blog/categories/quilt' style='font-size: 101.84615384615384%'>Quilt</a> <a href='/blog/categories/raring' style='font-size: 101.84615384615384%'>Raring</a> <a href='/blog/categories/redmine' style='font-size: 102.76923076923077%'>Redmine</a> <a href='/blog/categories/ruby' style='font-size: 106.46153846153847%'>Ruby</a> <a href='/blog/categories/server' style='font-size: 100.92307692307692%'>Server</a> <a href='/blog/categories/shell' style='font-size: 100.92307692307692%'>Shell</a> <a href='/blog/categories/smtp' style='font-size: 100.92307692307692%'>SMTP</a> <a href='/blog/categories/squid' style='font-size: 100.92307692307692%'>Squid</a> <a href='/blog/categories/ssh' style='font-size: 100.92307692307692%'>SSH</a> <a href='/blog/categories/subversion' style='font-size: 104.61538461538461%'>Subversion</a> <a href='/blog/categories/thunderbird' style='font-size: 100.92307692307692%'>Thunderbird</a> <a href='/blog/categories/truecrypt' style='font-size: 100.92307692307692%'>Truecrypt</a> <a href='/blog/categories/ubuntu' style='font-size: 148.0%'>Ubuntu</a> <a href='/blog/categories/usb' style='font-size: 100.92307692307692%'>USB</a> <a href='/blog/categories/webservice' style='font-size: 100.92307692307692%'>Webservice</a> <a href='/blog/categories/windows' style='font-size: 100.92307692307692%'>Windows</a> <a href='/blog/categories/zertifikat' style='font-size: 100.92307692307692%'>Zertifikat</a> <a href='/blog/categories/zfs' style='font-size: 101.84615384615384%'>ZFS</a> </ul>
  <ul id="category-list"><li><a href='/blog/categories/blog'>Blog (5)</a></li><li><a href='/blog/categories/centos'>CentOS (3)</a></li><li><a href='/blog/categories/chrome'>Chrome (2)</a></li><li><a href='/blog/categories/cinnamon'>Cinnamon (1)</a></li><li><a href='/blog/categories/debian'>Debian (2)</a></li><li><a href='/blog/categories/dovecot'>Dovecot (2)</a></li><li><a href='/blog/categories/eclipse'>Eclipse (2)</a></li><li><a href='/blog/categories/fotorama'>Fotorama (2)</a></li><li><a href='/blog/categories/git'>Git (10)</a></li><li><a href='/blog/categories/github'>GitHub (1)</a></li><li><a href='/blog/categories/gpg'>GPG (1)</a></li><li><a href='/blog/categories/gradle'>Gradle (1)</a></li><li><a href='/blog/categories/groovy'>Groovy (1)</a></li><li><a href='/blog/categories/grub'>Grub (1)</a></li><li><a href='/blog/categories/https'>HTTPS (1)</a></li><li><a href='/blog/categories/java'>Java (5)</a></li><li><a href='/blog/categories/jboss'>JBoss (1)</a></li><li><a href='/blog/categories/jdk'>JDK (1)</a></li><li><a href='/blog/categories/jmx'>JMX (1)</a></li><li><a href='/blog/categories/kepler'>Kepler (1)</a></li><li><a href='/blog/categories/kernel'>Kernel (2)</a></li><li><a href='/blog/categories/ldap'>LDAP (1)</a></li><li><a href='/blog/categories/linux'>Linux (65)</a></li><li><a href='/blog/categories/lucid'>Lucid (4)</a></li><li><a href='/blog/categories/lxc'>Lxc (7)</a></li><li><a href='/blog/categories/macbook-air'>Macbook Air (2)</a></li><li><a href='/blog/categories/macbook-air-2013'>Macbook Air 2013 (1)</a></li><li><a href='/blog/categories/markdown'>Markdown (3)</a></li><li><a href='/blog/categories/mysql'>MySQL (1)</a></li><li><a href='/blog/categories/octopress'>Octopress (10)</a></li><li><a href='/blog/categories/openvpn'>OpenVPN (1)</a></li><li><a href='/blog/categories/packaging'>Packaging (7)</a></li><li><a href='/blog/categories/pakete'>Pakete (1)</a></li><li><a href='/blog/categories/passenger'>Passenger (1)</a></li><li><a href='/blog/categories/pdf'>PDF (1)</a></li><li><a href='/blog/categories/perl'>Perl (1)</a></li><li><a href='/blog/categories/pgp'>PGP (1)</a></li><li><a href='/blog/categories/pigdeonhole'>Pigdeonhole (2)</a></li><li><a href='/blog/categories/podcast'>Podcast (1)</a></li><li><a href='/blog/categories/precise'>Precise (33)</a></li><li><a href='/blog/categories/proxy'>Proxy (2)</a></li><li><a href='/blog/categories/quilt'>Quilt (2)</a></li><li><a href='/blog/categories/raring'>Raring (2)</a></li><li><a href='/blog/categories/redmine'>Redmine (3)</a></li><li><a href='/blog/categories/ruby'>Ruby (7)</a></li><li><a href='/blog/categories/server'>Server (1)</a></li><li><a href='/blog/categories/shell'>Shell (1)</a></li><li><a href='/blog/categories/smtp'>SMTP (1)</a></li><li><a href='/blog/categories/squid'>Squid (1)</a></li><li><a href='/blog/categories/ssh'>SSH (1)</a></li><li><a href='/blog/categories/subversion'>Subversion (5)</a></li><li><a href='/blog/categories/thunderbird'>Thunderbird (1)</a></li><li><a href='/blog/categories/truecrypt'>Truecrypt (1)</a></li><li><a href='/blog/categories/ubuntu'>Ubuntu (52)</a></li><li><a href='/blog/categories/usb'>USB (1)</a></li><li><a href='/blog/categories/webservice'>Webservice (1)</a></li><li><a href='/blog/categories/windows'>Windows (1)</a></li><li><a href='/blog/categories/zertifikat'>Zertifikat (1)</a></li><li><a href='/blog/categories/zfs'>ZFS (2)</a></li></ul>
</div>

source/_includes/custom/navigation.html

Die Themenseite wird durch Änderung an “source/_includes/custom/navigation.html” in die Navigation eingebunden:

Änderungen an source/_includes/custom/navigation.html
1
2
3
4
5
6
7
8
9
10
11
diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/n
index 0ec1963..a7592a0 100644
--- a/source/_includes/custom/navigation.html
+++ b/source/_includes/custom/navigation.html
@@ -1,6 +1,7 @@
 <ul class="main-navigation">
   <li><a href="/">Blog</a></li>
   <li><a href="/archives/">Archiv</a></li>
+  <li><a href="/categories/">Themen</a></li>
   <li><a href="/about/">Über mich</a></li>
   <li><a href="/impressum/">Impressum</a></li>

Comments