IT이야기

티스토리 글 수정, 글 쓰기 단축키를 추가 하자

준호씨 2024. 4. 3. 22:49
반응형

티스토리에는 숨겨진 단축키가 있습니다. 바로 "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

 

만들고 보니 개인적으로 자주 들어가는 관리 페이지들도 만들면 좋겠다는 생각이 듭니다. 구글 애드센스 페이지, 스킨 편집 페이지도 단축키로 만들어 두면 유용하게 사용하지 않을까 싶습니다.

반응형