logo标签列表

如何在Tumblr博客首页上仅显示一个div？

javascripthtmlcsstumblr
3
我对CSS和HTML有一定的了解，我正在尝试在自定义tumblr主题中实现一个相对简单的功能，即仅在tumblr博客的主索引页（即主页）上显示DIV。看起来tumblr提供的文档可以在某种程度上做到这一点（通过{Block:IndexPage}变量），但问题是该元素内的代码会在所有索引页上显示（即不仅在/page/1这个根目录上显示，而且还会在后续的“索引”页面，如/page/2等上显示）。以下是我拥有的代码，它成功地在永久链接页面上不显示div：
{block:IndexPage}
    <div class="mid2">
        <div class="midLeft2">  
            <p>test</p>
        </div>   
    </div>
{/block:IndexPage}

任何想法？非常感谢您的帮助！
很有可能这与JavaScript无关，而是Tumblr使用的模板系统。 - vinczemarton
@SoonDead 对的，所以 {Block:IndexPage} 变量在这里显然是有限制的，但既然所有这些最终都只是使用 HTML，我想肯定有一种我不熟悉的方式来通过覆盖此行为来实现？比如说，也许页面可以通过某种方式检查其位置，并且仅在它是主页时显示 div？ - soobes
我相信有更好的解决方案，但你可以编写一个JavaScript代码，当location.href是首页时，使元素“display: block”。这是一种最后的手段，但我可以帮助你编写它。 - vinczemarton
@SoonDead非常感谢您提供帮助。我的一位懂JavaScript的朋友根据您的建议想出了一个解决方案。我真的很感激您提供帮助编写脚本！ - soobes
9个回答
9
这对我来说非常完美，即使在/post/asdf页面上也是如此。 - SeanR
2
我想在文章页面上显示代码，但不想在索引、搜索等页面上显示（即包含多篇文章的页面）。多谢以上内容，我找到了方法，并希望与大家分享，以便有所帮助。
<div id="splashbox" style="display:none">
      This is the content I wanted to show on the post pages only.
</div>

<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
   //alert('location identified as ' + location.href);
   if (self.location.href.indexOf("post") > -1 )  {
           document.getElementById('splashbox').style.display='block';
   }
}
</script>
1

你也可以只用CSS实现这个功能。

#box{
  display:none;
}

.page1 #box{
  display:block;
}

<body class="page{CurrentPage}">
  <div id="box">
    Only displayed in first page.
  </div>
</body>
1

display:none会隐藏它，但是一个隐藏的元素仍然可能影响你的布局。

我们可以使用注释代码*将div转换为不会影响任何东西的注释。

*<!-- comment -->

例：

{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}


<div style="width:400px; heigth:200px">
blah blah
</div>   



{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
0

最终我干脆取消了 {Block:IndexPage} 标签，并将原始的 div 调用更改为：

<div id="splashbox" class="mid2" style="display:none">

接下来是这个脚本：

<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
   //alert('location identified as ' + location.href);
   if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
           //alert('location match, show the block');
           document.getElementById('splashbox').style.display='block';
   }
}
</script>
如果（{CurrentPage} == 1）{ } 执行相同的操作。 - ThinkingStiff
这里可能有一种更好的方法，可以使用CSS（无需JavaScript）。请参见下面的答案。 - Max Masnick
我来晚了，因为现在我正在尝试让这个在客户的Tumblr上工作，但是为什么会有一个或语句用于两个相同的条件？这只是一个示例，一种展示您可以编写不同的URL以在不同页面上隐藏元素的方法吗？谢谢。 - lharby
0

{block:IndexPage}块，正如您所发现的，适用于所有索引页面。要仅针对第一页，请使用{block:Post1}内联或脚本中的{CurrentPage}。 {block:Post1}仅在具有第一篇文章的页面上显示，从而实现了您想要的效果。然后可以对<div>进行样式设置，将其放置在任何位置。

{block:Post1}
<div class="mid2">
    <div class="midLeft2">  
        <p>test</p>
    </div>   
</div>
{/block:Post1}

或者：

<script>
if( {CurrentPage} == 1 ) {
    //display div
};
</script>
谢谢您的帮助。这个方法不太可行，因为{block:Post1}不是Tumblr识别的变量，但是我的朋友想出的解决方案与此相差不远。解决方法是使用location.href检查索引页面，并在href为索引时使用display:block，否则使用display:none。我非常感谢您的乐意协助，谢谢！ - soobes
@soobes 我在我的主题中使用它。请访问http://www.tumblr.com/docs/en/custom_themes并搜索“block:post [”了解更多信息。 - ThinkingStiff
我明白你的意思，但是当我早些时候尝试它时，这段代码渲染得不太对，因为我不想仅针对第一篇文章来定位div，而是要针对索引，无论文章编号或时间顺序如何。以下是我的朋友想出的答案。 - soobes
@soobes的第一篇帖子总是且仅在第一页，即索引页面上。 - ThinkingStiff
@soobes：我找到了这个页面，因为我需要同样的东西，而且我不想使用JS，因为我不想让任何div“弹出”。这个方法是有效的，但诀窍在于{block:Post1}块必须出现在{block:Posts}块内部，这可能是为什么它对你不起作用的原因。所以它不一定需要在第一个帖子中，但它将在相同的父容器中。 - anonymouse
0
0

这可以通过使用div：not（）运算符来解决。

HTML标记将是

{block:IndexPage}
<div id="banner">
   <div class="banner_{CurrentPage}">
      This Content will appear in only on home page
   </div>
</div>
{/block:IndexPage}

现在将此CSS添加到

#banner div:not(.banner_1)
{
   display:none;
}
{block:SearchPage}
    #banner
    {
       display:none;
    }
{/block:SearchPage}
{block:TagPage}
    #banner
    {
       display:none;
    }
{/block:TagPage}

背景： {CurrentPage} 是 Tumblr 主题变量，返回索引页面的页码（例如 1、2、3...）。因此，任何 Tumblr 博客的主页都是页面编号“1”。现在，我已经定义了一个 div 的类，该类将这个页面编号与字符串“banner_”连接起来（类不能是数字。WTF为什么？）-在主页上将类名设置为“banner_1”。接下来，在 CSS 中，我添加了 :not 选择器的 display:none 属性到该 banner_1 类 div 上。因此，在排除具有banner_1类的 div 的情况下，所有其他 div 在 #banner div 下将消失。此外，在搜索和标签页面中隐藏 id 为 #banner 的 div。
注意：需要 <div id="#banner" >。没有它，:not 将隐藏 HTML 中的所有 div。

警告：IE用户（还有人在用吗？）需要改变他们的习惯。这只支持FF，Chrome，Safari和Opera。

我已经在http://theteazone.tumblr.com/中实现了这个功能。大横幅（茶是一种文化）在http://theteazone.tumblr.com/page/2中不存在。

现在支持IE 9 :) - bashaus
0
{block:IndexPage}

<script>
   if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>

<div id="banners">
   blablabla
</div> --> 

{/block:IndexPage}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接