الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

أحد عشر حزمة ويب ؟

قالب Barebone Eleventy وWebpack. شوكة وتذهب.

سمات

  • عارية 11ty (حرفيا؟)
  • ⚡ إنشاء سريع باستخدام تكوينات البيئة (babel-env، وpostcss-preset-env، وwebpack...)
  • .js (ES6، بابل، Polyfills)
  • .css (Sass، PostCSS، Autoprefixer)
  • ✅ مُحسّنة للإنتاج (خرائط المصدر، والعناوين، والكود المصغر...)
  • ؟ الصور المستجيبة والصور البعيدة المخزنة مؤقتًا (@11ty/eleventy-img)
  • ؟ إنشاء أيقونة SVG
  • ؟ البيانات التعريفية لتحسين محركات البحث وعلامات Open Graph
  • ؟ روابط خارجية آمنة ( noopener و noreferrer )
  • رموز قصيرة ومرشحات مفيدة (التاريخ، تخفيض السعر، أيقونات الصور المتحركة، الصور المستجيبة...)
  • تراكب خطأ أنيق (تراكب خطأ أحد عشر مكونًا إضافيًا)
  • ؟ أجمل من حيث التنسيق

العرض التجريبي المباشر https://eleventy-webpack.netlify.app

الاستخدام

قم أولاً بتثبيت التبعيات: 

npm install

ثم يمكنك:

يأمر وصف
npm run start قم بتشغيل موقع الويب الخاص بك على http://localhost:8080
npm run build أنشئ موقع الإنتاج الخاص بك داخل /_site
npm run format قم بتشغيل أجمل على جميع التعبئات باستثناء /_site
npm run analyze معلومات الإخراج على حجم الحزمة الخاصة بك

تأكد من استخدام الإصدار الصحيح من Node.js: 

 # with bash nvm 
nvm use ` cat .nvmrc `
# with windows nvm
nvm use $( cat .nvmrc )
# or just install the version specified inside `.nvmrc`

حزمة الويب

تم تضمين webpack.config.js بسيط جدًا. لا تتردد في تغييره.

الرموز المختصرة

يمكن استخدام جميع الرموز القصيرة داخل ملفات .md أو .njk .

icon

يتم تجميع أي SVG مضاف إلى src/assets/icons في ملف رموز متحركة وإتاحته من خلال هذا الرمز القصير. 

 <!-- Assuming `src/assets/icons/github.svg` exist -->
{% icon "github" %} Github icon
<!-- Will be rendered as -->
< svg class =" icon icon--github " role =" img " aria-hidden =" true " >
  < use xlink:href =" /assets/images/sprite.svg#github " > </ use >
</ svg >
image

ينشئ نسخة WebP من الصورة ونسخة JPEG / PNG المحسنة المقابلة لها. سيتم إنشاء الصور بأحجام متعددة. راجع utils/shortcodes.js لمعرفة القيم الافتراضية. 

 <!-- Assuming `src/assets/images/image.jpeg` of width 330px exist -->
{% image "image.jpeg", "Image alt" %}
<!-- Will be rendered as -->
< picture >
  < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
  < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
  < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
</ picture >

<!-- If a title is passed the shortcode will output a <figure> with <figcaption> -->
{% image "image.jpeg", "Image alt", "Image title" %}
<!-- Will be rendered as -->
< figure >
  < picture >
    < source type =" image/webp " srcset =" /assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w " sizes =" 90vw " >
    < source type =" image/png " srcset =" /assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w " sizes =" 90vw " >
    < img loading =" lazy " src =" /assets/images/678868de.png " alt =" Image alt " width =" 330 " height =" 580 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >

<!-- Additional options -->
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
<!-- Will be rendered as -->
< figure class =" fig-my-class " >
  < picture >
    < source type =" image/webp " srcset =" ... " sizes =" 90vw " >
    < source type =" image/png " srcset =" ... " sizes =" 90vw " >
    < img class =" img-my-class " loading =" eager " src =" ... " alt =" Image alt " width =" 100 " height =" 100 " >
  </ picture >
  < figcaption > Image title </ figcaption >
</ figure >
markdown

تضمين تخفيض السعر بسهولة. 

{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

المرشحات

يمكن استخدام جميع المرشحات داخل ملفات .md أو .njk .

format

قم بتنسيق التاريخ الذي تم تمريره باستخدام date-fns: 

 <!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020
formatISO

قم بتنسيق التاريخ الذي تم تمريره وفقًا لتنسيق ISO: 

 <!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z
markdown

تحليل السلسلة التي تم تمريرها مع تخفيض السعر: 

 <!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
< h1 > My header </ h1 >

شكرًا

  • https://github.com/gregives/twelvety
  • https://github.com/hankchizljaw/hylia
  • https://github.com/MadeByMike/supermaya
  • https://github.com/jeromecoupe/webstoemp
  • https://github.com/maxboeck/eventastic
  • https://github.com/deviousdodo/elevenpack
  • https://github.com/ixartz/Eeventy-Starter-Boilerplate
  • https://github.com/google/eleventy-high-performance-blog
  • https://github.com/danurbanowicz/eleventy-netlify-boilerplate
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل