How do I add JavaScript to every non-index page on my Tumblr blog?

Question

I want to add JavaScript code to every individual post page on my Tumblr blog. I have the following, but it seems to never show up on any page let alone just the permalink or individual post pages. I've tried many variations here with removing the Posts block or the PermalinkPage block to no avail. What am I doing wrong here?

<!-- Start JS -->
{block:Posts}
    {block:PermalinkPage}
    <script type='text/javascript'>
    __config = {
            {block:Date},date:'{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}'{/block:Date}
            {block:PostSummary},title:{JSPlaintextPostSummary}{/block:PostSummary}
            {block:HasTags},tags:[{block:Tags}'{Tag}', {/block:Tags}],{/block:HasTags}
            ,url:'{URLEncodedPermalink}'
    };
    (function(){
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = document.location.protocol + '//example.com/example.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
    })();
    </script>
    {/block:PermalinkPage}
{/block:Posts}
<!-- END JS -->

Answer 1

This is how I would solve it using JavaScript/front end.

var path = document.location.pathname;
path = path.split("/")[1]; // Should return the primary directory
path = path.toLowerCase(); // This should catch your.tumblr.com/Search and your.tumblr.com/search
if(path === "" || path === "search")){
    console.log('Index or Search page');
}else{
   // Run your function here
}

Basically if the path URL is empty or is equal to search then do not run the function, but run the function in any other case.

However, as I mentioned this is not 100% robust. As the path might be http://your.tumblr.com/# and the function will fail, so you may have to build more explicit logic (you can say if path !== " " for an empty string).

I'm still not sure why it's not a good idea to have this on every page. Unless users are definitely being linked to pages on the site that and are not being routed via the index page. And unless your JavaScript code is massive, it could all be cached from the index page (but still available from all other pages in case of hotlinking, etc.).

EDIT

As per comments below, I have created a basic example on a test Tumblr account.

The code looks like this:

  var path = document.location.pathname;
  path = path.split("/")[1];
  path = path.toLowerCase();
  if(path === "" || path === "about"){
    $('body').css('background','#F09');
    console.log('Index or about page');
  }else{
    $('body').css('background','#FC0');
    console.log('Other page');
  }

The Tumblr page I am using is here: http://sg-test.tumblr.com/

(I do not think there is a search page, the search function is a block you insert or activate within your template and is available on every page.)

The function basically checks for the index page (empty primary directory), or the about page (substitute this for 'search' or another page if needs be).

Console logs will output on every page. And if path matches index or about I have set the body colour to pink, or else every other page will be orange.

http://sg-test.tumblr.com/about (pink background)

http://sg-test.tumblr.com/post/134796799695/post-title (orange background)

By this logic it should be easy to adapt the function to execute your code if it meets the path variable requirements, as in my first example.

As I mentioned though there is an issue with http://sg-test.tumblr.com/#. This is effectively still the index page, but our test is returning false for an empty directory, even though Tumblr is mapping it to the home page.