Question

我想在我的tumblr博客中添加不同的主题设计。如果我点击标签，设计应该会改变。例如，如果我点击标签“食物”背景，侧边栏图像和字体应该变成与食物相关的主题。因为如果我尝试更改标记网站本身（tumblr不允许我用新页面覆盖这一边），我就无处可去了。我开始研究是否可以使用脚本函数来解决这个问题。我找到了一个接近我搜索的代码并且它工作的代码（我只需要改变背景思想，因为我找不到用这个改变侧边栏图像的方法）。使用此代码，我安装了一个按钮，该按钮应该更改主题并将您发送到拟合标记站点。现在的问题是，在我到达正确的站点之前，站点的更改是适用的。

例如：我在我的家庭网站上，如果我现在点击标签“food”的按钮，主页的设计会发生变化，标签网站将加载后风格再次恢复正常。它应该切换。首先加载正确的站点，然后更改设计。它应该在您浏览标签相关页面时保持设计，如果您离开页面则应该更改。有人知道如何解决这个问题吗？

这是我找到的代码：

<script language="JavaScript">
<!--
function changeBGC(color){
document.body.style.backgroundColor = color;

}
//-->
</script>




<a href="tagged/food" onClick="javascript:changeBGC('#000099')">Click Blue</a>

在反馈后更新16.07.14：

以下是我的博客代码的结尾（我没有触及剩下的代码）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> {block:IfSoundCloudLinkForPlayer} <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> <script src="http://static.tumblr.com/j8hz7jr/nqTn1t8gg/stratus.js"></script> {/block:IfSoundCloudLinkForPlayer} <script src="http://static.tumblr.com/79xqv9n/d4nn7c5ja/theme.min.js"></script> <script>$('#loading').hide();</script> {block:IfGoogleAnalyticsID} <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{text:Google Analytics ID}']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script> {/block:IfGoogleAnalyticsID} <!--OO.TS.--> 

     <script type="text/javascript">

  var _href             = document.location.href;       
  var _primaryDir       = document.location.pathname.split("/")[1];
  var _secondaryDir     = document.location.pathname.split("/")[2];

  if (_secondaryDir == 'test'){
     $('body').css('background-color','#C0C0C0')
  }
  if (_secondaryDir == 'test'){
     $('body').css('masthead-background','http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
  }else{
     $('body').css('masthead-bg','#08298A') 
  }
</script>                           
    </body> </html>

我之前一直在讨论不同的参数，但这就是它当下的样子。标头背景只是我在互联网上发现的随机图片。我尝试了不同的链接，但没有人工作，所以我猜我的个人照片也不会起作用。就像我已经说过的那样，唯一有效的是改变背景颜色。

Answer 1

好的，根据您评论中的反馈，这是我在自己（和其他）tumblrs上使用的系统。

首先确保你的主题中有一个指向jquery的链接，但是如果你的主题没有添加到文档的头部。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

现在我们可以编写一些脚本来捕获url params。

<script type="text/javascript">

  var _href             = document.location.href;       
  var _primaryDir       = document.location.pathname.split("/")[1];
  var _secondaryDir     = document.location.pathname.split("/")[2];

  if (_secondaryDir == 'food'){
     $('body').css('background-image','path/yourimage.png')
  }else{
     $('body').css('background-image','path/fallbackimage.png') 
  }

</script>

这将检查辅助目录some.tumblr.com/tagged/food

如果它与食物匹配则背景应该改变。

然后，您可以编写else if语句并添加更多参数。

希望这是足够的信息，如果你需要更多让我知道。

Answer 2

好的，所以这个页面正常运行：

http://layouttestblog2.tumblr.com/tagged/test

当变量与test匹配时，它会更改背景颜色。

var _href             = document.location.href;       
var _primaryDir       = document.location.pathname.split("/")[1];
var _secondaryDir     = document.location.pathname.split("/")[2];

if (_secondaryDir == 'test'){
   $('body').css('background-color','#C0C0C0')
}
if (_secondaryDir == 'test'){
   $('body').css('masthead-background','http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
}else{
   $('body').css('masthead-bg','#08298A') 
}

所以第一个if语句有效，因为background-color是一个css属性。 masthead-background和masthead-bg不是css属性。

如果您尝试

 if (_secondaryDir == 'test'){
   $('body').css('background-image','http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
}

那应该有用

（不要担心测试tumblr帐户，我有大约8个用于测试）。

修改

我的css语法错了。

它应该是这样的：

body {
   background-image:url("imagefile.png");
}

或（简写）

body {
   background:url("imagefile.png") 0 0 no-repeat;
}

所以jquery应该是这样的：

 if (_secondaryDir == 'bespoke'){
    $('body').css('background','url("http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg")')
}else if (_secondaryDir == "tailoring") {
    $('body').css('background','url("http://upload.wikimedia.org/wikipedia/commons/d/d7/Sad-pug.jpg")') 
}else if (_secondaryDir == "wedding") {
    $('body').css('background','url("http://www.vam.ac.uk/users/sites/default/files/album_images/56177-large.jpg")') 
}else if (_secondaryDir == "suits") {
    $('body').css('background','url("http://www.roopevintage.com/blog/wp-content/uploads/2010/11/NHS-524-Tortoise.jpg")') 
}else {
    $('body').css('background-image','url("http://irishmarxism.files.wordpress.com/2012/06/default1.jpg")')
}

如果没有其他条件匹配，则最终的else语句使用默认图像，因此这应该适用于任何其他页面。

为混淆道歉。

你可以在这里看到这个：http://madox-test.tumblr.com/检查左边的页面链接。

用脚本更改tumblr布局主题

2 个答案: