Twelvety تنزيل - تنزيل رمز المصدر Twelvety

Twelvety

مكونات الطرف الثالث

v1.4.1

تنزيل

؟ اثني عشر

انظر الموقع التجريبي

Twelvety هو مشروع Extense Starter الذي تم تكوينه مسبقًا ليكون سريعًا. ويشمل:

بنية المكون
خط أنابيب CSS باستخدام SASS و POSCSS و CLIENCSS
خط أنابيب JS باستخدام Browserify و Babel و Uglify
CSS و JS محددة الصفحة
مضمنة CSS الحرجة وتأجيل CSS غير الحرجة
HTML المصغرة ، CSS و JS
صورة سريعة الاستجابة مع دعم AVIF و WEBP
تجمع المحتوى من الأصول

اكتب مكونات مثل هذا:

 < main class =" home " >
  < h1 class =" home__title " > Twelvety </ h1 >
</ main >

{% stylesheet 'scss' %}
  @import "mixins";

  .home {
    @include container;

    &__title {
      color: red;
    }
  }
{% endstylesheet %}

{% javascript %}
  console.log("Super fast ?");
{% endjavascript %}

نشر إلى NetLify

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

ماذا سيحدث عند النقر فوق هذا الزر؟ سيقوم NetLify باستنساخ مستودع Git Twelvety إلى حساب GitHub الخاص بك (سيطلب إذنك للقيام بذلك) ، وإضافة المستودع الجديد إلى حساب NetLify الخاص بك ونشره!

تشغيل محليا

انقر فوق الزر "استخدم هذا القالب" في الجزء العلوي من هذا المستودع لجعل مستودعك الخاص بـ اثني عشر في حساب GitHub الخاص بك. استنساخ أو قم بتنزيل مستودعك الجديد Twelvety على جهاز الكمبيوتر الخاص بك.

ستحتاج إلى node.js و npm (مدرجة مع node.js). لتثبيت الحزم المطلوبة ، قم بتشغيل

npm install

الأوامر

تشغيل npm run serve لتشغيل خادم التطوير والتحميل المباشر
تشغيل npm run build للبناء للإنتاج
قم بتشغيل npm run clean لتنظيف مجلد الإخراج واثني عشر ذاكرة التخزين المؤقت

تعيش أدمغة Twelvety في مجلد utils : إذا كنت ترغب فقط في إنشاء موقع ويب ، فأنت لا تحتاج إلى لمس أي شيء داخل utils . ومع ذلك ، إذا كنت ترغب في تغيير أي من الرموز القصيرة ، فقم بإلقاء نظرة حولها!

سمات

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

stylesheet مقترنة الرمز القصيرة

استخدم رمز stylesheet المقترن لتشمل SASS الخاص بك. يمكنك استيراد ملفات Sass من دليل styles الخاص بك (محدد في .twelvety.js ) ومن node_modules . سيتم تقديم SASS باستخدام DART-SASS ، وتم تمريره إلى postcss (مع POSCSS مسبقًا ENV و Autoprefixer للتوافق) وإما MINITER باستخدام CLEAN CSS أو تجميله بواسطة JS Beautifier (في الإنتاج والتطوير على التوالي).

{% stylesheet 'scss' %}
  @import "normalize.css/normalize";
  @import "mixins";

  .home {
    @include container;

    color: $color--red;
  }
{% endstylesheet %}

المعلمة الثانية من stylesheet الأنماط المقترنة هي اللغة ؛ حاليًا ، لا يفعل هذا شيئًا ويتضمن فقط التوافق مع تعريف Shopify للرمز القصير. إذا كنت ترغب في استخدام بناء جملة SASS المستحضر ، فيمكنك تغيير خيار TweLvety indentedSass ، الموجود في .twelvety.js .

يحتوي الرمز المختصر stylesheet أيضًا على معلمة ثالثة ، والتي يتم تعيينها افتراضيًا على page.url ، عنوان URL للصفحة الحالية التي يتم تقديمها. هذا يعني أنه يتم تضمين CSS المطلوبة فقط في كل صفحة. يمكنك جعل "قطعة" الخاصة بك من CSS باستخدام هذه المعلمة ، على سبيل المثال ، ملف CSS شائع في جميع صفحات موقع الويب الخاص بك.

styles القصير

يجمع الرمز المختصر styles جميع Sass المكتوبة في stylesheet المقترنة باختصارات للقطعة المعطاة وتخرج CSS المقدمة. الإعدادات الافتراضية "قطعة" إلى page.url ، عنوان URL للصفحة الحالية التي يتم تقديمها.

 <!-- Inline all styles on current page -->
< style >
  {% styles page.url %}
</ style >

<!-- Capture styles on current page -->
{% capture css %}
  {% styles page.url %}
{% endcapture %}
<!-- And output asset using `asset` shortcode -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " />

لاحظ أنه يجب وضع الرمز القصير styles أسفل أي stylesheet مختصرة في القالب ؛ انظر append الرمز المختصر المقترن وتحويل لمزيد من المعلومات.

javascript يقترن الرمز المختصر

قم بتضمين JavaScript الخاص بك باستخدام رمز javascript المقترن. يستخدم Twelvety Browserify بحيث يمكنك require('modules') وبابل حتى تتمكن من استخدام أحدث جافا سكريبت. سيتم بعد ذلك تخصيص JavaScript باستخدام Uglify في الإنتاج أو تجميله بواسطة JS Beautifier في التطوير.

{% javascript %}
  const axios = require("axios");

  axios.get("/api/endpoint")
    .then((response) = > {
      console.log("Yay, it worked!");
    })
    .catch((error) = > {
      console.log("Uh oh, something went wrong");
    });
{% endjavascript %}

يحتوي الرمز المختصر المقترن javascript على معلمة ثانية ، والتي يتم تعيينها افتراضيًا على page.url ، عنوان URL للصفحة الحالية التي يتم تقديمها. هذا يعني أنه يتم تضمين JavaScript المطلوب فقط في كل صفحة. يمكنك جعل "قطعة" من JavaScript الخاصة بك باستخدام هذه المعلمة ، على سبيل المثال ، ملف JavaScript لجميع رمز البائع.

سيتم لف إخراج كل الرمز المختصر المقترن javascript في IEFE حتى لا تلوث متغيراتك النطاق العالمي. إذا كنت ترغب في تحديد شيء ما على window ، فاستخدم window.something = .

نص shortcode script

يجمع الرمز المختصر script جميع JavaScript للقطعة المعطاة ويخرج JavaScript (بعد النقل والتصنيع). الإعدادات الافتراضية "قطعة" إلى page.url ، عنوان URL للصفحة الحالية التي يتم تقديمها.

 <!-- Inline all JavaScript on current page -->
< script >
  { % script page . url % }
</ script >

<!-- Capture JavaScript on current page -->
{% capture js -%}
  {% script page.url %}
{%- endcapture -%}
<!-- And output asset using `asset` shortcode -->
< script src =" {% asset js, 'js' %} " defer > </ script >

لاحظ أنه يجب وضع الرمز القصير script أسفل أي رموز مختصرة في javascript في القالب ؛ عادةً ما لا تكون هذه مشكلة حيث يتم تضمين JavaScript غالبًا ما يسبق </body> مباشرة. إذا كنت تريد JavaScript في مكان آخر ، راجع الرمز المختصر والتحويل append .

asset القصير الرمز

يقوم الرمز القصير asset بإخراج أصل محتوى مع المحتوى المحدد والتمديد. قد يكون المحتوى إما String أو Buffer . سيتم حفظ الأصول إلى دليل assets داخل دليل output (كلاهما محدد داخل .twelvety.js ).

 <!-- Capture some content -->
{% capture css %}
h1 {
  color: red;
}
{% endcapture %}

<!-- Save content to content-hashed file with .css extension -->
< link rel =" stylesheet " href =" {% asset css, 'css' %} " />

<!-- Output of shortcode -->
< link rel =" stylesheet " href =" /_assets/58f4b924.css " />

يمكنك استيراد وظيفة الرمز القصيرة asset في JavaScript: هذه هي الطريقة التي يحفظ بها الرمز القصير picture صورك المستجيبة في دليل assets .

picture القصير

يأخذ رمز picture المختصر src و alt ويخرج عنصر صورة متجاوب مع AVIF* ودعم الويب. يجب تخزين صورك داخل دليل images ، المحدد داخل .twelvety.js . سيحفظ اثني عشر الصور المخرجات إلى دليل assets داخل دليل output (كلاهما محدد داخل .twelvety.js ). يأخذ الرمز القصير picture أيضًا معلمتين أخريين: sizes التي تتخلف عن 90vw, (min-width: 1280px) 1152px ، استنادًا إلى أحجام نقطة التوقف ؛ loading ما هو الافتراضات إلى lazy ، يمكن أن يكون أيضا eager .

*يتم تعطيل AVIF افتراضيًا بسبب أوقات البناء الطويلة. يمكنك تمكينه في .twelvety.js .

 <!-- Picture shortcode with src, alt, sizes and loading -->
{% picture 'car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}

<!-- Absolute paths also work -->
{% picture '/src/_assets/images/car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}

<!-- Output of shortcode -->
< picture style =" background-color:rgb(38%,28%,26%);padding-bottom:50% " >
  < source srcset =" /_assets/2263c1d0.avif 320w,/_assets/519fcdec.avif 640w,/_assets/b59349f7.avif 960w,/_assets/e8dae22f.avif 1280w,/_assets/4ba755ff.avif 1600w,/_assets/87c06dd1.avif 1920w " sizes =" 90vw " type =" image/avif " >
  < source srcset =" /_assets/0e7cdd2f.webp 320w,/_assets/ba4e43dd.webp 640w,/_assets/bc541ea5.webp 960w,/_assets/6d620165.webp 1280w,/_assets/756857ea.webp 1600w,/_assets/483e9c95.webp 1920w " sizes =" 90vw " type =" image/webp " >
  < source srcset =" /_assets/6a3b0321.jpeg 320w,/_assets/2bf90b83.jpeg 640w,/_assets/4a810813.jpeg 960w,/_assets/601b629c.jpeg 1280w,/_assets/c39ac58c.jpeg 1600w,/_assets/25a2b530.jpeg 1920w " sizes =" 90vw " type =" image/jpeg " >
  < img src =" /_assets/25a2b530.jpeg " alt =" Panning photo of grey coupe on road " width =" 2400 " height =" 1200 " loading =" lazy " >
</ picture >

يستخدم الرمز القصير picture التحميل الأصلي كسول ولكن سيكون من السهل إضافة دعم lazysizes أو مكتبة مماثلة إذا كنت ترغب في ذلك. يحسب الرمز المختصر picture متوسط لون الصورة لإظهاره أثناء تحميل الصورة ، باستخدام padding-bottom لتجنب تحول التخطيط.

يتم استخدام الرمز القصير picture تلقائيًا لكل صورة في Markdown. لتعطيل ذلك ، ستحتاج إلى تحرير مثيل Markdown-It (انظر ميزة Markdown).

 <!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg )

يتم تخزين الصور التي تم إخراجها بواسطة الرمز المختصر picture . إذا كنت ترغب في مسح ذاكرة التخزين المؤقت ، فاحذف .twelvety.cache (مجرد ملف JSON) أو قم بتشغيل npm run clean ودليل الإخراج. إذا قمت بحذف دليل الإخراج ولكن .twelvety.cache ، فسوف تنهار الأمور.

append الرمز المختصر والتحويل

حسنًا يا رفاق ، ها هي: الوسط الواحد مع اثني عشر. من أجل عمل الرمز المختصر styles ، يجب أن يأتي بعد جميع الرموز المختصرة المقترنة stylesheet ، والتي عادة ما تكون في body . ومع ذلك ، نريد ربط CSS لدينا أو مضمون في head . هذا هو المكان الذي يأتي فيه الرمز المختصر append والتحويل ، لتحريك إخراج الرمز المختصر styles مرة أخرى في head حيث نريده.

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    <!-- Everything in append paired shortcode will be moved here -->
  </ head >
  < body >
    <!-- Stylesheet paired shortcodes can go here -->
    ...
    <!-- Append paired shortcode with styles inside -->
    {% append 'head' %}
      < style >
        {% styles page.url %}
      </ style >
    {% endappend %}
  </ body >
</ html >

سيتم استبدال الرمز المختصر append بإلحاقه template . ثم يستخدم تحويل append JSDOM لإلحاق محتويات template إلى المحدد المحدد (في هذه الحالة ، head ).

نفس المشكلة موجودة في الرمز القصير script ، ومع ذلك ، فهذه ليست مشكلة لأن من الشائع جدًا تضمين JavaScript من الجزء السفلي من body على أي حال.

markdown الرمز المختصر والتكوين

اثنا عشر تحدد مثيلها الخاص من Markdown-It. خيارات التكوين هي:

 {
  html : true ,
  breaks : true ,
  typographer : true
}

يقوم Twelvety أيضًا بتعديل قاعدة image العارض: بدلاً من إخراج عنصر img ، يستخدم TweLvety الرمز القصير picture المستجيبة لتقديم كل صورة. إذا كنت ترغب في تعطيل ذلك ، فقم بإزالة الأسطر التالية في utils/markdown.js .

 md . renderer . rules . image = function ( tokens , index ) {
  const token = tokens [ index ] ;
  const src = token . attrs [ token . attrIndex ( "src" ) ] [ 1 ] ;
  const alt = token . content ;
  return pictureShortcode ( src , alt ) ;
} ;

يضيف TweLvety أيضًا رمزًا مختصرًا markdown والذي يستخدم تكوين Marmdown-IT.

{% markdown %}
# `markdown` paired shortcode

Lets you use **Markdown** like _this_.
{% endmarkdown %}

هذا مفيد أيضًا في تضمين ملفات Markdown في قالب.

{% markdown %}
  {%- include 'content.md' -%}
{% endmarkdown %}

كن حذرًا من المآزق الشائعة لكتل الكود البادء عند استخدام markdown المختصر المقترن. إذا أصبحت كتل التعليمات البرمجية ذات المسافة البادئة مصدر إزعاج ، فيمكنك تعطيلها في utils/markdown.js مع الاحتفاظ بكتل الكود المسورة.

   // Uncomment the following line to disable indented code blocks
-  // .disable("code")
+  .disable("code")

التحول critical

بدلاً من استخدام تحويل ، يستخدم TweLvety الآن CSS CS-CS-CSIDENTICAL لاستخراج CSS CRICART وضمن كل صفحة.

تحويل format

يقوم تحويل format بتجميل HTML في التطوير باستخدام JS Beautifier و Minift HTML في الإنتاج باستخدام htmlminifier. سيتم أيضًا تجميل أي CSS و JavaScript المضمّن.