如何使 Tumblr 索引页帖子重定向到永久链接？

Question

我需要在索引页中显示帖子的第一张图片和标题，单击它们将重定向到帖子永久链接。

我尝试了这段代码：

{block:IndexPage}
<a href="{Permalink}" class="post-content">
<div class="body-text e-content">{Body}</div>
</a>
{/block:IndexPage}

和CSS以隐藏帖子的其余部分：

.index-page.grid .npf_row {
    height:9.5em;
    overflow: hidden;
}
.index-page .post .body-text .npf_row:not(:first-child){
    display: none;
}
.index-page .post .body-text p {
    display: none;
}
.index-page .photoset p{
    display: none;
}
.index-page .html_photoset {
    height:9.5em;
    overflow: hidden;
}

帖子内容不会显示。 Tumblr 去年更改了帖子格式类型，因此旧的解决方案将不再起作用。

Answer 1

好的。

{Body}

包含锚点可能存在问题。您无法嵌套锚点。 Chrome 会自动关闭第一个，我认为这就是正在发生的事情。

但是我认为你可以将锚点定位在索引页面上并向其传递一些 css 属性。

.index-page .npf_col a {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

您可能需要对此进行调整，但我认为您包裹在整个块中的永久链接正在自动关闭。

我唯一担心的是 css 选择器可能是通用的。因此，最好在 html 中添加类名，然后在 css 中定位该类名。

正在思考

.index-page .npf_col > a

或

<a class="post-wrapper">

然后将 css props 传递给

.post-wrapper { ...

等

我在浏览器中做了一个相当的测试（添加一些背景颜色和不透明度，只是为了确保链接有效，所以我只使用 hack 进行了测试，但对我来说看起来不错）。

另外，我认为这只是根据索引页面是否传递不同的 css，您可能根本不需要永久链接块。