javascript 仅在 tumblr 博客主页上显示 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9030983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
displaying a div only on tumblr blog homepage?
提问by soobes
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.
我对 CSS 和 HTML 的理解相当新手，我正在尝试做一些我认为应该相对简单的事情（在我正在创建的自定义 tumblr 主题中），但我找不到直接的答案。我有一种感觉，可能有一种超级简单的方法可以在 JavaScript 中做我想做的事。
I'd like to display a DIVonlyon 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 allindex 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.
我DIV只想在 tumblr 博客的主索引页面（即主页）上显示一个。tumblr 提供的文档似乎允许您在某种程度上执行此操作（通过 {Block:IndexPage} 变量），但问题是此元素中的代码显示在所有索引页面上（即，而不是仅显示在根级别在 /page/1 上，它将显示在后续的“索引”页面上，例如 /page/2 等。
Here's the code I have, which successfully does not show the div on permalink pages:
这是我拥有的代码，它成功地没有在永久链接页面上显示 div：
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
有任何想法吗？任何帮助深表感谢！
采纳答案by soobes
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
我最终完全删除了 {Block:IndexPage} 标签并将原始 div 标注更改为：
<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>
回答by Max Masnick
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
更多信息：http: //ejdraper.com/post/280968117/advanced-tumblr-customization
回答by Steve
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>
回答by Gaston
You can also do it just with CSS.
您也可以仅使用 CSS 来实现。
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
回答by Nosrevelk
display:nonewill hide it but thats, a hidden element can still mess with your layout.
display:none会隐藏它，但就是这样，隐藏的元素仍然会干扰您的布局。
We could use the comment code* to turn the div into a comment that wont mess with anything.
我们可以使用注释代码* 将 div 变成不会弄乱任何内容的注释。
*<!-- 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}
回答by ghosh'.
This is solved by using div:not() operator.
这是通过使用 div:not() 运算符解决的。
The HTML Markup will be
HTML 标记将是
{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
现在将此 CSS 添加到
#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:noneproperty to :notselector of that banner_1class div. Thus excluding div with banner_1class, all other div in under #bannerdiv will disappear. Additionally, div with id #banneris hidden in search and tag pages.
background:{CurrentPage}是一个 Tumblr 主题变量，它返回索引页的页码（如 1、2、3、...）。因此，任何 Tumblr 博客的主页都是页码“1”。现在我已经定义了一个 div 的类，这个页码与一个字符串“banner_”相连（类不能是数字。WTF 为什么？） - 在主页上制作类名“banner_1”。接下来，在 CSS 中，我为该类 div 的选择器添加了display:none属性。因此，排除带有类的div，div 下的所有其他div 将消失。此外，带有 id 的 div隐藏在搜索和标记页面中。:notbanner_1banner_1#banner#banner
Note: <div id="#banner" >is required. Without this, :notwill hide all divs in the html.
注：<div id="#banner" >必填。如果没有这个，:not将隐藏 html 中的所有 div。
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
警告：IE 用户（还有人离开吗？）需要改变他们的习惯。这仅在 FF、Chrome、Safari 和 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
我已经实现了这个http://theteazone.tumblr.com/大横幅（茶文化）不存在在http://theteazone.tumblr.com/page/2
回答by Dmitry
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
回答by Stephan
Alternatively, you can use this tag: {block:HomePage}.
或者，您可以使用此标签：{block:HomePage}。
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
顾名思义，该块仅在主页上呈现（即不在搜索页面、标记页面等上）。
References: https://www.tumblr.com/docs/fr/custom_themes
回答by ThinkingStiff
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:IndexPage}正如您所发现的，该块适用于所有索引页。要仅定位第一页，您可以使用{block:Post1}内联或{CurrentPage}脚本。{block:Post1}将只显示在第一篇文章的页面上，这实现了你想要的。在<div>随后可样式把它不管你想要的。
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
或者：
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
