كيفية الحصول على ترتيب الصفحات الشائعة من Google Analytics ووضعه

Mon, 10 Apr 2023 20:26:57 +0900

مقدمة

باستخدام خدمة تسمى 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>

الصق الرمز أدناه في السطر الذي يسبق </footer> في layouts/_default/single.html

1

{{- partial "ranklet.html" . }}

هذا كل شيء. سيتم عرض الترتيب في أسفل هذه الصفحة كما هو موضح أدناه.

Ranklet on kenji.blog

كيفية الحصول على ترتيب الصفحات الشائعة من Google Analytics ووضعه

مقدمة

صورة للعمل

التحضير

الخطوات