отображать div только на главной странице блога tumblr? - PullRequest
Новая
       5

отображать div только на главной странице блога tumblr?

3 голосов
/ 27 января 2012

У меня довольно новичок в понимании CSS и HTML, и я пытаюсь сделать что-то, что, на мой взгляд, должно быть относительно простым (в пользовательской теме Tumblr, которую я создаю), но я не могу найти простой ответ,У меня есть ощущение, что в JavaScript может быть очень простой способ сделать то, что я хочу.

Я бы хотел отобразить DIV only на главной странице индекса (то есть на главной странице).) из блога Tumblr.Кажется, что документация, которую предоставляет tumblr, позволяет вам сделать это в некоторой степени (через переменную {Block: IndexPage}), но проблема в том, что код в этом элементе отображается на всех индексных страницах (т.е. вместо простопоказывая на корневом уровне на / page / 1, он будет отображаться на последующих "индексных" страницах, таких как / page / 2 и т. д.

Вот мой код, который успешно не отображает div наПостоянная ссылка на страницу: 

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

Любые идеи? Любая помощь высоко ценится!

Ответы [ 9 ]

9 голосов
/ 11 февраля 2012

Это будет работать: 

{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

2 голосов
/ 28 марта 2012

Я хотел показать код на страницах сообщений, но не на индексной странице, странице поиска и т. Д. (Т. Е. На страницах с несколькими публикациями. Благодаря вышеизложенному я понял, как это сделать, и хотел поделиться в случае его появления. помогает кому-то еще. 

<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>
1 голос
/ 06 августа 2012

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}
1 голос
/ 26 июня 2012

Вы также можете сделать это только с помощью CSS. 

#box{
  display:none;
}

.page1 #box{
  display:block;
}

<body class="page{CurrentPage}">
  <div id="box">
    Only displayed in first page.
  </div>
</body>
0 голосов
/ 09 сентября 2017

Кроме того, вы можете использовать этот тег: {block:HomePage}.

Этот блок отображается, как следует из его названия, только на домашней странице (т.е. не на страницах поиска, страницах тегов и т. Д.).

Рекомендации: https://www.tumblr.com/docs/fr/custom_themes

0 голосов
/ 17 января 2013 
{block:IndexPage}

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

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

{/block:IndexPage}
0 голосов
/ 25 сентября 2012

Это решается с помощью оператора 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}

background: {CurrentPage} - это переменная темы Tumblr, которая возвращает номер страницы индексных страниц (например, 1, 2, 3, ...).Таким образом, домом любого блога Tumblr является страница с номером «1».Теперь я определил класс div с этим номером страницы, соединенным со строкой "banner_" (класс не может быть числовым. Почему WTF?) - делая имя класса "banner_1" на домашней странице.Затем в CSS я добавил свойство display:none к селектору :not этого banner_1 класса div.Таким образом, исключая div с banner_1 class, все остальные div в #banner div исчезнут.Кроме того, div с идентификатором #banner скрыт на страницах поиска и тегов.

Примечание: требуется <div id="#banner" >.Без этого :not скроет все div в html.

Предупреждение: пользователям IE (есть кто-нибудь еще?) Необходимо изменить свою привычку.Это поддерживается только в FF, Chrome, Safari и Opera.

Я реализовал это в http://theteazone.tumblr.com/ Большой баннер (чай - это культура) отсутствует в http://theteazone.tumblr.com/page/2

0 голосов
/ 28 января 2012

Я закончил тем, что полностью убил тег {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>
0 голосов
/ 28 января 2012

Блок {block:IndexPage}, как вы обнаружили, предназначен для всех страниц индекса. Для таргетинга только на первую страницу вы можете использовать {block:Post1} inline или {CurrentPage} в скрипте. {block:Post1} будет отображаться только на странице с первым сообщением, которое достигает того, что вы хотите. Затем <div> можно оформить так, чтобы он помещался куда угодно. 

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

Или: 

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