لقد أصبحت كتابة الوثائق سهلة بفضل VuePress

لقد كان من المهم دائمًا بذل الجهد اللازم لتصميم وبرمجة وتنفيذ شيء يفي بعدة معايير:

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

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

VuePress هو مولد صفحات ثابت يعتمد على Vue.js، وهو أمر رائع لإنشاء الوثائق. يمكن ضرب مثال جيد من خلال توثيق Vue.js نفسه.

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

تثبيت npm -g vuepress

فوبريس ديف

بشكل افتراضي، يتم تشغيل VuePress بشكل افتراضي على دليل المستندات / الدليل وينشئ مجلد vuepress الخاص به. بعد إدخال الأوامر المذكورة أعلاه، فإنه يبدأ تلقائيًا تشغيل العقدة الخادم ويعرض الوثائق على المضيف المحلي: 8080 /. فيما يلي مثال على بنية الملف.

مع التكوين المناسب، سينشئ VuePress صفحة كاملة وجمالية للغاية. كما ترى على الشاشة أعلاه، تحتوي وثائقنا على مكونين مخصصين - CodeHeading و ColorSample.

مثال أبسط للبداية سيكون CodeHeading.

كودالرأس الرمز

القالب:

<template>
  <div :class="[ 'code-heading', colorClass ]">
    <slot/>
  </div>
</template>

الأنماط:

.عنوان الرمز {
 العرض: 100%;
 الارتفاع: 40 بكسل;
 ارتفاع الخط: 40 بكسل;
 حجم الخط: 12 بكسل;
 الهامش السفلي: -20 بكسل;
 نصف قطر الحد العلوي الأيسر-الحدود: 6 بكسل;
 نصف قطر الحد العلوي الأيمن: 6 بكسل;
 محاذاة النص: يسار;
 الحشو: 0 20 بكسل;
 حجم الصندوق: مربع الحدود;
 اللون: أبيض;

 &__ سيء {
   لون الخلفية: #cc0000;

   &:: بعد {
     المحتوى: "سيء";
   }
 }

 &__جيد {
   لون الخلفية: #3eaf7c;

   &:: بعد {
     المحتوى: "جيد";
   }
 }

 &__افتراضي {
   لون الخلفية: #4e6e8e8e;
 }
}

السيناريو:

تصدير افتراضي {
 الدعائم: {
   النوع: سلسلة
 },
 محسوبة: {
   فئة اللون() {
     إرجاع هذا النوع؟ "code-heading__${this.type}" : "code-heading__default";
   }
 }
};

هذه هي الصيغة القياسية لمكون Vue.js، وهي متاحة بسهولة في ملفات Markdown. إليك مثال على التنفيذ (/docs/Code/javacript.md):

const valueWrappers = wrapper.findAll('.change__value').wrappers;
توقّع(valueWrappers).to.have.lengthOf(2);

توقع(valueWrappers[0].text()).to.equ('€ 5000');
توقّع(valueWrappers[1].text()).to.equ('0')؛ توقع(valueWrappers[1].text()).to.equ('0');

وبهذه الطريقة، حصلنا على حل مقروء تمامًا لتقديم أمثلة للعمل مع رمز.

ربما واجه كل مطوري الواجهة الأمامية على الأرجح موقفًا يفتقرون فيه إلى تمثيل HEX لأي لون من تصميم الرسومات. وماذا لو كان بإمكانك دائمًا الحصول على اللون في متناول اليد وتحديد لوحة ألوان معينة مسبقًا؟ هذا صحيح - التوثيق بطريقة ما يجعلنا نلتزم بالمعيار. قد تبدو النتيجة كما يلي:

في هذا المثال، استُخدم مكوّن ColorPicker.vue. لا يخدم فقط عرض لون معين - بالنقر على دائرة، سنقوم تلقائيًا بنسخ رمز HEX إلى الحافظة.

القالب:

<template>
  <div class="color-sample">
    <div class="color-sample__container">
      <div
        class="color-sample__circle"
        @click="copyToClipboard"
        :style="`background-color: ${ color }`"
        title="انقر لنسخ كود HEX"
      >
        <div class="color-sample__input-wrapper">
          <input type="text" class="color-sample__input" :id="hexId" :value="color">
            <div class="color-sample__input-overlay" :style="`background-color: ${ color }`"></div>
        </div>
      </div>
      <p>
        <strong>(( الاسم ))</strong><br/>
        (( اللون ))
      </p>
    </div>
  </div>
</template>

الأنماط:

.color-sample {
 العرض: مسطر كتلة;
 العرض: 45%;
 الهامش: 15 بكسل;

 &__الحاوية {
   العرض: مرن;
   محاذاة العناصر: في المنتصف;
 }

 &__دائرة {
   العرض: 70 بكسل;
   الارتفاع: 70 بكسل;
   تعويم: يسار;
   نصف قطر الحدود: 50%;
   العرض: مرن;
   محاذاة العناصر: في المنتصف;
   تبرير المحتوى: في المنتصف;
   الهامش لليمين: 20 بكسل;
   المؤشر: مؤشر;
   الحدود: 1px #cfd4db صلب #cfd4db;
 }

 &__غلاف الإدخال {
   الموضع: نسبي;
 }

 &__إدخال {
   حجم الخط: 12 بكسل;
   الحشو: 2 بكسل;
   نصف قطر الحدود: 2 بكسل;
   الحدود: 0;
   العرض: كتلة مسطرة;
   العرض: 60 بكسل;
 }

 &__تراكب المدخلات {
   الموضع: مطلق;
   أعلى: 0;
   يسار: 0;
   يمين: 0;
   أسفل: 0;
   لون الخلفية: أبيض;
   محاذاة النص: في المنتصف;
 }
}

السيناريو:

تصدير افتراضي {
 الدعائم: {
   اللون: سلسلة,
   الاسم: سلسلة
 },
 محسوبة: {
   hexId() {
     إرجاع ``color-${this.color.replace("#"، "")};
   }
 },
 الأساليب: {
   CopyToClipboard() {{
     const label = document.getElementById(this.hexId);
     label.select();
     document.execCommand("نسخ");
   }
 }
};

مثال على التنفيذ (/docs/Design/colors.md):

> 

يجدر الانتباه إلى محرك البحث الذي تم إنشاؤه في VuePress:

بناءً على العناوين في ملفات Markdown يعمل تلقائيًا. يأتي تكوين الوثائق المصنوعة بهذه الطريقة على النحو التالي:

الوحدة النمطية.exports = {
 العنوان: "المستندات",
 themeConfig: {
   الشريط الجانبي: [
     {
       العنوان: 'عام',
       قابل للطي: خطأ,
       الأطفال: [
         'عام/مقدمة.md',
         "عام/التثبيت.md
       ]
     },
     {
       العنوان: 'تصميم',
       قابل للطي: خطأ,
       الأطفال: [
         'Design/colors.md',
         'Design/fonts.md',
         'Design/forms.md',
         "تصميم/تخطيط.md
       ]
     },
     {
       العنوان: 'رمز',
       قابل للطي: خطأ,
       الأطفال: [
         'Code/general.md',
         'Code/javascript.md',
         'Code/scss.md',
         'Code/vue.md',
         'Code/translations.md',
         'Code/git.md',
         "كود/النشر.md
       ]
     }
   ],
   التنقل: [
     {
       النص: 'المعرفة',
       العناصر: [
         { النص: 'VueSchools'، الرابط: 'https://vueschool.io/' }
       ]
     },
     {
       النص: 'Codest',
       الرابط: 'https://codesthq.com'
     },
     {
       النص: 'مستندات على GitHub',
       الرابط: 'https://github.com/'
     }
   ]
 }
}

مع فوبريس البناء أمر، يمكننا على الفور إنشاء ملفات HTML ثابتة جاهزة للنشر السريع مع دعم كامل للأصول.

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

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

اقرأ المزيد:

• تحسين التعليمات البرمجية باستخدام كائنات الاستعلام
• البرنامج التعليمي لأساسيات Vue.js. كيف تبدأ مع هذا الإطار؟
• الأمان في حزم جافا سكريبت
• GraphQL: الدروس المستفادة في الإنتاج