티스토리 본문 링크 새창으로 띄우기, skin.html 수정 방법
- Blog
- 2021. 12. 23.
▶ 요약: jbskin을 사용한다면 다소 수정해야 함
▶ 관련 링크
▶ 목적: 티스토리 블로그 본문의 모든 링크만 새창으로 띄우기 하고 싶을 때 방법
▶ 주요 내용
블로그에 글을 작성할 때 에버노트를 활용하고 있습니다. 해당 글을 티스토리로 옮기면 기본적으로 모든 링크가 현재창에서 실행됩니다.
이런 저런 검색을 하다. "알릭2"님의 글을 발견하고 적용해봅니다.
잘 작동하지 않아 사용 중인 스킨의 제작자에게 문의를 했습니다.
|
사용 중인 티스토리 유료 스킨
JB SKIN 167 V3.2.1
JB FACTORY
|
회신을 받고 "알릭2"님의 소스에 반영하여 적용해보았습니다.
|
적용방법:
[스킨 편집] > [html 편집] > [HTML] 내용 하단 </body> 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝
var anchors = document.querySelectorAll('.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a');
for(var i=0; i < anchors.length; i++){
anchors[i].target = '_blank';
}
혹시 jQuery 를 쓰고 있다면 아래 한줄로 해결
$("'.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a'
").attr("target", "_blank");
//만약 외부사이트로의 링크에만 적용하고 싶다면 아래 내용으로 교체!
$('.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a').each(function(){
if (this.href.indexOf(window.location.hostname) < 0) {
this.target = "_blank";
}
});
혹시 스킨에 따라 링크가 좀 과하게 많이 잡히는 것 같다면 셀렉터 부분을 '.entry-content p a' 로 변경
|
|
실제 블로그 skin.html 에 적용한 소스 및 위치
//만약 외부사이트로의 링크에만 적용하고 싶다면 아래 내용으로 교체!
$('.jb-article p a, .jb-article l a, .jb-article blockquote a, .jb-article div a').each(function(){
if (this.href.indexOf(window.location.hostname) < 0) {
this.target = "_blank";
}
});
스킨 소스의 jquery 시작하는 부분 하단에 바로 삽입 후 적용하니 잘 작동합니다.
|
티스토리에는 다양한 스킨이 무료로 제공됩니다. 어느 날 웹서핑 중 우연히 이쁜 블로그를 발견하곤 "JB 스킨"으로 제작된 것을 알고 유료 구입까지 하게되었습니다.
사후 관리도 잘되고 문의에 대한 응답도 잘해줍니다.
JB SKIN 167 V2.3.0, 개인적으로 가장 깔끔하고 좋다고 생각되는 스킨의 버전입니다. 지금은 구하기도 힘들어서 제작자에게 별도 요청을 해야합니다.
오직 읽기에 집중할 수 있는 스킨 같습니다.
JB SKIN 167 V3.2.1, 지금은 3.2.1 버전을 사용하고 있습니다. 블로그에 스킨은 패션과 같아서 이쁜 껍데기를 갖고 있으면 자주 들여다보게 됩니다.
그만큼 중요합니다.
요지: jbskin 사용하면서 티스토리 본문의 링크를 새창으로 실행하고 싶다면 아래 스크립트를 해당 부분에 삽입하면 됩니다.
<script>
jQuery( document ).ready( function( $ ) {
//만약 외부사이트로의 링크에만 적용하고 싶다면 아래 내용으로 교체!
$('.jb-article p a, .jb-article l a, .jb-article blockquote a, .jb-article div a').each(function(){
if (this.href.indexOf(window.location.hostname) < 0) {
this.target = "_blank";
}
});
// Frontpage, Notice
if ( $( 'body' ).attr( 'id' ) == 'tt-body-index' && jbCurrentUrl.indexOf( '/notice' ) < 0 && $( '#jb-cover-group' ).attr( 'class' ) !== 'jb-cover-group' ) {
$( 'body' ).addClass( 'jb-body-frontpage' );
}
if ( $( 'body' ).attr( 'id' ) == 'tt-body-index' && jbCurrentUrl.indexOf( '/notice' ) > -1 ) {
$( 'body' ).addClass( 'jb-body-notice' );
}
if ( $( 'body' ).attr( 'id' ) == 'tt-body-index' && $( '#jb-cover-group' ).attr( 'class' ) == 'jb-cover-group' ) {
$( 'body' ).addClass( 'jb-body-frontpage-cover' );
}
#새창실행 #새창 #본문새창 #자바스크립트 #jbskin #티스토리스킨 #스킨수정
'공감과 공유는 좀 더 양질의 콘텐츠 생성을 이끕니다.'