tumblrブログのホームページにのみdivを表示していますか？

私はかなり初心者のCSSとHTMLを理解しています。私は比較的単純な（私が作成しているカスタムのtumblrテーマで）すべきことをやろうとしていますが、簡単な答えは見つけられません。私はJavaScriptの中で私が欲しいものをするための超簡単な方法があるかもしれないという気持ちがあります。tumblrブログのホームページにのみdivを表示していますか？

私はDIVのみをとして、tumblrブログのメインインデックスページ（ホームページ）に表示したいと考えています。 tumblrが提供するドキュメントでは、ある程度（{Block：IndexPage}変数で）これを行うことができますが、この要素内のコードはに表示されます。すべてインデックスページに表示されます

：のルートレベル/ページ/ 1は、それがその他/ページ/ 2、ここで

のような、その後の「インデックス」ページに表示されます成功しパーマリンクページ上のdivが表示されない私が持っているコードを、です

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

任意のアイデア？すべてのヘルプははるかに高く評価される！{block:IndexPage}

出典

2012-01-27 soobes

これではJavaScriptとは何の関係もありませんが、テンプレートシステムのtumblrのが使用する大きなチャンスがあります。 – SoonDead

@SoonDead right、ここでは{Block：IndexPage}変数が明確に制限されていますが、これは最終的にはHTMLを使用するだけなので、私はよく知らない方法でこの振る舞いをオーバーライドする方法がなければならないと考えています？おそらく、ページが何とかその場所をチェックして、それがホームページの場合にのみdivを表示するようにしますか？ – soobes

もっと良い解決策があると確信していますが、location.hrefがインデックスページの場合、要素を "display：block"にするjavascriptを書くことができます。それは一種の最後の解決策ですが、私はあなたがそれを書くのを助けることができます。 – SoonDead

私が殺してしまいました。

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

出典

2012-01-28 07:06:55 soobes

if（{CurrentPage} == 1）{'は同じことをします。 – ThinkingStiff

CSS（JavaScriptなし）を使用してこれを行うより良い方法があります。下の私の答えを見てください。 –

私はパーティーに非常に遅れています。今はクライアントのtumblrでこれを動作させようとしていますが、なぜ同じ条件の2つの条件についてのステートメントがありますか？これは単なる例であり、異なるページに要素を隠すために別のURLを書くことができることを示す方法です。おかげで – lharby

ブロックは、あなたが発見したように、すべてのインデックスページ用です。最初のページのみをターゲットにするには、インラインまたは{CurrentPage}スクリプトを使用します。 {block:Post1}は、最初の投稿のあるページにのみ表示されます。 <div>は、どこでも好きな場所に置くことができます。

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

または：{：IndexPageブロック}完全にタグ付けし、これに、元のdivコールアウトを変更：

このスクリプトが続く

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

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

出典

2012-01-28 05:49:46 ThinkingStiff

ありがとうございます。 {block：Post1}はtumblrが認識できる変数ではないので、私の友人が思いついた解決法はこれからあまり遠くないので、うまくいきません。解決策は、location.hrefを使用してインデックスページを確認し、hrefがインデックスの場合はdisplay：blockを使用し、そうでない場合はnoneを表示することでした。ありがとうございました！ – soobes

@soobes私は自分のテーマに使っています。 "block：post ["についてはhttp://www.tumblr.com/docs/en/custom_themesを検索してください。 – ThinkingStiff

@soobes私のテーマはここにあります：http://www.tumblr.com/theme/32199 – ThinkingStiff

これは機能します：

{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

出典

2012-02-11 16:52:10

ほとんど動作します。唯一の問題は、**/post/asdf **もtrueを返すということです。 – NSAddict

これは私のために、 '/ post/asdf'ページでさえ完璧に動作します。 – SeanR

私はではなく、インデックス、検索、などのページで、投稿ページ上のコードを表示するために探していたました（すなわち、複数の投稿を持つページ。上記のおかげで、私はそれを行う方法を考え出し、それが他の人に役立つ場合に分かち合いたいと思った。

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

出典

2012-03-28 18:40:54 Steve

ハッキーと汚れていますが。それはうまく動作します。 – TheBlackBenzKid

また、CSSで行うこともできます。

#box{ 
    display:none; 
} 

.page1 #box{ 
    display:block; 
}

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

出典

2012-06-26 13:07:26 Gaston

display:noneそれが、thatsのが非表示になり、隠し要素はまだすることができ、あなたのレイアウトを台無し。

コメントコード*を使用して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}

出典

2012-08-06 13:21:09 Nosrevelk

これは、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}

今

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

に背景をこのCSSを追加します：{CurrentPage}は、インデックスページ（のような1のページ番号を返すTumblrのテーマ変数である2 、3、...）。したがって、Tumblrのブログのホームはページ番号 "1"です。今度は、このページ番号を文字列 "banner_"に連結したdivのクラスを定義しました（クラスは数値ではありません。なぜか？） - ホームページ上にクラス名 "banner_1"を作成します。次に、CSSで、私は:notセレクタにdisplay:noneプロパティを追加しました。そのbanner_1クラスdiv。したがって、banner_1クラスのdivを除外すると、#banner divより下のdivはすべて消えます。さらに、IDが#bannerのdivは検索ページとタグページに表示されません。

注：<div id="#banner" >が必要です。これがなければ、:notはhtml内のすべてのdivを非表示にします。

警告：IEユーザー（残っている人はいますか）の習慣を変更する必要があります。これはFF、Chrome、Safari、Operaでのみサポートされています。 {block:HomePage}：

私はビッグバナー（茶文化である）あなたはこのタグを使用することができ、またhttp://theteazone.tumblr.com/page/2

出典

2012-09-25 13:20:17

今IE 9でサポートされています:) – bashaus

{block:IndexPage} 

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

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

{/block:IndexPage}

出典

2013-01-17 15:32:00 Dmitry

に存在しないhttp://theteazone.tumblr.com/でこれを実装しています。

このブロックは、その名前が示すように、ホームページのみで表示します（つまり、検索ページ、タグページなどには表示されません）。

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

出典

2017-09-09 04:44:07 Stephan

tumblrブログのホームページにのみdivを表示していますか？

答えて

関連する問題