DR3WH0.png DR3WH0

Time Travel & Other Anomalies

Searching with Jekyll, JSON, & JavaScript

    How I added tag search results to this blog, or Standing on the Shoulders of Hackers.

A big part of learning to do anything is watching those who can do something well and then emulating that behavior. I am no expert on any of the three J’s listed above, but I know enough about coding to cobble something together when the need arises and I can find a good model to work with.

My last post discussed how to set up the SCM Music Player, a nice tool for embedding an mp3 player in your site. Unfortunately, it broke the #-ref link that jumped to the tag listing on the Tags index when clicking on a tag at the bottom of a post. Interestingly enough, writing the last post on SCM led me to this blog that has some great Jekyll tips and tools and a solution to the tag link problem.

One of those tools is a set of JavaScript functions that allow for dispaying Liquid tags on a Jekyll blog, setting up search pages for categories and tags, and other things that I’ve yet to explore. I implemented the Liquid tag escape with a bit of modification to the replaceERBTags function call to match this site’s html, and I’ll briefly explain how I set up tag search results.

In addition to the JavaScript suite linked above, I grabbed search.json, post.json, and search.html. The first two files populate the third file with customized results from http://DR3WH0.net/search.json when a GET request is made with the custom JavaScript.

As highlighted in the search.html link above, I changed the <h1> tag to an <h2> to match this site. That necessitated a change in the JavaScript function to look for the right tag to print the page title. Finally, I modified the URL creator in _includes/JB/tags_list to point to the right search results page when a tag box is clicked in a post.

That got the search results working, but I missed the tooltip descriptions that appear when hovering above a post link elsewhere in the site. I added a description field to post.json and slightly modified the JavaScript code to produce a title attribute for the <a> tag. Also be sure to point to the JavaScript file somewhere on your default layout.

Tuesday, August 27, 2013 Creative Commons License
This post is licensed under a Creative Commons Attribution 3.0 Unported License.