2015-08-20 57 views
1

好的,所以這裏的交易。我已經在多個網站上搜索了大約一週,其中包括關於如何從我的Tumblr博客中隱藏索引頁面中特定標記的帖子的多個網站。爲了使它更容易,請記住,我確實有一些關於html的知識,因爲這是我在一年內完成的第四個Tumblr主題,並且隨着我的進展逐漸變好。所以,爲了不浪費你的時間,我已經反覆嘗試過這些方法:隱藏標記的帖子在Tumblr頁面

1. <div id="posts {TagAsClasses}"></div> 
    2. <div class="posts {TagAsClasses}"></div> 
    3. {block:Posts} 
     {block:HasTags}{block:Tags}<span class="tagged-{URLSafeTag}">{/block:Tags}{/block:HasTags} 
     (*post content would go here*) 
     {block:HasTags}{block:Tags}</span>{/block:Tags}{/block:HasTags} 
     {/block:Posts} 

這些都沒有奏效。最初,我爲我的發佈內容設置了一個id選擇器,但將其更改爲一個類,因爲每次我放入{TagAsClasses}時都會混淆整個頁面,並將div發佈爲不再對應於CSS。

當我嘗試上課時,我的頁面看起來完全一樣,完全忽略了{TagAsClasses}。

當我嘗試了第三種方法,我只好用這個CSS的:

.tagged-HIDDEN { 
    {block:IndexPage} 
    display:none !important; 
    {/block:IndexPage} 
    {block:TagPage} 
    display:inline !important; 
    {/block:TagPage} 
    } 

「隱藏」當然會是任何我把在我想隱藏的職位標籤。當我這樣做時,涉及「!important」(這是我從另一個我訪問過的博客中被指示要做的事情),當我到達有我想要隱藏的帖子的頁面時,我的博客甚至不會加載分頁)。當我取出「!important」時,我的博客會加載,但標記的帖子會顯示出來,只是CSS有點搞砸了。

我嘗試了一切,我甚至試圖改變

<span class> to <span id> 

我改變

<div id posts> to <div class> 

後,因爲我覺得跨度會變得更強和工作,但我最終得到的正如我之前提到的那樣,當我使用「重要」時也是如此。

所以,現在你已經看到我已經試過了所有的選項,這是我的博客我的完整HTML/CSS:ℂħёℓ§εå ...............

<meta name="color:Background" content="#000000"> 
<meta name="color:Primary Color" content="#000000"> 
<meta name="color:Secondary Color" content="#000000"> 

<meta name="color:Tertiary Color" content="#000000"> 
<meta name="color:Quaternary Color" content="#000000"> 
<meta name="color:Quinary Color" content="#000000"> 

<meta name="font:Sidebar Text" content="" /> 
<meta name="font:Posts Text" content="" /> 

<meta name="text:Sidebar Width" content="" /> 
<meta name="text:Sidebar Title Size" content=""/> 
<meta name="text:Sidebar Description" content="" /> 

<meta name="image:Sidebar" content="" /> 
<meta name="image:Background" content="" /> 





<style> 
html { 

    background: -webkit-linear-gradient(top,{color:Background},white); 
    background-attachment: fixed; 
} 
body { 

} 

#content { 
    margin: 10px 0px 10px 260px; 
    width: 1020px; 
} 

#content blockquote { 
    border-left: solid black 1px; 
    margin: 0px; 
    padding-left: 10px; 
    max-width: 100%; 

} 

    img { 
    border: 0; 
    max-width: 100%; 
} 

#content #posts { 
    background-color: rgba(255,255,255,0.7); 
    width: 250px; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-left: 10px; 
    margin-right: 10px; 

    {block:PermalinkPage} 
    width: 800px; 
    {/block:PermalinkPage} 
} 

#content #posts .title { 
    font-size: 15px; 
    font-family: {font:Posts Text}; 
    color: {color:Primary Color}; 
} 

#content #posts .text { 
    font-size: 10px; 
    font-family: {font:Posts Text}; 
    color: {color:Tertiary Color}; 
    max-width: 100%; 
} 

#content #posts .container { 
    float: left; 
} 

#content a { 
    text-decoration: none; 
    color:{color:Quinary Color}; 
} 




#posts .date { 
    margin-top: 40%; 
    margin-left: 40%; 
} 

#sidebar { 
    font-family: {font:Sidebar Text}; 
    width: {text:Sidebar Width}px; 
    float: left; 
    position: fixed; 

} 

#sidebar .title { 
    font-size: 30px; 
    text-align: center; 
} 

#sidebar .title a { 
    text-decoration: none; 
    color: {color:Primary Color}; 
} 

#sidebar .title a:hover { 
    color: {color:Quaternary Color}; 
} 

#sidebar .image { 
    width: 250px; 
    height: auto; 
    border-radius: 100%; 
} 

#sidebar .description { 
    font-size: {text:Sidebar Description}px; 
    text-align: center; 
    color: {color:Secondary Color}; 
} 
#sidebar .links { 
    margin-top: 10px; 
    text-align: center; 
} 

#sidebar .links a { 
    text-decoration: none; 
    color: {color:Tertiary Color}; 
} 

#sidebar .links a:hover { 
    color: {color:Quaternary Color}; 
} 

#sidebar .navigation { 

} 

#sidebar .navigation a { 
    text-decoration: none; 
    color: {color:Quinary Color}; 
} 

#like_button { 
    float:right; 
    opacity: 0; 
    position: absolute; 
    display: inline-block !important; 
    vertical-align: middle; 
    margin-left: 75px; 
    top: 50%; 
    transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -webkit-transition: .2s ease-in-out; 
    } 

#reblog_button { 
    float:right; 
    opacity: 0; 
    position: absolute; 
    display: inline-block !important; 
    vertical-align: middle; 
    margin-left: 155px; 
    top: 50%; 
    transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -webkit-transition: .2s ease-in-out; 
    } 

#notecount { 
    float:right; 
    opacity: 0; 
    position: absolute; 
    display: inline-block !important; 
    left: 20%; 
    top: 60%; 
    transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -webkit-transition: .2s ease-in-out; 
    font-family: {font:Sidebar Text}; 
    font-size: 10px; 
} 

#date { 
    float:right; 
    opacity: 0; 
    position: absolute; 
    display: inline-block !important; 
    left: 60%; 
    top: 60%; 
    transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -webkit-transition: .2s ease-in-out; 
    font-family: {font:Sidebar Text}; 
    font-size: 10px; 
} 

#posts .postnotes { 
    font-family: {font:Posts Text}; 
} 

#posts .info { 
    background: rgba(255,255,255,0.8); 
    opacity: 0; 
    position: absolute; 
    transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -webkit-transition: .2s ease-in-out; 
    width: 250px; 
    bottom: 14px; 
    top: 10px; 
} 

#posts:hover .info { 
    opacity: 1; 
    {block:PermalinkPage} 
    opacity: 0; 
    {/block:PermalinkPage} 
} 

#posts:hover #like_button { 
    opacity: 1; 
} 

#posts:hover #reblog_button { 
    opacity: 1; 
} 

#posts:hover #notecount { 
    opacity: 1; 
} 

#posts:hover #date { 
    opacity: 1; 
} 



</style> 

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script> 
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"> </script> 

<script type="text/javascript"> 
$(window).load(function() { 
$('#content').masonry({ 
itemSelector : ".container", 
}, 
function() { $('#content').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 
</head> 


<body> 

<div id="sidebar"> 
<img class="image" src="{image:Sidebar}" /> 
<div class="title"><a href="{blogURL}">{Title}</a></div> 

<div class="description">{block:Description}{Description}{/block:Description}</div> 


<div class="links"> 
{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled} 
{block:SubmissionsEnabled}<a href="/submit">Submit</a>{/block:SubmissionsEnabled} 
{block:HasPages}{block:Pages}<a href="{url}">{Label}</a>{/block:Pages}{/block:HasPages} 
<a href="/dashboard">Dashboard</a> 
</div> 

<div class="navigation"> 
{block:Pagination} 
{block:NextPage}<p id="page_nav"><a style="float:left" href="{NextPage}" id="next">Previous</a>{/block:NextPage} 
{block:PreviousPage}<a style="float:right" href="{PreviousPage}">Next</a></p>{/block:PreviousPage} 
{/block:Pagination} 
</div> 
</div> 


<div id="content"> 
{block:Posts} 

<div id="posts"> 

<div class="info"> 
<div id="like_button">{likebutton}</div> 
<div id="reblog_button">{reblogbutton color="grey"}</div> 
<div id="notecount"><a href="{Permalink}#notes">{NoteCountWithLabel}</a> </div> <div id="date"><a href="{Permalink}">{TimeAgo}</a></div> 
</div> 


<div class="container"> 
{block:Text} 
{block:Title}<div class="title">{Title}</div>{/block:Title} 
<div class="text">{Body}</div> 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 


{/block:Text} 
</div> 

<div class="container"> 
{block:Quote} 
<div class="title">"{Quote}"</div> 
{block:Source} 
<div class="text">{Source}</div>{/block:Source} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Quote} 
</div> 

<div class="container"> 
{block:Photo} 
<img src="{PhotoURL-250}" /> 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 

{/block:Photo} 
</div> 

<div class="container"> 
{block:Photoset} 
{Photoset-250} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 

{/block:Photoset} 
</div> 

<div class="container"> 
{block:Video} 
{Video-250} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Video} 

</div> 

<div class="container"> 
{block:Audio} 
{AudioPlayer} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Audio} 
</div> 

<div class="container">  
{block:Answer} 
<div class="title">{Question}</div> 
<div class="text">~{Asker}</div> 
<div class="text">{Answer}</div> 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Answer} 
</div> 

<div class="container"> 
{block:Chat} 
{block:Title}{Title}{/block:Title} 
{block:Lines} 
{block:Label}<strong>{Label}</strong>{/block:Label} 
{Line} 
{/block:Lines} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Chat} 
</div> 

<div class="container"> 
{block:Link} 
<a href="{URL}">{Name}</a> 
{block:Description}{Description}{/block:Description} 

<div class="postnotes"> 
{block:PostNotes}{PostNotes}{/block:PostNotes} 
</div> 
{/block:Link} 
</div> 

</div> 

{/block:Posts} 
</div> 

</body> 
</html> 

忽略缺失的頭和!D0CTYPE html標記,它們在我的博客中,他們只是不會顯示在這裏。

+0

這很混亂。你正在構建一個供其他人使用的主題?或者你只是建立一個自己使用的主題?在這種情況下,您想要在索引頁面上顯示標記爲'sometag'的帖子,但是例如用'othertag'隱藏帖子?我不太瞭解tumblr模板來達到這個目的(事實上我不認爲這是可能的),但我會知道如何去使用javascript/jquery。除非你建議隱藏索引頁面上的所有帖子(再次可能,但可能通過黑客)。 – lharby

+0

這個主題只是爲了我,我知道這是一個混亂,我已經想到,如果我要出口它,那麼我需要改變一些東西爲普通大衆。我的目標是隱藏帖子標記的「sometag」,而其他所有內容都保留在我的索引頁上,就這些。 – Chelsea

+0

@ lharby希望你看到這個 – Chelsea

回答

1

以下是我所做的,基本上我使用tumblr的META標籤根據頁面具有不同的CSS。

<head> 
//Your head and CSS stuff here 
{block:IndexPage} 
<style> 
.BLOCKME {display:none !important;} 
</style> 
{/block:IndexPage} 
</head> 

這將阻止與標籤BLOCKME任何職務被顯示在主頁上,你還可以使用{block:TagPage}{block:PermalinkPage}{block:SearchPage}

一個側面說明,以及您的帖子還必須包含​​

+1

我發現如果你在你的主題中使用磚石,你還需要包含'margin:0; padding:0; border:0;'爲它好好工作。 – chloe784

相關問題