Seonjae Choi

Seonjae Choi

흐린 잉크가 탁월한 기억력을 이긴다!

Category

[Jekyll] HITS로 방문자수 / 조회수 표시하기

최대 1 분 소요

HITS를 이용하면 정말 간단하게 방문자수를 추가할 수 있습니다. 다만, 새로고침하면 조회수가 증가하기 때문에 정확한 통계 지표로 사용하기는 어렵습니다.

방문자수 등록하기

먼저, HITS 페이지로 접속합니다.

위의 사이트에 접속을 하게 되면, TARGET URL에 자신의 github io url을 입력합니다.

입력하게 되면, 각 상황에 맞게 사용할 수 있는 링크가 나옵니다.

저는 블로그의 전체 방문자수 / 포스트의 방문자수를 각각 등록합니다.

전체 방문자수 설정하기

위에서 HITS 사이트에서 얻었던 HTML LINK를 _includes/sidebar.html에 붙여넣습니다.

<!-- visitor count view -->

<a href="https://hits.seeyoufarm.com">
	<style>
		.hits {
			width: auto; height: auto;
			max-width: 99px;
			max-height: 20px;
		}
	</style>
	<img class="hits" src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fchoiseonjae.github.io&count_bg=%23B6B5B0&title_bg=%2348454B&icon=checkmarx.svg&icon_color=%23E7E7E7&title=방문수&edge_flat=false"/>
</a>

class="hits"를 넣은 이유는 전체 방문자 수를 삽입했을 때 이미지가 너무 커서 맞게 조절하기 위해서 넣었습니다.

실제 github code: 8712eda를 참고하세요.

포스트별 방문자수 (글 조회수)

_layouts/single.html에 추가해야하는데, 아까처럼 HTML LINK를 전체 를 넣게되면 블로그의 방문자 수가 표기됨으로, 해당 사이트의 조회수만 출력하도록 url을 수정합니다.

<img src=에서 파라미터 인자 중 url에서 마지막에 이어서 /blog/hits/를 추가해서 넣습니다.

<img  style="width: auto; height: auto; margin-right: 5px" src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fchoiseonjae.github.io/blog/hits/&count_bg=%23B6B5B0&title_bg=%2348454B&icon=checkmarx.svg&icon_color=%23E7E7E7&title=조회수&edge_flat=false"/>

style은 자기가 원하는대로 설정하면 되고, 저를 그대로 따라해도 됩니다.

전체 방문자 수와 다른 점은 /blog/hits/을 추가하여, page마다의 count를 가져오도록 변경했다.

실제 github code: 001bc64를 참고하세요.

마지막으로

막상 하고 나면 정말 어렵지 않습니다. 만약에 어렵다면 이글의 출처 포스팅을 참고해서 다시 시도해보세요!

출처

댓글남기기

참고