أهمية ترقيم، القوائم في التدوين (Nomber's List)

الكود HTML يقوم بإنشاء قائمة ترقيم مرتبة باللغة العربية، حيث يتم ترقيم العناصر بالترتيب. يتم تخصيص تصميم القائمة باستخدام الكود CSS المُرفق، حيث يتضمن ذلك إزالة رموز الترقيم الافتراضية، وإضافة تأثيرات بصرية مثل تغيير لون الخلفية عند التحويم وتغيير شكل رموز الترقيم. تكوين الكود CSS يسهم في تحسين تجربة المستخدم وتخصيص مظهر القائمة الترقيمية.

أهمية ترقيم القوائم في التدوين (Nomber's List)

السلام عليكم ورحمة الله وبركاته

في عالم التدوين، تعتبر القوائم واحدة من العناصر الأساسية التي تسهم في تنظيم وتوجيه قارئ المقال. تمنح القوائم المدونين وسيلة بسيطة وفعّالة لتقديم المعلومات بترتيب هرمي أو تسلسلي، مما يسهل على القراء متابعة المحتوى بشكل أفضل.

أهمية القوائم:

1. تنظيم المعلومات: تُسهم القوائم في ترتيب وتقسيم المحتوى، مما يجعله أكثر فهمًا وتنظيمًا.
2. تحسين تجربة القارئ: توفر القوائم للقراء نقطة بداية واضحة وتوجيهًا سهلاً للاستكشاف.
3. إبراز النقاط الرئيسية: تساعد القوائم في التركيز على النقاط الرئيسية، مما يعزز تأثير المحتوى.

معاينة في صِوان unPlug

دور CSS في تخصيص شكل القوائم:

CSS (Cascade Style Sheets) يلعب دورًا حاسمًا في تحسين وتخصيص شكل القوائم لتتناسب مع تصميم الموقع أو المدونة. الكود لذي سأقدمه لك يعتبر مثالًا بسيطًا على كيفية استخدام CSS لتحسين تجربة القارئ، سنتطرق لاهم القيم و العناصر التي يحويها الكود و هي كالآتي:

1. - إخفاء الرموز الافتراضية: `.noList` تساعد في إزالة الرموز القياسية، مما يسهم في تحسين المظهر العام.
2. - تحديد التصميم للقوائم المرقمة: `.step` يقوم بتعيين تصميم مخصص للقوائم المرقمة، مما يجعلها أكثر جاذبية.
3. - تخصيص الرقم وتأثير التحويم: `.step > li::before` يضيف رقمًا مرقمًا وتأثيرًا عند التحويم، مما يثري تفاعل المستخدم مع المحتوى.

فهم وتوضيح كود CSS للمبتدئين

في هذا المقال، سنستعرض معًا قطعة من الكود CSS المصممة لتنسيق وتحسين عرض القوائم. سيكون المحتوى موجهًا للمبتدئين، مع شرح تفصيلي للأساسيات.

كود المخصص للقوائم

/* List*/
    .noList {
    list-style: none;
    margin: 0 0 25px;
    padding: 0;
}
.step {
    --sz: 30px;
    counter-reset: num;
    line-height: 1.6;
}
.step > li {
    position: relative;
    counter-increment: num;
    padding-inline-start: calc(var(--sz) * 1.5);
}
.step > li:not(:last-child) {
    padding-bottom: calc(var(--sz) / 2);
}
.step > li::before {
    content: counter(num) '.';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -2px;
    left: 0;
    width: var(--sz);
    height: var(--sz);
    border: 1px solid var(--bodyC);
    border-radius: 50%;
    color: currentColor;
    font-size: small;
    line-height: 1;
    transition: 0.3s;
}
.Rtl .step > li::before {
    left: unset;
    right: 0;
}
.step > li:hover::before {
    background-color: var(--bodyC);
    color: var(--white);
}
.step > li::after {
    content: '';
    position: absolute;
    top: calc(var(--sz) + 8px);
    left: calc(var(--sz) / 2);
    bottom: 8px;
    border-inline-start: 1px solid var(--bodyC);
}
.Rtl .step > li::after {
    left: unset;
    right: calc(var(--sz) / 2);
}
.step .zmImg:not(.s) {
    margin-top: 1.2em;
}
.pros, .cons {
    margin: 5px 0 15px;
    padding-inline-start: 10px;
    line-height: 1.3;
    font-size: 95%;
}
.pros li::marker {
    content: '\002B';
}
.cons li::marker {
    content: '\2212';
}
.pros li, .cons li {
    margin-bottom: 10px;
    padding-inline-start: 10px;
}

هذا الكود CSS يتعامل مع عناصر القوائم ويضيف ستايلات مخصصة لها. إليك شرح لبعض الخصائص الرئيسية:

1. `.noList`: يخفي الرموز والهوامش الافتراضية للقوائم.
2. `.step`: يعدل الستايلات لعناصر القائمة لتظهر كخطوات مرقمة.
3. `.step > li`: يعدل الستايلات لكل عنصر في القائمة.
4. `.step > li::before`: يضيف رقمًا مرقمًا لكل عنصر في القائمة.
5. `.Rtl .step > li::before`: يقوم بتعديل موقع الرقم في الحالة العكسية (مثل اللغات من اليمين لليسار).
6. `.step > li:hover::before`: يغيّر لون الرقم عند التحويم.
7. `.pros`, `.cons`: تطبق أنماط محددة على العناصر التي تحتوي على فوائد (pros) وعيوب (cons).
8. `.pros li::marker`, `.cons li::marker`: يعين نوع الرمز (+ للفوائد و− للعيوب).
9. `.pros li, .cons li`: يضيف تنسيق إضافي لكل عنصر في الفوائد والعيوب.

ستنطرق لشرح الكود بالتفصيل لا تقلق ان لغة css سهلة للغاية كل ما عليك هو فهم العناصر و المتغييرات بشكل سلس و هذا دوري لهذا تابع المقال بعناية.

القائمة بدون أشكال افتراضية

.noList { list-style: none; margin: 0 0 25px; padding: 0; }

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

قوائم مرقمة

.step { --sz: 30px; counter-reset: num; line-height: 1.6; }

هنا، نقوم بتحديد أنماط التصميم للعناصر المرقمة، مع تعيين حجم الرقم ومسافة الخط.

ترقيم العناصر

step > li::before { content: counter(num) '.'; display: flex; align-items: center; justify-content: center; position: absolute; top: -2px; left: 0; width: var(--sz); height: var(--sz); border: 1px solid var(--bodyC); border-radius: 50%; color: currentColor; font-size: small; line-height: 1; transition: 0.3s; }

يقوم هذا الجزء بإضافة رقم مرقم لكل عنصر، مع إضافة تأثير عند التحويم.

دعم الكتابة من اليمين لليسار (RTL)

.Rtl .step > li::before { left: unset; right: 0; }

يُمكن للكود التعامل مع وضع الكتابة من اليمين لليسار بتعديل موقع الرقم.

تجنب ترك القيم غير معرفة، خاصةً عند استخدام المتغيرات. قد تؤدي قيم غير معرفة إلى تحديات في فهم وصيانة الكود. أيضاً، يُفضل استخدام التعليقات بشكل دقيق لشرح الأمور المعقدة وتجنب الغموض. فيما يتعلق بالتنسيق، يُفضل ترتيب الخصائص بشكل منطقي واستخدام الوحدات المناسبة لتحسين قراءة الكود وتجنب مشاكل تكبير وتصغير الشاشة.

ملاحظة!
ان كنت تستخدم قالب لا يدعم وضعي RTL و LTR بشكل منسق و بالتناوب انصحك بتغيير عنصر left و right على حسب ما يتماشى معه قالبك الشخصي.

استنتاج

هذا الكود يعتبر مثالًا بسيطًا على كيفية تحسين تصميم القوائم باستخدام CSS. نأمل أن يكون هذا الشرح مفيدًا للمبتدئين في عالم تطوير الويب.

للحصول عل الكود مضغوط انسخه من الصندوق اسفله

/* List */
.noList { list-style: none; margin: 0 0 25px; padding: 0; } .step { --sz: 30px; counter-reset: num; line-height: 1.6; } .step > li { position: relative; counter-increment: num; padding-inline-start: calc(var(--sz) * 1.5); } .step > li:not(:last-child) { padding-bottom: calc(var(--sz) / 2); } .step > li::before { content: counter(num) '.'; display: flex; align-items: center; justify-content: center; position: absolute; top: -2px; left: 0; width: var(--sz); height: var(--sz); border: 1px solid var(--bodyC); border-radius: 50%; color: currentColor; font-size: small; line-height: 1; transition: 0.3s; } .Rtl .step > li::before { left: unset; right: 0; } .step > li:hover::before { background-color: var(--bodyC); color: var(--white); } .step > li::after { content: ''; position: absolute; top: calc(var(--sz) + 8px); left: calc(var(--sz) / 2); bottom: 8px; border-inline-start: 1px solid var(--bodyC); } .Rtl .step > li::after { left: unset; right: calc(var(--sz) / 2); } .step .zmImg:not(.s) { margin-top: 1.2em; } .pros, .cons { margin: 5px 0 15px; padding-inline-start: 10px; line-height: 1.3; font-size: 95%; } .pros li::marker { content: '\002B'; } .cons li::marker { content: '\2212'; } .pros li, .cons li { margin-bottom: 10px; padding-inline-start: 10px; }

إليك بعض الملاحظات والتحذيرات المتعلقة بالكود:

1. متغير `--bodyC`: الكود يستخدم `--bodyC` كلون لكن لم يتم تعيين قيمته. يفضل تعيين القيمة المناسبة لتفادي أي مشاكل في التنسيق.
2. استخدام `calc()`: يتم استخدام `calc()` في العديد من الأماكن، وهو أمر جيد، ولكن تحقق من صحة الحسابات لضمان عدم حدوث مشاكل في التخطيط.
3. استخدام `unset`: في بعض الأماكن، يتم استخدام `unset` لتعيين قيمة إلى القيمة الافتراضية. يفضل استخدام القيمة المحددة مباشرة لتجنب التعقيدات.
4. تحسين التعليقات: يمكنك تحسين التعليقات لجعلها أكثر وضوحًا، خاصةً بالنسبة للأشياء التي يمكن أن تكون غامضة للقراء المحتملين.
5. التنسيق: يمكنك استخدام تنسيق أفضل لتحسين قراءة الكود، مثل ترتيب الخصائص بشكل منطقي.
6. استخدام الوحدات: تأكد من استخدام الوحدات المناسبة (px، em، rem) لتجنب مشاكل تكبير وتصغير الشاشة.

قد تحتاج إلى إجراء بعض التعديلات وفقًا لاحتياجات المشروع الخاص بك.

شرح مبسط للكود html

يقوم الكود بإنشاء قائمة ترقيم مرتبة باستخدام عناصر HTML. إليك شرح للكود:

1. الكود HTML الذي بين ايدينا يُنشئ قائمة ترقيم مرتبة باستخدام العناصر التي تم تخصيصها بواسطة الكود CSS. إليك شرح العناصر وكيف تتفاعل مع الكود CSS:

   <ol class='step noList'>
     <li>مثال 1</li>
     <li>مثال 2</li>
     <li>مثال 3</li>
   </ol>
   

2. - <ol class='step noList'>: يُنشئ قائمة ترقيم مرتبة ويضيف الصنف "step" الذي يتفاعل مع الكود CSS لتخصيص التصميم.
3. - <li>مثال 1</li>: يُنشئ عنصر قائمة داخل القائمة الترقيمية ويحتوي على نص "مثال 1".
4. - <li>مثال 2</li>: يُنشئ عنصر قائمة آخر يحتوي على نص "مثال 2".
5. - <li>مثال 3</li>: يُنشئ عنصر قائمة آخر يحتوي على نص "مثال 3".
6. - </ol>: هذا هو وسم غلق كود قائمة الترقيم.

التنسيقات والتأثيرات البصرية التي رأيتها في الكود CSS تُطبق على هذه العناصر، مثل إضافة تأثير عند التحويم وتغيير في تصميم رمز الترقيم.

طريقة اضافة كود CSS

قبل اي تعديل على قالب مدونتك انصحك بشدة على اخذ نسخة احتياطية لقالبك حتى نتفادى اي خطأ ممكن حدوثه في حالة ما نسيت ان تأخذ نسخة احتياطية و تم حدوت خطأ ما اترك تعليقا في صندوق التعليقيات او اتصل بي لمساعدتك في حل المشكل.

نصيحة:
قم بتعليم الاكواد التي تظيفها داخل قالبك في عناصر html بتوثيق مناسب لك مثلا: <----[توثيق]---> اما فيما يخص توثيق css اضف /*...توثيق...*/ حتى لا يحدث اي اختلاط و تبقى لك امكانية معرفة اين وضعت الكود المعدل.

اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...

1. إضافة كود CSS:
   - تسجيل الدخول إلى حساب بلوجر:
   قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
   - انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
   - انقر على السهم بجانب التخصيص اختر تعديل HTML
   - ابحث عن `]]</b:skin>` وضع الكود CSS فوقه.
   - بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

طريقة اضافة كود HTML

1. إضافة كود HTML:
   - في لوحة التحكم بلوجر ادخل على المشاركات او الصفحات.
   - على حسب رغبتك يمكنك اضافة الكود ضمن مشاركة او صفحة تابثة.
2. - انقر على انشاء مشاركة/صفحة جديدة.
   - غير من وضع الانشاء الذي رمزه الى وضع تكويد HTML الذي رمزه .
3. - الصق الكود html كما مكتوب اسفله
   <ol class='step noList'> <li>مثال 1</li> <li>مثال 2</li> <li>مثال 3</li> </ol>
4. - قم بتغير الكتابة المؤشر عليها بما تريد ادارجه في القائمة التي تريد انشاءها.
5. - انقر على نشر و قم بمعاينة الصفحة لترى النتيجة.

الختام

تتيح لنا إضافة القوائم وتخصيصها باستخدام CSS تحسين تجربة القارئ وجعل المحتوى أكثر فاعلية وجاذبية. قم بتجربة الأكواد واستكشاف المزيد لتفعيل مظهر متقدم وأفضل لمقالاتك.

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
Median UI

بتصريف:
SiwaneXYZ©
https://www.siwane.xyz/2024/01/nombers-list.html/