我用砖石和无限滚动编写了一个HTML5(样板)主题,到目前为止效果很好。现在我想在每个帖子上包含转发和喜欢按钮。我试图添加这个,但由于某种原因,喜欢按钮不起作用。
主题网址:http://inspiration.patrikarvidsson.com/
在我的脚本底部.js,我添加了这个类似的代码。
$('a.like').click(function() {
var post = $(this).closest('.post');
var id = post.attr('id');
var oath = post.attr('rel').slice(-8);
var like = 'http://www.tumblr.com/like/'+oath+'?id='+id;
$('#likeit').attr('src', like);
$(this).toggleClass( 'liked' );
});
完整的脚本.js可以在这里找到:http://static.tumblr.com/e8lbmds/WB5m2q1it/scripts.js
如果需要,这里有插件.js:http://static.tumblr.com/e8lbmds/NDPm14qu6/plugins.js
上面代码的最后一行使链接变为红色;我想这表明脚本响应了。但是没有产生类似的结果。在初始化正文标签之后,我有以下代码:
<iframe id="likeit"></iframe>
适用的 CSS 如下:
#likeit { display: none; }
.liked, .like:hover { color: red !important; }
知道为什么它不起作用吗?
看起来你已经工作了,但对于未来的读者,我已经简化了我的喜欢按钮代码,以消除大多数人对它的混淆(帖子 ID),使其成为简单的剪切和粘贴。它在 http://like-button.tumblr.com 有售。
在{block:Posts}
之后立即将其粘贴到您的{block:Posts}{/block:Posts}
块中:
<script>
if ( !document.getElementById( 'my-like-frame' ) ) {
var styles =
'<style>'
+ '.my-like {'
+ 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important;'
+ 'height:17px;'
+ 'width:19px;'
+ 'cursor:pointer;'
+ 'display:inline-block;'
+ 'vertical-align:top;'
+ '}'
+ '.my-liked, .my-like:hover {'
+ 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important;'
+ 'height:17px;'
+ 'width:19px;'
+ 'cursor:pointer;'
+ 'display:inline-block;'
+ 'vertical-align:top;'
+ '}'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', styles );
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
var myLikeLink = event.target;
if( myLikeLink.className.indexOf( 'my-like' ) > -1 ) {
var myLikeFrame = document.getElementById( 'my-like-frame' ),
liked = ( myLikeLink.className == 'my-liked' ),
command = liked ? 'unlike' : 'like',
reblog = myLikeLink.getAttribute( 'data-reblog' ),
postId = myLikeLink.getAttribute( 'data-id' ),
oauth = reblog.slice( -8 ),
likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + postId;
myLikeFrame.src = likeUrl;
liked ? myLikeLink.className = 'my-like'
: myLikeLink.className = 'my-liked';
};
}, false );
};
</script>
并将其粘贴到您想要"喜欢"按钮的{block:Posts}{/block:Posts}
块中:
<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}"></div>
想通了,一旦我分析了jQuery生成的代码,这是一个非常简单的修复。
<article{block:Date} id="post-{PostID}"{/block:Date} class="post type-post {PostType} hentry entry" rel="{ReblogURL}">
这在 iframe src 中生成了以下链接
http://www.tumblr.com/like/O0TzjAHv?id=post-21555443705
因此,显然在上面的代码中删除post-使最终结果链接正确; 喜欢现在有效。