如何在Tumblr博客的每个非主页页面中添加JavaScript？

Question

如何在Tumblr博客的每个非主页页面中添加JavaScript？

14

我想在我的Tumblr博客的每个独立文章页面上添加JavaScript代码。我有以下代码，但似乎从未出现在任何页面上，更不用说仅仅是永久链接或独立文章页面了。我尝试了许多变化，包括删除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 -->

- Eric Lubow

为什么不在每个页面上添加JavaScript呢？这样它就会被缓存，至少可以提高性能。 - lharby

因为Javascript应用程序不应该在foo.tumblr.com的主页面上触发。它应该在foo.tumblr.com/EveryPageButSearch上触发。 - Eric Lubow

看看这个：http://ejdraper.com/2009/12/13/advanced-tumblr-customization/（在页面中间稍微往下）。令人困惑的是，Tumblr块indexPage指的是不同类型的索引页面。您可以使用Tumblr标签来定位搜索页面，但省略代码更加复杂。我知道一种使用jquery解决此问题的方法（我认为可以将其移植到vanilla js），但当然它更加hacky，并且不如在Tumblr标签中设置的稳健。 - lharby

我的目标是进入除了首页和搜索页面之外的每个页面。我正在尝试使用Tumblr标签来实现这一点，但迄今为止还没有成功。那个页面上的信息没有帮助我取得任何进展。 - Eric Lubow

仅使用Tumblr标签是不可能的。 - lharby

2个回答

-3

我将这个放到我的沙盒博客里，看看可能出了什么问题。当我检查JS控制台时，我会自责的。

{block:Date},date:

在date之前去掉逗号，它应该可以工作。如果你有更多问题，请告诉我。

- Ally

我已经尝试将字段减少到仅包括url，但仍然无法正常工作。 - Eric Lubow

你是否检查了页面并确定脚本标签根本没有被插入？在代码的这个区域中，JS控制台是否有任何错误？因为当我从日期前面删除逗号时，它成功地插入了脚本标签。 - Ally

是的，我已经在另一个窗口中打开了帖子页面，并保存了更改并退出编辑器以确保100％。但我仍然看不到JS。我已经查看了文章和图像（foo.tumblr.com/image/123），但我没有看到JS。 - Eric Lubow

好的，它不会显示在图片页面上，因为Tumblr将其视为不同的东西进行处理。它只会出现在永久链接页面上。你没有收到任何控制台错误吗？ - Ally

我没有收到任何控制台错误，也没有在任何页面上看到JavaScript。 - Eric Lubow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lharby · Accepted Answer

这是我使用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/ （我不认为有搜索页面，搜索功能是您在模板中插入或激活的块，并可在每个页面上使用。）

该函数基本上检查索引页面（空主目录）或关于页面（如果需要，请将其替换为“搜索”或其他页面）。控制台日志将在每个页面上输出。如果路径匹配索引或关于，我已将正文颜色设置为粉色，否则每个其他页面都将是橙色。 http://sg-test.tumblr.com/about（粉色背景） http://sg-test.tumblr.com/post/134796799695/post-title（橙色背景）

按照这个逻辑，如果满足路径变量要求，就可以轻松地调整函数以执行您的代码，就像我的第一个例子一样。

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