구글 블로거 관련 글 목록 추가하기

 

구글 블로거에서 특정 게시글을 볼 때, 관련 글 목록을 보이게하려면 추가 작업을 해야한다.

 

즉, 기본적으로 제공되지 않는다.

 

 

HTML/자바스크립트 수정(또는 추가)

 

먼저, 구글 블로거 설정에서 레이아웃을 클릭한 후,

관련 글 설정 수정을 버튼을 클릭한다.

테마마다 다를텐데, 관련 글 설정이 따로 없다면 HTML/자바스크립트 구성을 추가한다.

제목을 작성하고
콘텐츠(아래 참조)를 작성한 후,
저장 버튼을 클릭한다.

 

관련 글 목록 콘텐츠

function showRelatedPosts() {
  // 현재 글에서 사용된 태그 가져오기
  var tags = document.querySelectorAll('.post-footer .post-tags a');
  var relatedPosts = [];

  // 태그에 해당하는 글 검색하여 relatedPosts 배열에 추가
  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i].innerText.trim();
    var relatedPostsUrl = '/feeds/posts/default/-/' + encodeURIComponent(tag) + '?alt=json-in-script&max-results=5';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', relatedPostsUrl);
    xhr.onload = function() {
      if (xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        var entries = json.feed.entry;
        for (var j = 0; j < entries.length; j++) {
          var entry = entries[j];
          var title = entry.title.$t;
          var url = entry.link[4].href;
          relatedPosts.push({title: title, url: url});
        }
        // 출력할 관련글 목록 생성
        var relatedPostsHtml = '';
        for (var k = 0; k < relatedPosts.length; k++) {
          relatedPostsHtml += '<li><a href="' + relatedPosts[k].url + '">' + relatedPosts[k].title + '</a></li>';
        }
        // 관련글 목록을 출력할 위치에 추가
        document.querySelector('.post-related-posts').innerHTML = relatedPostsHtml;
      }
    };
    xhr.send();
  }
}

// 함수 호출
showRelatedPosts();