Introdução
Usando um serviço chamado Ranklet, você pode facilmente obter o ranking de páginas populares do Google Analytics e colocá-lo em seu site.
Neste artigo, apresentamos como adicioná-lo a um blog HUGO.
Exemplo de funcionamento
Preparação
- Ter o Google Analytics configurado em seu site
Passos
- Acesse o
Ranklet - Clique em
Sign in with Google e faça login com sua conta do Google (ela deve estar vinculada à sua conta do Google Analytics)
Clique em Permitir (許可)
- Configure as informações básicas
Configurei como mostrado acima.
- Em
Google Analytics ビュー (Visualização do Google Analytics), selecione a visualização da qual deseja obter o ranking.
- Configure a substituição de texto
Configurei como mostrado acima.
Esta configuração serve para remover | kenji.blog do título da página.
- Configure o template
- HTML (os números do ranking foram ocultados)
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 (o tamanho da fonte foi alterado e o texto da descrição foi configurado para ser exibido em até 3 linhas)
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; /* 行数 */
}
}
}
}
|
- JavaScript sem alterações
- Copie o HTML da seção de publicação no site
Copie o HTML exibido
- Cole no template do HUGO
- Crie
layouts/partials/ranklet.html e cole o HTML copiado
1
| <div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
|
- Cole o código abaixo na linha antes de
</footer> em layouts/_default/single.html
1
| {{- partial "ranklet.html" . }}
|
É isso. Agora o ranking será exibido na parte inferior da página, como mostrado abaixo.
