javascript 操作 Tumblr 的默认 iframe 控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9218402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Manipulating Tumblr's default iframe controls
提问by James Charless Dickinson
Is there any way I can manipulate the tumblr controls? They are quite ugly and gray. I want to know if there is any way to add iframe#tumblr_controls {display:none;}to my CSS and recreate all the controls with the same functionality but with a different look. Tumblr controls (iFrame)
有什么办法可以操纵 tumblr 控件吗？它们非常丑陋和灰色。我想知道是否有任何方法可以添加iframe#tumblr_controls {display:none;}到我的 CSS 并重新创建具有相同功能但外观不同的所有控件。Tumblr 控件 (iFrame)
回答by ThinkingStiff
Yes, it's fairly easy to replace all the functionality. As you suggested, you can hide Tumblr's default with:
是的，替换所有功能相当容易。正如您所建议的，您可以通过以下方式隐藏 Tumblr 的默认设置：
#tumblr_controls {display:none;}
On index pages, you need Dashboard, Follow, and Email. You can't determine if you need Unfollow, but always showing Follow shouldn't be too bad.
在索引页面上，您需要仪表板、关注和电子邮件。您无法确定是否需要取消关注，但始终显示关注应该不会太糟糕。
Dashboard URL:
仪表盘网址：
http://www.tumblr.com/dashboard
Follow URL:
关注网址：
http://www.tumblr.com/follow/<blogname>
Email URL:
电子邮件地址：
http://www.tumblr.com/send/<blogname>?redirect_to=http%3A%2F%2F<blogname>.tumblr.com%2F
On permalink pages you also need Reblog and Like. These are a little more difficult but I have a sample here: http://like-button.tumblr.com/
在永久链接页面上，您还需要转发和点赞。这些有点困难，但我在这里有一个示例：http: //like-button.tumblr.com/
Reblog uses an undocumented variable, {ReblogURL}. You simply make it the the hrefof a link:
Reblog 使用了一个未公开的变量{ReblogURL}. 您只需将其href设为链接：
<a href="{ReblogURL}">reblog</a>
To add Like functionality, you use the following URL and set it as the srcattribute of an invisible <iframe>:
要添加 Like 功能，请使用以下 URL 并将其设置为srcinvisible的属性<iframe>：
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>:likeorunlike<oauthId>: last eight characters of{ReblogURL}<postId>:{PostID}
<command>:like或unlike<oauthId>: 最后八个字符{ReblogURL}<postId>：{PostID}
Example:
例子：
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
You need to put both variables, {ReblogURL}and {PostID}, into your {block:Posts}block. Then use script to build the URL and set the src.
您需要将两个变量{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;
}
回答by burce
It's different now. Just add
现在不同了。只需添加
#iframe_controls { display:none; }
To the CSS (inside tag of 'Edit HTML').
到 CSS（在“编辑 HTML”的标签内）。
