دليل كتابة المقالات العلمية بالعربية

هذا الدليل يشرح كيف تكتب مقالات الرياضيات والهندسة من داخل أوبسيديان (Obsidian) لتحصل على التصميم الاحترافي الجديد تلقائياً بمجرد النشر في Quartz.

---

١. مكان حفظ المقال (شرط أساسي)

لكي يتم تطبيق التصميم الجديد واللغة العربية بشكل صحيح وتلقائي، يجب أن تحفظ المقال أو تنقله إلى أحد المجلدات التالية داخل مجلد content:

• math أو رياضيات
• engineering أو هندسة

بمجرد وضع الملف في أحد هذه المجلدات، سيقوم Quartz بتفعيل التصميم الجديد بالكامل.

---

٢. العناوين والنصوص

اكتب النصوص والعناوين بشكل طبيعي جداً باستخدام الـ Markdown المعتاد.

• # عنوان رئيسي (سيتم وضع الخط الأصفر أسفله تلقائياً ويأخذ نوع الخط المخصص).
• ## عنوان فرعي
• لكتابة خط فاصل مزخرف (الخط الذي يتوسطه المعين ◆)، اكتب فقط ثلاث شرطات ---.

---

٣. المعادلات الرياضية (LaTeX)

قاعدة ذهبية: LaTeX لا يعمل داخل HTML

محرك Quartz يعالج الـ LaTeX ($...$ و $$...$$) فقط في سياق الماركدوان العادي أو داخل Callouts. إذا وضعت LaTeX داخل <div> أو أي وسم HTML — لن يتم تحويله وسيظهر كنص خام!

معادلة معزولة (Block) — وسط النص:

$$
\lim_{x \to 0} \frac{\sin x}{x} = 1
$$

$$\underset{x\to 0}{\lim }\frac{\sin x}{x}=1$$

معادلة مضمنة (Inline):

استخدم علامة الدولار المفردة وسط النص: $x^2 + 1$ تُعطيك $x^2+1$.

معادلة طويلة داخل صندوق (الطريقة المعتمدة):

التوافق مع شاشات الجوال — تلقائي

أي معادلة داخل Callout تتمتع بالتمرير الأفقي الناعم على شاشات الجوال تلقائياً. المعادلة تبقى على سطر واحد وتُمرِّر يميناً ويساراً بدلاً من أن تنكسر لأسطر.

✅ الشكل الصحيح للتعريفات الطويلة:

> [!example] التعريف الكامل — فايرشتراس
> 
> $$\lim_{x \to c} f(x) = L \iff \forall\,\varepsilon > 0,\;\exists\,\delta > 0 \;\text{s.t.}\; 0 < |x-c| < \delta \Rightarrow |f(x)-L| < \varepsilon$$

❌ خاطئ — لا تضع LaTeX داخل وسوم HTML:

<!-- هذا لن يعمل ولن يظهر بشكل جيد على الجوال -->
<div class="mblock">$$ \lim_{x \to c} f(x) = L $$</div>

---

٤. استخدام الصناديق الملونة (Callouts)

قمت بربط نظام الـ Callouts الخاص بأوبسيديان/Quartz بالصناديق الملونة في التصميم الجديد:

النوع	الكود	اللون	الاستخدام
أبيض	[!note] أو [!abstract]	أبيض بظل	ملاحظة عامة
أزرق	[!info] أو [!todo]	أزرق هادئ	معلومة إضافية
أحمر	[!warning] أو [!danger] أو [!bug]	أحمر	تحذير/خطأ
أخضر	[!success] أو [!tip]	أخضر زيتي	نجاح/ملاحظة إيجابية
أصفر	[!example] أو [!question]	أصفر	مثال/سؤال/مفهوم

---

٥. عناصر HTML المسموح بها (بدون LaTeX بداخلها)

يمكنك استخدام HTML فقط للهيكلة البصرية التي لا تحتوي على LaTeX:

الشبكة المزدوجة للمقارنات:

<div class="gg">
  <div class="pc re">
    <div class="pn">الخصم — يختار ε</div>
    <p>يختار الخصم هامش خطأ ليثبت فشلك.</p>
  </div>
  <div class="pc te">
    <div class="pn">أنت — تجد δ</div>
    <p>بعد اختيار الخصم، تجد أنت النطاق المناسب.</p>
  </div>
</div>

اقتباس أدبي (Epigraph):

<div class="epq">
  <p>نص الاقتباس هنا.</p>
  <div class="att">— اسم المؤلف</div>
</div>

لا تترك أسطراً فارغة داخل أكواد HTML

محرك Quartz يتعامل مع الأسطر الفارغة داخل HTML على أنها بداية فقرة جديدة ويغلفها في <p> مما يكسر التنسيق. اكتب HTML في كتلة متصلة بدون أسطر فارغة داخلها.

---

٦. الرسومات التفاعلية (Canvas)

الموقع يتضمن سكربت math-canvas.js يرسم رسومات بيانية تفاعلية على عناصر <canvas>. لإضافة رسم تفاعلي جديد:

الهيكل الأساسي في الـ Markdown:

<div class="dw">
  <div class="dtit">وصف الرسم البياني</div>
  <canvas id="myCanvasId" width="760" height="350" class="dc"></canvas>
  <div class="cr">
    <span class="cl">اسم المتغير</span
    ><input type="range" id="mySliderId" min="0" max="5" step="0.1" value="2" /><span
      class="cn"
      id="myValueId"
      >2.00</span
    >
  </div>
  <div class="ir">
    <div class="ic">
      <div class="icl">عنوان القيمة ١</div>
      <div class="icv" style="color:var(--amber)" id="myVal1">0.0000</div>
    </div>
    <div class="ic">
      <div class="icl">عنوان القيمة ٢</div>
      <div class="icv" style="color:var(--teal)" id="myVal2">0.0000</div>
    </div>
  </div>
</div>

الكود المقابل في math-canvas.js:

لإضافة مثال تفاعلي جديد، أضف داخل دالة initMathCanvas بنفس النمط:

// داخل setTimeout(() => { ... }, 100)
const c = document.getElementById("myCanvasId")
const sl = document.getElementById("mySliderId")
if (c && sl) {
  const ctx = c.getContext("2d")
  function draw(val) {
    // ... منطق الرسم هنا
  }
  sl.addEventListener("input", () => {
    document.getElementById("myValueId").textContent = (+sl.value).toFixed(2)
    draw(+sl.value)
  })
  draw(+sl.value)
}

الأمثلة التفاعلية الموجودة حالياً:

• مثال ١ (f(x) = x²): Canvas ID = ex1C، Slider ID = ex1S
• مثال ٢ (ثقب في الدالة): Canvas ID = ex2C، Slider ID = ex2S
• مثال ٣ (sin(x)/x): Canvas ID = ex3C، Slider ID = ex3S
• مثال ٤ (نهاية غير موجودة): Canvas ID = ex4C، Slider ID = ex4S
• الجوار المفرغ: Canvas ID = nlC

قاعدة التسمية

كل Canvas له ID فريد. أضف مثالاً جديداً باستخدام IDs لم تُستخدم من قبل (مثل ex5C, ex5S). لا تكرر نفس الـ ID في صفحتين مختلفتين.

---

٧. أمثلة كاملة على هيكل مقال

---

مثال أ — مقال رياضيات نظري (بدون رسومات تفاعلية)

---
title: مبرهنة القيمة الوسطى
description: شرح مبرهنة القيمة الوسطى في التفاضل والتكامل مع أمثلة تطبيقية
---
 
# مبرهنة القيمة الوسطى
 
نص مقدمة المقال هنا...
 
---
 
## التعريف الرسمي
 
> [!example] مبرهنة القيمة الوسطى (Cauchy)
> 
> $$\exists\, c \in (a,b) \;\text{s.t.}\; f'(c) = \frac{f(b) - f(a)}{b - a}$$
 
إذا كانت الدالة $f$ مستمرة على $[a, b]$ وقابلة للاشتقاق على $(a, b)$...
 
---
 
## مثال تطبيقي
 
> [!warning] تحذير
> 
> المبرهنة لا تنطبق إذا لم تكن الدالة مستمرة.
 
> [!tip] فكرة رئيسية
> 
> القيمة $c$ موجودة دائماً لكنها قد لا تكون وحيدة.

---

مثال ب — مقال رياضيات تفاعلي (مع Canvas)

---
title: النهايات — مقدمة بصرية
description: استكشاف مفهوم النهايات بشكل بصري تفاعلي
---
 
# النهايات — مقدمة بصرية
 
نص المقدمة...
 
---
 
## مثال تفاعلي
 
الشريط التالي يوضح كيف تتغير قيمة $f(x) = x^2$ عند اقتراب $x$ من النقطة $c = 2$.
 
<div class="dw">
  <div class="dtit">الشريط الأصفر = هامش ε في المحور الصادي · الشريط الأخضر = نطاق δ في المحور السيني</div>
  <canvas id="ex1C" width="760" height="350" class="dc"></canvas>
  <div class="cr"><span class="cl">الهامش ε</span><input type="range" id="ex1S" min="0.05" max="4" step="0.05" value="2"><span class="cn" id="ex1V">2.00</span></div>
  <div class="ir">
    <div class="ic"><div class="icl">هامش الخطأ في المخرج ε</div><div class="icv" style="color:var(--amber)" id="ex1Ev">2.0000</div></div>
    <div class="ic"><div class="icl">النطاق المناسب في المدخل δ</div><div class="icv" style="color:var(--teal)" id="ex1Dv">0.0000</div></div>
  </div>
</div>
 
> [!note] ماذا تلاحظ؟
> 
> كلما قلّلت ε، يتقلص δ بشكل متناسب — هذا هو جوهر تعريف النهاية.
 
---
 
## التعريف الرسمي
 
> [!example] التعريف الكامل — فايرشتراس
> 
> $$\lim_{x \to c} f(x) = L \iff \forall\,\varepsilon > 0,\;\exists\,\delta > 0 \;\text{s.t.}\; 0 < |x - c| < \delta \Rightarrow |f(x) - L| < \varepsilon$$

---

ملاحظة عن الـ Frontmatter

تأكد من وجود frontmatter واحد فقط في بداية الملف (بين --- و ---). تكرار الـ frontmatter سيظهر كنص عادي في الصفحة.

---

٨. التحكم بخصائص المقال (Frontmatter)

بإمكانك التحكم بخصائص المقال (مثل تثبيته في الصفحة الرئيسية أو إغلاق التعليقات عليه) مباشرةً من خلال الـ Frontmatter (الخصائص/Properties) أعلى ملف الأوبسيديان. يمكنك إضافة هذه القيم عبر واجهة Properties في أوبسيديان أو كتابتها يدوياً بين علامتي ---:

تثبيت المقال في الصفحة الرئيسية

لجعل المقال يظهر دائماً في أعلى قائمة المقالات في الصفحة الرئيسية (Pinned)، أضف خاصية pinned من نوع Checkbox واجعل قيمتها true:

---
title: عنوان المقال
pinned: true
---

إغلاق أو منع التعليقات

إذا كنت لا ترغب في ظهور صندوق التعليقات أسفل مقال معين (كالصفحات الثابتة أو مقالات لا تحتاج لنقاش)، أضف خاصية comments من نوع Checkbox واجعل قيمتها false:

---
title: عنوان المقال
comments: false
---

يمكنك طبعاً دمج هذه الخصائص معاً بسهولة:

---
title: مقال مهم ومغلق للتعليقات
pinned: true
comments: false
---

---

٤. الأسئلة والحلول (تمارين تفاعلية)

أسهل طريقة لعمل أسئلة وحلول مخفية داخل المقالات هي استخدام عنصري الـ HTML المدمجين

و

داخل ملف الـ Markdown.

مثال مباشر:

## سؤال
 
إذا كان لدينا عملة عادلة ما احتمال ظهور صورتين متتاليتين عند رميها مرتين
 
<details class="exercise">
<summary>إظهار الحل</summary>
 
عدد النواتج الممكنة = 4
 
- صورة صورة
- صورة كتابة
- كتابة صورة
- كتابة كتابة
 
الحالة المطلوبة واحدة فقط.
 
إذا:
 
$
P = \frac{1}{4}
$
 
</details>

ستحصل على صندوق منظم يحتوي على السؤال مع زر يمكن للمستخدم الضغط عليه لإظهار الحل.

نصيحة لمستخدمي Obsidian (Templater)

يمكنك إنشاء Template داخل قالب أوبسيديان لاختصار هذه العملية عبر اختصار كيبورد (Hotkey) ليكون القالب كالتالي:

## السؤال
 
$CURSOR$
 
<details class="exercise">
<summary>إظهار الحل</summary>
 
</details>

يفيد هذا الأسلوب كثيرا في الأسئلة الرياضية لأنه مدعوم تلقائيا في Quartz و GitHub Pages دون أي إضافات برمجية خارجية معقدة.

---

📝 دليل نشر مقال ثنائي اللغة

بنية الملفات الجديدة

المقال الآن يُكتب كاملاً في ملف واحد فقط. لكي يتمكن الموقع من التفريق بين المحتوى العربي والإنجليزي، نستخدم وسوم HTML بسيطة كالتالي:

<div lang="ar" dir="rtl">
 
# عنوان المقال
 
اكتب هنا المحتوى العربي بالكامل...
سيظهر هذا المحتوى فقط عندما تكون لغة الموقع عربية.
 
</div>
 
<div lang="en" dir="ltr">
 
# English Title
 
Write your English content here...
This content will only appear when the site is switched to English.
 
</div>

ملاحظة: القصائد في مجلد poetry/ لا تحتاج هذه الوسوم، وسيظهر للمستخدم الأجنبي رابط مباشر لترجمة القصيدة عبر Google Translate.

---

Frontmatter المطلوب

لا تحتاج لإنشاء ملفين بعد الآن. الملف العربي الأساسي سيحتوي على خصائص اللغتين معاً:

---
title: "عنوان المقال بالعربية"
title_en: "Article Title in English" # اختياري - يظهر عند التبديل للإنجليزية في الشريط العلوي
description: "وصف المقال"
tags:
  - ثقافة
created: 2024-01-15
---

---

خطوات النشر من Obsidian (حصرياً)

1. إنشاء المقال

1. أنشئ ملف Markdown جديد في المجلد المناسب داخل Obsidian.
2. أضف الـ frontmatter المطلوب.
3. ضع وسم <div lang="ar" dir="rtl"> واكتب تحته المحتوى العربي، ثم أغلقه بـ </div>.
4. إذا أردت إضافة ترجمة، ضع وسم <div lang="en" dir="ltr"> واكتب المحتوى الإنجليزي، ثم أغلقه.

3. النشر عبر Obsidian Git Plugin

هذه هي الطريقة الوحيدة والمعتمدة للنشر لضمان الاستقرار وسهولة الاستخدام:

1. افتح Obsidian Command Palette (Ctrl+P).
2. اكتب “Git” واختر Obsidian Git: Commit all changes.
3. أدخل رسالة توضح التحديث (مثلاً: إضافة مقال ثنائي اللغة).
4. افتح Command Palette مرة أخرى واختر Obsidian Git: Push.
5. سيتم رفع الملفات مباشرة وسيتم تحديث الموقع تلقائياً عبر المزامنة.

---

التحقق قبل النشر

• تم تضمين المحتوى العربي داخل <div lang="ar" dir="rtl"> والمحتوى الإنجليزي داخل <div lang="en" dir="ltr">.
• الـ frontmatter يحتوي title (اختيارياً title_en).
• الصور والروابط تعمل وتستخدم الصيغة المدعومة في أوبسيديان.

بمجرد الانتهاء من النشر وإجراء Push، يمكنك التحقق من الرابط المباشر للمقال وتجربة زر EN للتأكد من تبديل المحتوى اللحظي بدون إعادة تحميل الصفحة.