仅在 tumblr 博客主页上显示 div？答案

【问题标题】：displaying a div only on tumblr blog homepage?仅在 tumblr 博客主页上显示 div？
【发布时间】：2012-01-27 09:05:20
【问题描述】：

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

我想在 tumblr 博客的主索引页面（即主页）上显示 DIVonly。似乎 tumblr 提供的文档允许您在某种程度上执行此操作（通过 {Block:IndexPage} 变量），但问题是此元素中的代码显示在 all 索引页面上（即，而不是仅显示在 /page/1 的根级别，它将显示在后续的“索引”页面上，例如 /page/2 等。

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

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

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

【问题讨论】：

这很有可能与 javascript 无关，而是 tumblr 使用的模板系统。
@SoonDead 对，所以 {Block:IndexPage} 变量在这里显然受到限制，但由于所有这些最终都只是使用 HTML，我认为必须有一种方法来覆盖这种行为through 意味着我不熟悉？就像也许让页面以某种方式检查它的位置，并且只在它是主页时才显示 div？
我确信有更好的解决方案，但是当 location.href 是索引页面时，您始终可以编写一个使元素“显示：块”的 javascript。这是一种万不得已的解决方案，但我可以帮你写。
@SoonDead 非常感谢您提供帮助。我的一位知道 javascript 的朋友能够根据您的建议提出解决方案。非常感谢您提供帮助编写脚本！

标签： javascript html css tumblr

【解决方案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}

【讨论】：

这对我来说非常有效，即使在 /post/asdf 页面上也是如此。

【解决方案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>

【讨论】：

【解决方案3】：

你也可以只用 CSS 来做。

#box{
  display:none;
}

.page1 #box{
  display:block;
}

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

【讨论】：

【解决方案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}

【讨论】：

【解决方案5】：

正如您所发现的，{block:IndexPage} 块适用于所有索引页面。要仅定位第一页，您可以在脚本中使用 {block:Post1} inline 或 {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 我在我的主题中使用它。在tumblr.com/docs/en/custom_themes 中搜索“block:post[”。
我明白你的意思，但是当我早先尝试它时，这段代码呈现得不太正确，因为我不是试图将 div 仅定位到帖子 1，而是定位到索引，不管职位编号或年表。这是我朋友想出的（答案如下）。
@soobes 帖子 1 始终且仅位于第 1 页，即索引页。
@soobes：我发现这个页面是因为我需要同样的东西，而且我不想使用 JS，因为我不想让任何 div “弹出”。这可行，但诀窍是 {block:Post1} 块必须出现在块 {block:Posts} 内，这可能是它不适合你的原因。所以它不一定需要在帖子 1 中，但它会在同一个父容器中。

【解决方案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>

【讨论】：

if( {CurrentPage} == 1 ) { 做同样的事情。
使用 CSS（无 JavaScript）可能有更好的方法。请参阅下面的答案。
我参加聚会很晚了，因为我现在正试图让它在客户 tumblr 上工作，但为什么两个条件相同的 or 语句？这只是一个示例和一种方式，表明您可以编写不同的 url 来隐藏不同页面上的元素。谢谢

【解决方案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 属性添加到banner_1 类div 的:not 选择器。因此，除了 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 中没有大横幅（茶是一种文化）

【讨论】：

现在支持 IE 9 :)

【解决方案8】：

{block:IndexPage}

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

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

{/block:IndexPage}

【讨论】：

【解决方案9】：

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

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

参考资料： https://www.tumblr.com/docs/fr/custom_themes

【讨论】：