티스토리 글 수정, 글 쓰기 단축키를 추가 하자
티스토리에는 숨겨진 단축키가 있습니다. 바로 "Q" 키를 누르면 "블로그관리"페이지로 이동합니다. 블로그관리 페이지에서 "Q"를 누르면 다시 블로그 메인 페이지로 돌아갑니다.
개인적으로 단축키가 없어서 아쉬웠던 부분은 글 수정 페이지로 이동하는 것이었습니다. 왜냐하면 글 수정 페이지로 접근이 불편하기 때문인데요. 스킨에 따라 글 수정 버튼 위치가 다르기도 하고, 개인 도메인을 사용하는 경우 글 수정 버튼 자체가 나타나지 않기 때문입니다.
덤으로 글 쓰기 단축키도 있으면 편하겠다는 생각이 들었습니다. 글 쓰기 버튼 역시 스킨에 따라 위치가 달라서 블로그관리 페이지로 가서 글 쓰기 버튼을 누르곤 했습니다.
기존에 자주 사용하는 "Q"단축키 근처에 단축키들이 있으면 편리하겠다 생각이 들어서 "W"를 누르면 글 쓰기, "E"를 누르면 글 수정으로 단축키를 만들어 보았습니다. 겸사겸사 "T"를 누르면 맨 위로 이동, "?"를 누르면 단축키 안내 페이지가 나오도록 만들어 보았습니다.
안 예쁘지만 단축키가 기억나지 않을 때 "?"를 누르면 단축키를 확인해 볼 수 있습니다.
코드는 다음과 같습니다. <body></body> 태그 사이에 적당한 위치에 넣어두면 됩니다.
<div id="shortcutLayer"
style="display: none; width: 300px; border: 1px solid black; padding: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 1000;">
<span style="float: right; cursor: pointer;" id="closeLayer">X</span>
<h2>단축키 안내</h2>
<p><strong>W</strong> - 새 글 쓰기</p>
<p><strong>E</strong> - 글 수정</p>
<p><strong>T</strong> - 맨 위로 이동</p>
<p><strong>Q</strong> - 어드민/메인</p>
<p><strong>?</strong> or <strong>Shift + /</strong> - 단축키 안내</p>
</div>
<script type="text/javascript">
const shortcuts = {
'w': "/manage/newpost/?type=post", // write
'e': `/manage/newpost/${location.pathname.split('/')[1]}`, // edit
't': "#", // top
};
document.addEventListener('keypress', function (event) {
if (!['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
let char = event.key.toLowerCase();
if (char === '?' || (event.shiftKey && char === '/')) {
const shortcutLayer = document.getElementById('shortcutLayer');
if (shortcutLayer.style.display === 'block') {
shortcutLayer.style.display = 'none';
} else {
shortcutLayer.style.display = 'block';
}
}
if (shortcuts.hasOwnProperty(char)) window.location = shortcuts[char];
}
});
const closeLayer = document.getElementById('closeLayer');
closeLayer.addEventListener('click', function () {
shortcutLayer.style.display = 'none';
});
</script>gist: https://gist.github.com/junho85/0351a9623f986ae234e5e17bbac3c3a1
github: https://github.com/junho85/tistoryskin
만들고 보니 개인적으로 자주 들어가는 관리 페이지들도 만들면 좋겠다는 생각이 듭니다. 구글 애드센스 페이지, 스킨 편집 페이지도 단축키로 만들어 두면 유용하게 사용하지 않을까 싶습니다.