• 탑메뉴바 추가
  • 1. html 추가
  • 2. css 추가
  • 3. 탑메뉴바 완성
• 검색기능 추가
  • 1. 다운로드
  • 2. 검색페이지
  • 3. css 추가
  • 4. 검색 설정
  • 5. html 추가
  • 6. css 적용
  • 7. 검색창 생성
  • 8. 검색창 꾸미기
• Reference

탑메뉴바 추가

1. html 추가

_includes > body 에 menu.html 추가

<!--상단메뉴바-->
<div id="_navbar" class="navbar fixed-top">
    <div class="content">
        <span class="sr-only">Jump to:</span>
        <div class="nav-btn-bar">
            <a id="_menu" class="nav-btn no-hover" href="#_drawer--opened">
                <span class="sr-only">Navigation</span>
                <span class="icon-menu"></span>
            </a>
            <!--상단메뉴 카테고리들 -->
            <div class="top-menu">
                
                
                
                <a id="_drawer--opened"  href="/about/" class="nav-btn top-menu " >
                    About
                </a>
                
                
                <a  href="/posts/" class="nav-btn top-menu " >
                    Posts
                </a>
                
                
                <a  href="/study/" class="nav-btn top-menu " >
                    Study
                </a>
                
                
            </div>

            <!--검색 tipuesearch -->

        </div>
    </div>
</div>
<hr class="sr-only" hidden />

2. css 추가

_sass > my-style.scss 아래에 다음코드를 추가

// for top-menu
.top-menu-wrapper{
  display: inline-block;
}
.top-menu{
  overflow-x: auto; // overflowx 속성은 x 축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로),
  overflow-y: hidden; // overflowy 속성은 y 축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성
  white-space: nowrap; // whitespace 는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성, nowrap :병합
}
// for top-menu
.top-menu.nav-btn{
  border: none;
  display: inline-flex; // Flex 는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공, Inline 특성의 Flex Container 를 정의
  width: 6rem; // inlineflex : Inline(Inline Block) 요소와 같은 성향(수평 쌓임)
  margin-left: -1px;
}

3. 탑메뉴바 완성

---

검색기능 추가

블로그내에 검색기능을 추가하여 원하는 게시물을 빠르게 찾아보자.

1. 다운로드

다음 Github 레파지토리에서 zip 파일을 다운로드 받아 압축을 푼다.

2. 검색페이지

search.html을 gitBlog폴더 root directory에 붙여넣는다.
➡️

3. css 추가

다운로드 폴더의 /assets/tipuesearch를 gitBlog/assets/에 붙여넣는다. ➡️

4. 검색 설정

_config.yml에 가장 밑에 추가

tipue_search:
  include:
    pages: false
    collections: []
  exclude:
    files: []
    categories: []
    tags: []

include 부분의 pages: false의 설정은 pages 레이아웃에 해당하는 일반 html페이지는 검색하지 않겠다는 것을 의미한다.(포스트 내용 검색에 집중하기 위함) exclude 부분의 search.html, index.html, tags.html 페이지는 검색에서 제외하겠다는 것을 의미한다.

5. html 추가

_includes > body > menu.html <!--상단메뉴 카테고리들--> 밑에 추가

<!--검색 tipuesearch -->
<div class="nav-span">
    <form action="/search">
        <div class="tipue_search_left">
            <img src="/assets/tipuesearch/search.png" class="tipue_search_icon">
        </div>
        <div class="tipue_search_right">
            <input type="text" name="q" id="tipue_search_input" pattern=".{1,}" title="At least 1 characters" required>
        </div>
        <div style="clear: both;"></div>
    </form>
</div>

6. css 적용

include > my-head.html 가장 밑에 추가

<!-- tipuesearch -->
<link rel="stylesheet" href="/assets/tipuesearch/css/tipuesearch.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/assets/tipuesearch/tipuesearch_content.js"></script>
<script src="/assets/tipuesearch/tipuesearch_set.js"></script>
<script src="/assets/tipuesearch/tipuesearch.min.js"></script>

7. 검색창 생성

8. 검색창 꾸미기

• _sass>my-style.scss 에 다음 코드 추가, 탑메뉴바가 너무 넓어서 높이를 줄이자.

.nav-btn-bar{
  height: 3rem;
}

• assets>tipuesearch > css > tipuesearch.css의 #tipue_search_input에서 다음과 같이 수정

#tipue_search_input
{
     color: #333;
     max-width: 150px;		    /*최대 넓이 줄이고*/
     max-height: 20px;		    /* 높이 지정*/
     padding: 15px;			    /* 패딩 줄이기*/
     border: 2px solid #626591;	/* 굵게, 테두리는 색 바꾸기*/
     border-radius: 0;
     -moz-appearance: none;
     -webkit-appearance: none;
     box-shadow: none;
     outline: 0;
     margin: 0;
     text-align: center;		/*텍스트 중간에 오게하기*/
}

/* 돋보기 아이콘 위치 수정*/
.tipue_search_icon
{
     width: 19px;
     height: 19px;
     margin-bottom: 1rem;
}

/* 검색창 위치 조정*/
.tipue_search_left
{
     float: left;
     padding: 10px 5px 0 0;
     color: #170247;
     max-height: 20px;
}

---

Reference

• 면접관이 좋아하는 Git Portfolio 만들기 (with_GitBlog)