Twelvety скачать - скачать Twelvety исходный код

Twelvety

Сторонние компоненты

v1.4.1

Скачать

? Двенадцать

Смотрите демо -сайт

Двенадцать-это предварительно сконфигурированный Mitenty Starter Project, созданный для быстрого. Он включает в себя:

Компонентная архитектура
CSS Pipeline с использованием SASS, PostCSS и CleanCSS
JS Pipeline с использованием браузерифика
Специфичный 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

Чтобы быстро развернуть свой собственный экземпляр Twelvety для NetLify, просто нажмите кнопку ниже и следуйте инструкциям.

Что произойдет, когда я нажму эту кнопку? NetLify будет клонировать двенадцать репозиторий GIT в вашу учетную запись GitHub (он попросит ваше разрешение сделать это), добавить новый репозиторий в свою учетную запись NetLify и развернуть его!

Бежать локально

Нажмите кнопку «Используйте этот шаблон» в верхней части этого репозитория, чтобы сделать свой собственный двенадцатый репозиторий в своей учетной записи GitHub. Клонировать или загрузите свой новый двенадцатый репозиторий на свой компьютер.

Вам понадобятся node.js и npm (включены в Node.js). Чтобы установить необходимые пакеты, запустите

npm install

Команды

Запустить npm run serve для запуска сервера разработки и живой нагрузки
Запустить npm run build для сборки для производства
Запустите npm run clean , чтобы очистить выходную папку и двенадцатый кэш

Мозги двенадцатилетнего вживую в папке utils : если вы просто хотите сделать веб -сайт, вам не нужно касаться чего -либо внутри utils . Однако, если вы хотите изменить какой -либо из шорткодов, посмотрите вокруг!

Функции

Двенадцать, устанавливая преобразования, шорткоды и несколько разумных множественных вариантов. Нажмите на функции ниже, чтобы узнать, как они работают.

stylesheet парный шорткод

Используйте парный шорткод stylesheet , чтобы включить ваш SASS. Вы можете импортировать файлы SASS из своего каталога styles (определено в .twelvety.js ) и из node_modules . SASS будет отображаться с использованием DART-SASS, перенесенного в PostCSS (с PostCSS PRESET ENV и AutoPrefixer для совместимости) и либо мини-минимум с использованием Clean-CSSS, либо украшены JS Beautifier (в производстве и разработке соответственно).

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

  .home {
    @include container;

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

Второй параметр парного шорткода stylesheet - это язык; В настоящее время это ничего не делает и включено исключительно для соответствия определению шорткода Shopify. Если вы хотите использовать SASS -склонный синтаксис , вы можете изменить двенадцатый вариант 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 . Двенадцать использует браузерериф, чтобы вам могли require('modules') и Вавилон, чтобы вы могли использовать последний JavaScript. Затем ваш 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 будет завершен в IIFE, так что ваши переменные не загрязняют глобальную область. Если вы хотите определить что -то в window , используйте window.something = .

Шорткод 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* и WebP. Ваши изображения должны храниться в каталоге 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-IT (см. Функцию Markdown).

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

Изображения, выведенные короткой picture , кэшируются. Если вы хотите очистить кэш, DELETE .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
}

Двенадцатилетний также изменяет правило image рендеринга: вместо вывода элемента img двенадцать использует реагирующий короткометражный код 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 ) ;
} ;

Двенадцать также добавляет шорт-код парного markdown , который использует конфигурацию Markdown-IT.

{% markdown %}
# `markdown` paired shortcode

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

Это также действительно полезно для включения файлов разметки в шаблон.

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

Будьте осторожны с общей подводной ловушкой блоков с отступами при использовании парного шорткода markdown . Если блоки кода с отступом становятся неприятностью, вы можете отключить их в utils/markdown.js , сохраняя огороженные блоки кода.

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

critical трансформация

Вместо того, чтобы использовать преобразование, двенадцать теперь использует несколькодцать критических CSS для извлечения и встроенных CSS критического пути на каждой странице.

format преобразование

format преобразует красивые HTML в разработке с использованием JS Beautifier и минифирует HTML в производстве с использованием HTMlminifier. Любой встроенный CSS и JavaScript также будут украшены или минимизированы.