Twelvety
v1.4.1
Lihat situs demo
Twelvety adalah proyek starter Elevy Puluh yang telah dikonfigurasi sebelumnya. Itu termasuk:
Tulis komponen seperti ini:
< 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 %}Untuk dengan cepat menggunakan instance TwelVety Anda sendiri ke Netlify, cukup klik tombol di bawah ini dan ikuti instruksi.
Apa yang akan terjadi ketika saya mengklik tombol ini? Netlify akan mengkloning repositori Twelvety Git ke akun GitHub Anda (itu akan meminta izin Anda untuk melakukan ini), tambahkan repositori baru ke akun Netlify Anda dan sebarkan!
Klik tombol Gunakan Template ini di bagian atas repositori ini untuk membuat repositori Twelvety Anda sendiri di akun GitHub Anda. Klon atau unduh repositori twelvety baru Anda ke komputer Anda.
Anda membutuhkan Node.js dan NPM (disertakan dengan Node.js). Untuk memasang paket yang diperlukan, jalankan
npm installnpm run serve untuk menjalankan server pengembangan dan live-reloadnpm run build to Build for Productionnpm run clean untuk membersihkan folder output dan cache Twelvety Otak Twelvety hidup di folder utils : Jika Anda hanya ingin membuat situs web, maka Anda tidak perlu menyentuh apa pun di dalam utils . Namun, jika Anda ingin mengubah kode pendek, lihatlah!
Twelvety mengatur transformasi, kode pendek, dan beberapa opsi sebelas yang masuk akal. Klik fitur di bawah ini untuk mempelajari cara kerjanya.
stylesheet dipasangkan kode pendek Gunakan kode pendek berpasangan stylesheet untuk memasukkan sass Anda. Anda dapat mengimpor file sass dari direktori styles Anda (didefinisikan dalam .twelvety.js ) dan dari node_modules . SASS akan diterjemahkan menggunakan DART-SASS, diteruskan ke PostCSS (dengan PostCSS Preset Env dan Autoprefixer untuk kompatibilitas) dan baik diminifikasi menggunakan Clean-CSS atau dipercantik oleh JS Beautifier (masing-masing dalam produksi dan pengembangan).
{% stylesheet 'scss' %}
@import "normalize.css/normalize";
@import "mixins";
.home {
@include container;
color: $color--red;
}
{% endstylesheet %} Parameter kedua dari kode pendek berpasangan stylesheet adalah bahasa; Saat ini, ini tidak melakukan apa pun dan dimasukkan semata -mata untuk menyelaraskan dengan definisi Shopify tentang kode pendek. Jika Anda ingin menggunakan sintaks indentasi sass, Anda dapat mengubah opsi Twelvety indentedSass , ditemukan di .twelvety.js .
Kode pendek berpasangan stylesheet juga memiliki parameter ketiga, yang secara default diatur ke page.url , URL dari halaman saat ini yang diberikan. Ini berarti bahwa hanya CSS yang diperlukan yang termasuk dalam setiap halaman. Anda dapat membuat 'potongan' CSS Anda sendiri menggunakan parameter ini, misalnya, file CSS yang umum untuk semua halaman situs web Anda.
styles Kode pendek styles mengumpulkan semua sass yang ditulis dalam stylesheet berpasangan kode untuk potongan yang diberikan dan menghasilkan CSS yang diberikan. Default 'chunk' ke page.url , URL halaman saat ini diterjemahkan.
<!-- 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' %} " /> Perhatikan bahwa kode pendek styles harus ditempatkan di bawah kode pendek berpasangan stylesheet di templat; Lihat kode pendek yang append dan ubah untuk informasi lebih lanjut.
javascript berpasangan dengan kode pendek Sertakan JavaScript Anda menggunakan kode pendek berpasangan javascript . Twelvety menggunakan Browserify sehingga Anda dapat require('modules') dan Babel sehingga Anda dapat menggunakan JavaScript terbaru. JavaScript Anda kemudian akan diminifikasi menggunakan Uglify dalam produksi atau dipercantik oleh JS Beautifier dalam pengembangan.
{% 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 %} Kode pendek berpasangan javascript memiliki parameter kedua, yang secara default diatur ke page.url , URL dari halaman saat ini diterjemahkan. Ini berarti bahwa hanya JavaScript yang diperlukan yang termasuk dalam setiap halaman. Anda dapat membuat 'potongan' JavaScript Anda sendiri menggunakan parameter ini, misalnya, file JavaScript untuk semua kode vendor.
Output dari setiap kode pendek berpasangan javascript akan dibungkus dengan IIFE sehingga variabel Anda tidak mencemari ruang lingkup global. Jika Anda ingin mendefinisikan sesuatu di window , gunakan window.something = .
script Kode pintas script mengumpulkan semua javascript untuk potongan yang diberikan dan menghasilkan JavaScript (setelah transpilasi dan minifikasi). Default 'chunk' ke page.url , URL halaman saat ini diterjemahkan.
<!-- 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 > Perhatikan bahwa kode pendek script harus ditempatkan di bawah kode pendek berpasangan javascript dalam templat; Biasanya ini bukan masalah karena JavaScript sering dimasukkan segera sebelumnya </body> . Jika Anda menginginkan JavaScript di tempat lain, lihat kode pendek yang append dan transformasi.
asset Kode pendek asset mengeluarkan aset yang dikeluarkan konten dengan konten dan ekstensi yang diberikan. Konten dapat berupa String atau Buffer . Aset akan disimpan ke direktori assets di dalam direktori output (keduanya ditentukan dalam .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 " /> Anda dapat mengimpor fungsi kode pendek asset di JavaScript: Beginilah kode pendek picture menyimpan gambar responsif Anda ke dalam direktori assets .
picture Kode pendek picture mengambil parameter src dan alt dan mengeluarkan elemen gambar yang responsif dengan dukungan Avif* dan Webp. Gambar Anda harus disimpan dalam direktori images , didefinisikan dalam .twelvety.js . Twelvety akan menyimpan gambar yang dikeluarkan ke direktori assets di dalam direktori output (keduanya didefinisikan dalam .twelvety.js ). Kode pendek picture juga mengambil dua parameter lain: sizes yang default ke 90vw, (min-width: 1280px) 1152px , berdasarkan ukuran breakpoint; dan loading default mana yang lazy , juga bisa eager .
*Avif dinonaktifkan secara default karena waktu pembangunan yang lama. Anda dapat mengaktifkannya di .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 > Kode pendek picture menggunakan pemuatan malas asli tetapi akan mudah untuk menambahkan dukungan untuk lazysizes atau perpustakaan serupa jika Anda mau. Kode pendek picture menghitung warna rata-rata gambar untuk ditampilkan saat gambar memuat, menggunakan padding-bottom untuk menghindari pergeseran tata letak.
Kode pendek picture secara otomatis digunakan untuk setiap gambar dalam Markdown. Untuk menonaktifkan ini, Anda harus mengedit contoh Markdown-It (lihat Fitur Markdown).
<!-- Automatically uses picture shortcode -->
![ Panning photo of grey coupe on road ] ( car.jpg ) Gambar yang dikeluarkan oleh kode pendek picture di -cache. Jika Anda ingin menghapus cache, hapus .twelvety.cache (hanya file json) atau jalankan npm run clean untuk menghapus cache dan direktori output. Jika Anda menghapus direktori output tetapi .twelvety.cache , segalanya akan rusak.
append kode pendek berpasangan dan transformasi Oke teman -teman, ini dia: satu gotcha dengan twelvety. Agar shortcode styles berfungsi, itu harus datang setelah semua kode pendek stylesheet , yang biasanya ada di dalam body . Namun, kami ingin CSS kami dihubungkan atau dilapisi di head . Di sinilah kode pendek yang append dan transformasi masuk, untuk memindahkan output dari gaya pendek styles kembali ke head di mana kita menginginkannya.
<!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 > Kode pendek append dipasangkan sebenarnya akan diganti dengan template . Transformasi append kemudian menggunakan JSDOM untuk menambahkan konten template ke pemilih yang diberikan (dalam hal ini, head ).
Masalah yang sama ada untuk kode pendek script , namun, ini bukan masalah karena itu sangat umum untuk memasukkan JavaScript dari bagian bawah body .
markdown dan konfigurasiTwelvety menetapkan contoh Markdown-It sendiri. Opsi konfigurasi adalah:
{
html : true ,
breaks : true ,
typographer : true
} Twelvety juga memodifikasi aturan image renderer: alih -alih mengeluarkan elemen img , Twelvety menggunakan kode pendek picture responsif untuk membuat setiap gambar. Jika Anda ingin menonaktifkan ini, hapus baris berikut di 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 juga menambahkan kode pendek berpasangan markdown yang menggunakan konfigurasi markdown-it.
{% markdown %}
# `markdown` paired shortcode
Lets you use **Markdown** like _this_.
{% endmarkdown %}Ini juga sangat berguna untuk memasukkan file penurunan harga ke dalam templat.
{% markdown %}
{%- include 'content.md' -%}
{% endmarkdown %} Berhati -hatilah dengan perangkap umum dari blok kode indentasi saat menggunakan kode pendek berpasangan markdown . Jika blok kode indentasi menjadi gangguan, Anda dapat menonaktifkannya di utils/markdown.js sambil mempertahankan blok kode berpagar.
// Uncomment the following line to disable indented code blocks
- // .disable("code")
+ .disable("code")criticalAlih-alih menggunakan transformasi, Twelvety sekarang menggunakan sebelas css-css untuk mengekstrak dan melapisi CSS-jalur kritis pada setiap halaman.
format Transformasi format transformasi mempercantik HTML dalam pengembangan menggunakan JS Beautifier dan meminimalkan HTML dalam produksi menggunakan HTMLMinifier. CSS inline dan JavaScript apa pun juga akan dipercantik atau diminifikasi.
Jika Anda menggunakan kode Visual Studio, saya merekomendasikan ekstensi cair ini sehingga Sass dan JavaScript Anda akan disorot dengan benar.
