활성화된 메뉴에 Active 효과를 추가해 보았다.
/minimal-mistakes/ 테마는 메뉴의 Active 기능이 없어서 scss 와 html 파일 수정이 필요하다.


1. /include/masthead.html 코드 추가

// 원본 코드
<ul class="visible-links"><li class="masthead__menu-item">
        <a href="/post/">Posts</a>
    </li><li class="masthead__menu-item">
        <a href="/algorithm/">Algorithm</a>
    </li><li class="masthead__menu-item">
        <a href="/blog/">GitHub Blog</a>
    </li><li class="masthead__menu-item">
        <a href="/about/">About</a>
    </li></ul>

// 추가 코드
// a 태그에 class 추가
    <li class="masthead__menu-item">
        <a href="" class="nav-link "></a>
    </li>

2. /_sass/minimal-mistakes/_navigation.scss 코드 추가

  .nav-link { // a 태그 클래스
    display: block;
  }
  .nav-link.active {
    font-weight:900;    // acive 시 폰트 굵게
    color:$darker-gray; // acive 시 조금 어둡게
  }

3. /_layouts/default.html 코드 수정

- //include_cached masthead.html
+ include masthead.html    

Tips:가장 중요한 부분 masthead.html 파일에서 현재 페이지 주소를 가져오지 못해서 원인을 찾느라 한참 고생했다.
masthead.html 파일을 include 가 아닌 include_cached 하고 있었다.
masthead.html 파일을 include_chched에서 include 로 변경한다.

태그:

카테고리:

업데이트:

댓글남기기