更改 Tumblr 照片集中的 onclick URL答案

【问题标题】：Changing the onclick URL on Tumblr photosets更改 Tumblr 照片集中的 onclick URL
【发布时间】：2021-10-20 07:30:23
【问题描述】：

我在我的网站 (iframe) 中嵌入了一个 tumblr 博客，并希望所有点击都在新标签页中打开以登陆帖子详细信息网址（例如 https://diestadtgaertner.tumblr.com/post/657405245299818496）。我已经通过将相应的 href 变量与“https://diestadtgaertner.tumblr.com/post/{PostID}”交换并添加 target="_blank" 来调整模板以使其适用于大多数帖子类型。但是，我不能让它为图片集工作。有谁知道这可能是如何工作的？

我们将不胜感激！

谢谢，最好的，火锅

【问题讨论】：

标签： themes tumblr

【解决方案1】：

您可以编辑您的模板，以便将照片集输出到普通的 div 中（我认为默认设置是在 iframe 中加载照片集，这可能会导致您出现问题。

这是我的 tumblr 模板中的块：

<ul>
...
    {block:Photoset}
        <li class="post photoset">
            {block:Photos}
                <img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
                {block:HighRes}
                    <img src="{PhotoURL-HighRes}" class="highres" />
                {/block:HighRes}
            {/block:Photos}
            {block:Caption}
                <div class="description">{Caption}</div>
            {/block:Caption}
            <p>
                <span class="icon-link ion-ios-infinite-outline"></span>
                <a href="{Permalink}" class="link">{block:Date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}</a>
            </p>
        </li>
    {/block:Photoset}
</ul>

在任何情况下，您都可以将整个块包装在 Permalink href 中。比如：

<ul>
...
    {block:Photoset}
        <li class="post photoset">
            <a href="{Permalink}"> // this permalink href now wraps the entire content of the post. 
                {block:Photos}
                    <img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
                    {block:HighRes}
                        <img src="{PhotoURL-HighRes}" class="highres" />
                    {/block:HighRes}
                {/block:Photos}
                {block:Caption}
                    <div class="description">{Caption}</div>
                {/block:Caption}
            </a>
        </li>
    {/block:Photoset}
</ul>

现在的问题是，该帖子中图片的默认点击链接（如果存在）将不再正常工作。

如果没有指向您网站的链接，很难对此进行测试，但我认为首先更新您的 tumblr 模板应该有望为您提供您想要的结果，但我当然建议您备份您的代码。

【讨论】：