Question

我对CSS和HTML有一个相当新手的理解，我正在尝试做一些我认为应该相对简单的事情（在我正在创建的自定义tumblr主题中），但我找不到直截了当的答案。我有一种感觉，可能有一种超级简单的方法来做我想要的JavaScript。

我想在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}

有什么想法吗？非常感谢任何帮助！

Answer 1

这将有效：

{block:IndexPage}
  <div id="index"
    {block:SearchPage}style="display: none;"{/block:SearchPage}
    {block:TagPage}style="display: none;"{/block:TagPage}>
    This is displayed only on the index page.
  </div>
{/block:IndexPage}

更多信息：http://ejdraper.com/post/280968117/advanced-tumblr-customization

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

Answer 3

您也可以使用CSS。

#box{
  display:none;
}

.page1 #box{
  display:block;
}

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

Answer 4

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}

Answer 5

正如您所发现的，{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>

Answer 6

我最终完全删除了{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>

Answer 7

这可以通过使用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中，我已将display:none属性添加到:not类div的banner_1选择器。因此，将banner_1类除去div，#banner div下的所有其他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

中缺少大旗（茶是一种文化）

Answer 8

{block:IndexPage}

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

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

{/block:IndexPage}

Answer 9

或者，您可以使用此标记：{block:HomePage}。

该块仅在主页上呈现（即不在搜索页面，标签页面等）。

参考文献： https://www.tumblr.com/docs/fr/custom_themes

只在tumblr博客主页上显示div？

9 个答案: