본문 바로가기

IT/Github

GitHub Hexo Top 버튼 만들기

현재 저는 Github Pages를 만들고 있습니다. Hexo Hueman 테마를 사용하고 있습니다. 

다른분들 블로그를 보면 위로가기 버튼이 움직이는 것이 매우 부러웠습니다. 여러글을 찾아 보았지만 되지 않아 포기하고 있던 중에 

토마토..(http://sometimes-n.tistory.com/17)님의 글을 힌트를 얻어 성공했습니다. 방법은 아래와 같습니다.


우선 화살표 이미지를 구하시기 바랍니다. 제가 사용한 것 올려드립니다.

     (우 클릭으로 저장하세요)


1. 원하는 그림을 SOURCE > images 에 다운받습니다. (저 위치는 블로그 폴더의 상위폴더입니다. 테마폴더가 아닙니다.)

2. themes > hueman > layout > common > head.ejs 파일에 아래 내용을 </head> 바로 앞에 복사해 넣습니다. 위치는 현재 페이지에 맞게

   조정하면 됩니다.


<코드> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
$(function(){
  $("#gotop").hide();
  // 처음에는 탑이미지를 감춥니다.
  $(window).scroll(function(){
  // 스크롤을 할때
    if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
    //  스크롤이 100 픽셀만큼 내려오면 탑아이콘을 fade in 합니다. (서서히 나타납니다)
    else{$("#gotop").fadeOut();}
    // 스크롤이 100 픽셀 이하이면 탑아이콘을 fade out 합니다. (서서히 사라집니다)
  });
});
</script>
<a href="#" id="gotop"
 style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" 
title="Top"><img src="/images/top.png" border="0"/></a>
<!--
display:none (화면에서 안보이게 합니다)
position:fixed (스크롤이 어느위치에 있든 화면에서 고정된 곳에 위치합니다)
bottom:10px (하단에서 10px 위에 위치합니다)
right:10px (오른쪽에서 10px 왼쪽에 위치합니다)
z-index:99999999 (레이어를 99999999 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서)
-->
 
 
 


"/images/top.png 이미지 위치 및 이름입니다. 다른 이름면 변경하시기 바랍니다.


3. 혹시 메인은 잘 보이는데 글에 들어가면 아래 처럼 깨져서 보인다면 그림 위치가 잘 못 지정했거나, "/"가 빠져서 그럴 것입니다. 

   제가 격은 상황이라 이렇게 남겨 놓습니다.  아래 사진처럼 둘다 기능은 제대로 하지만 그림이 좌측은 그림이 깨졌습니다. 

   테마 폴더와 메인 폴더에 그림을 다 넣어놓고도 해보았는데 메인에서는 보이는데 글로 들어가면 깨지더라구요 결과는 "/images/top.png" 

   슬러시의 유/무였습니다. 꼭 넣으시기 바랍니다. 왜 그러냐고 물어보시면 저는 답을 못해드려요 ㅠㅠ 양해 부탁드립니다. 


'IT > Github' 카테고리의 다른 글

GitHub Hexo Top 버튼 만들기  (0) 2018.03.02
Github name card (Tistory 사이드바에 추가하기)  (0) 2018.02.20
Github name card(블로그 메인용)  (0) 2018.02.09