HUGO on kenji.blog

قائمة أوامر Hugo

Fri, 31 May 2024 01:36:00 +0900

ما هو Hugo

Hugo هو أحد مولدات المواقع الثابتة. يتيح لك إنشاء مواقع ويب عن طريق تحويل ملفات Markdown إلى HTML. تمت كتابة Hugo بلغة Go ويعمل بسرعة فائقة.

هذه المدونة أيضاً تم إنشاؤها باستخدام Hugo.

تثبيت واجهة سطر الأوامر (CLI) لـ Hugo

لتثبيت واجهة سطر أوامر Hugo، قم بتشغيل الأمر التالي.

※ هذا مثال لنظام macOS. لأنظمة التشغيل الأخرى، يرجى الرجوع إلى الوثائق الرسمية.

1

brew install hugo

يمكنك تثبيته باستخدام Homebrew.

قائمة أوامر Hugo

يوفر Hugo أوامر متنوعة. قمنا بتلخيص الأوامر الأكثر استخداماً أدناه.

إنشاء موقع جديد

1

hugo new site <اسم الموقع>

هذا الأمر لإنشاء موقع جديد. في <اسم الموقع>، حدد اسم الموقع.

إنشاء مقال جديد

1

hugo new <اسم المقال>.md

هذا الأمر لإنشاء مقال جديد. في <اسم المقال>، حدد اسم المقال.

بدء تشغيل الخادم

1

hugo server

هذا الأمر لتشغيل الخادم المحلي. يمكن الوصول إليه عبر http://localhost:1313.

بناء الموقع

1

hugo

هذا الأمر لبناء الموقع. سيتم إنشاء ملفات HTML في مجلد public.

النشر

1

hugo deploy

هذا الأمر لنشر الموقع. يتم تكوين إعدادات النشر في ملف config.toml.

عرض قائمة المقالات

1

hugo list all

هذا الأمر لعرض قائمة بجميع المقالات.

التحقق من الإعدادات

1

hugo config

هذا الأمر للتحقق من الإعدادات.

عرض المساعدة

1

hugo help

هذا الأمر لعرض المساعدة.

عرض الإصدار

1

hugo version

هذا الأمر لعرض الإصدار.

هذه هي قائمة أوامر Hugo. تتوفر العديد من الأوامر الأخرى، لذا يرجى الرجوع إلى الوثائق الرسمية.

المراجع

وثائق Hugo الرسمية

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

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

كيفية تفعيل KaTeX (عرض المعادلات بأسلوب LaTeX) في hugo

Fri, 31 Mar 2023 23:11:26 +0900

ما هو KaTeX؟

KaTeX هي مكتبة javascript لعرض المعادلات الرياضية بأسلوب LaTeX في HTML.

على وجه التحديد، يمكنك عرض معادلات مثل التالية:

$$f(x) = x^2 + x + 41$$

يبدو أن هناك مكتبات أخرى لعرض المعادلات بأسلوب LaTeX، لكن KaTeX معروفة بكونها بسيطة وسريعة.

كيفية إضافته إلى hugo

قم بإنشاء ملف جديد layouts/partials/math.html في بنية مجلدات hugo.

يجب أن يكون المحتوى كالتالي:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

بعد ذلك، أضف الكود التالي إلى الملف الحالي layouts/partials/extend_head.html.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

الآن أصبحت جاهزًا لاستخدام KaTeX.

عن طريق إضافة math: true إلى front matter للصفحة، يمكنك تفعيل KaTeX.

كل ما عليك فعله بعد ذلك هو كتابة المعادلات بأسلوب LaTeX في نص المقالة.

1

$$ e^{i \pi} = -1 $$

عندما تكتب كما هو موضح أعلاه، سيتم عرضها كالتالي:

$$ e^{i \pi} = -1 $$

مراجع

استخدام علامات HTML في HUGO

Tue, 17 Jan 2023 19:20:32 +0900

افتراضيًا، لا يسمح HUGO باستخدام علامات HTML في المقالات، ولكن بإضافة الكود التالي إلى ملف config.toml، سيصبح ذلك ممكنًا.

1
2


[markup.goldmark.renderer]
 unsafe = true

المرجع: Configure Markup

أكواد قصيرة يمكن استخدامها في 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 */>}}.

تغيير تخطيط صورة PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

بالنسبة للتخطيط الافتراضي، يتم وضع الصورة في المركز بعرض 100%، لكنني شعرت في بعض الأحيان أنها كبيرة قليلاً، لذا حاولت التفاف الصورة أسفل العنوان وتغيير العرض إلى حوالي 150 بكسل.

مواقع تغيير الملفات هي كما يلي.

blank.css

لتغيير الهوامش وحجم الصورة وخطوط عرض النص، أضف الوصف التالي إلى blank.css.

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


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

نظرًا لأنه لم يكن من الممكن حذف التعريف على جانب blank.css، احذف السطر التالي في post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← احذف هذا السطر
 height: auto;
}

list.html

لتغيير تخطيط الصورة، قمت بتغيير الأجزاء التالية من list.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


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- تحرك لأسفل -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- تحرك لأسفل -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- إضافة -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- إضافة -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- انتقل من الأعلى -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- انتقل من الأعلى -->
 </div><!-- إضافة -->
 <div style="width:100%;"><!-- إضافة -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- إضافة -->
 </div><!-- إضافة -->
</article>

يبدو أن هناك عددًا لا بأس به من الطلبات المماثلة.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

سأكون ممتنًا لو تفضل المطورون الأصليون بدعمه أيضًا.

كيفية إعداد Twitter Card في PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

مقدمة

يدعم قالب PaperMod ميزة Twitter Card. ومع ذلك، يجب كتابة إعدادات Twitter Card في config.toml أو في معلومات رأس *.md لكل مقال. إذا تم تعيينها في كل من المقال و config.toml، فستكون الأولوية لمعلومات رأس كل مقال.

طريقة الإعداد

config.toml

في config.toml، أضف عنصرًا يسمى images ضمن [params]. في images، اكتب مسار الصورة التي سيتم عرضها في Twitter Card. إذا كنت ستضع الصورة في مجلد static، فيكفي تحديد اسم الملف فقط.

1
2


[params]
 images = ["twitter_card.jpg"]

هيكل المجلد

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (اكتب هنا)
├─content
│ └─posts
│ └─مجلد المقال
│ │ index.md (اكتب هنا)
│ └─images
│ cover.png (ضع هنا)
└─static
 twitter_card.jpg (ضع هنا)

معلومات رأس كل مقال

في معلومات رأس كل مقال، أضف عنصرًا يسمى image تحت cover. إذا قمت بتعيين relative إلى true، يمكنك تحديده بمسار نسبي من *.md للمقال.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

إذا كنت لا ترغب في عرضها أعلى المقال

إذا كنت لا ترغب في عرض صورة الغلاف أعلى المقال، أضف عنصرًا يسمى hidden تحت cover وقم بتعيينه إلى true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

حول حجم الصورة

حاليًا، يبدو أن حجم Twitter Card في مواصفات PaperMod يدعم فقط summary_large_image. الحجم المناسب (الدقة) لـ summary_large_image مختلف عليه، ولكن يبدو أن 800 x 418 (نسبة الصورة 1.91:1) جيدة.

الموقع المرجعي 1 الموقع المرجعي 2

إذا أمكن، نوصي بتغيير حجم الصورة قبل النشر.

كيفية التحقق من الإعدادات

للتحقق من إعدادات Twitter Card، استخدم Twitter Card Validator. ومع ذلك، في بيئتي لم يتم عرض المعاينة بشكل صحيح، لذلك إذا لم يتم عرض المعاينة، نوصي بالتحقق منها مرة واحدة قبل النشر باستخدام حساب خاص أو ما شابه.

تغيير نظام الألوان في PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

لقد قمت بتغيير نظام الألوان لسمة PaperMod. لقد أشرت إلى ما يلي لطريقة التغيير.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

مسار CSS هو كما يلي.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

لا توجد تغييرات على المظهر الداكن في الوقت الحالي.

【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 في موجه الأوامر.