仅在tumblr博客主页上显示div

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

我想在tumblr博客的主索引页面（即主页）上只显示一个DIV。tumblr提供的文档似乎在某种程度上允许你这样做（通过{Block:IndexPage}变量），但问题是这个元素中的代码显示在所有索引页上（即，它不会只显示在/page/1的根级别，而是会显示在随后的"索引"页上，如/page/2等

这是我的代码，它成功地没有在permalink页面上显示div：

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

有什么想法吗？非常感谢您的帮助！

这将起作用：

{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

我想在帖子页面上显示代码，但不是在索引、搜索等页面上（即有多个帖子的页面）。多亏了上面的内容，我想出了如何做到这一点，并想分享，以防对其他人有帮助。

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

您也可以只使用CSS来完成。

#box{
  display:none;
}
.page1 #box{
  display:block;
}

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

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}

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

这可以通过使用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}是一个汤博乐主题变量，它返回索引页的页数（如1、2、3…）。因此，任何汤博乐博客的主页都是页码"1"。现在，我定义了一个div的类，这个页码与字符串"banner_"连接（类不能是数字。WTF为什么？）-使主页上的类名为"banner_1"。接下来，在CSS中，我在banner_1类div的:not选择器中添加了display:none属性。因此，除了banner_1类的div之外，#bannerdiv下的所有其他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

{block:IndexPage}
<script>
   if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
   blablabla
</div> --> 
{/block:IndexPage}

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

顾名思义，这个块只在主页上呈现（即不在搜索页面、标签页面等上）。

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

相关内容

最新更新

热门标签：