操作 Tumblr 的默认 iframe 控件

Question

有什么方法可以操纵 tumblr 控件吗？它们非常丑陋且呈灰色。我想知道是否有任何方法可以将 iframe#tumblr_controls {display:none;} 添加到我的 CSS 中，并重新创建具有相同功能但外观不同的所有控件。 Tumblr 控件 (iFrame)

Answer 1

是的，替换所有功能相当容易。正如您所建议的，您可以通过以下方式隐藏 Tumblr 的默认设置：

#tumblr_controls {display:none;}

在索引页面上，您需要仪表板、关注和电子邮件。您无法确定是否需要取消关注，但始终显示关注应该不会太糟糕。

仪表板 URL：

http://www.tumblr.com/dashboard

关注 URL：

http://www.tumblr.com/follow/<blogname>

电子邮件 URL：

http://www.tumblr.com/send/<blogname>?redirect_to=http%3A%2F%2F<blogname>.tumblr.com%2F

在永久链接页面上，您还需要转发和点赞。这些有点困难，但我这里有一个示例： http://like-button.tumblr.com/< /a>

Reblog 使用未记录的变量 {ReblogURL}。您只需将其设置为链接的 href 即可：

<a href="{ReblogURL}">reblog</a>

要添加 Like 功能，您可以使用以下 URL 并将其设置为不可见 src 的 src 属性。 iframe>:

http://www.tumblr.com/<command>/<oauthId>?id=<postId>

• : like 或 unlike
• : 最后八位的字符{ReblogURL}
• : {PostID}

示例：

http://www.tumblr.com/like/fGKvAJgQ?id=16664837215

您需要输入两个变量 {ReblogURL} 和 {PostID}，进入您的 {block:Posts} 块。然后使用脚本构建 URL 并设置 src。

$( document ).on( 'click', '.like', function ( event ) {

event.preventDefault();

var command = $( this ).hasClass( 'liked' ) ? 'unlike' : 'like',
    post = $( this ).closest( '.post' ),
    oauth = post.find( '.reblog' ).attr( 'href' ).slice( -8 ),
    id = post.attr( 'id' ),
    likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;

$( '#like-it' ).attr( 'src', likeUrl );
$( this ).toggleClass( 'liked' );

} );

{block:Posts}
<article id="{PostID}">
<a href="{ReblogURL}" class="reblog">reblog</a>
<a href="#" class="like">like</a>
</article>
{/block:Posts}

<iframe id="like-it"></iframe>

#like-it {
    display: none;
}

.liked, .like:hover {
    color: red !important;
}

Answer 2

现在不同了。只需添加

#iframe_controls { display:none; }

到 CSS（“编辑 HTML”标签内）。