부제: '이전 글, 다음 글' 페이지 이동
키보드 단축어 만들기
오랜만에 다시 찾은 티스토리는
이전 글[A], 다음 글[S] 단축키가 사라졌다...?
마지막으로 블로그를 운영한 지 십수 년이 지난 지금
의외로 많은 것들이 변해서 적응 기간을 두려 한다
그래도 일단 급한 불은 꺼야겠지?
기본 단축어를 확인한 뒤,
'이전 글(prev), 다음 글(next)' 키보드 단축어를
스킨 수정을 통해 적용해보자
첫 번째로 할 일은 일단
기본 단축키부터 숙지해 두기
1. 기본 '단축키 안내' 보는 방법
티스토리 블로그 페이지 내 어디서든
[Shirt + / ] (? 물음표)를 누르면 우측상단에
아래와 같은 레이어가 하나 뜬다
글을 작성하는 에디터 화면에서는
[Ctrl + / ]를 눌러 확인할 수 있다
에디터 우측 상단 ' … '을 클릭해도
단축키 항목을 확인할 수 있다
2. 티스토리 기본 단축키 목록(표)
기본 단축키 목록을
보기 좋게 표로 정리해 봤다
⌨️ 티스토리 공통 단축키
: 기본 도메인(~.tistory.com) 안에서는
공통 적용되는 단축키
| 적용 위치 | 행동 | 단축키 |
|---|---|---|
| 내 블로그 | 블로그 ↔ 블로그 관리 전환 | [Q] |
| 새 글 쓰기 | [W] | |
| 게시글 내부 | 글 수정(글 수정 권한이 있을 때) | [E] |
| 댓글 쓰기로 이동 | [C] | |
| 모든 영역 | 현재 페이지의 URL 복사 | [S] |
| 페이지 맨 위(Top)로 이동 | [T] | |
| 티스토리 홈(tistory.com) 이동 | [H] | |
| 단축키 안내 | [?] , Shift + / |
키보드 배열에서 보면 아래와 같다
📝 글쓰기 에디터 단축키
: 에디터 내부에서만 작동한다
| 적용 위치 | 행동 | 단축키 |
|---|---|---|
| 글쓰기 에디터 | 굵게 | Ctrl + B |
| 기울임꼴 | Ctrl + I | |
| 밑줄 | Ctrl + U | |
| 취소선 | Ctrl + Alt + J | |
| 글자색 | Ctrl + Alt + [ | |
| 배경색(형광펜) | Ctrl+Alt+ ] | |
| 서체 변경 | Ctrl + Alt + T | |
| 제목 변경 | Ctrl + Alt + 1 | |
| 본문 변경 | Ctrl + Alt + 2 | |
| 인용 변경 | Ctrl + Alt + 3 | |
| 목록 변경 | Ctrl + Alt + 4 | |
| 정렬 | Ctrl + Alt + 5 | |
| 링크 삽입 | Ctrl + K | |
| 코드 블럭 | Ctrl + Alt + , | |
| 특수 문자 | Ctrl + Alt + . | |
| 이모티콘 | Ctrl + Alt + E | |
| 단축키 목록 | Ctrl + / |
어느 프로그램이건, 에디터건 간에
자주 쓰는 단축키 정도는
외워두고 사용하는 것이 편리함
굵게, 기울임꼴, 밑줄, 링크삽입 기능은
어디서나 공통적으로 쓰이는 편이지만
취소선 이하 단축키들은 영 낯설긴 하다
아쉽게도 자주 쓰는 '구분선'이나 '지도 삽입',
'플러그인' 같은 추가기능은 단축키가 없는 듯
3. Javascript로 단축키 추가하기
간단한 자바스크립트를 통해
단축키를 설정해 보자
티스토리 자체 단축키에서 [S] 키를 사용 중이라서
대신 [D] 키를 사용,
현재 내 블로그는 포스트 주소가 '숫자'
형태로 설정돼 있기 때문에
1. [A], [D]를 눌러서 '이전 글(prev), 다음 글(next)'로
±1 페이지씩 이동할 것
2. 목록화면(홈 또는 카테고리) 페이지에서는
하단 페이징 영역에 앵커를 통해 이전/다음으로 이동
3. [F], [G] 키는 각각 '글 관리', '방문 통계' 페이지로
새 창에서 열리기로 설정
4. [R] 키는 페이지 새로고침
으로 다음과 같이 구현해 봤다
<script type="text/javascript">
const lnk = {};
const currentPage = parseInt(location.pathname.match(/\d+$/));
lnk['a'] = isNaN(currentPage) ? "/" : `/${currentPage - 1}`;
lnk['d'] = isNaN(currentPage) ? "/" : `/${currentPage + 1}`;
lnk['f'] = "/manage/posts"; //글 관리
lnk['g'] = "/manage/statistics/blog"; //방문 통계
document.onkeypress = function (e) {
const tag = (e.target || e.srcElement).tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
const key = String.fromCharCode(e.keyCode || e.which).toLowerCase();
if (key === 'r') {
location.reload();
} else if (key === 'f' || key === 'g') {
window.open(lnk[key], '_blank');
} else if (lnk[key]) {
location.href = lnk[key];
}
};
</script>
키보드 배열로 보면
민트색이 티스토리 기본 단축키,
붉은색 계열이 자바스크립트를 통해
새로 설정한 단축키이다
(보라색은 새 창에서 열림)
혹시나 추가 또는 수정하고 싶다면
lnk['f'] = "/manage/posts"; //글 관리
lnk['g'] = "/manage/statistics/blog"; //방문 통계
lnk['단축키'] = "http://를 포함한 이동하고 싶은 주소"; //주석 입력
lnk['단축키'] = "또는 블로그의 /하위 주소"; //주석 입력위와 같은 형태로 수정해 보자
✔️ 티스토리 블로그 관리 페이지의 하위 주소
| 페이지명 | 주소 |
|---|---|
| 블로그 관리 홈 | /manage |
| 글 관리 | /manage/posts |
| 페이지 관리 | /manage/pages |
| 카테고리 관리 | /manage/category |
| 댓글 관리 | /manage/comments |
| 방문 통계 | /manage/statistics/blog |
| 유입 경로 | /manage/statistics/referrer |
| 애드센스 관리 | /manage/revenue/adsense |
| 스킨 편집 | /manage/design/skin/edit#/ |
| 사이드바 | /manage/design/sidebar |
| 플러그인 | /manage/plugins |
| 블로그 설정 | /manage/setting/blog |
4. 스킨 편집을 통해 적용해 보기
우선 위 txt 파일을 다운로드하여 코드를 '복사'
'블로그관리 페이지 > 스킨 편집 > html 편집'
으로 들어가 <head>와 </head> 사이 영역에
붙여 넣기 후 적용
아주 잘 작동한다
현재 해당 페이지에서도 확인 가능하며,
PC버전에서 [A], [D] 키를 누르면
현재 페이지: https://hmdh.tistory.com/22
에서 ' / (슬래쉬) ' 뒤에 숫자가 21 또는 23으로
이동하는 것을 볼 수 있다
만약 22번째 포스팅 후 23 페이지가 없다면?
위와 같이 뜨는 게 정상이다
간단하지만
페이지 간의 빠른 전환으로 속이 다 후련한,
티스토리 스킨 수정 완료
'티스토리 적응기' 카테고리의 다른 글
| [#스크랩] 티스토리 수익화 관련 운영 정책 변경 안내 (1) | 2025.05.02 |
|---|
