ดาวน์โหลด Twelvety - ดาวน์โหลดซอร์สโค้ดที่ Twelvety

Twelvety

ส่วนประกอบของบุคคลที่สาม

v1.4.1

ดาวน์โหลด

- ความยาว

ดูเว็บไซต์สาธิต

Twelvety เป็นโครงการเริ่มต้นที่กำหนดไว้ล่วงหน้าที่กำหนดไว้ล่วงหน้าซึ่งสร้างขึ้นเพื่อให้เร็ว มันรวมถึง:

สถาปัตยกรรมส่วนประกอบ
CSS Pipeline โดยใช้ sass, postcss และ cleancss
JS Pipeline โดยใช้ Browserify, Babel และ Uglify
CSS และ JS เฉพาะหน้า
CSS ที่สำคัญแบบอินไลน์และเลื่อน CSS ที่ไม่สำคัญ
Minified 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 จะโคลนพื้นที่เก็บข้อมูล GIT ที่อยู่ในบัญชี GitHub ของคุณ (จะขอให้คุณทำสิ่งนี้) เพิ่มที่เก็บใหม่ลงในบัญชี NetLify ของคุณและปรับใช้!

วิ่งในพื้นที่

คลิกที่ปุ่ม ใช้เทมเพลตนี้ ที่ด้านบนของที่เก็บนี้เพื่อสร้างที่เก็บ Twelvety ของคุณเองในบัญชี GitHub ของคุณ โคลนหรือดาวน์โหลดที่เก็บ Twelvety ใหม่ของคุณลงในคอมพิวเตอร์ของคุณ

คุณจะต้องใช้ node.js และ npm (รวมอยู่ใน node.js) หากต้องการติดตั้งแพ็คเกจที่ต้องการให้เรียกใช้

npm install

คำสั่ง

Run npm run serve เรียกใช้เซิร์ฟเวอร์การพัฒนาและการโหลดสด
เรียกใช้ npm run build เพื่อสร้างเพื่อการผลิต
เรียกใช้ npm run clean เพื่อทำความสะอาดโฟลเดอร์เอาท์พุทและแคชที่มีความทนทาน

สมองของ Twelvety Live ในโฟลเดอร์ utils : หากคุณต้องการสร้างเว็บไซต์คุณไม่จำเป็นต้องสัมผัสอะไรภายใน utils อย่างไรก็ตามหากคุณต้องการเปลี่ยนรหัสย่อใด ๆ ให้ดูรอบ ๆ !

คุณสมบัติ

Twelvety ตั้งค่าการแปลงรหัสย่อและตัวเลือกที่มีความเหมาะสมบางอย่าง คลิกคุณสมบัติด้านล่างเพื่อเรียนรู้วิธีการทำงาน

stylesheet ย่อแบบคู่หู

ใช้รหัสย่อที่จับคู่ stylesheet เพื่อรวม sass ของคุณ คุณสามารถนำเข้าไฟล์ SASS จากไดเรกทอรี styles ของคุณ (กำหนดไว้ใน .twelvety.js ) และจาก node_modules SASS จะแสดงผลโดยใช้ DART-sass ส่งผ่านไปยัง postcss (พร้อม postcss preset env และ autoprefixer สำหรับความเข้ากันได้) และ minified โดยใช้ clean-css หรือตกแต่งโดย JS bautifier (ในการผลิตและการพัฒนาตามลำดับ)

{% 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 รวบรวมเขี้ยวทั้งหมดที่เขียนใน stylesheet ชอร์ตชอร์ตสำหรับชิ้นส่วนที่กำหนดและเอาต์พุต CSS ที่แสดงผล ค่าเริ่มต้น 'chunk' ไปที่ 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 ใช้เบราว์เซอร์เพื่อให้คุณ 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 ที่ต้องการเท่านั้นที่รวมอยู่ในแต่ละหน้า คุณสามารถสร้าง 'chunk' ของ JavaScript ของคุณเองโดยใช้พารามิเตอร์นี้เช่นไฟล์ JavaScript สำหรับรหัสผู้ขายทั้งหมด

เอาต์พุตของรหัสย่อที่จับคู่ javascript แต่ละตัวจะถูกห่อหุ้มด้วย IIFE เพื่อให้ตัวแปรของคุณไม่ก่อให้เกิดมลพิษทั่วโลก หากคุณต้องการกำหนดบางสิ่งบางอย่างบน window ให้ใช้ window.something =

รหัสย่อ script

รหัสย่อของ script จะรวบรวมจาวาสคริปต์ทั้งหมดสำหรับก้อนที่กำหนดและส่งออกจาวาสคริปต์ (หลังจากการถ่ายทอดและการลดขนาด) ค่าเริ่มต้น 'chunk' ไปที่ 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 Twelvety จะบันทึกภาพที่ส่งออกไปยังไดเรกทอรี 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 รหัสย่อที่จับคู่และแปลง

โอเคคนนี่คือ: Gotcha หนึ่งที่มีความทนทาน เพื่อให้รหัสย่อของ styles ใช้งานได้มันจะต้องเกิดขึ้นหลังจากรหัสย่อของ stylesheet ทั้งหมดซึ่งมักจะอยู่ใน body อย่างไรก็ตามเราต้องการให้ CSS ของเราเชื่อมโยงหรือ inlined ใน 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 จับคู่รหัสย่อและการกำหนดค่า

Twelvety ตั้งค่าอินสแตนซ์ของตัวเองของ 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 ซึ่งใช้การกำหนดค่า markdown-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 ที่สำคัญมากในการสกัดและ CSS วิกฤตแบบอินไลน์ในทุกหน้า

การแปลง format

format การแปลงสร้างความงาม HTML ในการพัฒนาโดยใช้ JS Beautifier และลด HTML ในการผลิตโดยใช้ HTMLMInifier CSS แบบอินไลน์และ JavaScript ใด ๆ จะได้รับการตกแต่งหรือย่อขนาด