cgartlab.github.io
1.0.0
Screkfast เป็น เทมเพลตโอเพนซอร์ซ ที่ออกแบบมาสำหรับการตั้งค่าโครงการเว็บที่รวดเร็วและมีประสิทธิภาพผสมผสาน ความเรียบง่ายกับฟังก์ชั่น ไม่ว่าคุณจะจัดแสดงผลงานเปิดตัวหน้า Landing Page หรือเรียกใช้บล็อก Screwfast ให้ทุกสิ่งที่คุณต้องการ ด้วยการรวมพลังของ Astro, Tailwind CSS และ Preline UI เทมเพลตนี้นำเสนอโซลูชันที่ใช้งานได้และสวยงามสำหรับการปรากฏตัวของเว็บของคุณ
ดูการสาธิตสด
องค์ประกอบส่วนแบ่งทางสังคม :
ส่วนประกอบปุ่มบุ๊คมาร์ค :
localStoragelocalStorage ด้วยคุกกี้เพื่อคงโพสต์บุ๊กมาร์กโพสต์ส่วนประกอบข้อเสนอแนะ :
การรวมชุดรูปแบบเอกสารของ Starlight :
ส่วนประกอบชุดไอคอน :
<Icon name="iconName" /> ในส่วนประกอบ Astro ของคุณฟีเจอร์สากล (I18N) :
LanguagePicker ที่กำหนดเองmonolingual-site สารบัญไดนามิก (TOC) พร้อมตัวบ่งชี้ความคืบหน้าการเลื่อน :
บันทึก
ปัจจุบันยังไม่มีการปรับปรุงที่วางแผนไว้หรือข้อบกพร่องที่รู้จัก หากคุณพบปัญหาใด ๆ โปรดรายงานพวกเขาในหน้าปัญหาของเราหรือเริ่มการสนทนาเพื่อแบ่งปันแนวคิดคำแนะนำหรือถามคำถาม
คู่มือนี้จะช่วยให้คุณมีขั้นตอนที่จำเป็นในการตั้งค่าและทำความคุ้นเคยกับโครงการ Astro บนเครื่องพัฒนาในท้องถิ่นของคุณ
ในการเริ่มต้นให้คลิกปุ่ม Use this template (สีเขียวขนาดใหญ่ที่ด้านบนขวา) เพื่อสร้าง repo ของคุณเองจากเทมเพลตนี้ในบัญชี GitHub ของคุณ
เมื่อที่เก็บข้อมูลของคุณถูกสร้างขึ้นแล้วคุณสามารถโคลนไปยังเครื่องในเครื่องของคุณโดยใช้คำสั่งต่อไปนี้:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]เริ่มต้นด้วยการติดตั้งการพึ่งพาโครงการ เปิดเทอร์มินัลของคุณนำทางไปยังไดเรกทอรีรากของโครงการและดำเนินการ:
npm install คำสั่งนี้จะติดตั้งการพึ่งพาที่จำเป็นทั้งหมดที่กำหนดไว้ในไฟล์ package.json
ด้วยการติดตั้งการอ้างอิงคุณสามารถใช้สคริปต์ NPM ต่อไปนี้เพื่อจัดการวงจรการพัฒนาของโครงการของคุณ:
npm run dev : เริ่มต้นเซิร์ฟเวอร์การพัฒนาในเครื่องด้วยการเปิดใช้งานการโหลดซ้ำnpm run preview : ให้บริการเอาต์พุตบิวด์ของคุณในเครื่องเพื่อดูตัวอย่างก่อนการปรับใช้npm run build : Bundles เว็บไซต์ของคุณเป็นไฟล์คงที่สำหรับการผลิตสำหรับความช่วยเหลืออย่างละเอียดเกี่ยวกับคำสั่ง Astro CLI โปรดไปที่เอกสารของ Astro
ก่อนการปรับใช้คุณต้องสร้างงานสร้างการผลิต:
npm run build สิ่งนี้จะสร้าง dist/ Directory ด้วยไซต์ที่สร้างขึ้นของคุณ (กำหนดค่าผ่าน Outdir ใน Astro)
คลิกปุ่มด้านล่างเพื่อเริ่มปรับใช้โครงการของคุณบน Vercel:
คลิกปุ่มด้านล่างเพื่อเริ่มปรับใช้โครงการของคุณบน NetLify:
Screwfast จัดองค์ประกอบโมดูลาร์เนื้อหาและเลย์เอาต์เพื่อปรับปรุงการพัฒนาและการจัดการเนื้อหา
src/
├── assets/
│ ├── scripts/ # JS scripts
│ └── styles/ # CSS styles
├── components/ # Reusable components
│ ├── Meta.astro # Meta component for SEO
│ ├── sections/ # Components for various sections of the website
│ ├── ThemeIcon.astro # Component for toggling light/dark themes
│ └── ui/ # UI components categorized by functionality
├── content/ # Markdown files for blog posts, insights, products, and site configuration
│ ├── blog/
│ ├── docs/
│ ├── insights/
│ ├── products/
│ └── config.ts # Contains site-wide configuration options
├── data_files/ # Strings stored as JSON files
├── images/ # Static image assets for use across the website
├── layouts/ # Components defining layout templates
│ └── MainLayout.astro # The main wrapping layout for all pages
├── pages/ # Astro files representing individual pages and website sections
│ ├── 404.astro # Custom 404 page
│ ├── blog/
│ ├── fr/ # Localized content
│ ├── contact.astro
│ ├── index.astro # The landing/home page
│ ├── insights/
│ ├── products/
│ ├── robots.txt.ts # Dynamically generates robots.txt
│ └── services.astro
└── utils/ # Shared utility functions and helpers
ไฟล์คงที่เสิร์ฟโดยตรงไปยังเบราว์เซอร์อยู่ในไดเรกทอรี public ที่รากของโครงการ
public/
└── banner-pattern.svg
Screwfast ช่วยให้สามารถปรับแต่งได้ง่ายเพื่อให้เหมาะกับความต้องการเฉพาะของคุณ นี่คือสองวิธีที่คุณสามารถกำหนดค่าส่วนประกอบและเนื้อหา:
ส่วนประกอบบางอย่างมีคุณสมบัติที่กำหนดเป็นตัวแปร typeScript ภายในไฟล์ส่วนประกอบ นี่คือตัวอย่างของการปรับแต่งส่วนประกอบ FeaturesGeneral :
// Define the string variables title and subTitle for the main heading and sub-heading text.
const title : string = "Meeting Industry Demands" ;
const subTitle : string =
"At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors." ;สำหรับคอลเลกชันของเนื้อหาเช่นข้อความรับรองหรือสถิติให้แก้ไขอาร์เรย์ที่เกี่ยวข้องของวัตถุ:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;แก้ไขเนื้อหาภายในอาร์เรย์เหล่านี้เพื่อสะท้อนข้อมูลของคุณ
คุณสามารถส่งผ่านค่าไปยังอุปกรณ์ประกอบฉากโดยตรงในไฟล์หน้าสำหรับส่วนประกอบที่ใช้ในหน้าเว็บ นี่คือตัวอย่างของส่วนประกอบ HeroSection และ ClientsSection ที่มีอุปกรณ์ประกอบฉากแบบอินไลน์:
< HeroSection
subTitle =" Top-quality hardware tools and expert construction services for every project need. "
primaryBtn =" Start Exploring "
primaryBtnURL =" /explore "
/>
< ClientsSection
title =" Trusted by Industry Leaders "
subTitle =" Experience the reliability chosen by industry giants. "
/> แก้ไขอุปกรณ์ประกอบฉากเช่น title , subTitle , primaryBtn ฯลฯ เพื่อปรับแต่งส่วนเหล่านี้ให้เป็นส่วนตัว ตรวจสอบให้แน่ใจว่าคุณรักษาโครงสร้างและประเภทข้อมูลของอุปกรณ์ประกอบฉาก
แก้ไขไฟล์ navigation.ts ภายในไดเรกทอรี utils เพื่อจัดการแถบการนำทางและลิงก์ส่วนท้าย:
แก้ไขอาร์เรย์ navBarLinks เพื่อปรับลิงก์แถบการนำทาง:
// An array of links for the navigation bar
export const navBarLinks : NavLink [ ] = [
{ name : "Home" , url : "/" } ,
{ name : "Products" , url : "/products" } ,
{ name : "Services" , url : "/services" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Contact" , url : "/contact" } ,
] ; แทนที่ name ด้วยข้อความแสดงผลและ url ด้วยเส้นทางที่เหมาะสมไปยังหน้าเว็บบนเว็บไซต์ของคุณ
ในทำนองเดียวกันปรับลิงก์ที่แสดงในส่วนท้ายโดยการแก้ไขอาร์เรย์ footerLinks :
// An array of links for the footer
export const footerLinks : FooterLinkSection [ ] = [
{
section : "Product" ,
links : [
{ name : "Tools & Equipment" , url : "/tools-equipment" } ,
{ name : "Construction Services" , url : "/construction-services" } ,
{ name : "Pricing" , url : "/pricing" } ,
] ,
} ,
{
section : "Company" ,
links : [
{ name : "About us" , url : "/about" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Careers" , url : "/careers" } ,
{ name : "Customers" , url : "/customers" } ,
] ,
} ,
] ; แต่ละส่วนภายในอาร์เรย์ footerLinks แสดงกลุ่มลิงค์ อัปเดตค่า section สำหรับส่วนหัวของกลุ่มและแก้ไข name และ url ของแต่ละลิงก์ตามต้องการ
แทนที่ URL ของตัวยึดในวัตถุ socialLinks ด้วยโปรไฟล์โซเชียลมีเดียของคุณ:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; บันทึก
อย่าลืมเพิ่ม URL ที่สมบูรณ์และถูกต้องสำหรับการนำทางให้ทำงานอย่างถูกต้อง การปรับแต่งเหล่านี้จะสะท้อนให้เห็นทั่วทั้งไซต์ Astro ของคุณส่งเสริมความสอดคล้องในทุกหน้า
เรามีสองตัวเลือกสำหรับส่วนประกอบแถบการนำทาง: Navbar.astro สำหรับ navbar และ NavbarMegaMenu.astro สำหรับเมนู mega ทั้งสองอยู่ใน src/components/sections/navbar&footer
ส่วนประกอบ Navbar.astro และ NavbarMegaMenu.astro สามารถกำหนดค่าภายใน MainLayout.astro ช่วยให้คุณเลือกรูปแบบการนำทางที่เหมาะสมกับโครงการของคุณมากที่สุด ในการปรับแต่งส่วนประกอบเหล่านี้คุณสามารถแก้ไขได้โดยตรงภายใต้ src/components/sections/navbar&footer เพื่อใช้การกำหนดค่าเฉพาะหรือการปรับปรุงการออกแบบ
ตอนนี้ Screkfast มาพร้อมกับ Starlight ซึ่งออกแบบมาเพื่อยกระดับประสบการณ์ผู้ใช้ด้วยเอกสาร ชุดรูปแบบที่ทันสมัยและสง่างามนี้รวมถึงชุดคุณสมบัติเพื่อให้เนื้อหาเข้าถึงได้ง่ายขึ้นและสนุกสนานในการนำทาง
คุณสมบัติที่สำคัญ:
ด้วย Starlight คุณสามารถเข้าถึงคุณสมบัติและการรวมระบบที่ทรงพลังรวมถึงตัวเลือกการปรับแต่งที่ครอบคลุมเพื่อให้เหมาะกับความต้องการของคุณ
บันทึก
ดำน้ำในรายการคุณสมบัติที่ครอบคลุมของ Starlight และเรียนรู้วิธีที่จะปรับปรุงกระบวนการพัฒนาของคุณโดยไปที่เว็บไซต์เอกสารของธีม
สำคัญ
หากแถบด้านข้างในไซต์ Starlight ของคุณไม่เลื่อนและคุณต้องลากแถบเลื่อนด้วยตนเองให้ลบแท็กสคริปต์ที่เกี่ยวข้องกับ Lenis Smooth Scroll Library จาก src/components/ui/starlight/Head.astro
ประสบการณ์การเลื่อนเนียนอย่างราบรื่นกับ Lenis เราได้รวม Lenis เพื่อมอบประสบการณ์การเลื่อนที่เพิ่มขึ้นซึ่งเป็นทั้งของเหลวและการตอบสนอง
นี่คือวิธีที่เราตั้งค่า Lenis ใน src/assets/scripts/lenisSmoothScroll.js :
// src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css" ;
import Lenis from "lenis" ;
const lenis = new Lenis ( ) ;
function raf ( time ) {
lenis . raf ( time ) ;
requestAnimationFrame ( raf ) ;
}
requestAnimationFrame ( raf ) ; จากนั้นเพิ่มลงใน MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >โปรดทราบว่าการเลื่อนอย่างราบรื่นอาจส่งผลกระทบต่อการเข้าถึงและประสิทธิภาพของอุปกรณ์บางอย่างดังนั้นอย่าลืมทดสอบมันอย่างครอบคลุมในสภาพแวดล้อมที่แตกต่างกัน
บันทึก
หากคุณต้องการลบ lenis และกลับไปที่พฤติกรรมการเลื่อนเริ่มต้นของเบราว์เซอร์เพียงแสดงความคิดเห็นหรือลบบรรทัดเหล่านี้ออกจากไฟล์ MainLayout.astro และ /starlight/Head.astro หากคุณใช้เอกสาร
สำหรับหน้าผลิตภัณฑ์แต่ละรายการ GSAP ได้รับการรวมเข้าด้วยกันเพื่อเพิ่มภาพเคลื่อนไหวที่มีส่วนร่วมซึ่งดำเนินการทันทีที่หน้าผลิตภัณฑ์โหลด คุณสามารถค้นหาและแก้ไขการกำหนดค่า GSAP ในส่วนสคริปต์ของไฟล์หน้าผลิตภัณฑ์ที่อยู่ที่ src/pages/products/[...slug].astro และหน้าข้อมูลเชิงลึกที่ src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >การปรับแต่งภาพเคลื่อนไหว:
โปรดปรับแต่งแอนิเมชัน GSAP ภายในสคริปต์นี้ให้เหมาะกับรูปลักษณ์และความรู้สึกของโครงการของคุณ ตัวอย่างที่ให้ไว้เป็นจุดเริ่มต้นซึ่งแสดงถึงวิธีการใช้ประโยชน์จาก GSAP สำหรับผลกระทบด้านภาพทันทีเมื่อโหลดหน้าผลิตภัณฑ์
การแก้ไขหรือลบภาพเคลื่อนไหว:
gsap.from() หรือเพิ่มการโทรแบบแอนิเมชั่น GSAP ใหม่ตามที่ต้องการบันทึก
เราได้เลือกที่จะทำให้การรวมและมุ่งเน้น แต่เอกสารที่ครอบคลุมของ GSAP สามารถอ้างถึงสำหรับภาพเคลื่อนไหวที่ซับซ้อนมากขึ้น: เอกสาร GSAP
เพื่อให้ได้การออกแบบที่สะอาดและกว้างขวางยิ่งขึ้นแถบเลื่อนเริ่มต้นได้ถูกลบออก ในขณะที่ตัวเลือกนี้เหมาะกับเป้าหมายความงามของโครงการ แต่สิ่งสำคัญคือต้องพิจารณาว่าการซ่อนแถบเลื่อนอาจส่งผลกระทบต่อการเข้าถึงและประสบการณ์ของผู้ใช้ เราขอแนะนำให้ประเมินการตัดสินใจออกแบบนี้ภายในบริบทของฐานผู้ใช้ของคุณและความต้องการของพวกเขา
สำหรับผู้ที่ชอบแถบเลื่อนแบบกำหนดเองเราขอแนะนำให้ใช้ปลั๊กอิน tailwind-scrollbar ซึ่งเพิ่มยูทิลิตี้ CSS tailwind สำหรับสไตล์สกรอลบาร์ซึ่งช่วยให้สามารถปรับแต่งได้มากขึ้นซึ่งสามารถตอบสนองมาตรฐานการเข้าถึงได้
บันทึก
หากคุณต้องการส่งคืนแถบเลื่อนเริ่มต้นคุณสามารถแสดงความคิดเห็นหรือลบ CSS ต่อไปนี้ออกจาก src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > นอกจากนี้อัปเดตแท็ก <html> เพื่อลบคลาส scrollbar-hide ซึ่งส่งผลให้:
< html lang =" en " class =" scroll-pt-16 " >การกำหนดค่า SEO ในเทมเพลต Screwfast ได้รับการออกแบบมาเพื่อเพิ่มขีดความสามารถให้ผู้ใช้ในการเพิ่มประสิทธิภาพการมองเห็นของเว็บไซต์บนเครื่องมือค้นหาและแพลตฟอร์มโซเชียลมีเดีย เอกสารนี้สรุปรายละเอียดการใช้งานและคำแนะนำการใช้งานสำหรับการจัดการการตั้งค่า SEO ได้อย่างมีประสิทธิภาพ
การกำหนดค่า SEO ได้รับการรวมศูนย์โดยใช้ไฟล์ constants.ts ไฟล์นี้จัดการข้อมูลที่เกี่ยวข้องกับ SEO เช่นชื่อหน้าคำอธิบายข้อมูลที่มีโครงสร้างและแท็กกราฟเปิดให้วิธีการที่มีโครงสร้างและจัดการได้มากขึ้นในการจัดการ SEO
ในการปรับแต่งการตั้งค่า SEO ให้แก้ไขค่าในไฟล์ constants.ts การกำหนดค่าที่สำคัญ ได้แก่ ไซต์ SEO และ OG ช่วยให้นักพัฒนาสามารถกำหนดพารามิเตอร์ SEO ทั่วทั้งไซต์
// constants.ts
export const SITE = {
title : " ScrewFast " ,
// Other SITE properties...
} ;
export const SEO = {
title : SITE . title ,
// Other SEO properties...
} ;
export const OG = {
title : ` ${ SITE . title }: Hardware Tools & Construction Services ` ,
// Other OG properties...
} ; เมื่อใช้ข้อมูลเมตาภายในเลย์เอาต์ของคุณเช่น MainLayout.astro คุณสามารถผ่านค่าข้อมูลเมตาที่ต้องการเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบ Meta :
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />สำหรับการแทนที่ SEO เฉพาะหน้านักพัฒนาสามารถผ่านคุณสมบัติสคีมาแต่ละตัวภายในไฟล์หน้าเฉพาะ
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
ด้วยการตั้งค่านี้ส่วนประกอบเมตาจะได้รับคำอธิบายเมตาที่กำหนดเองและนำไปใช้กับข้อมูลเมตาของหน้า หากไม่มีการผ่านค่าที่กำหนดเองค่าเริ่มต้นจาก Meta.astro จะถูกใช้แทน
สำหรับกลยุทธ์ SEO ที่แข็งแกร่งยิ่งขึ้นคุณสามารถสร้างคุณสมบัติเพิ่มเติมในส่วนประกอบ Meta.astro ตัวอย่างเช่นคุณอาจต้องการรวมแท็กกราฟเปิดเฉพาะสำหรับวันที่เผยแพร่บทความหรือแท็กสำหรับข้อมูลเมตาเฉพาะของ Twitter
ข้อมูลที่มีโครงสร้างในรูปแบบ JSON-LD สามารถจัดการได้โดยส่วนประกอบ Meta.astro ปรับปรุงวิธีการที่เครื่องมือค้นหาเข้าใจเนื้อหาหน้าเว็บของคุณและอาจเพิ่มผลการค้นหาด้วยตัวอย่างที่หลากหลาย ปรับเปลี่ยนคุณสมบัติ structuredData ด้วยประเภทและคุณสมบัติ schema.org ที่เกี่ยวข้อง:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>ในขณะที่เทมเพลตมีโซลูชัน SEO ที่กำหนดเองคุณอาจเลือกที่จะใช้การรวม Astro เช่น Astro SEO สำหรับคุณสมบัติ SEO เพิ่มเติมและการปรับให้เหมาะสม การรวมแพ็คเกจดังกล่าวอาจให้การจัดการข้อมูลเมตาอัตโนมัติเพิ่มเติมและฟังก์ชั่นที่เน้น SEO เพิ่มเติม
robots.txt ถูกสร้างขึ้นแบบไดนามิกโดยใช้รหัสที่พบใน SRC/Pages/Robots.txt.ts การกำหนดค่านี้เป็นไปตามตัวอย่างจากเอกสาร Astro:
import type { APIRoute } from 'astro' ;
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${ new URL ( 'sitemap-index.xml' , import . meta . env . SITE ) . href }
` . trim ( ) ;
export const GET : APIRoute = ( ) => {
return new Response ( robotsTxt , {
headers : {
'Content-Type' : 'text/plain; charset=utf-8' ,
} ,
} ) ;
} ; การเพิ่มไฟล์ .vscode/settings.json ในไดเรกทอรีรูทจะช่วยให้การรวมรูปภาพเข้าสู่คอลเลกชันเนื้อหาภายในตัวแก้ไข Markdown คุณสมบัตินี้ช่วยให้การสร้างลิงก์ Markdown อย่างง่ายดายด้วยไฟล์สื่อและการคัดลอกไปยังพื้นที่ทำงานอย่างไร้รอยต่อ
()src/images/content/<path> การวาง getting-started.png ลงใน src/content/post-1.md ผลลัพธ์ใน:
post-1.md src/images/content/post-1/getting-started.png บันทึก
อย่าลืมกด Shift ในขณะที่ทิ้งภาพ
เพิ่มประสิทธิภาพของเว็บไซต์ของคุณด้วยการรวม Astro ในตัวเหล่านี้:
astro.config.mjs : export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs : export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;สิ่งที่ยอดเยี่ยมเกี่ยวกับ Astro คือระบบนิเวศที่หลากหลายของการบูรณาการช่วยให้คุณสามารถปรับฟังก์ชั่นโครงการตามความต้องการที่แน่นอนของคุณ อย่าลังเลที่จะสำรวจหน้า Astro Integrations และเพิ่มความสามารถเพิ่มเติมตามที่คุณเห็น
โครงการนี้สร้างขึ้นโดยใช้เครื่องมือและเทคโนโลยีที่หลากหลายที่ช่วยเพิ่มประสิทธิภาพการบำรุงรักษาและประสบการณ์นักพัฒนา ด้านล่างเป็นรายการเครื่องมือสำคัญและบทบาทของพวกเขาในโครงการ:
ส่วนประกอบแบบอินเทอร์แอคทีฟเช่น Navbars, Modals และหีบเพลงถูกสร้างขึ้นโดยใช้ Preline UI ซึ่งเป็นไลบรารีส่วนประกอบโอเพนซอร์ซที่ครอบคลุม
การจัดแต่งทรงผมในโครงการของเราใช้ประโยชน์จากชั้นเรียนยูทิลิตี้แรกที่เสนอโดย Tailwind CSS วิธีการนี้ช่วยให้เราสามารถสร้างเลย์เอาต์และส่วนประกอบที่กำหนดเองด้วยความเร็วและประสิทธิภาพ
เพื่อให้แน่ใจว่าการจัดรูปแบบรหัสที่สอดคล้องกันโดยเฉพาะอย่างยิ่งสำหรับการเรียงลำดับชั้นเรียนเราได้รวมปลั๊กอิน prettier-plugin-tailwindcss การกำหนดค่าต่อไปนี้ถูกตั้งค่าในไฟล์ .prettierrc ที่รูทของโครงการ:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} เราปรับใช้โครงการของเราเกี่ยวกับ Vercel โดยใช้ประโยชน์จากแพลตฟอร์มที่แข็งแกร่งสำหรับเวิร์กโฟลว์ CI/CD ที่ราบรื่น การใช้ vercel.json เราตั้งค่าส่วนหัวความปลอดภัยที่เข้มงวดและนโยบายการแคชเพื่อให้มั่นใจว่าการปฏิบัติตามความปลอดภัยและแนวทางปฏิบัติที่ดีที่สุด:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} เพื่อประสิทธิภาพของไซต์ที่ดีที่สุดเราโพสต์ไฟล์ HTML ของเราด้วย process-html.mjs สคริปต์ที่กำหนดเองที่ลด HTML หลังจากเฟสบิลด์เพื่อลดขนาดไฟล์และปรับปรุงเวลาโหลด
นี่คือตัวอย่างจากสคริปต์ Minification HTML ของเราใน process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;เราขอแนะนำให้คุณอ้างถึงเอกสารรายละเอียดสำหรับเครื่องมือแต่ละตัวเพื่อทำความเข้าใจความสามารถของพวกเขาอย่างเต็มที่และวิธีที่พวกเขามีส่วนร่วมในโครงการ:
หากคุณสนใจที่จะช่วยเหลือคุณสามารถมีส่วนร่วมได้หลายวิธี:
โครงการนี้เปิดตัวภายใต้ใบอนุญาต MIT โปรดอ่านไฟล์ใบอนุญาตสำหรับรายละเอียดเพิ่มเติม
หมายเหตุ: เทมเพลตเว็บไซต์นี้ไม่มีส่วนเกี่ยวข้องกับ บริษัท ที่แสดง โลโก้ใช้เพื่อการสาธิตเท่านั้นและควรถูกแทนที่ในเวอร์ชันที่กำหนดเอง
