afficher un div uniquement sur le blog tumblr de la page d'accueil?

J'ai un assez novice compréhension de la CSS et de l'HTML, et je suis en train de faire quelque chose qui, je pense, devrait être relativement simple (personnalisé dans un tumblr thème je suis de la création), mais je ne peux pas trouver une réponse simple. J'ai le sentiment qu'il y peut-être un moyen super facile à faire ce que je veux en JavaScript.

J'aimerais afficher un DIV seulement sur la page d'index principal (c'est à dire la page d'accueil) du blog tumblr. Il semble que la documentation tumblr offre vous permet de le faire dans une certaine mesure (par le biais de l' {Block:IndexPage} variable), mais le problème est le code à l'intérieur de cet élément s'affiche sur tous pages d'index (par exemple, au lieu de montrer le haut au niveau de la racine /page/1, il sera affiché sur les "index" pages /page/2, etc.

Voici le code que j'ai, qui ont réussi à ne pas afficher la div sur permalien pages:

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

Des idées? Toute aide est grandement appréciée!

Il ya une grande chance que cela n'a rien à voir avec javascript, mais le système de template tumblr utilise.
bon, le {Block:IndexPage} variable est clairement limité ici, mais depuis que tout cela n'est qu'à l'aide de HTML, je pense, il y a un moyen de remplacer ce comportement par le biais de moyens, je suis familier avec? Comme peut-être avoir la page de vérifier en quelque sorte de son emplacement et de n'afficher que les div si c'est la page d'accueil?
Je suis sûr qu'il y est une meilleure solution, mais vous pouvez toujours écrire un code javascript qui rend l'élément "display: block" lorsque l'emplacement.href est la page d'index. C'est une sorte de solution de dernier recours, mais je peux vous aider à l'écrire.
Merci beaucoup pour offrir de l'aide. Un de mes amis qui sait javascript a été en mesure de venir avec une solution basée sur votre suggestion. J'apprécie vraiment votre offre afin de l'aider à écrire le script!

OriginalL'auteur soobes | 2012-01-27

9

Cela fonctionne:
```
{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}
```
Plus d'infos: http://ejdraper.com/post/280968117/advanced-tumblr-customization

Fonctionne presque. Le seul problème est que /post/fasd est également de retour vrai...
Cela fonctionne parfaitement pour moi, même sur /post/asdf pages.

OriginalL'auteur Max Masnick

J'ai été a été à la recherche pour afficher le code sur les pages, mais pas sur l'index, recherche, etc page (c'est à dire des pages avec plusieurs postes. Grâce à la ci-dessus, j'ai compris comment le faire et je voulais le partager dans le cas où il aide quelqu'un d'autre.

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

Bien que hacky et sale; il fonctionne très bien.

OriginalL'auteur Steve

Vous pouvez aussi le faire juste avec les CSS.

#box{
  display:none;
}

.page1 #box{
  display:block;
}

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

OriginalL'auteur Gaston

display:none cacher mais c'est un élément masqué peut encore perdre avec votre mise en page.

Nous pourrions utiliser les commentaires de code* pour mettre le div dans un commentaire que l'habitude plaisante pas avec quoi que ce soit.

*<!-- 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}

OriginalL'auteur Nosrevelk

0

La {block:IndexPage} bloc, comme vous l'avez découvert, est pour toutes les pages d'index. Pour cibler uniquement la première page, vous pouvez utiliser {block:Post1} en ligne ou {CurrentPage} dans le script. {block:Post1} ne s'affiche que sur la page avec le premier post, qui permet d'obtenir ce que vous voulez. Le <div> peut ensuite être appelée pour le mettre où vous voulez.
```
{block:Post1}
<div class="mid2">
    <div class="midLeft2">  
        <p>test</p>
    </div>   
</div>
{/block:Post1}  
```
Ou:
```
<script>
if( {CurrentPage} == 1 ) {
    //display div
};
</script>
```
merci pour cette. il n'a pas assez de travail, parce que {block:Post1} n'est pas une variable tumblr reconnaît, mais la solution de mon ami est venu avec n'est pas trop loin de cela. La résolution a été de vérifier pour la page d'index en utilisant l'emplacement.href et utiliser un display:block si le href est l'indice, sinon display:none. J'apprécie vraiment votre volonté d'aider bien, merci!!
Je l'utilise sur mon thème. La recherche tumblr.com/docs/en/custom_themes pour "bloquer:post[".
Mon thème est ici: tumblr.com/theme/32199, pour référence.
Je vois ce que tu veux dire, mais ce code n'a pas rendu tout à fait raison quand je l'ai essayé plus tôt parce que je ne suis pas en train de cibler la div vers seulement après le 1er, mais plutôt à l'index, indépendamment du numéro de poste ou de chronologie. Voici ce que mon ami est venu avec (réponse ci-dessous).
Post 1 est toujours et uniquement sur la page 1, la page d'index.

OriginalL'auteur ThinkingStiff
0

J'ai fini par tuer le {Block:IndexPage} tag tout à fait et la modification de l'original div légende:
```
<div id="splashbox" class="mid2" style="display:none">
```
Suivie par ce 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>
```
if( {CurrentPage} == 1 ) { fait la même chose.
Il est peut-être un meilleur moyen de faire cela à l'aide de CSS (sans JavaScript). Voir ma réponse ci-dessous.
Je suis très en retard à la fête, que je suis en train d'essayer d'obtenir que cela fonctionne sur un clients tumblr maintenant, mais pourquoi est-il une instruction ou pour les deux conditions qui sont les mêmes? Est-ce juste un exemple et une manière de montrer que l'on peut écrire une url différente pour masquer également l'élément sur une page différente. Merci

OriginalL'auteur soobes
0

Ce problème est résolu par l'utilisation de div:non() de l'opérateur.

Les balises HTML seront
```
{block:IndexPage}
<div id="banner">
   <div class="banner_{CurrentPage}">
      This Content will appear in only on home page
   </div>
</div>
{/block:IndexPage}
```
Maintenant ajouter ce CSS pour
```
#banner div:not(.banner_1)
{
   display:none;
}
{block:SearchPage}
    #banner
    {
       display:none;
    }
{/block:SearchPage}
{block:TagPage}
    #banner
    {
       display:none;
    }
{/block:TagPage}
```
L'arrière-plan: {CurrentPage} est un thème Tumblr variable qui renvoie le numéro de page de la page d'index (comme 1, 2, 3, ...). Ainsi, la maison de toute blog Tumblr est le numéro de page "1". Maintenant, j'ai défini la classe d'un div avec ce numéro de page concaténé avec une chaîne "banner_" (Classe ne peut pas être numérique. WTF pourquoi?) - rendre le nom de la classe "banner_1" sur la page d'accueil. Ensuite, dans le CSS, j'ai ajouté display:none propriété :not sélecteur de banner_1 classe div. Donc à l'exclusion de div avec banner_1 classe, tous les autres div en vertu de #banner div disparaîtra. En outre, le div avec l'id #banner est caché dans la recherche et la balise pages.

Remarque: <div id="#banner" > est nécessaire. Sans cela, :not permet de masquer tous les divs dans le code html.

Avertissement: les utilisateurs de IE (quelqu'un est-il de gauche?) besoin de changer leur habitude. C'est uniquement pris en charge dans FF, Chrome, Safari et Opera.

J'ai mis en œuvre cette http://theteazone.tumblr.com/ La Grande Bannière (le Thé est une culture) est absent dans le http://theteazone.tumblr.com/page/2

Désormais pris en charge dans IE 9 🙂

OriginalL'auteur ghos-h

{block:IndexPage}

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

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

{/block:IndexPage}

OriginalL'auteur Dmitry

0

Alternativement, vous pouvez utiliser cette balise: {block:HomePage}.

Ce bloc s'affiche, comme son nom l'indique, sur la page d'accueil (c'est à dire pas sur les pages de recherche, de marquer des pages, etc).

Références:
https://www.tumblr.com/docs/fr/custom_themes

OriginalL'auteur Stephan

Vous devez vous connecter pour publier un commentaire.