Hexo 에 Busuanzi 카운터 연동하기

Hexo 는 정적 블로그를 위한 플랫폼입니다. 즉, 사용자가 방문할때마다 증가하는 카운터를 다는것은 Hexo 만의 기능으로는 불가능합니다.

하지만, 몇가지 플러그인의 도움을 받으면, Hexo 에 카운터를 다는것도 가능합니다.

사용할 툴

이번에 사용할 툴은 Busuanzi Counter 라는 툴입니다. 중국의 한 개발자가 사용하기 쉬운 툴을 만들어서 배포하고 있습니다.

개발자 페이지 (모두 중국어로 되어 있어서 구글 번역기를 통해서만 대략의 내용을 확인할 수 있습니다.)

구동방식

1. 간단하게 스크립트를 로드하면
2. 스크립트안에서 개발자의 서버로 사용자 정보를 전송하고
3. 카운터 정보를 얻어와서
4. 화면에 표시합니다.

이때에 카운팅을 하는방법으로 두가지 메소드를 제공합니다.

• 페이지 뷰 카운트
  한 사용자가 여러번 접근했을 때, 이를 다중 접속으로 카운트 하는 방식
• 사용자 카운트
  한 사용자가 여러번 접근했을 때, 이를 한번의 접속으로 카운트 하는 방식

페이지 뷰를 카운트 할 것인지, 접속한 사용자의 수를 카운트 할 것인지는 필요에 따라 정의해서 사용하면 됩니다.

사용방법

스크립트 추가

모든 페이지의 가장 하단에 표시되는 footer template 의 가장 하단에 해당 구문을 추가합니다.

{% if theme.busuanzi.enabled %}
<script async src = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script >
{% endif %}

표시영역 정의

카운터를 표시하고자 하는 영역에 아래의 구문을 추가합니다.

{% if theme.busuanzi.enabled %}
<span id="busuanzi_container_site_{{ theme.busuanzi.method }}">
    Total <span id="busuanzi_value_site_{{ theme.busuanzi.method }}"></span> views
</span>
{% endif %}

카운터 설정

사용하는 테마의 설정파일에 Busanzi Counter 설정값을 정의합니다. 카운트 방식에 따라 pv(페이지 뷰), uv(사용자) 를 설정해주시면 됩니다.

# Busuanzi Counter
busuanzi:
  enabled: true
  method: pv
  # method: uv

저같은 경우는 카운터를 가장 하단에 표시하고 있습니다.

Hexo 생활에 도움이 되시길 바랍니다.