Scripts for the "Labels" links in my sidebar
There is probably some good pre-fab way to get Blogger to publish links to your blog labels (when you host the content on your own site), but I did not find anything official. Because I have infinite time to waste on web development, I wrote my own scripts instead of using someone else's. I figure I'd share these scripts, so that everyone else can look at them then decide to write their own, too. You can see the finished result in my sidebar on the right, in the Labels section.
There are 3 steps:
- Get the labels and make html (bash script)
- Make the resulting html embeddable in a webpage (javascript)
- Modify my blogger template
It was pretty easy to fetch all the labeled content, using the ls command in the labels/ directory (I am running my webserver on a GNU/Linux system). Then I massaged the output until I had line breaking, label separators, and number-of-posts per label. I put these steps together in my label_lister bash script, because I didn't want to use php (or similar) to access my filesystem. It might be useful to look at the raw output from my labels_lister script. Of course I had to enable cgi scripts in my apache config.
The next step was harder: getting the bash script's output into my blogger-generated index.html file. I chose not to use Server Side Includes to embed the labels html into the blogger-generated index.html file, because I thought I would have to enable SSI for all .html files and that was discouraged by the apache manual.
Instead, I used XMLHttp with javascript. I've done this in greasemonkey scripts in the past, which hides browser implementation details and some other stuff I did not previously realize. Still, the javascript was not too hard. Here is my script: get_labels.js.
Finally, I modified my blogger template. In the blogger template's head, I sourced my javascript:
<script type="text/javascript" src="http://notes.komarix.org/js/get_labels.js"></script>
Then I added one extra CSS class in the template's head:
#sidebar div {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
}
Finally, I added my Labels section to the sidebar, below the links section, and above previous posts section:
<MainOrArchivePage>
<h2 class="sidebar-title">Labels</h2>
<a href="/">(click here to undo label selection)</a><br /><br />
<div id='labelsList' class='sidebar-div'>
<ul>
<li><a href="/labels/yoga.html">Yoga</a></li>
</ul>
<script>getLabelItems(document.getElementById('labelsList'));</script>
</div>
</MainOrArchivePage>
And that's it. Possibly more work than it was worth, except that I refreshed my memory on javascript and cgi details, and learned a little bit of new stuff. If I were doing it over, I'd probably start with the bash script and tell apache to do SSI for all .html files. I doubt the server load would be that large, especially for my blog. =-)
Labels: instructions
