busuanzi를 이용하여 정적인 페이지에 스타일 변경이 가능한 조회수 추가하기

작성일 | In | |
내 테마에 맞는 조회수 표시

서론

github.io에서 제공하는 jekyll을 사용할때는 커스텀 plugin을 추가하지 못하므로, 사실상 정적인 페이지나 다름 없다.

어제 여러가지를 조사하며 disqus 등을 블로그에 추가했으나, 조회수는 도저히 어디서 쓸지 모르겠어 구글링하던 도중 딱 사용하기 좋은 서비스를 찾았다.

busuanzi라는 서비스인데, 문서 조회수와 사이트 방문수, 방문자수를 지원해준다.

  • 사실 HITS!라는 서비스도 찾았으나, 블로그 스타일과는 맞지 않는데다가 커스터마이징도 할 수 없어, 영 맘에 안들어 이 녀석을 찾았다.

적용법

적용은 심플하기 그지없다.

  1. 다음을 사이트의 head나 body에 추가하자. 
    1
    <script async src = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  2. 조회수를 추가하기 원하는 위치에 이 span을 추가하자.
    • 문서 조회수 
      1
       <span id="busuanzi_container_page_pv"></span>
    • 사이트 조회수 
      1
      1
       <span id="busuanzi_container_site_pv"></span>
    • 사이트 방문자수 
      1
      1
       <span id="busuanzi_container_site_pv"></span>

사용 예시는 이 게시글의 맨 위를 보면 게시글 조회수가 표기됨을 알 수 있다. 실제 코드는 이러하다.

1
2
3
4
<span class="page-pv">
  <i class="fa fa-eye"></i>
  <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>
</span>

다른 예시

1
2
3
4
5
6
<div>
  사이트 조회수: <span id = "busuanzi_value_site_pv"></span>
</div>
<div>
  사이트 방문자수: <span id = "busuanzi_value_site_uv"></span> 
</div>
사이트 조회수:
사이트 방문자수: