blogger

[blogger] BloggerJS로 URL을 깔끔하게 정리해 보자

1월 02, 2026

BloggerJS는 Blogger 블로그의 URL 형식을 수정하는 스크립트입니다. 가장 중요한 탐색을 시각적으로 보여줍니다.

이 스크립트는 블로그와 연동되어 사이트 탐색 시 URL을 깔끔하게 "정리"해 줍니다. 필요에 따라 날짜 부분인 "/YYYY/MM" 또는 "/p"와 ".html"을 제거합니다. 이렇게 하면 URL이 훨씬 보기 좋게 표시되어 공유가 훨씬 쉬워집니다.

아래는 게시물의 URL에서 빨간색 부분을 제거해 줍니다.

https://YourBlog.blogspot.com/2026/10/blog-post.html

https://YourBlog.blogspot.com/blog-post


아래는 페이지의 URL에서 빨간색 부분을 제거해 줍니다.

https://YourBlog.blogspot.com/p/page.html

https://YourBlog.blogspot.com/page


블로그에 BloggerJS를 구현하는 경우 다음 코드에 대한 복사가 필요합니다. 

<script type="text/javascript">
// BloggerJS v0.4.0
// Licensed under the MIT License
// Copyright (c) 2017-2018 Kenny Cruz
// github.com/jokenox

// Configuration
var config = {
  postsDatePrefix: false,
  accessOnly: false,

  useApiV3: false,
  apiKey: "YOUR-API-KEY-HERE"
}
var postsOrPages=["pages","posts"],blogId="<data:blog.blogId/>",urlTotal,fetchIndex=1,ampChar="&amp;"[0],secondRequest=!0,feedPriority=0,nextPageToken;function urlVal(){var url=window.location.pathname;var length=url.length;var urlEnd=url.substring(length-5);if(urlEnd===".html")return 0;else if(length>1)return 1;else return 2}
function urlMod(){var url=window.location.pathname;if(url.substring(1,2)==="p"){url=url.substring(url.indexOf("/",1)+1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../"+url)}else{if(!config.postsDatePrefix)url=url.substring(url.indexOf("/",7)+1);else url=url.substring(1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../../"+url)}}
function urlSearch(url,database){var pathname=url+".html";database.forEach(function(element){var search=element.search(pathname);if(search!==-1)window.location=element})}
function urlManager(){var validation=urlVal();if(validation===0){if(!config.accessOnly)urlMod()}else if(validation===1){fetchData(postsOrPages[feedPriority],1)}else if(validation===2){if(!config.accessOnly)history.replaceState(null,null,"/")}}
function fetchData(postsOrPages,index){var script=document.createElement("script");if(config.useApiV3){var jsonUrl="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+postsOrPages+"?key="+config.apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=parseData";if(nextPageToken)jsonUrl+="#pageToken="+nextPageToken;nextPageToken=undefined}else{var jsonUrl=window.location.protocol+"//"+window.location.hostname+"/feeds/"+postsOrPages+"/summary?start-index="+index+"#max-results=150#orderby=published#alt=json-in-script#callback=parseData"}
jsonUrl=jsonUrl.replace(/#/g,ampChar);script.type="text/javascript";script.src=jsonUrl;document.getElementsByTagName("head")[0].appendChild(script)}
function parseData(json){var database=[];if(!config.useApiV3){if(!urlTotal){urlTotal=parseInt(json.feed.openSearch$totalResults.$t)}
try{json.feed.entry.forEach(function(element,index){var entry=json.feed.entry[index];entry.link.forEach(function(element,index){if(entry.link[index].rel==="alternate")database.push(entry.link[index].href)})})}catch(e){}}else{try{json.items.forEach(function(element,index){database.push(element.url)})}catch(e){}
nextPageToken=json.nextPageToken}
urlSearch(window.location.pathname,database);if(urlTotal>150){fetchIndex+=150;urlTotal-=150;fetchData(postsOrPages[feedPriority],fetchIndex)}else if(nextPageToken){fetchData(postsOrPages[feedPriority])}else if(secondRequest){nextPageToken=undefined;urlTotal=0;fetchIndex=1;secondRequest=!1;if(feedPriority===0){feedPriority=1;fetchData("posts",1)}else if(feedPriority===1){feedPriority=0;fetchData("pages",1)}}}
function bloggerJS(priority){if(priority)feedPriority=priority;urlManager()}
bloggerJS()
</script>

위의 코드를 모두 복사했으면 템플릿의 HTML 코드로 이동하여 <head> 태그를 찾은 다음 그 바로 아래에 코드를 붙여넣으세요.

<head>
<!-- 이곳에 붙여 주세요. -->
...

코드를 복사해서 붙여넣기만 해도 BloggerJS를 실행할 수 있지만, 특히 콘텐츠가 많은 블로그의 경우 성능과 속도 면에서 훨씬 뛰어난 Blogger v3 API와 연동되도록 스크립트를 구성하는 것이 좋습니다.

스크립트 시작 부분에 구성 변수가 있습니다. 이러한 속성을 수정하는 것은 선택 사항입니다. 각 변수에 대한 설명은 다음 표에 나와 있습니다.

속 성기본값설 명
postsDatePrefixfalse게시물 URL에 날짜를 허용합니다.
accessOnlyfalse단축 URL은 사이트 접속용으로만 사용되며, 일반적인 기능에는 사용할 수 없습니다.
useApiV3falseBlogger API v3을 사용합니다.
apiKey-Blogger API v3 사용을 위한 API 키를 입력하세요.


출처: https://github.com/jokenox/bloggerjs

Tag:

0 Comments

0 댓글