시작하며
Ranklet이라는 서비스를 사용하면 Google 애널리틱스에서 인기 페이지 랭킹을 가져와 쉽게 배치할 수 있습니다.
이 글에서는 HUGO 블로그에 배치하는 방법을 소개합니다.
동작 이미지
준비
- 사이트에 Google 애널리틱스가 설정되어 있을 것
절차
Ranklet에 접속합니다.Sign in with Google을 클릭하여 Google 계정으로 로그인합니다 (Google 애널리틱스 계정과 연결되어 있어야 합니다).
허용을 클릭
- 기본 정보를 설정합니다.
위와 같이 설정했습니다.
Google Analytics 뷰에서는 랭킹을 가져오고 싶은 뷰를 선택합니다.
- 텍스트 치환을 설정합니다.
위와 같이 설정했습니다.
페이지 제목의 | kenji.blog를 삭제하기 위해 설정했습니다.
- 템플릿을 설정합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div class="ranklet ranklet-reset">
<table class="ranklet-table">
<tbody class="ranklet-pages">
{{#context.pages}}
<tr class="ranklet-page">
<td class="ranklet-image">
{{#image}}
<a href="{{url}}" class="ranklet-link">
<img class="ranklet-img" src="{{image}}" />
</a>
{{/image}}
</td>
<td class="ranklet-meta">
<div class="ranklet-title">
<a href="{{url}}" class="ranklet-link">
{{title}}
</a>
</div>
{{#description}}
<div class="ranklet-description">
<a href="{{url}}" class="ranklet-link">
{{description}}
</a>
</div>
{{/description}}
</td>
</tr>
{{/context.pages}}
</tbody>
</table>
</div>
|
- CSS (폰트 크기를 변경하고, 설명문이 3줄로 표시되도록 했습니다)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| #ranklet-{{context.id}} {
.ranklet-reset { // 리셋
table, tr, td, div, span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1;
box-sizing: border-box;
}
}
.ranklet-table {
border-collapse: separate;
border-spacing: 8px 24px;
width: 100%;
word-break: break-all;
td {
vertical-align: middle;
}
.ranklet-rank {
text-align: center;
font-size: 120%;
}
.ranklet-image {
text-align: center;
img {
max-width: 128px;
max-height: 128px;
}
}
.ranklet-meta {
.ranklet-title {
font-size: 20px;
line-height: 125%;
}
.ranklet-description {
font-size: 16px;
margin-top: 8px;
line-height: 125%;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 줄 수 */
}
}
}
}
|
- 사이트 게재에서 HTML을 복사합니다.
표시된 HTML을 복사합니다.
- HUGO 템플릿에 붙여넣습니다.
layouts/partials/ranklet.html을 생성하고, 복사한 HTML을 붙여넣습니다.
1
| <div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
|
layouts/_default/single.html의 </footer> 앞 줄에 아래 코드를 붙여넣습니다.
1
| {{- partial "ranklet.html" . }}
|
이상입니다. 이제 이 페이지 아래와 같이 랭킹이 표시됩니다.
