cgartlab.github.io
1.0.0
Screwfast adalah templat sumber terbuka yang dirancang untuk pengaturan proyek web yang cepat dan efisien, memadukan minimalisme dengan fungsionalitas . Apakah Anda menampilkan portofolio, meluncurkan halaman arahan perusahaan, atau menjalankan blog, Screwfast menyediakan semua yang Anda butuhkan. Dengan menggabungkan kekuatan Astro, Tailwind CSS, dan Prinine UI, template ini menawarkan solusi fungsional dan estetis yang menyenangkan untuk kehadiran web Anda.
Lihat demo langsung
Komponen berbagi sosial :
Komponen tombol bookmark :
localStorage .localStorage dengan cookie untuk bertahan posting yang ditandai.Komponen pasca umpan balik :
Integrasi Tema Dokumentasi Starlight :
Ikon Set Komponen :
<Icon name="iconName" /> di komponen astro Anda.Fitur Internasionalisasi (I18N) :
LanguagePicker khusus.monolingual-site . Dynamic Daftar Isi (TOC) dengan indikator kemajuan gulir :
Catatan
Saat ini, tidak ada perbaikan yang direncanakan atau bug yang diketahui. Jika Anda menghadapi masalah apa pun, silakan laporkan di halaman masalah kami atau memulai diskusi untuk berbagi ide, saran, atau mengajukan pertanyaan.
Panduan ini akan memberi Anda langkah -langkah yang diperlukan untuk mengatur dan membiasakan diri dengan Proyek Astro di mesin pengembangan lokal Anda.
Untuk memulai, klik tombol Use this template (yang hijau besar di kanan atas) untuk membuat repo Anda sendiri dari templat ini di akun GitHub Anda.
Setelah repositori Anda dibuat, Anda dapat mengkloningnya ke mesin lokal Anda menggunakan perintah berikut:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Mulailah dengan menginstal dependensi proyek. Buka terminal Anda, arahkan ke direktori root proyek, dan jalankan:
npm install Perintah ini akan menginstal semua dependensi yang diperlukan yang ditentukan dalam file package.json .
Dengan ketergantungan yang diinstal, Anda dapat menggunakan skrip NPM berikut untuk mengelola siklus hidup pengembangan proyek Anda:
npm run dev : Memulai server pengembangan lokal dengan pemuatan ulang panas diaktifkan.npm run preview : Melayani output build Anda secara lokal untuk pratinjau sebelum penyebaran.npm run build : Bundles situs Anda ke dalam file statis untuk produksi.Untuk bantuan terperinci dengan perintah Astro Cli, kunjungi dokumentasi Astro.
Sebelum penempatan, Anda perlu membuat build produksi:
npm run build Ini menciptakan dist/ Direktori dengan situs yang Anda bangun (dapat dikonfigurasi melalui Outdir di Astro).
Klik tombol di bawah ini untuk mulai menggunakan proyek Anda di Vercel:
Klik tombol di bawah ini untuk mulai menggunakan proyek Anda di Netlify:
Screwfast mengatur komponen modular, konten, dan tata letak untuk merampingkan pengembangan dan manajemen konten.
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
File statis yang disajikan langsung ke browser berada di dalam direktori public pada akar proyek.
public/
└── banner-pattern.svg
Screwfast memungkinkan untuk kustomisasi yang mudah sesuai dengan kebutuhan spesifik Anda. Berikut adalah beberapa cara Anda dapat mengonfigurasi komponen dan konten:
Beberapa komponen memiliki properti yang didefinisikan sebagai variabel TypeScript dalam file komponen. Berikut adalah contoh menyesuaikan komponen 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." ;Untuk koleksi konten seperti testimonial atau statistik, edit array objek yang sesuai:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Ubah konten dalam array ini untuk mencerminkan data Anda.
Anda dapat meneruskan nilai ke alat peraga secara langsung di file halaman untuk komponen yang digunakan di seluruh halaman. Berikut adalah contoh komponen HeroSection dan ClientsSection dengan alat peraga inline:
< 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. "
/> Edit alat peraga seperti title , subTitle , primaryBtn , dll., Untuk mempersonalisasi bagian -bagian ini. Pastikan Anda mempertahankan struktur dan tipe data alat peraga.
Edit file navigation.ts dalam direktori utils untuk mengelola bilah navigasi dan tautan footer:
Edit array navBarLinks untuk menyesuaikan tautan bilah navigasi:
// 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" } ,
] ; Ganti name dengan teks tampilan dan url dengan jalur yang sesuai ke halaman di situs Anda.
Demikian pula, sesuaikan tautan yang ditampilkan di footer dengan mengedit array 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" } ,
] ,
} ,
] ; Setiap bagian dalam array footerLinks mewakili sekelompok tautan. Perbarui nilai section untuk judul grup dan ubah name dan url setiap tautan sesuai kebutuhan.
Ganti URL placeholder di objek socialLinks dengan profil media sosial Anda:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Catatan
Ingatlah untuk menambahkan URL yang lengkap dan valid agar navigasi berfungsi dengan baik. Kustomisasi ini akan mencerminkan di seluruh situs Astro Anda, mempromosikan konsistensi di semua halaman.
Kami memiliki dua opsi untuk komponen bilah navigasi: Navbar.astro untuk navbar reguler dan NavbarMegaMenu.astro untuk menu mega. Keduanya terletak di src/components/sections/navbar&footer .
Komponen Navbar.astro dan NavbarMegaMenu.astro dapat dikonfigurasi dalam MainLayout.astro , memungkinkan Anda untuk memilih gaya navigasi yang paling sesuai dengan proyek Anda. Untuk menyesuaikan komponen -komponen ini, Anda dapat memodifikasinya secara langsung di bawah src/components/sections/navbar&footer untuk menerapkan konfigurasi spesifik atau pembaruan desain.
Screwfast sekarang dilengkapi dengan Starlight, dirancang untuk meningkatkan pengalaman pengguna dengan dokumentasi. Tema modern dan elegan ini mencakup serangkaian fitur untuk membuat konten lebih mudah diakses dan menyenangkan untuk dinavigasi.
Fitur Utama:
Dengan Starlight, Anda mendapatkan akses ke fitur dan integrasi yang kuat, serta opsi kustomisasi yang luas sesuai dengan kebutuhan Anda.
Catatan
Selami daftar fitur komprehensif Starlight dan pelajari bagaimana dapat merampingkan proses pengembangan Anda dengan mengunjungi situs dokumentasi tema.
Penting
Jika bilah samping di situs Starlight Anda tidak menggulir, dan Anda harus secara manual menyeret scrollbar, lepaskan tag skrip yang terkait dengan Lenis Smooth Scroll Library dari src/components/ui/starlight/Head.astro .
Rasakan mentega yang halus menggulir dengan lenis. Kami telah mengintegrasikan Lenis untuk memberikan pengalaman menggulir yang ditingkatkan yang cairan dan responsif.
Begini cara kami mengatur lenis di 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 ) ; Dan kemudian tambahkan ke MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Harap dicatat bahwa pengguliran yang halus dapat memengaruhi aksesibilitas dan kinerja pada beberapa perangkat, jadi pastikan untuk mengujinya secara komprehensif di berbagai lingkungan.
Catatan
Jika Anda ingin menghapus Lenis dan kembali ke perilaku pengguliran default browser, cukup komentari atau hapus baris ini dari file MainLayout.astro dan /starlight/Head.astro jika Anda menggunakan dokumen.
Untuk halaman produk individual, GSAP telah diintegrasikan untuk menambahkan animasi yang menarik yang dijalankan segera setelah halaman produk dimuat. Anda dapat menemukan dan memodifikasi konfigurasi GSAP di bagian skrip file halaman produk yang terletak di src/pages/products/[...slug].astro dan halaman wawasan di src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Menyesuaikan Animasi:
Harap sesuaikan animasi GSAP dalam skrip ini agar sesuai dengan tampilan dan nuansa proyek Anda. Contoh yang disediakan adalah titik awal, mewakili cara memanfaatkan GSAP untuk dampak visual langsung sebagai pemuatan halaman produk.
Memodifikasi atau menghapus animasi:
gsap.from() , atau tambahkan panggilan animasi GSAP baru sesuai kebutuhan.Catatan
Kami telah memilih untuk menjaga integrasi tetap ramping dan fokus, tetapi dokumentasi komprehensif GSAP dapat dirujuk untuk animasi yang lebih kompleks: dokumentasi GSAP.
Untuk mencapai desain yang lebih bersih dan lebih luas, scrollbar default telah dihapus secara visual. Meskipun pilihan ini sesuai dengan tujuan estetika proyek, penting untuk mempertimbangkan bahwa menyembunyikan scrollbar terkadang dapat memengaruhi aksesibilitas dan pengalaman pengguna. Kami merekomendasikan mengevaluasi keputusan desain ini dalam konteks basis pengguna Anda dan kebutuhan mereka.
Bagi mereka yang lebih suka scrollbar bergaya khusus, kami sarankan menggunakan plugin tailwind-scrollbar, yang menambahkan utilitas CSS tailwind untuk gaya scrollbar, memungkinkan untuk kustomisasi yang lebih terkontrol yang juga dapat memenuhi standar aksesibilitas.
Catatan
Jika Anda ingin mengembalikan scrollbar default, Anda dapat berkomentar atau menghapus CSS berikut dari src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > Selain itu, perbarui tag <html> untuk menghapus kelas scrollbar-hide , menghasilkan:
< html lang =" en " class =" scroll-pt-16 " >Konfigurasi SEO dalam template Screwfast dirancang untuk memberdayakan pengguna dalam mengoptimalkan visibilitas situs web mereka di mesin pencari dan platform media sosial. Dokumentasi ini menguraikan rincian implementasi dan instruksi penggunaan untuk mengelola pengaturan SEO secara efektif.
Konfigurasi SEO telah terpusat menggunakan file constants.ts . File ini mengelola data terkait SEO seperti judul halaman, deskripsi, data terstruktur, dan tag grafik terbuka, memberikan pendekatan yang lebih terstruktur dan dapat dikelola untuk manajemen SEO.
Untuk menyesuaikan pengaturan SEO, ubah nilai -nilai dalam file constants.ts . Konfigurasi utama termasuk Situs, SEO, dan OG, memungkinkan pengembang untuk mendefinisikan parameter SEO di seluruh lokasi.
// 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...
} ; Saat menerapkan metadata di dalam tata letak Anda, seperti MainLayout.astro , Anda dapat memberikan nilai metadata yang diinginkan sebagai alat peraga ke komponen Meta :
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Untuk overrides SEO khusus halaman, pengembang dapat melewati properti skema individual dalam file halaman tertentu.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
Dengan pengaturan ini, komponen meta menerima deskripsi meta khusus dan menerapkannya ke metadata halaman. Jika tidak ada nilai khusus yang dilewati, default dari Meta.astro akan digunakan sebagai gantinya.
Untuk strategi SEO yang lebih kuat, Anda dapat membuat properti tambahan dalam komponen Meta.astro . Misalnya, Anda mungkin ingin memasukkan tag grafik terbuka tertentu untuk tanggal penerbitan atau tag artikel untuk metadata khusus Twitter.
Data terstruktur dalam format JSON-LD dapat dikelola oleh komponen Meta.astro , meningkatkan bagaimana mesin pencari memahami konten halaman Anda dan berpotensi meningkatkan hasil pencarian dengan cuplikan yang kaya. Ubah Properti structuredData dengan jenis dan properti Schema.org yang relevan:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>Sementara template menyediakan solusi SEO khusus, Anda dapat memilih untuk memanfaatkan integrasi Astro seperti Astro SEO untuk fitur dan optimisasi SEO tambahan. Mengintegrasikan paket semacam itu mungkin memberikan lebih banyak manajemen metadata otomatis dan fungsionalitas tambahan yang berfokus pada SEO.
robots.txt dihasilkan secara dinamis menggunakan kode yang ditemukan di src/halaman/robots.txt.ts. Konfigurasi ini mengikuti contoh dari dokumen 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' ,
} ,
} ) ;
} ; Penambahan file .vscode/settings.json dalam direktori root memfasilitasi integrasi gambar langsung ke dalam koleksi konten dalam editor penurunan harga. Fitur ini memungkinkan pembuatan tautan Markdown yang mudah dengan file media dan menyalin secara mulus ke ruang kerja.
() .src/images/content/<path> . Menempelkan getting-started.png ke dalam src/content/post-1.md hasil di:
 ke post-1.md .src/images/content/post-1/getting-started.png . Catatan
Ingatlah untuk menekan shift sambil menjatuhkan gambar.
Maksimalkan efisiensi situs web Anda dengan integrasi Astro bawaan ini:
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 ( ) ] ,
} ) ;Hal yang hebat tentang Astro adalah ekosistem integrasi yang kaya, memungkinkan Anda untuk menyesuaikan fungsi proyek dengan kebutuhan Anda. Jangan ragu untuk menjelajahi halaman Integrasi Astro dan menambahkan kemampuan tambahan sesuai keinginan Anda.
Proyek ini dibangun menggunakan berbagai alat dan teknologi yang meningkatkan kinerja, pemeliharaan, dan pengalaman pengembang. Di bawah ini adalah daftar alat utama dan perannya dalam proyek:
Komponen interaktif seperti navbars, modal, dan akordeon dibangun menggunakan preline UI, perpustakaan komponen open-source yang komprehensif.
Styling di seluruh proyek kami memanfaatkan kelas utilitas-pertama yang ditawarkan oleh Tailwind CSS. Metodologi ini memungkinkan kita untuk membuat tata letak dan komponen khusus dengan kecepatan dan efisiensi.
Untuk memastikan pemformatan kode yang konsisten, terutama untuk penyortiran kelas, kami telah mengintegrasikan plugin prettier-plugin-tailwindcss . Konfigurasi berikut diatur dalam file .prettierrc di root proyek:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Kami menggunakan proyek kami di Vercel, memanfaatkan platform yang kuat untuk alur kerja CI/CD yang mulus. Menggunakan vercel.json , kami menetapkan header keamanan yang ketat dan kebijakan caching, memastikan kepatuhan terhadap praktik terbaik keamanan dan kinerja:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Untuk kinerja situs yang optimal, kami memposting file HTML kami dengan process-html.mjs , skrip khusus yang meminimalkan HTML setelah fase build untuk mengurangi ukuran file dan meningkatkan waktu pemuatan.
Berikut adalah cuplikan dari skrip minifikasi HTML kami di process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Kami mendorong Anda untuk merujuk pada dokumentasi terperinci untuk setiap alat untuk sepenuhnya memahami kemampuan mereka dan bagaimana mereka berkontribusi pada proyek:
Jika Anda tertarik untuk membantu, Anda dapat berkontribusi dalam beberapa cara:
Proyek ini dirilis di bawah lisensi MIT. Harap baca file lisensi untuk lebih jelasnya.
Catatan: Template situs web ini tidak memiliki afiliasi dengan perusahaan yang ditampilkan. Logo hanya digunakan untuk tujuan demonstrasi dan harus diganti dalam versi yang disesuaikan.
