Window.pipedriveLeadboosterConfig = { القاعدة: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', الإصدار: 2, } ؛(الدالة () { var w = نافذة إذا كان (w.LeadBooster) { console.warn('LeadBooster موجود بالفعل') } وإلا { { w.LeadBooster = { q: [], على: دالة (ن، ح) { { هذا.q.push({ t: 'o'، n: n، n: n، h: h }) }, الزناد: الدالة (n) { هذا.q.push({ t: 't'، n: n: n }) }, } } })() أصبح من السهل كتابة الوثائق بفضل VuePress - The Codest
The Codest
  • نبذة عنا
  • الخدمات
    • تطوير البرمجيات
      • تطوير الواجهة الأمامية
      • تطوير الواجهة الخلفية
    • Staff Augmentation
      • مطورو الواجهة الأمامية
      • مطورو الواجهة الخلفية
      • مهندسو البيانات
      • مهندسو السحابة
      • مهندسو ضمان الجودة
      • أخرى
    • استشاري
      • التدقيق والاستشارات
  • الصناعات
    • التكنولوجيا المالية والمصرفية
    • E-commerce
    • أدتك
    • التكنولوجيا الصحية
    • التصنيع
    • الخدمات اللوجستية
    • السيارات
    • إنترنت الأشياء
  • القيمة مقابل
    • CEO
    • CTO
    • مدير التوصيل
  • فريقنا
  • دراسات الحالة
  • اعرف كيف
    • المدونة
    • اللقاءات
    • ندوات عبر الإنترنت
    • الموارد
الوظائف تواصل معنا
  • نبذة عنا
  • الخدمات
    • تطوير البرمجيات
      • تطوير الواجهة الأمامية
      • تطوير الواجهة الخلفية
    • Staff Augmentation
      • مطورو الواجهة الأمامية
      • مطورو الواجهة الخلفية
      • مهندسو البيانات
      • مهندسو السحابة
      • مهندسو ضمان الجودة
      • أخرى
    • استشاري
      • التدقيق والاستشارات
  • القيمة مقابل
    • CEO
    • CTO
    • مدير التوصيل
  • فريقنا
  • دراسات الحالة
  • اعرف كيف
    • المدونة
    • اللقاءات
    • ندوات عبر الإنترنت
    • الموارد
الوظائف تواصل معنا
السهم الخلفي العودة إلى الوراء
2019-04-02
تطوير البرمجيات

لقد أصبحت كتابة الوثائق سهلة بفضل 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: الدروس المستفادة في الإنتاج

مقالات ذات صلة

تطوير البرمجيات

إنشاء تطبيقات ويب مستقبلية: رؤى من فريق خبراء The Codest

اكتشف كيف تتفوق شركة The Codest في إنشاء تطبيقات ويب تفاعلية قابلة للتطوير باستخدام أحدث التقنيات، وتقديم تجارب مستخدم سلسة عبر جميع المنصات. اكتشف كيف تقود خبرتنا التحول الرقمي والأعمال التجارية...

ذا كوديست
تطوير البرمجيات

أفضل 10 شركات لتطوير البرمجيات في لاتفيا

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

thecodest
الحلول المؤسسية وحلول التوسعة

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

استكشف هذا الدليل الأساسي حول تطوير برمجيات جافا outsourcing بنجاح لتعزيز الكفاءة والوصول إلى الخبرة وتحقيق نجاح المشروع باستخدام The Codest.

thecodest
تطوير البرمجيات

الدليل الشامل للاستعانة بمصادر خارجية في بولندا

إن الطفرة في outsourcing في بولندا مدفوعة بالتقدم الاقتصادي والتعليمي والتكنولوجي، مما يعزز نمو تكنولوجيا المعلومات والمناخ الملائم للأعمال.

ذا كوديست
الحلول المؤسسية وحلول التوسعة

الدليل الكامل لأدوات وتقنيات تدقيق تكنولوجيا المعلومات

تضمن عمليات تدقيق تكنولوجيا المعلومات وجود أنظمة آمنة وفعالة ومتوافقة. تعرف على المزيد حول أهميتها من خلال قراءة المقال كاملاً.

The Codest
ياكوب جاكوب جاكوبوفيتش CTO وشريك مؤسس CTO

اشترك في قاعدة معارفنا وابقَ على اطلاع على آخر المستجدات في قطاع تكنولوجيا المعلومات.

    نبذة عنا

    The Codest - شركة دولية لتطوير البرمجيات لها مراكز تقنية في بولندا.

    المملكة المتحدة - المقر الرئيسي

    • المكتب 303 ب، 182-184 شارع هاي ستريت نورث E6 2JA
      لندن، إنجلترا

    بولندا - مراكز التكنولوجيا المحلية

    • مجمع مكاتب فابريتشنا المكتبي، أليجا
      بوكوجو 18، 31-564 كراكوف
    • سفارة الأدمغة، كونستروكتورسكا
      11, 02-673 02-673 وارسو، بولندا

      The Codest

    • الصفحة الرئيسية
    • نبذة عنا
    • الخدمات
    • دراسات الحالة
    • اعرف كيف
    • الوظائف
    • القاموس

      الخدمات

    • استشاري
    • تطوير البرمجيات
    • تطوير الواجهة الخلفية
    • تطوير الواجهة الأمامية
    • Staff Augmentation
    • مطورو الواجهة الخلفية
    • مهندسو السحابة
    • مهندسو البيانات
    • أخرى
    • مهندسو ضمان الجودة

      الموارد

    • حقائق وأساطير حول التعاون مع شريك خارجي لتطوير البرمجيات
    • من الولايات المتحدة الأمريكية إلى أوروبا: لماذا تقرر الشركات الأمريكية الناشئة الانتقال إلى أوروبا؟
    • مقارنة مراكز تطوير التكنولوجيا في الخارج: تك أوفشور أوروبا (بولندا)، آسيان (الفلبين)، أوراسيا (تركيا)
    • ما هي أهم التحديات التي تواجه CTOs ومديري تكنولوجيا المعلومات؟
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • شروط استخدام الموقع الإلكتروني

    جميع الحقوق محفوظة © 2025 بواسطة The Codest. جميع الحقوق محفوظة.

    arArabic
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek arArabic