티스토리 블로그에 추가 단축키 만들기
- 목차
안녕하세요, 흔한공돌이 입니다.
이번에는 티스토리 블로그에 기본 단축키 이외의 추가 단축키를 어떻게 넣을 수 있는지에 대해 소개하는 리뷰를 쓰도록 하겠습니다.
* 저는 아직 HTML, CSS, Javascript 등에 대해서는 문외한입니다. 이후의 내용들은 제가 검색하며 찾은 방법들을 복붙한 정도에 불과하기 때문에, 자세한 내용은 언급해드릴 능력이 되지 않습니다.
1. 티스토리에 내장된 시스템을 이용한 단축키 추가
티스토리에는 자체적으로 설정된 단축키가 몇 가지가 있습니다. 조금만 소개해드리자면
Q: 블로그 관리 페이지 - 블로그 메인 페이지 이동
A: 더 최근 게시물로 이동
S: 이전 게시물로 이동
정도가 있습니다. 여기에 추가적으로 원하는 기능을 추가하고 싶은 경우가 있을 수 있습니다. 우선, 블로그 관리로 이동한 후 꾸미기 - HTML/CSS 편집 으로 이동합니다. HTML 에서 잘 찾아보면 다음과 비슷한 부분이 있습니다. 아래 내용은 제 블로그의 HTML의 일부를 첨부한 것입니다.
<script>
var key = new Array(); // 이 부분을 검색해서 찾아보세요
key['w'] = "/admin/entry/post/"; // 글 작성
key['h'] = "/"; // 첫 화면
key['r'] = document.location; // 새로고침
</script>잘 못 찾겠다, 싶으시면 위에서 굵게 표시한 부분을 긁어서 검색해보시면 되겠습니다. 블로그의 스킨에 따라 형태는 좀 다를 수 있겠습니다만 대충 저런 형태를 띄고 있을 거에요. 위의 구조는 대충 다음과 같습니다.
key['원하는 키 입력'] = "이동하고자 하는 경로";본인의 블로그 내의 경로일 경우는 xxx.tistory.com 은 생략하셔도 됩니다. 원하는 경로가 xxx.tistory.com/abcdef 일 경우, "/abcdef" 만 입력하셔도 된다는 뜻이죠. r키로 지정해놓은 document.location 은 새로고침 기능이 됩니다. 사실 왜 그런지는 저도 잘 모르고, 저희 학교 커뮤니티 태그를 뒤져보니 저런 게 있더라구요. 혹시나 해서 블로그에 써봤는데 되길래 쓰고 있습니다.
2. Javascript, jQuery를 이용한 복잡한 기능 추가
* 위에서도 언급했지만, 저는 Javascript, jQuery 에 대해서는 정말 문외한입니다. 그저 검색 노가다를 통해 알게 된 방법이기 때문에, 제가 추가한 기능 정도밖에는 설명을 드리지 못해요...ㅜㅜ
* 출처: http://www.openjs.com/scripts/events/keyboard_shortcuts/ (영문 사이트) , http://ngweb.tistory.com/49 (앞의 링크를 간단하게 한글로 정리한 블로그입니다)
1) 다음 js 파일을 다운받으신 후, HTML/CSS 편집에 들어가셔서 파일업로드 에서 이 파일을 추가해주세요.
2) HTML에 다음을 적절한(...) 위치에 복붙해주세요. 저는 1에서 소개해드린 내용 바로 위에 넣었습니다.
<script language="javascript" src="./images/shortcuts.js"></script> // 위에서 업로드한 js 파일을 등록? 해주는 것 같습니다.
<script language="javascript">
shortcut("D",function() {
$('html,body').scrollTop(0);
}); // 맨 위로
shortcut("F",function() {
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}); // 맨 아래로
</script>위의 구조는 대충 다음과 같습니다.
shortcut("원하는 키 입력",function() {원하는 기능 입력});이 방법은 블로그 내의 경로로만 이동이 가능한 것 같은 1번 방법과는 달리 Javascript 를 이용한 다른 기능을 추가할 수 있을 것 같다는 점에서 매력적인 방법으로 보입니다. 하지만... 반복해서 언급하고 있습니다만, 저는 이런 쪽으로는 문외한인지라 '이런 기능 추가하고 싶은데, 뭘 써야 하나요?'라고 물어보셔도 모릅니다...! 저기에 써있는 맨 위로, 맨 아래로 기능도 구글링 해서 겨우 찾은거에요...
그리고 이 방법은, 여러 키를 동시에 입력하는 방법도 사용 가능합니다! 출처 링크를 들어가보시면, 'Ctrl+Shift+X' 를 이용해서 단축키 지정을 해놓은 것을 보실 수 있을 거에요. 어떤 키를 사용 가능한지는 첫번째 출처를 들어가보시면 확인 가능합니다.
3-4시간 동안 겨우 검색해서 저거 넣은 경험자로서 말씀드리자면 (초보자의 입장에서) 티스토리에서는 이런 기능에 대해 '자세히' 글을 써주신 분은 찾지를 못했습니다. 제 검색력이 부족한 탓일수도 있겠습니다만... 저는 구글에 'javascript hotkey scroll to top (또는 bottom)' 으로 검색해서 찾았습니다. hotkey 였는지, shortcut 이었는지는 가물가물하네요. 여튼, 영문 사이트를 좀 뒤적이시다보면 찾으실 수도 있을 거에요.
1과 2를 짬뽕시킨 결과물은 다음과 같습니다. 반드시 이 내용을 head 태그 사이에 넣어주셔야 합니다.
<script language="javascript" src="./images/shortcuts.js"></script>
<script language="javascript">
shortcut("D",function() {
$('html,body').scrollTop(0);
}); // 맨 위로
shortcut("F",function() {
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}); // 맨 아래로
</script>
<script>
var key = new Array();
key['w'] = "/admin/entry/post/";
key['h'] = "/"; // 첫 화면
key['r'] = document.location; // 새로고침
</script>
