[Blog] Custom: Sidebar Toggle

Abstract

포스트를 작성하다보면 긴 코드라든가, 문장 길이로 인해 포스트의 너비가 더 넓었으면 좋겠다는 생각이 든다. Chirpy 기본 theme에서는 사이드바가 고정되어 있지만, 이를 toggle 버튼으로 열고 닫을 수 있게 커스텀하였다.

Implementation

Html

GitHub _includes/sidebar-toggle.html 참조

JavaScript

GitHub assets/js/sidebar-toggle.js 참조

_include/head.html에 다음을 추가한다.

  <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
  
  <!-- Code Runner -->
  <script src="{{ '/assets/js/code_runner.js' | relative_url }}"></script>
  
  <!-- Code Blocks 추가 --> 
  <script src="{{ '/assets/js/vscode-codeblocks.js' | relative_url }}" defer></script>
  
  <!-- Sidebar Toggle -->
  {% include sidebar-toggle.html %}
  <script src="{{ '/assets/js/sidebar-toggle.js' | relative_url }}" defer></script>

  {% include js-selector.html lang=lang %}

CSS

GitHub _sass/_sidebar-toggle.scss 참조