تنزيل pug starter - تنزيل رمز المصدر pug starter

pug starter

بيانات الموقع

Render multiple CSS support

تنزيل

بوج بداية

إذا كنت تتطلع إلى بدء مهنة كمطور ويب ، فتصبح قابلة للوصول إلى أعلى وصول إلى أعلى وظائف دفع في السوق ، تفضل بزيارة WOW JOB

جدول المحتويات

دروس فيديو يوتيوب
مشاريع حية تم تصميمها مع Pug-Starter
المتطلبات الأساسية
تثبيت
الاستخدام
أسلوب

بنية ملف المشروع

 .
├── README.md
├── package.json
├── src
│   ├── _asset
│   │   ├── image
│   │   │   └── become-a-web-developer-today.jpg
│   │   │   └── logo.png
│   │   └── js
│   │       └── all.js
│   │       └── game.js
│   ├── _component
│   │   ├── header
│   │   │   ├── header.pug
│   │   │   └── header.scss
│   │   ├── footer
│   │   │   ├── footer.pug
│   │   │   └── footer.scss
│   │   ├── smart-button
│   │   │   ├── smart-button.pug
│   │   │   └── smart-button.scss
│   │   ├── project-list
│   │   │   ├── project-list.pug
│   │   │   └── project-list.scss
│   │   └── layout
│   │       ├── base.pug
│   │       └── general.scss
│   ├── _data
│   │   ├── site.yml
│   │   └── user.json
│   │   ├── menu.yaml
│   │   └── article.json
│   ├── embed.scss
│   ├── favicon.ico
│   ├── index.pug <---------------- MAIN index
│   ├── style.scss <---------------- MAIN style
│   └── contact
│       └── index.pug
│   └── portfolio
│       └── index.pug
│   └── about-me
│       └── index.pug
│   └── my-first-project
│       └── index.pug
│   └── how-i-got-to-work-with-big-companies
│       └── index.pug
└── yarn.lock

baseurl

ملاحظة: تم تحديث السمة inline embed

الطريق القديم:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

طريقة جديدة:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

إضافة دعم modularcss . عند تمكينه في تكوين package.json فإنه سيقوم بتحويل جميع ملفات SCSS/SASS إلى مسار CSS المراسل.

أضف دعم baseurl الذي يمكن تكوينه لـ github.io والمجال المخصص. تحقق من قسم التكوين باقة. json

DeployTogithubio - (True | false) بشكل افتراضي يتم تعيينه على True وسيؤثر على قيمة baseurl عندما تريد النشر إلى github.io ؛ تريد تعيينه على خطأ إذا كنت تريد استخدام Customurl كقيمة Baseurl
Customurl - إذا كنت تريد أن يكون لـ Baseurl قيمة مثل http://my-project.wowjob.dev أو أي قيمة أخرى ؛
GitHuburl - إذا كنت تريد أن يكون لـ Baseurl قيمة مثل http://github.com/marianzburlea/pug-starter.git أو أي قيمة أخرى ؛

في النهاية ، يمكنك استخدام Baseurl لتبادل مساراتك مثل:

 link(rel="stylesheet", href=`${baseUrl}/style.css`)

أو

 a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

أو

 img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

دروس فيديو يوتيوب

أريد تغيير تلك البرامج التعليمية إلى تلك الجديدة باستخدام التقنيات الجديدة.

لمساعدتك أكثر ، قمت بتجميع بعض البرامج التعليمية على YouTube:

تثبيت nodejs ، git و github

كيفية إنشاء موقع ويب مجانًا في 3 خطوات سهلة 2017

لقد انتهى الكابوس أخيرًا! HTML5 البرنامج التعليمي حول كيفية إنشاء تصميم صفحة ويب 2017

بناء HTML5 موقع ألم تعليمي مجاني للمبتدئين 2017

حزمة بداية للمشاريع القائمة على القالب Pug (Jade).

ملاحظة : تمت إضافة خيار منطقي config.render.sourceFileChange إلى The Package.json . يختلف السلوك بناءً على القيمة:

TRUE - يقوم بإعداد إذا تم تغيير الملف المصدر (ملف PUG) ؛ هذا له سرعة أكبر بكثير عند التقديم مقارنة بالخيار الآخر ، إلا أنه من الصلة فقط إذا قمت بإجراء تغيير في الملف الحالي الذي تم مراقبته بواسطة PUG. إذا قمت بإجراء تغيير على ملف تم تمديده ويقيم في مسار يحتوي على "_" ، مثل مخطط ، فلن ينعكس التغيير.
FALSE - يقوم بإعداد أي ملف PUG ومقارنة الإخراج بملف الوجهة (تم إنشاؤه الآن مع HTML الذي تم إنشاؤه السابق). يمكن أن يكون هذا أبطأ عند زيادة عدد الملفات.

مشاريع حية تم تصميمها مع Pug-Starter

إذا كنت تريد أن يتم سرد مشروعك هنا ، فاترك رسالة على CODETAP على Facebook. يجب أن يكون مشروعك على الأقل إصدارًا نهائيًا (لا يوجد بيتا / ألفا أو العمل قيد التقدم) سيتم قبوله.

المؤلف: ماريان زورليا
- أكل الخضروات (Live) - تناول الخضروات (المصدر)
- W3Schools نسخة طبق الأصل (Live) - W3Schools نسخة طبق الأصل (المصدر)
- سيرتي الذاتية (مباشرة) - سيرتي الذاتية (المصدر)
- مدونة سريعة (لايف) - مدونة سريعة (مصدر)
- تسلا تنقذ الأرواح (مباشرة) - تسلا تنقذ الأرواح (المصدر)
المؤلف: Istvan ACS
- Acme Mobile First (Live) - Acme Mobile First (المصدر)
- معرض الإبهام (LIVE) - معرض الإبهام (المصدر)

المتطلبات الأساسية

يتطلب المشروع nodejs v.4+

لتثبيت Nodejs ، قم بزيارة صفحة تنزيل Nodejs قم بتنزيل حزمة Advropiate لنظام Operatin الخاص بك ، وانقر على الملف الذي تم تنزيله ، وافتحه واتبع التثبيت. إذا كنت لا تعرف الكثير عنها ، فما عليك سوى النقر فوق كل الأزرار التالية أو أو تثبيت الأزرار واختر "أوافق" عند المطالبة ويجب أن تكون بخير.

تثبيت

قبل التثبيت: يرجى قراءة المتطلبات الأساسية

$ npm i

أو

$ npm install

ملاحظة: إذا واجهت خطأ pngquant-bin على Windows ، فحاول تشغيل:

 npm install [email protected] -D
npm install [email protected] -D

قبل تشغيل npm start

الاستخدام

لتشغيل المشروع في وضع التطوير وفتح خادم محلي يتزامن عبر أجهزة متعددة تستخدم:

npm start

أو

npm run dev

لبناء المشروع لاستخدام الإنتاج:

npm run prod

لنشر مشروعك تلقائيًا على صفحات github وجعله متاحًا على https: // [yoursername] .github.io/[الخاص بك اسم "استخدامك] استخدم:

npm run deploy

أسلوب

يدعم المشروع كل من ملاءات الأسلوب المدمجة والخارجية . لا يمكن أن يكون لديك أي شيء أو آخر أو كلاهما.

نمط تطبيق صفحة واحدة

عندما تقوم بإنشاء تطبيق أو موقع ويب صفحة واحدة ، لا فائدة من تحميل أوراق الأنماط من ملف خارجي ، وسأشرح السبب: الهدف من تحميل أوراق النمط الخارجي هو السماح للمتصفح بتخزين هذه الملفات ، بمجرد زيارة صفحة ويب أخرى من موقع الويب نفسه ، بدلاً من تقديم طلب (ملفات) أخرى للملف (S) إلى الخادم والتعامل معها ، إذا لم تكن هناك تغيير ، فسيتم تحميلها من قبل. في صفحة واحدة ، لا توجد صفحة أخرى للذهاب إلى تقنية الملفات الخارجية لا تنطبق.

نمط تطبيق متعدد الصفحات

في هذا السيناريو ، يمكن أن يكون لديك كل من التضمين والخارجي أو خارجي فقط. السيناريو الأكثر شيوعًا هو وجود ملف ورقة نمط خارجي واحد فقط ليتم تحميله ومعظم الوقت على ما يرام.

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