ブログ運営 on kenji.blog

كيفية الحصول على ترتيب الصفحات الشائعة من 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" . }}

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

أكواد قصيرة يمكن استخدامها في HUGO

Sun, 11 Sep 2022 22:59:52 +0900

أكواد قصيرة يمكن استخدامها في HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

أخرى

Shortcodes

ملاحظة جانبية

إذا كنت تريد التعبير عن {{< foo >}} على الموقع، فيجب عليك كتابتها كـ {{</* foo */>}}.

【HUGO】معاينة العرض في البيئة المحلية

Mon, 05 Sep 2022 12:28:01 +0900

تثبيت HUGO

التحميل

تحميل HUGO

من الموقع أعلاه، قم بتنزيل واستخراج وحدة Windows التي تناسب بيئتك. في حالتي، قمت بتنزيل “hugo_0.102.3_Windows-64bit.zip”.

الاستخراج

قم باستخراج ملف zip الذي تم تنزيله وانسخ hugo.exe الموجود بداخله إلى مجلد تقوم بإنشائه، مثل C:\bin.

التسجيل في متغيرات البيئة

قم بالتسجيل في متغيرات البيئة لتشغيل hugo.exe من أي مكان. هذه العملية في Windows 11، لكن أعتقد أنه يمكنك تسجيلها باتباع الخطوات التالية.

اضغط على زر Win+Pause لفتح حول.
انقر فوق إعدادات النظام المتقدمة.
انقر فوق متغيرات البيئة.
حدد Path وانقر فوق تحرير.
انقر فوق جديد، واكتب “C:\bin” في سطر جديد، ثم انقر فوق موافق لإغلاق مربع الحوار.

معاينة المدونة

انتقل إلى مجلد مدونة HUGO في موجه الأوامر وقم بتشغيل الأمر التالي.

hugo server -D

نتيجة التنفيذ أدناه. (-D هو خيار لعرض مسودات المقالات.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

يتم إخراج العنوان في وقت التنفيذ (في المثال أعلاه، http://localhost:1313/)، لذلك انسخ العنوان إلى متصفحك. يتم تحديث المعاينة تلقائيًا في كل مرة يتم فيها حفظ الملف. لإنهاء المعاينة، أدخل Ctrl+C في موجه الأوامر.

بدأت مدونة

Fri, 02 Sep 2022 07:23:00 +0900

بدأت مدونة

شيء يشبه الألعاب النارية، الكود هنا

أهلاً بالجميع. قررت أن أبدأ مدونة لسبب ما.

ليس لدي هدف عظيم مثل “أريد نشر هذا!"، فقط فكرت أنه سيكون من الجيد أن يكون لدي مكان أكتب فيه ما يتبادر إلى ذهني، سواء عن التكنولوجيا أو الحياة اليومية.

سأحاول ألا أكون جاداً جداً، وسأستخدمها مثل مفكرة.

أستخدم شيء يسمى Hugo

تم إنشاء هذه المدونة باستخدام منشئ المواقع الثابتة يسمى “Hugo”. وجدت سمة لطيفة، فقررت تجربتها. (استغرق الأمر حوالي ساعتين لاختيار السمة، لكن هذا سر)

سأكتب أيضاً ملاحظات حول الأكواد والأدوات التي تثير اهتمامي.

قصة كوميدا في الصباح

بالمناسبة، استيقظت مبكراً هذا الصباح وذهبت إلى مقهى كوميدا. غادرت في الساعة 8:30، أمشي وأستنشق هواء الصباح.

طلبت مجموعة الصباح A مع ميني شيرونوار ومقهى أو ليه. أعتقد أنه كان حوالي 800 ين؟ (لا أتذكر)

مقهى الصباح رائع. إذا كان لدي بعض الوقت للاسترخاء قبل العمل، أشعر أن اليوم سيسير على ما يرام.

لذا، سأكتب بهدوء من الآن فصاعداً. أخطط لخلط المواضيع التقنية والحياة اليومية.

أتطلع إلى دعمكم!