cgartlab.github.io
1.0.0
ScrewFast ist eine Open-Source-Vorlage, die für eine schnelle und effiziente Webprojekt-Setup entwickelt wurde und Minimalismus mit Funktionalität verbindet. Unabhängig davon, ob Sie ein Portfolio vorstellen, eine Landing -Landeseite des Unternehmens starten oder einen Blog ausführen, bietet ScrewFast alles, was Sie benötigen. Durch die Kombination der Kraft des Astro, des Rückenwind -CSS und der Preline -Benutzeroberfläche bietet diese Vorlage eine funktionale und ästhetisch ansprechende Lösung für Ihre Webpräsenz.
Live -Demo anzeigen
Soziale Aktienkomponente :
Lesezeichenknopfkomponente :
localStorage zu einem Lesezeichen zu bieten.localStorage durch Cookies, um mit Lesezeichen versehen zu sein.Post -Feedback -Komponente :
Starlight -Dokumentationsthema -Integration :
Icon Set -Komponente :
<Icon name="iconName" /> .Internationalisierung (I18N) Funktionen :
LanguagePicker -Komponente.monolingual-site Niederlassung zugreifen. Dynamisches Inhaltsverzeichnis (TOC) mit Scroll -Fortschrittsindikator :
Notiz
Derzeit gibt es keine geplanten Verbesserungen oder bekannten Fehler. Wenn Sie auf Probleme stoßen, melden Sie sie bitte auf unserer Themenseite oder beginnen Sie eine Diskussion, um Ideen, Vorschläge oder Fragen zu teilen.
Dieser Leitfaden bietet Ihnen die erforderlichen Schritte, um sich mit dem Astro -Projekt auf Ihrer lokalen Entwicklungsmaschine einzurichten und vertraut zu machen.
Klicken Sie, um zu beginnen, auf die Schaltfläche Use this template (die große grüne Grüne oben rechts), um Ihr eigenes Repo aus dieser Vorlage in Ihrem Github -Konto zu erstellen.
Sobald Ihr Repository erstellt wurde, können Sie es mit den folgenden Befehlen an Ihre lokale Maschine klonen:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Beginnen Sie mit der Installation der Projektabhängigkeiten. Öffnen Sie Ihr Terminal, navigieren Sie zum Root -Verzeichnis des Projekts und führen Sie aus:
npm install Dieser Befehl installiert alle erforderlichen Abhängigkeiten, die in der Datei package.json definiert sind.
Mit installierten Abhängigkeiten können Sie die folgenden NPM -Skripte verwenden, um den Entwicklungslebenszyklus Ihres Projekts zu verwalten:
npm run dev : Startet einen lokalen Entwicklungsserver mit aktiviertem Reloading.npm run preview : Serviert Ihre Build -Ausgabe lokal für die Vorschau vor der Bereitstellung.npm run build : Bündelt Ihre Website in statische Dateien für die Produktion.Ausführliche Hilfe bei Astro Cli -Befehlen finden Sie in Astros Dokumentation.
Vor dem Einsatz müssen Sie einen Produktionsbau erstellen:
npm run build Dadurch wird ein dist/ Verzeichnis mit Ihrer Baustelle erstellt (konfigurierbar über Outdir in Astro).
Klicken Sie auf die Schaltfläche unten, um Ihr Projekt auf Vercel bereitzustellen:
Klicken Sie auf die Schaltfläche unten, um mit der Bereitstellung Ihres Projekts auf Netlify zu starten:
Screwfast organisiert modulare Komponenten, Inhalte und Layouts, um die Entwicklung und die Inhaltsführung zu optimieren.
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
Statische Dateien, die direkt im Browser gedient haben, befinden sich im public Verzeichnis zum Wurzel des Projekts.
public/
└── banner-pattern.svg
ScrewFast ermöglicht eine einfache Anpassung, die Ihren spezifischen Anforderungen entspricht. Hier sind einige Möglichkeiten, wie Sie Komponenten und Inhalte konfigurieren können:
Einige Komponenten haben Eigenschaften, die als TypeScript -Variablen in der Komponentendatei definiert sind. Hier ist ein Beispiel für die Anpassung der FeaturesGeneral -Komponente:
// 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." ;Bearbeiten Sie das entsprechende Array von Objekten für Inhalte wie Testimonials oder Statistiken:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Ändern Sie den Inhalt in diesen Arrays, um Ihre Daten widerzuspiegeln.
Sie können Werte an Requisiten direkt in den Seitendateien für Komponenten übergeben, die über Seiten verwendet wurden. Hier ist ein Beispiel für eine HeroSection und ClientsSection mit Inline -Requisiten:
< 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. "
/> Bearbeiten Sie die Requisiten wie title , subTitle , primaryBtn usw., um diese Abschnitte zu personalisieren. Stellen Sie sicher, dass Sie die Struktur und Datentypen der Requisiten beibehalten.
Bearbeiten Sie die Datei der navigation.ts -Datei im utils -Verzeichnis, um die Navigationsleiste und Fußzeilenlinks zu verwalten:
Bearbeiten Sie das navBarLinks -Array, um die Navigationsleisten -Links anzupassen:
// 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" } ,
] ; Ersetzen Sie name durch den Anzeigetext und url durch den entsprechenden Pfad zu den Seiten auf Ihrer Website.
Passen Sie die im Fußzeilen angezeigten Links an, indem Sie das footerLinks -Array bearbeiten:
// 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" } ,
] ,
} ,
] ; Jeder Abschnitt innerhalb des footerLinks -Arrays repräsentiert eine Gruppe von Links. Aktualisieren Sie den section für die Gruppenüberschrift und ändern Sie name und url jedes Links nach Bedarf.
Ersetzen Sie die Platzhalter -URLs im socialLinks -Objekt durch Ihre Social -Media -Profile:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Notiz
Denken Sie daran, vollständige und gültige URLs hinzuzufügen, damit die Navigation ordnungsgemäß funktioniert. Diese Anpassungen werden auf Ihrer Astro -Website widerspiegeln und die Konsistenz auf allen Seiten fördern.
Wir haben zwei Optionen für die Navigationsleistenkomponenten: Navbar.astro für eine reguläre Navigationsleiste und NavbarMegaMenu.astro für ein Mega -Menü. Beide befinden sich in src/components/sections/navbar&footer .
Die Komponenten Navbar.astro und NavbarMegaMenu.astro können in MainLayout.astro konfiguriert werden, sodass Sie den Navigationsstil auswählen können, der am besten zu Ihrem Projekt passt. Um diese Komponenten anzupassen, können Sie sie direkt unter src/components/sections/navbar&footer ändern, um bestimmte Konfigurationen oder Design -Updates anzuwenden.
ScrewFast ist jetzt mit Starlight ausgestattet, um die Benutzererfahrung mit Dokumentation zu erhöhen. Dieses moderne und elegante Thema enthält eine Reihe von Funktionen, um Inhalte zugänglicher und angenehmer zu navigieren.
Schlüsselmerkmale:
Mit Starlight erhalten Sie Zugriff auf leistungsstarke Funktionen und Integrationen sowie umfangreiche Anpassungsoptionen, die Ihren Anforderungen entsprechen.
Notiz
Tauchen Sie in die umfassende Feature -Liste der Starlight und erfahren Sie, wie Sie Ihren Entwicklungsprozess optimieren können, indem Sie die Dokumentationsseite des Themas besuchen.
Wichtig
Wenn die Seitenleiste in Ihrer Starlight -Site nicht scrollt und Sie die Bildlaufleiste manuell ziehen müssen, entfernen Sie das Skript -Tag mit der Lenis Smooth Scroll Library aus src/components/ui/starlight/Head.astro .
Erleben Sie Buttery Smooth Scrollen mit Lenis. Wir haben Lenis integriert, um ein verbessertes Bildlauferlebnis zu bieten, das sowohl flüssig als auch reaktionsschnell ist.
So richten wir Lenis in src/assets/scripts/lenisSmoothScroll.js ein:
// 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 ) ; Und fügen Sie es dann zu MainLayout.astro hinzu:
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Bitte beachten Sie, dass ein reibungsloses Scrollen auf einigen Geräten die Zugänglichkeit und Leistung beeinflussen kann. Testen Sie es daher umfassend in verschiedenen Umgebungen.
Notiz
Wenn Sie Lenis entfernen und zum Standard -Scrolling -Verhalten des Browsers zurückkehren möchten, kommentieren Sie diese Zeilen einfach aus der MainLayout.astro -Datei und /starlight/Head.astro , wenn Sie DOCs verwenden.
Für einzelne Produktseiten wurde GSAP integriert, um ansprechende Animationen hinzuzufügen, die ausgeführt werden, sobald die Produktseite geladen wird. Sie finden und ändern die GSAP -Konfiguration in den Skriptabschnitten der Produkt -Dateidatei unter src/pages/products/[...slug].astro und auf der Seite Insights bei src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Anpassen von Animationen:
Bitte passen Sie die GSAP -Animationen in diesem Skript an, um das Erscheinungsbild und das Gefühl Ihres Projekts anzupassen. Das angegebene Beispiel ist ein Ausgangspunkt, der darstellt, wie GSAP für sofortige visuelle Auswirkungen als Produktseite nutzt.
Animationen ändern oder entfernen:
gsap.from() oder fügen Sie nach Bedarf neue Animationsaufrufe für GSAP hinzu.Notiz
Wir haben uns entschieden, die Integration schlank und fokussiert zu halten. Die umfassende Dokumentation von GSAP kann jedoch für komplexere Animationen bezeichnet werden: GSAP -Dokumentation.
Um ein saubereres und geräumigeres Design zu erreichen, wurde die Standard -Scrollbar visuell entfernt. Diese Wahl entspricht zwar den ästhetischen Zielen des Projekts, aber es ist wichtig zu berücksichtigen, dass das Verstecken von Scrollbars manchmal die Zugänglichkeit und Benutzererfahrung beeinflussen kann. Wir empfehlen, diese Entwurfsentscheidung im Kontext Ihrer Benutzerbasis und ihrer Anforderungen zu bewerten.
Für diejenigen, die scomed-im-Stil-Scrollbars bevorzugen, empfehlen wir die Verwendung des Tailwind-Scrollbar-Plugins, das die CSS-Dienstprogramme für Scrollbar-Stile für die Tailwind-CSS-Styles hinzufügt, um eine stärkere kontrollierte Anpassung zu ermöglichen, die auch die Standards der Zugänglichkeit entsprechen kann.
Notiz
Wenn Sie die Standard -Scrollbar zurückgeben möchten, können Sie die folgenden CSS von src/layouts/MainLayout.astro aus kommentieren oder entfernen:
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > Aktualisieren Sie außerdem das <html> -Tag, um die scrollbar-hide -Klasse zu entfernen, und führt zu::
< html lang =" en " class =" scroll-pt-16 " >Die SEO -Konfiguration in der Screwfast -Vorlage soll den Benutzern die Sichtbarkeit ihrer Website auf Suchmaschinen und Social -Media -Plattformen optimieren. Diese Dokumentation beschreibt die Implementierungsdetails und Verwendungsanweisungen für die effektive Verwaltung von SEO -Einstellungen.
Die SEO -Konfiguration wurde mit der Datei constants.ts zentralisiert. Diese Datei verwaltet SEO-bezogene Daten wie Seitentitel, Beschreibungen, strukturierte Daten und offene Diagramm-Tags und bietet einen strukturierteren und überschaubaren Ansatz für das SEO-Management.
Um die SEO -Einstellungen anzupassen, ändern Sie die Werte in der Datei constants.ts . Zu den wichtigsten Konfigurationen gehören Site, SEO und OG, mit denen Entwickler ortsweite SEO-Parameter definieren können.
// 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...
} ; Wenn Sie Metadaten innerhalb Ihrer Layouts wie MainLayout.astro anwenden, können Sie die gewünschten Metadatenwerte als Requisiten an die Meta -Komponente übergeben:
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Für Seiten-spezifische SEO-Überschreibungen können Entwickler einzelne Schema-Eigenschaften in bestimmte Seitendateien übergeben.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
Mit diesem Setup empfängt die Meta -Komponente die benutzerdefinierte Meta -Beschreibung und wendet sie auf die Metadaten der Seite an. Wenn kein benutzerdefinierter Wert übergeben wird, wird der Standard von Meta.astro stattdessen verwendet.
Für eine robustere SEO -Strategie können Sie zusätzliche Eigenschaften in der Meta.astro -Komponente erstellen. Sie können beispielsweise bestimmte offene Diagramm-Tags für Artikelverlagsdaten oder -Tags für Twitter-spezifische Metadaten enthalten.
Strukturierte Daten im JSON-LD-Format können von der Meta.astro Komponente verwaltet werden, wodurch die Verständnis der Suchmaschinen Ihren Seiteninhalt verstärkt und die Suchergebnisse mit reichhaltigen Snippets verbessern. Ändern Sie die structuredData -Eigenschaft mit relevanten Schema.org -Typen und Eigenschaften:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>Während die Vorlage eine benutzerdefinierte SEO -Lösung bietet, können Sie eine Astro -Integration wie Astro SEO für zusätzliche SEO -Funktionen und -Optimierungen verwenden. Die Integration eines solchen Pakets kann automatisierteres Metadatenmanagement und zusätzliche SEO-fokussierte Funktionen bieten.
robots.txt wird mit dem Code in SRC/Pages/Robots.txt.ts dynamisch generiert. Diese Konfiguration folgt dem Beispiel aus den Astro -Dokumenten:
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' ,
} ,
} ) ;
} ; Die Hinzufügung von .vscode/settings.json -Datei im Root -Verzeichnis erleichtert die Bildintegration direkt in Inhaltskollektionen innerhalb von Markdown -Editoren. Diese Funktion ermöglicht mühelose Erstellung von Markdown -Links mit Mediendateien und nahtlosen Kopieren in den Arbeitsbereich.
() verknüpft.src/images/content/<path> organisiert. Das Einfügen getting-started.png in src/content/post-1.md führt zu:
 bis post-1.md .src/images/content/post-1/getting-started.png . Notiz
Denken Sie daran, die Verschiebung zu drücken, während Sie Bilder fallen lassen.
Maximieren Sie die Effizienz Ihrer Website mit diesen integrierten Astro-Integrationen:
astro.config.mjs : export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs auf, um die Astro -Sitemap einzurichten: export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;Das Tolle an Astro ist das reiche Ökosystem der Integrationen, mit dem Sie Projektfunktionen auf Ihre genauen Bedürfnisse anpassen können. Fühlen Sie sich frei, Astro -Integrationsseite zu erkunden und zusätzliche Funktionen hinzuzufügen, wie Sie es für richtig halten.
Dieses Projekt wurde mit einer Vielzahl von Tools und Technologien entwickelt, die seine Leistung, Wartbarkeit und Entwicklererfahrung verbessern. Nachfolgend finden Sie eine Liste der wichtigsten Tools und ihrer Rollen im Projekt:
Interaktive Komponenten wie Navigationsleisten, Modale und Akkordeons werden unter Verwendung von Preline UI erstellt, einer umfassenden Open-Source-Komponentenbibliothek.
Das Styling in unserem Projekt nutzt die von Tailwind CSS angebotenen Utility-First-Kurse. Mit dieser Methodik können wir benutzerdefinierte Layouts und Komponenten mit Geschwindigkeit und Effizienz erstellen.
Um eine konsistente Codeformatierung, insbesondere für die Klassensortierung, zu gewährleisten, haben wir das prettier-plugin-tailwindcss Plugin integriert. Die folgende Konfiguration ist in der .prettierrc -Datei am Stamm des Projekts festgelegt:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Wir setzen unser Projekt auf Vercel ein und nutzen ihre robuste Plattform für nahtlose CI/CD -Workflows. Mit vercel.json setzen wir strenge Sicherheitsheader und Caching -Richtlinien, um sicherzustellen, dass die Best Practices für Sicherheits- und Leistungsbetriebe eingehalten werden:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Für eine optimale Leistung der Site verarbeiten wir unsere HTML-Dateien mit process-html.mjs , einem benutzerdefinierten Skript, das HTML nach der Build-Phase mindert, um die Dateigröße zu reduzieren und die Ladezeiten zu verbessern.
Hier ist ein Ausschnitt aus unserem HTML-Minifications-Skript in process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Wir ermutigen Sie, sich auf die detaillierte Dokumentation für jedes Tool zu beziehen, um ihre Fähigkeiten vollständig zu verstehen und wie sie zum Projekt beitragen:
Wenn Sie daran interessiert sind, zu helfen, können Sie auf verschiedene Weise einen Beitrag leisten:
Dieses Projekt wird unter der MIT -Lizenz veröffentlicht. Bitte lesen Sie die Lizenzdatei für weitere Informationen.
Hinweis: Diese Website -Vorlage hat keine Zugehörigkeit zu den angezeigten Unternehmen. Logos werden nur für Demonstrationszwecke verwendet und sollten in angepassten Versionen ersetzt werden.
