github 블로그 이사(2)

이제부터 기능별로 branch를 따서 개발하기로 했다

수정하거나 추가하고 싶은 것들

 

[ v ] Theme 탭 없애기

[ v ] Top 기능 추가 (맨위로 올라가기)

[ ] 마우스 호버했을 때 그라데이션으로 색이 바뀌는 것

[ ] 여기 데모처럼 마우스 호버했을 때 막대기 쭉 늘어나는 멋진 효과

[ ] 여기 데모처럼 태그 구별 더 잘 되게, 가운데 정렬, 날짜는 좌측으로 이동

[ ] 블로그글 리스트에서 태그는 왼쪽에, 날짜는 오른쪽에 배치

[ ] 여기 데모처럼 프사 마우스 호버 효과

[ ] TOC(목차)

[ ] 검색 기능

[ ] 다크모드 지원...?

 

 

Theme 탭 없애기

맨 오른쪽 저거 ...

remove-theme-tab 브랜치 땄다

-> 구조적으로 바꿔야 하는 줄 알았는데 navigator 가 for문으로 처리하고 있어서 theme 정보를 주석처리하는 것으로 바로 해결이 되었다 ㅎㅎ

 

BACK-TO-TOP 기능 구현

feature/back-to-top 브랜치 생성

- 다른 jekyll 테마 코드 참고해서 구현했다 .. 생각보다 어렵지 않아서 다른 기능들도 이런 식으로 구현할 수 있을 것 같다!

 

_variables.scss

$back-to-top-z-index: 10;
$back-to-top-bottom: 30px;
$back-to-top-right: 30px;
$back-to-top-diameter: 40px;
$back-to-top-height: $back-to-top-diameter;
$back-to-top-width: $back-to-top-diameter;

back-to-top 버튼의 사이즈를 정의한다

 

styles.scss

#back-to-top {
  color: $white;
  background: $lightGray;
  bottom: $back-to-top-bottom;
  right: $back-to-top-right;
  height: $back-to-top-height;
  width: $back-to-top-width;
  z-index: $back-to-top-z-index;
}

앞서 정의한 변수와 더불어 색깔을 포함한 ID를 정의한다

- 앞에 #을 붙여야 한다!

 

_includes/top.html

<script type="text/javascript">
    "use strict"; 
    function addBackToTop() 
		// 너무 길어서 생략
</script>
<script>
    addBackToTop();
</script>

원래 코드에서는 js 코드를 별도 asset 폴더에 파일을 불러오는 방식이었는데,

js 코드를 불러오는 방식이 긴가민가 하여 일단 text/javascript 로 해결했다

addBackToTop 이라는 함수를 정의하고 호출하는 역할을 한다

 

_posts

{% include top.html %}

html 코드마다 마지막에 이 라인을 추가했다

 

스크롤이 일정 수준 아래로 내려가면 생성되는 Top-to-back 버튼이 완성되었다~