إدارة المدونة on kenji.blog

كيفية نشر رسالة على Slack باستخدام Slack App + OAuth2

Wed, 16 Jul 2025 23:36:27 +0900

✅ طريقة النشر باستخدام رمز الوصول (Slack Web API)

يعد “OAuth Token (مثل xoxb- وما إلى ذلك)” من Slack هو المفتاح للنشر باستخدام Web API الخاص بـ Slack. في هذه الحالة، وعلى عكس Webhook، ستقوم بإجراء POST إلى نقطة نهاية API في Slack مع رأس Authorization: Bearer.

🔑 المتطلبات الأساسية

يجب عليك تضمين chat:write في نطاق OAuth في تطبيق Slack الخاص بك:

خطوات الإعداد

قم بزيارة https://api.slack.com/apps
قم بإنشاء تطبيق أو حدد تطبيقًا موجودًا
في “OAuth & Permissions” > Scopes ← أضف chat:write
قم بإجراء “Install to Workspace” أو “Reinstall” للحصول على Access Token (مثال: xoxb-xxxxxxxxxx)

💻 كود C++ (النشر في Slack API باستخدام WinHTTP)

 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostSlackMessage(const std::wstring& accessToken, const std::string& channel, const std::string& text) {
 const wchar_t* host = L"slack.com";
 const wchar_t* path = L"/api/chat.postMessage";

 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 if (!hSession) return false;

 HINTERNET hConnect = WinHttpConnect(hSession, host, INTERNET_DEFAULT_HTTPS_PORT, 0);
 if (!hConnect) return false;

 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", path,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 // ترويسة التفويض ونوع المحتوى
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // جسم JSON
 std::string body = R"({"channel":")" + channel + R"(","text":")" + text + R"("})";

 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 (DWORD)-1,
 (LPVOID)body.c_str(),
 body.length(),
 body.length(),
 0);

 if (!result || !WinHttpReceiveResponse(hRequest, NULL)) {
 std::cerr << "خطأ في الإرسال\n";
 return false;
 }

 // التحقق من رمز الحالة
 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring token = L"xoxb-رمز-الوصول-الخاص-بك"; // رمز الوصول
 std::string channel = "معرف-القناة-أو-#general"; // مثال: "#general" أو "C0123456789"
 std::string message = "محاولة النشر في Slack من C++!";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "تم النشر بنجاح!\n";
 } else {
 std::cerr << "فشل في النشر.\n";
 }

 return 0;
}

📌 كيفية الحصول على معرف القناة

قد يؤدي استخدام اسم القناة فقط (مثال: #general) أحيانًا إلى حدوث خطأ. الطريقة الأكثر موثوقية هي استخدام المعرف من عنوان URL لصفحة قناة Slack.

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑ هذا الجزء هو معرف القناة

✅ حول أنواع الرموز (إضافي)

تنسيق الرمز	الغرض	مثال
`xoxb-...`	Bot Token (موصى به)	نشر، تعديل، حذف
`xoxp-...`	User Token (غير موصى به)	عمليات غير خاصة بالبوت
Refresh Token	لتحديث الرمز طويل الأمد	لا يُستخدم عادةً

📝 الخلاصة

للنشر في Slack من C++، تعتبر طريقة Slack Web API + Bearer Token هي الأكثر موثوقية
استخدم نقطة النهاية chat.postMessage مع HTTPS POST
يجب إرسال الرمز في ترويسة Bearer
من الأفضل تحديد القناة باستخدام المعرف

كيفية نشر رسائل إلى Slack باستخدام C++ (Win32 API + WinHTTP) [دعم Webhook]

Wed, 16 Jul 2025 19:42:56 +0900

كيفية نشر رسائل إلى Slack باستخدام C++ (Win32 API + WinHTTP) [دعم Webhook]

أرغب في نشر رسائل إلى Slack من C++. هذا شائع جدًا في Node.js و Python، لكن هناك حالات قليلة لاستخدام “C++ × Win32 API × WinHTTP”.

في هذا المقال، سأشرح خطوة بخطوة كيفية إرسال رسائل من C++ إلى Slack باستخدام رابط Webhook بطريقة سهلة الفهم.

✅ التدفق العام

للنشر في Slack، اتبع الخطوات التالية:

احصل على رابط Slack Webhook (مفتاح API)
أرسل طلب POST باستخدام WinHTTP
قم بتكوين نص الرسالة بصيغة JSON
تحقق من النتيجة واكتمل!

🔑 الخطوة 1: كيفية الحصول على رابط Slack Webhook

في Slack، يمكنك بسهولة نشر رسائل من خدمات خارجية باستخدام ميزة تسمى Incoming Webhooks.

خطوات الحصول

انتقل إلى https://api.slack.com/apps
انقر على Create New App
اختر From scratch، وحدد اسم التطبيق ومساحة العمل الوجهة
من القائمة اليسرى، حدد “Incoming Webhooks” وقم بتفعيله
انقر على “Add New Webhook to Workspace” وحدد قناة
انسخ الرابط الصادر (مثال: https://hooks.slack.com/services/xxx/yyy/zzz)

يعمل هذا الرابط مثل مفتاح API.

💻 الخطوة 2: إرسال رسالة إلى Slack بكود C++

التقنيات المستخدمة

Win32 API
WinHTTP (المكتبة القياسية)
رسائل بصيغة JSON

كود عينة (نشر في Slack)

 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostToSlack(const std::wstring& webhookUrl, const std::string& messageJson) {
 // URLの分解
 URL_COMPONENTS urlComp{};
 wchar_t hostName[256];
 wchar_t urlPath[1024];

 urlComp.dwStructSize = sizeof(urlComp);
 urlComp.lpszHostName = hostName;
 urlComp.dwHostNameLength = _countof(hostName);
 urlComp.lpszUrlPath = urlPath;
 urlComp.dwUrlPathLength = _countof(urlPath);

 if (!WinHttpCrackUrl(webhookUrl.c_str(), 0, 0, &urlComp)) {
 std::wcerr << L"URL分解に失敗しました\n";
 return false;
 }

 // HTTPセッションと接続
 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 HINTERNET hConnect = WinHttpConnect(hSession, hostName, urlComp.nPort, 0);
 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", urlPath,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 std::wstring headers = L"Content-Type: application/json\r\n";
 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 -1,
 (LPVOID)messageJson.c_str(),
 messageJson.length(),
 messageJson.length(),
 0);

 if (!result) {
 std::cerr << "送信リクエストに失敗しました\n";
 return false;
 }

 WinHttpReceiveResponse(hRequest, NULL);

 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 // リソース解放
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // 自分のWebhookに置き換えてください

 std::string message = R"({
 "text": "Hello from C++ :rocket:",
 "username": "C++ Bot",
 "icon_emoji": ":robot_face:"
 })";

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "投稿に成功しました！\n";
 } else {
 std::cerr << "投稿に失敗しました。\n";
 }

 return 0;
}

🧪 تخصيص رسائل JSON

في Slack Webhooks، يمكنك تضمين معلمات مثل هذه:

1
2
3
4
5
6


{
 "text": "محتوى الإشعار",
 "username": "اسم البوت",
 "icon_emoji": ":rocket:",
 "channel": "#اسم_قناة_اختياري"
}

📌 ملاحظات إضافية

يجب تحديد Content-Type كـ "application/json"
يتم تمرير رابط Webhook كـ wstring كما هو (لا حاجة لتشفير URL)
نظرًا لأن الاتصال يتم عبر HTTPS، لا تنس WINHTTP_FLAG_SECURE

🎉 إضافة: مثال على التحقق من النشر في Slack

سيظهر بهذا الشكل في Slack:

1
2


[C++ Bot]
Hello from C++ :rocket:

✍️ الملخص

العنصر	التفاصيل
طريقة النشر	Webhook (Incoming Webhooks)
مكتبة الاتصال	WinHTTP
تنسيق البيانات	JSON
المعلمات المتاحة	text, username, icon_emoji, channel، إلخ.

حتى إذا كنت تعتقد أن التكامل مع Slack باستخدام C++ صعب… يمكنك إضافة بوت إشعارات بدءًا من اليوم!

🚀 ما التالي؟

إذا كنت مهتمًا، ففي المرة القادمة:

إرفاق الملفات
واجهة مستخدم بأزرار
عمليات API مرنة عبر Slack App + OAuth2

يمكننا أيضًا تقديم تكامل متقدم مع Slack بخطوة أبعد مثل هذه!

حول علامة الإلزامية في نماذج الإدخال

Mon, 14 Jul 2025 13:47:51 +0900

لقد قمنا بتلخيص المعلومات حول علامة “مطلوب” أو الإلزامية في واجهات المستخدم (النماذج) في الخارج، مع مواد توجيهية لواجهة المستخدم.

📌 علامات الإلزامية الرئيسية وأفضل الممارسات

استخدام علامة النجمة (*)
- هو الأكثر شيوعًا وانتشارًا، حيث يتم وضع “*” على الحقول المطلوبة.
- ومع ذلك، من الضروري وجود شرح في بداية النموذج مثل “ حقل مطلوب”* (Nielsen Norman Group, California State University, Northridge).
- هناك أيضًا أمثلة تستخدم الألوان للتأكيد (مثل النص الأحمر).
تحديد “Required” أو “(required)” بوضوح في التسمية
- عن طريق إضافة كلمة “Required” في التسمية (Label)، يمكن توضيح ذلك لقارئات الشاشة، مما يحسن إمكانية الوصول (Deque).
الاستخدام المشترك لسمات ARIA وسمة required في HTML5
- بالإضافة إلى العرض المرئي، باستخدام aria-required="true" و <input required>، يمكن توصيل الإلزامية برمجيًا (Deque).
استخدام “(optional)” لتحديد الحقول الاختيارية بوضوح
- هناك أيضًا طريقة لتوضيح الحقول الاختيارية باستخدام “(optional)” بدلاً من الحقول المطلوبة، وهي فعالة عند خلط الاثنين.
- ومع ذلك، يشير Nielsen‑Norman إلى أنه “من الأسهل الحكم إذا تم توضيح الإلزامية أيضًا” (TPGi).

✅ ملخص مواد توجيهات واجهة المستخدم

المصدر	المحتوى
NN/g: Marking Required Fields in Forms	يُنصح باستخدام النجمة + نص توضيحي، ويُعتبر عرض الاختياري فقط غير ودي (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・استخدام نص “Required” أو صورة في التسمية. ・تم التصريح بأن الإشارة باللون وحده غير كافية.
W3C Techniques (H90)	تضمين النجمة أو “(required)” في التسمية، وتحديد المعنى في بداية النموذج.
TPGi (Doing what’s required)	مع مراعاة إمكانية الوصول، تم تقييم إدراج النجمة + سمة ARIA + نص التسمية على أنه الأمثل.
دليل Contensis لتجربة مستخدم النماذج	تم تلخيصه بإيجاز بأن وضع العلامات المتسق (* أو (optional)) أمر مهم.

✅ النهج الموصى به في التنفيذ

إضافة نص توضيحي في بداية النموذج :

Fields marked with * are required. (أو بشكل جماعي “All fields are required”، وإذا كان هناك خيار اختياري “unless marked optional”)
إضافة تسمية (Label) :
- الكتابة مثل First Name * أو Email (required).

سمات ARIA و HTML5 :

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

لا تعتمد على اللون فقط : قم بدعم العرض المرئي والبرمجي معًا.

🔗 روابط مرجعية (مواد إرشادات واجهة المستخدم)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

إذا لزم الأمر، يمكننا أيضًا تقديم أمثلة محددة لأكواد HTML/CSS، وقوالب تصميم مكونات واجهة المستخدم لـ Sketch أو Figma، وما إلى ذلك. لا تتردد في استشارتنا!

قائمة أوامر 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 الرسمية

ملحق متصفح تحديث صفحة الويب التلقائي (إضافة Edge)

Sat, 06 Apr 2024 15:36:54 +0900

أقدم لكم إضافة متصفح Edge “تحديث علامة التبويب التلقائي” التي تقوم بتحديث صفحات الويب تلقائيًا.

تثبيت تحديث علامة التبويب التلقائي

تحديث علامة التبويب التلقائي

قم بالوصول إلى الموقع أعلاه وانقر على تثبيت.

انقر على إضافة ملحق.

كيفية الاستخدام

بمجرد اكتمال التثبيت، ستتم إضافة رمز إلى أعلى يمين Edge.

افتح صفحة الويب التي تريد تحديثها تلقائيًا وانقر على الرمز لبدء التحديث التلقائي.

الجزء المؤطر باللون الأخضر هو الفاصل الزمني للتحديث التلقائي. يرجى تحديد وقت التحديث التلقائي.

لإيقاف التحديث التلقائي، انقر على الرمز ثم انقر على Stop reloading this tab.

قوالب صفحات ويب رائعة (html5up)

Mon, 17 Apr 2023 00:26:55 +0900

قوالب صفحات ويب رائعة

html5up https://html5up.net/

اعتقدت أنني أود تجربتها، لذا فهذه مذكرة.

حول موقع الصور "Unsplash" الذي يمكن استخدامه للمدونات

Sun, 02 Apr 2023 14:44:17 +0900

حول “Unsplash”

https://unsplash.com/ja/

خلاصة موقع مواد الصور “Unsplash” هي كما يلي:

يمكن استخدام جميع الصور مجانًا
يُسمح بالاستخدام التجاري
يُسمح بتعديل الصور
لا يُشترط الحصول على إذن استخدام
لا يُشترط ذكر المصدر

إنه سهل الاستخدام للغاية عند كتابة مقالات في المدونة، لذا يرجى تجربته.

※ فيما يتعلق بالترخيص، يرجى الرجوع إلى “الحاشية” أدناه. ¹

سأقوم أيضًا باستخدامه في هذا الموقع.

ترخيص Unsplash ↩︎

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

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

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

1
2


[markup.goldmark.renderer]
 unsafe = true

المرجع: Configure Markup

تحديد جميع مربعات الاختيار في صفحة الويب

Wed, 05 Oct 2022 20:07:06 +0900

لتحديد جميع مربعات الاختيار في صفحة ويب، افتح أدوات المطور (DevTools) بالضغط على F12، ثم الصق الكود التالي في وحدة التحكم (Console) وقم بتشغيله.

1
2
3
4
5
6


let boxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < boxes.length; i++) {
 if (!boxes[i].disabled) {
 boxes[i].checked = true;
 }
}

أو،

أنشئ إشارة مرجعية جديدة، وفي عنوان التسجيل (الجزء الذي تكتب فيه عادةً https://…) الصق الكود التالي. افتح صفحة الويب التي تريد تحديد مربعات الاختيار فيها، وانقر على الإشارة المرجعية التي أنشأتها، وسيتم تحديد جميع مربعات الاختيار.

1

javascript:(function(){let boxes=document.querySelectorAll('input[type="checkbox"]');for(let i=0;i<boxes.length;i++){if(!boxes[i].disabled){boxes[i].checked=true;}}})();

إذا كنت تريد إلغاء تحديد الكل، فقم بتغيير جزء boxes[i].checked = true; في البرنامج النصي أعلاه إلى boxes[i].checked = false;.

تغيير تخطيط صورة 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 {
}

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