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

هذا الدليل يشرح كيف تكتب مقالات الرياضيات والهندسة من داخل أوبسيديان (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
$$

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
---

مدونة حامد الخطيب