Introducción
Usando un servicio llamado Ranklet, puedes obtener fácilmente una clasificación de páginas populares desde Google Analytics y colocarla en tu sitio.
En este artículo, te mostraremos cómo colocarlo en un blog HUGO.
Imagen de funcionamiento
Preparación
- Asegúrate de haber configurado Google Analytics en tu sitio.
Pasos
- Accede a
Ranklet - Haz clic en
Sign in with Google e inicia sesión con tu cuenta de Google (asegúrate de que esté vinculada a tu cuenta de Google Analytics)
Haz clic en Permitir (許可)
- Configura la información básica
Lo he configurado como se muestra arriba.
- En
Vista de Google Analytics (Google Analytics ビュー), selecciona la vista de la que deseas obtener la clasificación.
- Configura el reemplazo de texto
Lo he configurado como se muestra arriba.
Se configura para eliminar | kenji.blog del título de la página.
- Configura la plantilla
- HTML (Se ocultaron los números de clasificación)
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 (Se cambió el tamaño de la fuente y se configuró la descripción para que se muestre en 3 líneas)
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; /* 行数 */
}
}
}
}
|
- Copia el HTML de “Publicación en el sitio” (
サイトへの掲載)
Copia el HTML que se muestra.
- Pégalo en la plantilla de HUGO
- Crea
layouts/partials/ranklet.html y pega el HTML copiado.
1
| <div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
|
- Pega el siguiente código en la línea anterior a
</footer> en layouts/_default/single.html.
1
| {{- partial "ranklet.html" . }}
|
Eso es todo. Ahora la clasificación se mostrará en la parte inferior de esta página como se muestra a continuación.
