如何在Blogger同标签相关文章列表中排除当前浏览的博文

核心逻辑 #

通过对比URL的方式过滤当前正在浏览的博文，只需要调整原有的JavaScript代码即可，模板部分无需修改。

改动点说明 #

• 新增当前页面URL的获取逻辑，自动去除查询参数和末尾斜杠，提升匹配准确率
• 请求相关文章接口时多请求1条内容，避免过滤当前博文后展示数量不足
• 循环渲染时增加URL匹配判断，命中当前博文则直接跳过渲染

修改后完整JavaScript代码 #

// 先获取当前博文的URL，去除查询参数和末尾斜杠
var currentPostUrl = window.location.href.split('?')[0].replace(/\/$/, '');

$("#related-posts").each(function() {
    var v = $(this).text();
    $.ajax({
        // 这里把请求数量加1，避免过滤后不够展示
        url: "/feeds/posts/default/-/" + v + "?alt=json-in-script&max-results=" + (related_number + 1),
        type: 'get',
        dataType: "jsonp",
        success: function(e) {
            var u = "";
            var h = '<div class="related-wrap">';
            for (var i = 0; i < e.feed.entry.length; i++) {
                for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                    if (e.feed.entry[i].link[j].rel == "alternate") {
                        u = e.feed.entry[i].link[j].href;
                        // 对返回的文章URL也做同样的格式化处理
                        u = u.replace(/\/$/, '');
                        break
                    }
                }
                // 新增判断：如果是当前博文直接跳过
                if (u === currentPostUrl) continue;
                var g = e.feed.entry[i].title.$t;
                var s = e.feed.entry[i].category[0].term;
                var y = e.feed.entry[i].author[0].name.$t;
                var c = e.feed.entry[i].content.$t;
                var $c = $('<div>').html(c);
                if (c.indexOf("//www.youtube.com/embed/") < -1) {
                    var p = e.feed.entry[i].media$thumbnail.url.replace('/default.jpg', '/mqdefault.jpg');
                    var k = p
                } else if (c.indexOf("<img") > -1) {
                    var q = $c.find('img:first').attr('src').replace('s72-c', 's1600');
                    var k = q
                } else {
                    var k = no_image
                }
                h += '<li><div class="related-thumb"><a class="related-img" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="related-overlay"/></a></div><div class="related-content"><div class="related-tag"><a class="icon ' + s + '" href="/search/label/' + s + '">' + s + '</a></div><h3 class="related-title"><a href="' + u + '">' + g + '</a></h3></div></li>'
            }
            h += '</div><div class="clear"/>';
            $("#related-posts").html(h);
            $(this).find('.related-img').each(function() {
                $(this).attr('style', function(i, src) {
                    return src.replace('/default.jpg', '/mqdefault.jpg')
                }).attr('style', function(i, src) {
                    return src.replace('s72-c', 's1600')
                })
            })
        }
    })
});

注意事项 #

如果你的博客配置了固定链接带特殊后缀，或者有URL跳转规则，对比逻辑不生效的话，可以调整URL格式化的规则适配自己的站点即可。

内容的提问来源于stack exchange，提问作者Sean Taylor