mostrando un div solo en la página de inicio del blog tumblr?

Tengo una comprensión bastante novata de CSS y HTML, y estoy tratando de hacer algo que creo que debería ser relativamente simple (en un tema de Tumblr personalizado que estoy creando), pero no puedo encontrar una respuesta directa. Tengo la sensación de que podría haber una manera súper fácil de hacer lo que quiero en JavaScript.

Me gustaría mostrar un DIV solo en la página principal del índice (es decir, la página principal) del blog tumblr. Parece que la documentación que proporciona tumblr le permite hacer esto hasta cierto punto (a través de la variable {Block: IndexPage}), pero el problema es que el código dentro de este elemento se muestra en todas las páginas de índice (es decir, en lugar de simplemente aparecer en el nivel raíz en / page / 1, se mostrará en las siguientes páginas de “índice” como / page / 2, etc.

Aquí está el código que tengo, que con éxito no muestra el div en páginas de enlace permanente:

 {block:IndexPage} 

test

{/block:IndexPage}

¿Algunas ideas? ¡Cualquier ayuda es muy apreciada!

Esto funcionará:

 {block:IndexPage} 
This is displayed only on the index page.
{/block:IndexPage}

Más información: http://ejdraper.com/post/280968117/advanced-tumblr-customization

Estaba buscando mostrar el código en las páginas de publicaciones, pero no en la página de índice, búsqueda, etc. (es decir, páginas con varias publicaciones. Gracias a lo anterior, descubrí cómo hacerlo y quise compartir en caso de que ayude a otra persona .

   

También puedes hacerlo solo con CSS.

 #box{ display:none; } .page1 #box{ display:block; } 

  
Only displayed in first page.

display:none lo ocultará, pero eso es todo, un elemento oculto aún puede afectar su diseño.

Podríamos usar el código de comentario * para convertir el div en un comentario que no moleste con nada.

 * 

ex.

 {block:IndexPage} {block:SearchPage}{/block:SearchPage} {block:TagPage}-->{/block:TagPage} {/block:IndexPage} 

El {block:IndexPage} , como ha descubierto, es para todas las páginas de índice. Para orientar solo a la primera página, puede usar {block:Post1} línea o {CurrentPage} en el script. {block:Post1} se mostrará solo en la página con la primera publicación, que logra lo que deseas. El

se puede diseñar para ponerlo donde quieras.

 {block:Post1} 

test

{/block:Post1}

O:

  

Terminé eliminando la etiqueta {Block: IndexPage} por completo y cambiando la llamada div original a esto:

  

Seguido por este script:

  

Esto se resuelve utilizando el operador div: not ().

El marcado HTML será

 {block:IndexPage}  {/block:IndexPage} 

Ahora agrega este CSS a

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

El fondo: {CurrentPage} es una variable de tema de Tumblr que devuelve el número de páginas de índice (como 1, 2, 3, …). Por lo tanto, el hogar de cualquier blog de Tumblr es el número de página “1”. Ahora he definido la clase de un div con este número de página concatenado con una cadena “banner_” (Class no puede ser numérica. WTF ¿por qué?) – haciendo que el nombre de clase sea “banner_1” en la página principal. A continuación, en CSS, he agregado display:none property to :not selector de ese banner_1 class div. Por lo tanto, excluyendo div con la clase banner_1 , todos los demás div en #banner div desaparecerán. Además, div con id #banner está oculto en las páginas de búsqueda y tags.

Nota: se requiere

. Sin esto,: :not ocultará todos los divs en el html.


Advertencia: los usuarios de IE (¿queda alguien más?) Necesitan cambiar su hábito. Esto solo es compatible con FF, Chrome, Safari y Opera.

Lo he implementado en http://theteazone.tumblr.com/ The Big Banner (El té es una cultura) está ausente en http://theteazone.tumblr.com/page/2

 {block:IndexPage}  
blablabla
--> {/block:IndexPage}

Alternativamente, puede usar esta etiqueta: {block:HomePage} .

Este bloque representa, como su nombre lo indica, solo en la página de inicio (es decir, no en páginas de búsqueda, páginas de tags, etc.).

Referencias: https://www.tumblr.com/docs/fr/custom_themes