好的,所以這裏的交易。我已經在多個網站上搜索了大約一週,其中包括關於如何從我的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標記,它們在我的博客中,他們只是不會顯示在這裏。
這很混亂。你正在構建一個供其他人使用的主題?或者你只是建立一個自己使用的主題?在這種情況下,您想要在索引頁面上顯示標記爲'sometag'的帖子,但是例如用'othertag'隱藏帖子?我不太瞭解tumblr模板來達到這個目的(事實上我不認爲這是可能的),但我會知道如何去使用javascript/jquery。除非你建議隱藏索引頁面上的所有帖子(再次可能,但可能通過黑客)。 – lharby
這個主題只是爲了我,我知道這是一個混亂,我已經想到,如果我要出口它,那麼我需要改變一些東西爲普通大衆。我的目標是隱藏帖子標記的「sometag」,而其他所有內容都保留在我的索引頁上,就這些。 – Chelsea
@ lharby希望你看到這個 – Chelsea