움직이는 배경 설정하기

NexT 테마에서 움직이는 배경을 설정합니다.

아직 블로그를 만들지 않았다면 이전 글을 참고해주시기 바랍니다.

---

오랜만에 다시 블로그 테마에 관련된 글을 가지고 왔다. 요즘 블로그 테마가 약간 지겨워져서 미세한 변화라도 주고 싶었고, 그 결과 움직이는 배경을 추가하였다.

이 글은 기존에 Hexo 블로그에 NexT 테마가 이미 적용된 상황을 가정하고 설명한다. 만약 블로그를 처음 만든다면 해당 카테고리 내에 첫 글부터 읽으며 따라오면 된다.

움직이는 배경을 추가해보자.

• 먼저 움직이는 배경을 다운로드 한다.

cd $hexo_directory
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest/

• 그 다음 themes/next/_config.yml 을 오픈하여 아래의 내용을 찾은 후, enable의 false를 true로 수정한다.

canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

• 마지막으로 수정된 컨피그 값을 저장하기 위해 아래의 명령어를 입력한다.

# 해당 리소스 생성
hexo generate

# 배포하기
hexo deploy

그 후 시간이 조금 지나면 움직이는 배경이 적용된다.
만약 시간이 지나도 변경이 되지 않는다면 해당 브라우저의 캐시를 지우고 다시 접속하면 된다.