FastBoot 스킨 사이드바 최신 글(recentPost) 썸네일 오류 해결 방법
FastBoot 스킨 사이드바 최신 글(recentPost) 썸네일 오류 해결 방법
언제인가부터 최신글 목록에 썸네일 이미지가 제대로 나오지 않고 이렇게 
티스토리 보안접속 적용으로 본 글의 내용은 아래 링크를 참조하시기 바랍니다.
참조 : 2018/09/07 - [웹페이지] - [FastBoot 스킨] 티스토리 보안접속(https) 적용으로 인한 최신 글 목록(recent posts) 썸네일 안나오는 문제 수정
최신글 목록에 썸네일 이미지를 보여주는 티스토리 블로그 스킨을 본 기억은 별로 없습니다. 썸네일 이미지를 불러오는 작업이 블로그 페이지 불러오는데 시간과 용량상 부담도 될 것 같아 필자는 최신글 목록을 텍스트 형식으로 수정한 바있습니다. 우연히 어느 블로그(intellego님의 블로그)를 보는데 FastBoot 스킨이었으며 최신글 목록에 썸네일 이미지가 정상적으로 나오고 있습니다.
결론부터 말하면 스킨의 images 폴더에 있는 fastboot.min.js의 내용 중 e = “http://cfile”; 이 부분을 e = “https://t1”;로 수정하는 것입니다. intellego님께 감사드립니다.
티에디션을 사용하지 않고 FastBoot 인덱스 페이지를 홈화면으로 썸네일 이미지를 사용한다면 fastboot_index.js 파일도 동일하게 수정해야 합니다.
FastBoot 스킨은 최신글 목록 썸네일 이미지를 스크립트 fastboot.min.js를 통해 rss 파일에서 불러오는 것으로 알고 있습니다.(이미지 주소를 가져옵니다) 티스토리에서 이미지 저장 url을 언제인가 변경한 것 같습니다.
-
https://t1.daumcdn.net/cfile/tistory/2714794F5`
위는 기본 이미지 url입니다. -
https://t1.daumcdn.net/cfile/tistory/xxxxxxxxxxxxxxxxxx
위는 정상적으로 나오는 이미지 url입니다.
아마도 이미지 저장 url이 http://cfile6 로 시작되는 url에서 https://t1로 시작되는 url으로 변경된 것으로 추정됩니다.
아래는 최신글 목록을 출력하는 스킨상 HTML 코드 부분입니다.
<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div id="recentPost" class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-file-o"></i> Writings</h4>
<ul class="list-group list-group-flush">
<s_rctps_rep>
<li class="list-group-item">
<a href="[$$_rctps_rep_link_$$]">
<span class="thumb"><img src="
https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" alt="" class="dno">
</span>
<div style="text-indent:-4px">
<i class="fa fa-angle-right"></i> [$$_rctps_rep_title_$$]
<span class="name">[$$_rctps_rep_rp_cnt_$$]</span>
<div class="clearfix"></div></div>
</a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
노란색 부분의 내용이 썸네일 이미지를 표시하는 부분인데 아래 표시한 fastboot.min,js에서 썸네일 이미지를 글 목록 텍스트 앞에 삽입하고 있습니다.
$.ajax({
url: "/rss",
dataType: "xml",
success: function(t) {
$(t).find("item").each(function() {
var t = $(this).children("link").text();
t = t.replace("http://", "");
if (t.split("/")[2] != null)
t = "/" + t.split("/")[1] + "/" + t.split("/")[2];
else
t = "/" + t.split("/")[1];
var n = $(this).children("description").text();
e = "http://cfile"; //e = "https://t1";
g = '"';
if (n.match(e + "(.*?)" + g) != null) {
a = n.match(e + "(.*?)" + g)[0];
a = a.substring(0, a.length - 1);
recent_items_link.push(t);
recent_items_img.push(a)
}
});
위의 코드는 fastboot.min.js를 크롬 개발자 도구에서 pretty print(예쁜인쇄)로 보기 용이하게 포맷한모양입니다.(원 파일은 공백을 제거한 일종의 압축 파일로 보기가 난해합니다)
$.ajax에서 rss파일 내용은 제대로 갖고 오는 것이 확인되지만 노란색 부분 안의 코드가 정상적으로 수행돼야 하는데 "http://cfile"과 match되는 내용이 없어 해당 코드를 수행하지 않습니다. 해당 줄 옆에 표시한 e = “https://t1”;로 수정한 후 해당 코드가 정상적으로 수행되고 썸네일 이미지가 나왔습니다.
fastboot.min.js 파일 수정 및 업로드
-
스킨 적용시 다운로드 받은 파일이 있으면 그 파일을 사용하고 없으면 블로그 관리>꾸미기>스킨변경 화면에서 사용 중인 스킨을 다운로드하고 압축을 풉니다.(FastBoot 스킨이겠지요)
-
스킨의 images 폴더에 있는 fastboot.min.js 파일을 엽니다.(메모장 또는 Notepad++ 등 사용)
-
http://cfile을https://t1으로 수정합니다. 눈으로 찾기 어렵습니다.http://cfile으로 검색해서 그 자리에https://t1을 복사 붙혀놓기를 합니다. 동일한 파일명으로 저장합니다. -
블로그 관리>스킨편집 화면에서 HTML편집을 선택 업로드를 선택합니다,
-
하단의 추기 버튼을 클릭하고 fastboot.min.js를 업로드합니다.
블로그 글 페이지로 돌아가면 최신글 목록에서 썸네일 이미지를 볼 수있습니다.
ps. 당분간 최신글 목록 형태를 유지하겠지만 썸네일 이미지를 나타내게하는 코드 수행과 이미지 표시로 인해 블로그 로드에 부담이 될 것으로 생각하며 또한 티스토리에서 어떤 변경이 있을 수도 있으므로 간결한 텍스트 형식으로 바꿀 예정입니다.