Summary
Hits를 이용하여 내 글의 조회수를 표시하기
지난 글에서는 Google Analytics를 이용해 블로그 방문자 수를 확인했었다.
이번에는 블로그에 Hits를 이용해 내 게시글의 조회수를 보도록 하자.
Hits!
Jekyll로 블로그를 만들면 자체적인 백엔드가 없어 방문자 수와 조회 수 가 뜨지 않는다.
Google Analytics를 이용하면 블로그의 방문자 수는 볼 수 있지만 이 게시글을 몇명이 봤는지 다른 사용자들에게 표시할 수는 없다.
이때 Github Repository 방문자 수를 세기 위해 만들어진 Hits!를 이용하여 조회수를 표시해보자.
Hits!의 기본 사용법
Hits!의 사용법은 .md파일에 아래의 같이 코드를 추가해주면 됩니다.
ex)
]
자동 생성을 위한 설정
위와 같이 코드를 매 글마다 입력하면 쉽게 사용할 수 있지만 그러기엔 귀찮기도 하고 오타가 날 수도 있다.
그러므로 레이아웃에 잇는 코드를 수정하여 글마다 자동으로 Hits! 배지가 생기도록 해보자.
게시글을 적을때 먼저 이런식으로 layout:post와 같이 선언을 했을 것이다.
---
layout:post
---
이는 _layout폴더에 있는 post.html를 레이아웃으로 사용하겠다는 얘기이다.
그러므로 우리는 _layout/post.html을 수정해주면 게시글에 배지가 생기도록 할 수 있다.
먼저 게시글의 제목아래 추가하기 위해서 post.html에서 게시글의 시작부분을 찾아준다.
내가 사용하는 테마 경우에는 아래와 같이 주석으로 게시글 시작부분을 알려주어서 쉽게 제목 아래부분을 찾을 수 있었다.
<!-- Post Content -->
만약 주석표시가 안되어있으면 F12를 눌러 Chrome Dev Tools을 통해 찾아주거나 직접 찾아준다.
이후 아래의 코드를 추가해줍니다.
<div style="text-align: center;">
<a
href="http://hits.dwyl.com/{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}"
target="_blank"
>
<img
src="http://hits.dwyl.com/{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}.svg"
/>
</a>
</div>
그 후 확인해보면 Hits!배지가 생긴걸 확인할 수 있다.
Github Blog 1 - 블로그 생성을 위한 repository 생성
Github Blog 2 - Jekyll themes를 이용해 블로그 페이지 꾸미기
GitHub Blog 3 - jekyll bundler를 이용하여 블로그 수정하기
GitHub Blog 4 - 원하는 Syntax Highlighter 적용하기
GitHub Blog 5 - 구글에서 Github blog 보이도록 하기
GitHub Blog 6 - Disqus를 이용하여 블로그에 댓글기능 추가하기
GitHub Blog 7 - Google Analytics를 이용해 방문자 수 보기