hELLO 스킨 글쓰기
hELLO 스킨을 사용하시는 분들 중에는 새 글 작성에 대한 불편사항을 말씀하시는 분들이 많습니다. 하지만 이 기능은 티스토리에서 단축키를 통해 더욱 원활하게 이용할 수 있도록 지원하고 있습니다. 기본적인 글 작성을 위한 단축키는 물론, 새 글 작성, 관리자 페이지 이동, 글 수정 단축키도 쉽게 활용할 수 있습니다. 이번 글에서는 이러한 단축키를 방문자들에게 쉽게 안내할 수 있도록 사이드바에 관련 정보를 배치하는 커스텀 방법을 소개하겠습니다. 이 안내는 정상우 님의 hELLO 스킨 버전 4.9.0을 기준으로 작성되었음을 명심해 주세요.
또한, 이번에 제공하는 코드는 hELLO 스킨에만 국한되지 않으므로, 다른 블로그에서도 적용하고 싶으신 분들은 코드 수정 후 자유롭게 사용하실 수 있습니다. 여러분의 블로그를 더욱 편리하게 만들어주는 커스텀을 통해, 방문자들에게 유용한 정보를 제공해 보세요.
티스토리 단축기 정보
아래 내용은 티스토리 공식 블로그에서 2024.05.20. 새롭게 업데이트된 내용을 공개한 글입니다.
[단축키 안내 ⌨️]
# 내 블로그에서 동작하는 키Q내 블로그 - 블로그관리 홈 전환W새 글 쓰기
# 블로그 게시글에서 동작하는 키E글 수정 (글 수정 권한이 있는 경우)C댓글 쓰기로 이동
# 모든 영역에서 동작하는 키S현재 페이지의 URL 복사T페이지 맨 위로 이동H티스토리 홈 이동?Shift+/단축키 안내
이렇게 간단히 단축키를 사용하여 자주 사용하는 기능을 편리하게 이용할 수 있도록 하였습니다.
사이드바 드롭다운 커스텀
이렇게 편리한 기능이 있지만, 익숙하지 않은 단축키로 인해 많은 사람들이 잘 모르는 경우가 많습니다. 그래서 이 단축키를 안내하는 글을 사이드바에 드롭다운 기능을 활용하여 배치했습니다. 이를 통해 공간을 절약하면서도 시각적인 효과를 극대화하여, 운영자와 방문자 모두가 사이드바에 집중할 수 있도록 하였습니다. 이제 방문자들은 필요한 정보를 쉽게 찾을 수 있으며, 블로그 운영자에게는 보다 효율적인 관리 도구가 될 것입니다.
HTML 코드
<s_sidebar_element><!-- 단축키 안내 -->
<div class="el keyboard_info">
<h2>
<button class="btn_key" aria-pressed="false">
<span>단축키 안내</span>
<svg class="svg-inline--fa fa-keyboard" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor" d="M64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L64 64zm16 64l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM64 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm16 80l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80-176c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm16 80l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM160 336c0-8.8 7.2-16 16-16l224 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-224 0c-8.8 0-16-7.2-16-16l0-32zM272 128l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM256 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM368 128l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM352 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM464 128l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM448 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm16 80l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16z"></path>
</svg>
<!-- <i class="fas fa-keyboard"></i> Font Awesome fontawesome.com -->
</button>
</h2>
<div class="info box-border bg-h-200 text-h-400 dark:bg-h-700 dark:text-h-200" style="max-height: 0; overflow: hidden; transition: max-height 0.9s ease;">
<span class="info_tit">내 블로그에서 동작하는 키</span>
<em>[Q]</em> 내 블로그 - 블로그관리 홈 전환<br>
<em>[W]</em> 새 글 쓰기
<span class="info_tit">블로그 게시글에서 동작하는 키</span>
<em>[E]</em> 글 수정 (글 수정 권한이 있는 경우)<br>
<em>[C]</em> 댓글 쓰기로 이동
<span class="info_tit">모든 영역에서 동작하는 키</span>
<em>[S]</em> 현재 페이지의 URL 복사<br>
<em>[T]</em> 페이지 맨 위로 이동<br>
<em>[H]</em> 티스토리 홈 이동 <br>
<em>[?] [Shift+/]</em> 단축키 안내
<span class="info_tit">단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.</span>
</div>
</div>
</s_sidebar_element>
html 코드의 경우 사이드바 내용이 입력되는 티스토리 치환자를 찾아 원하는 위치에 입력합니다.
JAVASCRIPT 코드
<script>
(function ($) {
// 단축키 안내
$(document).on('click', '.keyboard_info .btn_key', function () {
var $button = $(this);
var isPressed = $button.attr('aria-pressed') === 'true';
// Toggle the 'on' class with slide animation
var $info = $button.closest('.keyboard_info').toggleClass('on').find('.info');
if (!isPressed) {
$info.css('max-height', $info.prop('scrollHeight') + 'px'); // 내용이 전부 보이도록 max-height 설정
} else {
$info.css('max-height', '0'); // 닫힐 때 max-height를 0으로 설정
}
// Update the aria-pressed attribute
$button.attr('aria-pressed', (!isPressed).toString());
});
})(jQuery);
</script>
javascript의 경우 html 하단 적당한 위치에 입력하여 줍니다.
CSS 코드
.svg-inline--fa {
display: var(--fa-display, inline-block);
height: 1em;
overflow: visible;
vertical-align: -.125em;
}
/*#sidebar .keyboard_info.on .btn_key {
color:#0b0b09;
}*/
#sidebar .keyboard_info h2 {
margin:0;
}
#sidebar .keyboard_info h2 a {
color:#202533;
}
#sidebar .keyboard_info .btn_key {
display:flex;
justify-content:space-between;
align-items:center;
width:40%;
}
#sidebar .keyboard_info .btn_key:hover {
text-decoration:none;
}
#sidebar .keyboard_info .btn_key i {
font-size:16px;
}
#sidebar .keyboard_info.on .info {
display:block;
}
#sidebar .keyboard_info .info .info_tit {
display:block;
margin-top:10px;
padding:5px 0 5px 10px;
font-size:13px;
font-weight:500;
position:relative;
}
#sidebar .keyboard_info .info .info_tit:before {
display:block;
width:3px;
height:3px;
content:'';
position:absolute;
top:13px;
left:0;
background:#F65660;
}
#sidebar .keyboard_info .info em {
font-style:normal;
color: #39549a;
}
.dark #sidebar .keyboard_info .info em {
color: #E08E45;
}
css코드 또한 관리하기 좋은 위치에 입력하여 색상 및 스타일을 자신의 취향에 맞게 수정하여 입력합니다.
hELLO 스킨 커스텀 마무리
위에서 소개한 모든 코드가 적용된 모습은 티맥스 블로그 사이드바에서 확인하실 수 있습니다. 적절한 애니메이션 효과를 추가하여, 다소 단조로울 수 있는 사이드바에 디자인적인 감각을 더했습니다. 이를 통해 방문자에게 의미 있는 정보를 효과적으로 전달할 수 있는 티스토리 사이드바 커스텀을 완성했습니다. 이제 여러분의 블로그에서도 이러한 커스텀을 적용하여 더욱 매력적이고 유익한 공간으로 만들어 보세요! 방문자들에게 특별한 경험을 선사하는 블로그가 되기를 바랍니다.