如何在 Blogger 文章加延伸閱讀、相關文章？

其實我最近文荒，不知道要寫什麼，剛好有網友留言詢問我的「延伸閱讀」是不是用程式碼自動產生的。老實說還真不是，因為之前查到的方法都是要去修改主題，我個人超討厭直接修改主題的，這樣換主題還要再重弄一次。

所以，我花了點時間研究別人的程式再搭配自己的想法，寫出一個我自己喜歡的。
原理是抓取相同標籤的文章，隨機選 5 篇顯示在文章後面。

步驟基本和之前一樣，新增 HTML/JavaScript 小工具，並貼入程式碼，想知道的可以去看「如何在 Blogger 文章加目錄索引？」或「如何在 Blogger 裡放程式碼？」這兩篇文章內有寫。

這次要貼的程式碼如下：

<style type="text/css">
    .relative-posts {
        background: #fff;
        margin: 30px 8px;
        padding: 32px;
        line-height: 30px;
    }

    .relative-posts h3 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        padding-bottom: 15px;
        margin: 0;
    }
</style>
<script type="text/javascript">
    $(function () {
        var bloggerUrl = 'https://girlwebdeveloper2.blogspot.com/';
        var relativePosts = {};
        var relativePostCount = 5;
        function displayRealativePosts() {
            var relativePostArray = Object.values(relativePosts);
            var displayPosts = [];
            if (relativePostArray.length > relativePostCount) {
                var displayIndexes = [];
                while (displayIndexes.length < relativePostCount) {
                    var index = Math.floor((relativePostArray.length - 1) * Math.random());
                    if (!displayIndexes.includes(index)) {
                        displayIndexes.push(index);
                        displayIndexes.sort();
                    }
                }
                for (var i = 0; i < displayIndexes.length; i++) {
                    displayPosts.push(relativePostArray[displayIndexes[i]]);
                }
            } else {
                displayPosts = relativePostArray;
            }
            if (displayPosts.length) {
                var relativeHtml = '<h3>延伸閱讀</h3><ul>';
                for (var i = 0; i < displayPosts.length; i++) {
                    displayPosts[i]
                    relativeHtml += '<li><a href="' + displayPosts[i].url + '">' + displayPosts[i].title + '</a></li>';
                }
                relativeHtml += '</ul>';
                if ($('.relative-posts').length) {
                    $('.relative-posts').html(relativeHtml);
                } else {
                    $('.item-view .post-outer').after($('<div>').addClass('relative-posts').html(relativeHtml));
                }
            }
        }
        $('.item-view .post-labels a').each(function(index, tag) {
            $.ajax({
                url: bloggerUrl + 'feeds/posts/default/-/' + $(tag).text() + '?alt=json',
                success: function(res) {
                    $.each(res.feed.entry, function(index2, entry) {
                        var url = '';
                        $.each(entry.link, function(index3, link) {
                            if (link.rel == 'alternate') {
                                url = link.href;
                            }
                        });
                        if (entry.title.$t != $('.item-view .post-wrapper .post-title').text().replace(/\n/g, '')) {
                            relativePosts[entry.id.$t] = {
                                title: entry.title.$t,
                                url: url,
                            };
                        }
                    });
                    displayRealativePosts();
                }
            });
        });
    });
</script>

說明：

程式有用到 jQuery，如果網誌沒有載入過的還需另外載入。
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
有一個重點一定要注意，就是第 17 行的 bloggerUrl 變數要改成自己網誌的網址，最後要有斜線"/"。
第 19 行的 relativePostCount 是最多顯示多少篇文章。
如果不想跟我一樣叫延伸閱讀，可以在第 39 行調整。
第 1~14 行是 CSS，微調一下顏色和間距。

參考文件

我是工程師但我是女生

搜尋此網誌

如何在 Blogger 文章加延伸閱讀、相關文章？

留言

張貼留言