Oct
14
Using Javascript to Provide Dynamic Content in Tumblr
This article describes how content can be added to Tumblr using Javascript, and the jQuery library. The reader should be familiar with web development.
A Simplified Theme
<html>
<head>
<title>My Tumblr</title>
<script type="text/javascript" src="http://example.org/jquery.js"></script>
<script type="text/javascript" src="http://example.org/tumblr-dyn.js"></script>
</head>
<body>
{block:Posts}…{/block:Posts}
<p id="quote-of-the-day" style="display:none"></p>
</body>
</html>
We shall add a quote to #quote-of-the-day for permalink views.
tumblr-dyn.js
var isSinglePostView = function() {
var loc = document.baseURI;
var re = new RegExp(".*mytumblr.example.org/post/.*");
return loc.match(re) != null;
}
$(window).ready(function() {
if (isSinglePostView()) {
var qotd = $("#quote-of-the-day");
qotd.html(
'"You should\'ve seen the look on her face. It was the same look ' +
'my father gave me when I told him I wanted to be a ventriloquist."' +
' – George Costanza');
qotd.css('display', 'block');
}
});
You can use this approach to add custom content depending on what page the user is viewing.
