Javascript 使用脚本更改tumblr布局主题

我想在我的tumblr博客中添加不同的主题设计。如果我点击标签，设计应该会改变。例如，如果我点击标签“食品”的背景，侧边栏图像和字体应该变成一个与食品相关的主题。因为如果我试图改变标签站点本身，我不会一事无成（tumblr不允许我用新页面覆盖这一面），所以我开始考虑是否可以用脚本函数解决这个问题。我找到了一个与我搜索的代码非常接近的代码，它起了作用（我只需要改变背景想法，因为我找不到用这个来改变边栏图像的方法）。有了这段代码，我安装了一个按钮，可以更改主题并将您发送到fitting tag站点。现在的问题是，在我到达正确的站点之前，站点的更改已经生效

例如：我在我的主页上，如果我现在点击标签“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：

以下是我博客中代码的结尾（我没有触及代码的其余部分）：

{block:IfSoundCloudLinkForPlayer}{/block:IfSoundCloudLinkForPlayer}$（“#加载”）.hide（）；{block:IfGoogleAnalyticsID}
var _gaq=_gaq | |[]；
_gaq.push（[''u setAccount'，'{text:Google Analytics ID}'）；
_gaq.push（[''u trackPageview']）；
（功能（）{
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）；
})();
{/block:IfGoogleAnalyticsID}
var _href=document.location.href；
var_primaryDir=document.location.pathname.split（“/”[1]；
var_secondaryDir=document.location.pathname.split（“/”[2]；
如果（_secondaryDir=='test'）{
$（'body'）.css（'background-color'，'#c0'）
}
如果（_secondaryDir=='test'）{
$（'body'）.css（'masthead-background'，'http://www.rexwallpapers.com/images/wallpapers/landscape/sunshine/sunshine_5.jpg')
}否则{
$（'body'）.css（'masthead-bg'，'#08298A'））
}

---

早些时候，我一直在摆弄不同的参数，但这就是目前的情况。报头的背景只是我在网上找到的一张随机照片。我尝试了不同的链接，但没有人成功，所以我想我的个人照片也不会成功。正如我已经说过的，唯一有效的方法是改变背景颜色。

好的，根据您评论中的反馈，我在自己（和其他）TumblR上使用了一个系统

首先确保在主题中有一个到jquery的链接，很多主题都有，但如果您的主题没有将其添加到文档的开头

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

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

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

var _href=document.location.href；
var_primaryDir=document.location.pathname.split（“/”[1]；
var_secondaryDir=document.location.pathname.split（“/”[2]；
如果（_secondaryDir==‘食物’）{
$（'body'）.css（'background-image'，'path/yourmage.png'））
}否则{
$（'body'）.css（'background-image'，'path/fallbackimage.png'））
}

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

如果它与食物相匹配，那么背景应该改变

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

---

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

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

当变量与测试匹配时，它会改变背景颜色

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语句可以工作，因为背景颜色是css属性。报头背景和报头背景不是css属性

如果你尝试

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

这应该行得通

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

编辑

我的css语法出错了

应该是这样的：

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

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

或（速记）

因此jquery应该如下所示：

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

 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语句将使用默认图像，因此这应该适用于任何其他页面

抱歉弄错了

---

你可以在这里看到：检查左边的页面链接

javascript不维护页面之间的状态，您必须将状态数据存储在cookie或LocalStorages中。我不是编程专家，只知道学校的基本知识。Cookie和localStorage当然不属于这一类。我想在我把事情搞砸之前，我应该把手放下。但是谢谢你的重播您可以捕获当前页面的url参数，然后设置一些css，而不是将其附加到将指向另一个页面的按钮上。如果找到某些匹配项，则设置一些css。如果没有找到匹配项，则这不是动态的，但您需要提前知道标记。我已经使用jquery完成了这项工作。如果这是有用的，让我知道，我可以提供更多的帮助。是的，这正是我一直在寻找最初。带有脚本的按钮是一个“PlanB”的想法，因为我不知道如何用简单的css来改变它。我已经想过自己捕捉url参数，但我不知道如何做到这一点。我可以看看你一直在使用的代码吗？好东西，不过我还要提到“传统”URL参数语法

？cat=food&tag=

等等。我从来没有在tu上看到过