परिचय
Ranklet नामक सेवा का उपयोग करके, आप Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके आसानी से प्रदर्शित कर सकते हैं।
इस लेख में, मैं HUGO ब्लॉग में इसे प्रदर्शित करने का तरीका बताऊंगा।
डेमो छवि

तैयारी
- साइट पर Google Analytics सेटअप होना चाहिए
चरण
Ranklet पर जाएंSign in with Google पर क्लिक करें और Google खाते से लॉग इन करें (यह Google Analytics खाते से जुड़ा होना चाहिए)

अनुमति दें पर क्लिक करें
- बुनियादी जानकारी सेट करें
मैंने इसे ऊपर दिखाए अनुसार कॉन्फ़िगर किया।
Google Analytics View में वह व्यू चुनें जिससे आप रैंकिंग प्राप्त करना चाहते हैं।
- टेक्स्ट प्रतिस्थापन सेट करें
मैंने इसे ऊपर दिखाए अनुसार सेट किया।
पेज शीर्षक से | kenji.blog को हटाने के लिए इसे सेट किया गया है।
- टेम्प्लेट सेट करें
- HTML (रैंकिंग संख्या को छिपा दिया गया है)
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; /* पंक्तियों की संख्या */
}
}
}
}
|
- JavaScript में कोई बदलाव नहीं
- “साइट पर प्रकाशित करें” से 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" . }}
|
बस इतना ही। अब रैंकिंग इस पेज के नीचे दिखाए अनुसार प्रदर्शित होगी।