깃블로그(12) 게시글내의 이전과 다음 구현
이전 다음 개요
: 현재는 previous, next 2개의 버튼만 있다. 이는 전체글 기준이라서 다음이 다른 카테고리일 수 도있다. 게시물 내에서 이전과 다음을 같은 카테고리 내로 구분하여 UI UX 기반한 사용자가 쉽게 접근할 수 있도록 해보자.. 즉, 전체글이 아닌 “같은 카테고리 내에서”의 시간 순서를 기준으로 이전 글, 다음 글로 이동하게끔 구현한다.
구현
: 다음과 같이 적용한다
post_pagination.html
: 싱글 페이지(포스트 md파일) 아래에 previous, next 이전글 다음글 볼 수 있는 버튼을 구현하는 곳.
/_includes/post_pagination.html
기존
: ASIS 내용은 다음과 같다.
<nav class="pagination">
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(11)-%EC%95%84%EC%B9%B4%EC%9D%B4%EB%B8%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98-%EC%B6%9C%EB%A0%A5%ED%8F%AC%EC%8A%A4%ED%8A%B8-list-UI-%EA%BE%B8%EB%AF%B8%EA%B8%B0/" class="pagination--pager" title="깃블로그(11) 아카이브 페이지의 출력포스트 list UI 꾸미기
">Previous</a>
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(13)-%ED%8F%B0%ED%8A%B8-%EB%B3%80%EA%B2%BD/" class="pagination--pager" title="깃블로그(13) 폰트 변경
">Next</a>
</nav>
TOBE1_동일카테고리, 시간순으로 구현
: 이전, 다음을 카테고리별 시간순으로 구현한다.
# TOBE1_ 전체글이 아닌 같은 카테고리 내에서 시간 순서를 기준으로 이전 글, 다음 글로 이동
# 첫 번째 문단
# 두 번째 문단
<nav class="pagination">
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(11)-%EC%95%84%EC%B9%B4%EC%9D%B4%EB%B8%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98-%EC%B6%9C%EB%A0%A5%ED%8F%AC%EC%8A%A4%ED%8A%B8-list-UI-%EA%BE%B8%EB%AF%B8%EA%B8%B0/" class="pagination--pager">Previous</a>
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(13)-%ED%8F%B0%ED%8A%B8-%EB%B3%80%EA%B2%BD/" class="pagination--pager">Next</a>
</nav>
구현했지만..
이전, 다음이 같은 카테고리내의 시간순으로 구현되었지만 어떤 카테고리 제목을 가지는지 모른다.
아래와 같이 응용하여 구현해본다.
TOBE2_동일카테고리, 시간순으로 게시글명으로 구현
: 이전, 다음을 카테고리별 시간순으로 구현하는데 게시물제목을 출력하도록 구현한다.
# TOBE2_ 게시글명으로 이전,다음 출력하도록 기능추가
# 첫 번째 문단
# (응용) 전체글이 아닌 같은 카테고리 내에서 시간 순서를 기준으로 이전 글, 다음 글로 이동
# 두 번째 문단
<nav class="pagination_prev_next">
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(11)-%EC%95%84%EC%B9%B4%EC%9D%B4%EB%B8%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98-%EC%B6%9C%EB%A0%A5%ED%8F%AC%EC%8A%A4%ED%8A%B8-list-UI-%EA%BE%B8%EB%AF%B8%EA%B8%B0/" class="pagination_prev_next--pager"><span class="prev_next">이전 글  </span>깃블로그(11) 아카이브 페이지의 출력포스트 list UI 꾸미기</a>
<a href="/gitpages-dev/%EA%B9%83%EB%B8%94%EB%A1%9C%EA%B7%B8(13)-%ED%8F%B0%ED%8A%B8-%EB%B3%80%EA%B2%BD/" class="pagination_prev_next--pager"><span class="prev_next">다음 글   </span>깃블로그(13) 폰트 변경</a>
</nav>
참고)
여기까지하면 이전, 다음이 게시글 제목으로 잘 나온다.
하지만 정렬이 조금 뒤죽박죽이다. css를 수정해야할듯하다.
TOBE2 구현의 CSS 수정
: CSS를 수정하여 이전,다음 버튼의 UI를 보완한다. (글 제목이 보통 기니까 가로로 2 개 놓는게 나을 것 같다고 생각했기 때문이다.) float: left; 를 없애고 width 를 100 % 로 변경해주면 끝!
_sass/minimal-mistakes/_navigation.scss
/*새로 정의한 클래스로인한 블록으로 인해 위쪽 블록 추가*/
}
/* 게시물 이전,다음 버튼 CSS를 위해 추가 */
/* /_includes/post_pagination.html 파일의 */
/* 다음, 이전 버튼을 CSS 별도 부여한 클래스 id로 */
/* CSS 처리 */
.pagination_prev_next {
@include clearfix();
float: left;
width: 100%;
/* next/previous buttons */
&--pager {
display: block;
padding: 1em 2em;
//float: left; //주석처리(세로로 쌓기)
width: 100%; //값변경(100% 가로비율차지)
font-family: $sans-serif;
font-size: $type-size-5;
font-weight: bold;
text-align: center;
text-decoration: none;
color: $muted-text-color;
border: 1px solid mix(#000, $border-color, 25%);
border-radius: $border-radius;
&:hover {
@include yiq-contrasted($muted-text-color);
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.disabled {
color: rgba($muted-text-color, 0.5);
pointer-events: none;
cursor: not-allowed;
}
}
}
적용 완료
: CSS가 정상적으로 반영되었다.
- 이전, 다음 버튼이 현재 카테고리내의 시간순서로 출력되며
- 이전, 다음버튼 글자가 아닌 게시글 제목으로 보인다.
- 별도 css 클래스를 작성하여 CSS 선처리 등을 해주었다.
Leave a comment