Introduction
En utilisant un service appelé Ranklet, vous pouvez facilement récupérer le classement des pages populaires depuis Google Analytics et l’intégrer sur votre site.
Dans cet article, nous allons vous présenter comment l’intégrer sur un blog HUGO.
Aperçu du fonctionnement
Préparation
- Avoir configuré Google Analytics sur votre site
Étapes
- Accédez à
Ranklet - Cliquez sur
Sign in with Google pour vous connecter avec votre compte Google (celui-ci doit être associé à votre compte Google Analytics)
Cliquez sur Autoriser (許可)
- Configurez les informations de base
La configuration a été effectuée comme indiqué ci-dessus.
- Dans
Vue Google Analytics (Google Analytics ビュー), sélectionnez la vue dont vous souhaitez obtenir le classement.
- Configurez le remplacement de texte
La configuration a été effectuée comme indiqué ci-dessus.
Ce paramètre est défini pour supprimer | kenji.blog du titre de la page.
- Configurez le modèle
- HTML (les numéros de classement ont été masqués)
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 (la taille de police a été modifiée et la description s’affiche sur 3 lignes)
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 { // Réinitialisation
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; /* Nombre de lignes */
}
}
}
}
|
- Aucun changement pour JavaScript
- Copiez le code HTML depuis « Publier sur le site »
Copiez le code HTML affiché
- Collez-le dans le modèle HUGO
- Créez
layouts/partials/ranklet.html et collez-y le code HTML copié
1
| <div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
|
- Collez le code suivant sur la ligne précédant
</footer> dans layouts/_default/single.html
1
| {{- partial "ranklet.html" . }}
|
C’est tout. Le classement s’affichera désormais comme au bas de cette page.
