我如何将JavaScript添加到我的Tumblr博客上的每个非索引页面

Question

我想添加JavaScript代码到我的Tumblr博客上的每个单独的帖子页面。我有以下内容，但它似乎永远不会出现在任何页面上，更不用说只是永久链接或个人帖子页面。我在这里尝试了许多变化，删除了Posts块或PermalinkPage块，但无济于事。我哪里做错了?

<!-- 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

这就是我如何使用JavaScript/前端解决它。

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
}

基本上，如果路径URL为空或等于search，则不运行该函数，但在任何其他情况下运行该函数。

然而，正如我提到的，这不是100%健壮的。由于路径可能是http://your.tumblr.com/#，函数将失败，因此您可能必须构建更显式的逻辑(您可以说如果path !== " "为空字符串)。

我仍然不确定为什么在每页上都有这个不是一个好主意。除非用户确实被链接到网站上的页面，而不是通过索引页路由。除非你的JavaScript代码很庞大，否则它可以全部从索引页缓存(但在热链接等情况下仍然可以从所有其他页面缓存)。

编辑

根据下面的评论，我在一个测试Tumblr帐户上创建了一个基本示例。

代码如下:

  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');
  }

我使用的Tumblr页面在这里:http://sg-test.tumblr.com/

(我不认为有一个搜索页面，搜索功能是一个块，您插入或激活您的模板，并可在每个页面。)

该函数主要检查索引页(空主目录)或about页(如果需要，将其替换为'search'或其他页)。

控制台日志将在每页输出。如果路径与索引匹配，我将正文颜色设置为粉色，否则其他页面将为橙色。

http://sg-test.tumblr.com/about(粉色背景)

http://sg-test.tumblr.com/post/134796799695/post-title(橙色背景)

根据这个逻辑，如果满足路径变量要求，应该很容易调整函数来执行代码，就像我的第一个例子一样。

正如我提到的，虽然有一个问题与http://sg-test.tumblr.com/#。这实际上仍然是索引页，但是对于空目录，我们的测试返回false，即使Tumblr将其映射到主页。

Answer 2

我把这个推到我的沙箱博客，看看问题可能是什么，当我检查JS控制台时，它是一个额头拍打。

{block:Date},date:

去掉date前面的逗号，应该可以工作。