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

发布于 2024-12-29 10:20:35 字数 599 浏览 0 评论 0原文

我对 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}

任何想法非常感谢任何帮助！

原文

I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.

I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.

Here's the code I have, which successfully does not show the div on permalink pages:

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

Any ideas? Any help is much appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眉目亦如画i 2025-01-05 10:20:35

这将起作用：

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

This will work:

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

More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization

回复收藏 0 原文

兮颜 2025-01-05 10:20:35

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

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

I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.

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

回复收藏 0 原文

蓝海似她心 2025-01-05 10:20:35

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

#box{
  display:none;
}

.page1 #box{
  display:block;
}

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

You can also do it just with CSS.

#box{
  display:none;
}

.page1 #box{
  display:block;
}

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

回复收藏 0 原文

东京女 2025-01-05 10:20:35

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}

display:none will hide it but thats, a hidden element can still mess with your layout.

We could use the comment code* to turn the div into a comment that wont mess with anything.

*<!-- comment -->

ex.

{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 原文

仙女山的月亮 2025-01-05 10:20:35

正如您所发现的，{block:IndexPage} 块适用于所有索引页。要仅定位第一页，您可以在脚本中使用 {block:Post1} 内联或 {CurrentPage} 。 {block:Post1} 只会显示在第一篇帖子的页面上，这就达到了你想要的效果。然后可以对

进行样式设置，将其放置在您想要的任何位置。

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

或者：

<script>
if( {CurrentPage} == 1 ) {
    //display div
};
</script>

The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.

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

Or:

<script>
if( {CurrentPage} == 1 ) {
    //display div
};
</script>

回复收藏 0 原文

生死何惧 2025-01-05 10:20:35

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

I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:

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

Followed by this script:

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

回复收藏 0 原文

阳光下慵懒的猫 2025-01-05 10:20:35

这是通过使用 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 隐藏在搜索和标签页面中。

注意：

为必填项。如果没有这个， :not 将隐藏 html 中的所有 div。

警告：IE用户（还有人吗？）需要改变他们的习惯。仅 FF、Chrome、Safari 和 Opera 支持此功能。

我已经在 http://theteazone.tumblr.com/ The Big Banner 中实现了这一点（茶是一种文化） http://theteazone.tumblr.com/page/2 中不存在

This is solved by using div:not() operator.

The HTML Markup will be

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

Now add this CSS to

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

The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.

Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.

Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.

I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2

回复收藏 0 原文

时光磨忆 2025-01-05 10:20:35

{block:IndexPage}

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

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

{/block:IndexPage}

{block:IndexPage}

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

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

{/block:IndexPage}

回复收藏 0 原文