블로그스팟 관련 글 위젯 추가하기 / 떠다니는 Q

블로그 글을 읽는 유저의 체류 시간을 늘리기 위한 방법 중 하나로 관련 글 위젯이 있습니다. 이번 글에서는 toshi 씨가 만든 관련 글 위젯을 어떻게 블로그스팟 블로그에 추가하는지 방법을 다루겠습니다.

관련 글 위젯 코드

제가 사용할 코드는 FeedRelatedPosts.js입니다. 이름을 굳이 알 필요는 없고, 아래 코드를 복사해 템플릿에 붙여 넣으면 됩니다.

<script>
//<![CDATA[
/*! FeedRelatedPosts.js v2.2 | MIT License | https://github.com/k08045kk/FeedRelatedPosts.js/blob/master/LICENSE */ !function(e,t){if(!e.FeedRelatedPosts){let a=e.FeedRelatedPosts||function(){},l=a.pages=a.pages||[],s=a.labels=a.labels||[];for(let r=0;r<2;r++){let n=0==r?a.siteJsonQuery||"#related-posts-site-json":a.pageJsonQuery||"#related-posts-page-json",i=document.querySelector(n);try{let p=i&&JSON.parse(i.textContent)||{};for(let o in Array.prototype.push.apply(l,p.pages||[]),Array.prototype.push.apply(s,p.labels||[]),p)p.hasOwnProperty(o)&&(a[o]=p[o])}catch(u){}}a.pages=!0===a.pushPages?l:a.pages,a.labels=!0===a.pushLabels?s:a.labels,e.FeedRelatedPosts=t(a,document),!1!==a.run&&e.FeedRelatedPosts.init()}}(this,function(e,t){"use strict";let a=function(e){let a=t.createElement("script");a.type="text/javascript",a.async=!0,a.src=e;let l=t.getElementsByTagName("script")[0];l.parentNode.insertBefore(a,l)},l=function(){let e=/&#(\d+);|&\w+;/g,t={"&nbsp;":" ","&lt;":"<","&gt;":">","&amp;":"&","&quot;":'"',"&apos;":"'"};return function(a){return a.replace(e,function(e,a){return"#"==e.charAt(1)?String.fromCharCode(a-0):t.hasOwnProperty(e)?t[e]:e})}}(),s=function(e,t){t=t||new Set;let a=/[A-Z]+[a-z]*|[A-Z]*[a-z]+|'[A-Z]*[a-z]*|[0-9]+|[^A-Za-z0-9'"!\?\-:;,\.\s]+/g,l;for(;null!==(l=a.exec(e));)254>=l[0].charCodeAt(0)?t.add(l[0].toLowerCase()):r(l[0],t);return t},r=function(e,t){e="  "+e.toLowerCase()+"  ",t=t||new Set;for(let a=e.length-2;a--;)t.add(e.substring(a,a+3));return t},n=function(e,t){let a=0;return t.forEach(function(t){e.has(t)&&(a+=1)}),a/(e.size+t.size-a)},i=function(e){let a=[];e.pageMap.forEach(function(e){e.score>=0&&a.push(e)}),a.sort(function(e,t){return t.score-e.score||new Date(t.updated)-new Date(e.updated)});let l=Math.min(e.max,a.length);if(e.min<=l){let s=[],r=0;for(;r<l;r++)s.push(e.format.replace(/\${(.*?)}/ig,function(e,t){let l="";return l="$"===t.toLowerCase()?"$":a[r].hasOwnProperty(t)?a[r][t]:""}));if(-1==e.min)for(;r<e.max;r++)s.push(e.dummy||"");let n=(e.prefix||"")+s.join("")+(e.sufix||""),i=e.insertQuery||"#related-posts-site-json",p=e.insertAdjacent||"afterend";t.querySelector(i).insertAdjacentHTML(p,n)}!0!==e.debug&&(e.pageMap=null),e.state="complate"};return e.add=function(t){let a=e;if("loading"==a.state){try{for(let l=0;l<t.feed.entry.length;l++){let s=t.feed.entry[l];for(let r=0;r<s.link.length;r++)if("alternate"==s.link[r].rel){if(!a.pageMap.has(s.link[r].href)){let p=a.gramify(s.link[r].title);!0===a.useSummary&&s.summary&&s.summary.$t&&a.gramify(s.summary.$t,p);let o=n(a.set,p);!0!==a.onlyThumbnail||s.media$thumbnail&&s.media$thumbnail.url||(o=-1),a.pageMap.set(s.link[r].href.split("?")[0],{url:s.link[r].href,title:s.link[r].title,updated:s.updated?s.updated.$t:"",thumbnail:s.media$thumbnail?s.media$thumbnail.url:"",score:o})}break}}}catch(u){}a.count=a.count+1,a.count>=a.limit&&i(a)}},e.init=function(){var n=e;if(!n.state){if(n.state="init",n.url=n.url||location.href,n.title=n.title||t.title,n.labels=n.labels||[],n.url=n.url.split(/\?|#/)[0],n.count=0,n.limit=n.labels.length+(!0===n.useLastPosts?1:0),n.pageMap=new Map,n.pageMap.set(n.url,{score:-1}),null==n.min&&(n.min=1),null==n.max&&(n.max=5),!n.homepageUrl){let p=n.url.match(/^(.+?):\/\/(.+?):?(\d+)?(\/.*)?$/);n.homepageUrl=p[1]+"://"+p[2]+(p[3]?":"+p[3]:"")+"/"}n.homepageUrl=n.homepageUrl.split("?")[0],n.gramify="engramify"==n.useSetType?s:r,n.set=n.gramify(n.title),!0===n.useSnippet&&n.snippet&&(n.snippet=l(n.snippet),n.gramify(n.snippet,n.set));for(let o=0;o<n.pages.length;o++)!1!==n.pages[o].visible&&(n.pages[o].score=n.pages.length+1-o,n.pageMap.set(n.pages[o].url,n.pages[o]));if(n.pageMap.size<n.max){if(n.excludedAnkersQuery){let u=t.querySelectorAll(n.excludedAnkersQuery);for(let f=0;f<u.length;f++)n.pageMap.set(u[f].href,{score:-1})}let m=n.homepageUrl+"feeds/posts/summary",c="?alt=json&callback=FeedRelatedPosts.add"+(n.params?"&"+n.params:""),g=/(^|&)max-results=/.test(n.params);if(0==n.limit)n.min<=n.pageMap.size&&i(n);else if(1==n.labels.length)a(m+"/-/"+n.labels[0]+c+(g?"":"&max-results=100"));else if(2==n.labels.length)a(m+"/-/"+n.labels[0]+c+(g?"":"&max-results=50")),a(m+"/-/"+n.labels[1]+c+(g?"":"&max-results=50"));else for(let d=0;d<n.labels.length;d++)a(m+"/-/"+n.labels[d]+c);!0===n.useLastPosts&&a(m+c)}else i(n);n.state="loading"}},e});
//]]>
</script>

붙여 넣을 위치를 찾는 방법을 알려 드리겠습니다. 블로그스팟 메인 페이지에서 테마 → 드롭다운 메뉴 → HTML 편집으로 들어갑니다.

맨 아래로 스크롤을 내려 </body>를 찾습니다. 그 바로 위에 해당 코드를 붙여넣으면 됩니다. 블로그스팟 기본 테마 Contempo 기준으로는 아래와 같이 붙여넣으면 됩니다. 거의 마지막 부분에 붙여넣는다고 생각하시는 게 편합니다.

이제 관련 글 기능을 하는 코드는 넣었으니 관련 글을 표시할 위치에 또 다른 코드를 넣어야 합니다. 기본적인 코드는 아래와 같습니다.

<div class='related-posts' role='navigation'>
    <h2>관련 글</h2>
    <script type='application/json' id='related-posts-site-json'>
        {
            "debug": false,
            "homepageUrl": "<data:blog.homepageUrl/>",
            "params": "orderby=updated",
            "url": "<data:post.url/>",
            "title": "<data:post.title.jsonEscaped/>",
            "snippet": "<data:post.snippets.short.jsonEscaped/>",
            "useSnippet": true,
            "useLastPosts": true,
            "min": -1,
            "max": 5,
            "prefix": "<ul class='related-post'>",
            "sufix": "</ul>",
            "dummy": "<li>&amp;nbsp;</li>",
            "format": "<li><a href='${url}'>${title}</a></li>",
            "labels": [<b:loop values='data:post.labels' var='label' index='i'><b:if cond='data:i != 0'>,</b:if>"<data:label.name.jsonEscaped/>"</b:loop>]
        }
    </script>
</div>

일단 이 코드를 넣을 위치를 알아봅시다. 보통 관련 글은 포스팅 아래와 댓글 위에 위치하는 것이 이상적이기에 저는 해당 위치에 넣도록 하겠습니다. Ctrl + F 를 이용하여 템플릿 코드에서 <data:post.body/>를 찾습니다. Contempo 테마 기준입니다.

3830줄 근처에 한 개가 검색됩니다. 아래 사진과 같이 코드를 붙여넣으면 됩니다.

저장하고 블로그를 보면 관련 글이 글 아래에 잘 표시되어 있습니다.

떠다니는 Q

블로그스팟 관련 글 위젯 추가하기

관련 글 위젯 코드

관련 글 위젯 커스텀하기

댓글 없음