Pengantar
Dengan menggunakan layanan bernama Ranklet , Anda dapat dengan mudah mendapatkan dan menempatkan peringkat halaman populer dari Google Analytics.
Dalam artikel ini, saya akan menunjukkan cara menempatkannya di blog HUGO.
Contoh Hasil
Persiapan
- Google Analytics harus disiapkan di situs
Langkah-langkah
- Akses Ranklet
- Klik Sign in with Google untuk masuk dengan akun Google (harus ditautkan ke akun Google Analytics)
Klik Izinkan
- Atur informasi dasar
Saya telah mengaturnya seperti yang ditunjukkan di atas.
- Pada Google Analytics View , pilih tampilan yang ingin Anda dapatkan peringkatnya.
- Atur penggantian teks
Saya telah mengaturnya seperti yang ditunjukkan di atas.
Ini diatur untuk menghapus | kenji.blog dari judul halaman.
- Atur templat
- HTML (angka peringkat disembunyikan)
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 (ukuran font diubah, deskripsi akan ditampilkan dalam 3 baris)
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 tidak ada perubahan
- Salin HTML dari publikasi di situs
Salin HTML yang ditampilkan
- Tempel ke templat HUGO
- Buat
layouts/partials/ranklet.html dan tempel HTML yang disalin
1
| <div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
|
- Tempel kode di bawah ini pada baris sebelum
</footer> di layouts/_default/single.html
1
| {{- partial "ranklet.html" . }}
|
Itu saja. Peringkat akan ditampilkan di bagian bawah halaman ini seperti yang ditunjukkan di bawah ini.
