cgartlab.github.io
1.0.0
Screffast est un modèle open-source conçu pour la configuration du projet Web rapide et efficace, mélangeant le minimalisme avec les fonctionnalités . Que vous présentiez un portefeuille, que vous lanciez une page de destination de l'entreprise ou que vous exécutiez un blog, Screffast fournit tout ce dont vous avez besoin. En combinant la puissance de l'ASTRO, du vent arrière CSS et de l'interface utilisateur de la préline, ce modèle offre une solution fonctionnelle et esthétique pour votre présence Web.
Voir la démo en direct
Composant de partage social :
Composant du bouton Bookmark :
localStorage .localStorage par des cookies pour persister des messages en signet.Publier le composant de commentaires :
Intégration du thème de la documentation Starlight :
Composant de définition d'icônes :
<Icon name="iconName" /> dans vos composants Astro.Caractéristiques de l'internationalisation (I18N) :
LanguagePicker personnalisé.monolingual-site . Tableau des matières dynamique (COT) avec indicateur de progression du défilement :
Note
Actuellement, il n'y a pas d'améliorations prévues ni de bogues connus. Si vous rencontrez des problèmes, veuillez les signaler sur notre page de questions ou commencer une discussion pour partager des idées, des suggestions ou poser des questions.
Ce guide vous fournira les étapes nécessaires pour configurer et vous familiariser avec le projet Astro sur votre machine de développement locale.
Pour commencer, cliquez sur le bouton Use this template (le grand vert en haut à droite) pour créer votre propre référentiel à partir de ce modèle dans votre compte GitHub.
Une fois votre référentiel créé, vous pouvez le cloner sur votre machine locale en utilisant les commandes suivantes:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Commencez par installer les dépendances du projet. Ouvrez votre terminal, accédez au répertoire racine du projet et exécutez:
npm install Cette commande installera toutes les dépendances nécessaires définies dans le fichier package.json .
Avec les dépendances installées, vous pouvez utiliser les scripts NPM suivants pour gérer le cycle de vie de développement de votre projet:
npm run dev : démarre un serveur de développement local avec un rechargement chaud activé.npm run preview : sert votre sortie de build localement pour l'aperçu avant le déploiement.npm run build : regroupe votre site dans des fichiers statiques pour la production.Pour une aide détaillée avec les commandes Astro CLI, visitez la documentation d'Astro.
Avant le déploiement, vous devez créer une construction de production:
npm run build Cela crée un dist/ Directory avec votre site construit (configurable via Outdir dans Astro).
Cliquez sur le bouton ci-dessous pour commencer le déploiement de votre projet sur Vercel:
Cliquez sur le bouton ci-dessous pour commencer le déploiement de votre projet sur Netlify:
Screffast organise des composants, du contenu et des dispositions modulaires pour rationaliser le développement et la gestion du contenu.
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
Les fichiers statiques servis directement au navigateur sont dans le répertoire public à l'origine du projet.
public/
└── banner-pattern.svg
Screwfast permet une personnalisation facile en fonction de vos besoins spécifiques. Voici quelques façons de configurer les composants et le contenu:
Certains composants ont des propriétés définies comme des variables de typeScript dans le fichier de composant. Voici un exemple de personnalisation des FeaturesGeneral du composant général:
// 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." ;Pour les collections de contenu comme les témoignages ou les statistiques, modifiez le tableau d'objets correspondant:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Modifiez le contenu dans ces tableaux pour refléter vos données.
Vous pouvez transmettre des valeurs aux accessoires directement dans les fichiers de page pour les composants utilisés sur les pages. Voici un exemple de composant HeroSection et ClientsSection avec des accessoires en ligne:
< 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. "
/> Modifiez les accessoires tels que title , subTitle , primaryBtn , etc., pour personnaliser ces sections. Assurez-vous de maintenir la structure et les types de données des accessoires.
Modifiez le fichier navigation.ts dans le répertoire utils pour gérer la barre de navigation et les liens de pied de page:
Modifiez le tableau navBarLinks pour ajuster les liens de la barre de navigation:
// 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" } ,
] ; Remplacez name par le texte d'affichage et url par le chemin d'accès approprié vers les pages de votre site.
De même, ajustez les liens affichés dans le pied de page en modifiant le tableau 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" } ,
] ,
} ,
] ; Chaque section dans le tableau footerLinks représente un groupe de liens. Mettez à jour la valeur section pour l'en-tête de groupe et modifiez name et url de chaque lien au besoin.
Remplacez les URL de l'espace réservé dans l'objet socialLinks par vos profils de médias sociaux:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Note
N'oubliez pas d'ajouter des URL complètes et valides pour que la navigation fonctionne correctement. Ces personnalisations se refléteront tout au long de votre site Astro, favorisant la cohérence sur toutes les pages.
Nous avons deux options pour les composants de la barre de navigation: Navbar.astro pour un Navbar régulier et NavbarMegaMenu.astro pour un mega menu. Les deux sont situés dans src/components/sections/navbar&footer .
Les composants Navbar.astro et NavbarMegaMenu.astro peuvent être configurés dans MainLayout.astro , vous permettant de choisir le style de navigation qui convient le mieux à votre projet. Pour personnaliser ces composants, vous pouvez les modifier directement sous src/components/sections/navbar&footer pour appliquer des configurations spécifiques ou des mises à jour de conception.
Screwfast est désormais équipé de Starlight, conçu pour élever l'expérience utilisateur avec la documentation. Ce thème moderne et élégant comprend une suite de fonctionnalités pour rendre le contenu plus accessible et agréable à naviguer.
Caractéristiques clés:
Avec Starlight, vous avez accès à de puissantes fonctionnalités et intégrations, ainsi que des options de personnalisation approfondies pour répondre à vos besoins.
Note
Plongez dans la liste complète des fonctionnalités de Starlight et découvrez comment il peut rationaliser votre processus de développement en visitant le site de documentation du thème.
Important
Si la barre latérale de votre site Starlight ne fait pas défiler et que vous devez faire glisser manuellement la barre de défilement, supprimez la balise de script liée à la bibliothèque de défilement Lenis Smooth de src/components/ui/starlight/Head.astro .
Découvrez un défilement au beurre lisse avec Lenis. Nous avons intégré Lenis pour offrir une expérience de défilement améliorée à la fois fluide et réactive.
Voici comment nous avons mis en place Lenis dans 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 ) ; Puis ajoutez-le à MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Veuillez noter que le défilement en douceur peut affecter l'accessibilité et les performances sur certains appareils, alors assurez-vous de le tester de manière globale dans différents environnements.
Note
Si vous souhaitez supprimer Lenis et revenir au comportement de défilement par défaut du navigateur, commentez simplement ou supprimez ces lignes du fichier MainLayout.astro et /starlight/Head.astro head.astro si vous utilisez des documents.
Pour les pages de produits individuelles, GSAP a été intégré pour ajouter des animations engageantes qui s'exécutent dès que la page du produit se charge. Vous pouvez trouver et modifier la configuration GSAP dans les sections de script du fichier de page de produit située sur src/pages/products/[...slug].astro et la page Insights à src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Personnalisation des animations:
Veuillez adapter les animations GSAP dans ce script pour s'adapter à l'apparence et à la sensation de votre projet. L'exemple fourni est un point de départ, représentant comment tirer parti du GSAP pour un impact visuel immédiat en tant que charges de page de produit.
Modification ou supprimer les animations:
gsap.from() ou ajoutez de nouveaux appels d'animation GSAP si requis.Note
Nous avons choisi de garder l'intégration maigre et concentrée, mais la documentation complète de GSAP peut être mentionnée pour des animations plus complexes: la documentation GSAP.
Pour obtenir une conception plus propre et plus spacieuse, la barre de défilement par défaut a été supprimée visuellement. Bien que ce choix correspond aux objectifs esthétiques du projet, il est important de considérer que la cachette des barres de défilement peut parfois affecter l'accessibilité et l'expérience utilisateur. Nous vous recommandons d'évaluer cette décision de conception dans le contexte de votre base d'utilisateurs et de leurs besoins.
Pour ceux qui préfèrent les barres de défilement de style sur mesure, nous suggérons d'utiliser le plugin de basse-vent arrière, qui ajoute des utilitaires CSS de vent arrière pour les styles de barre de défilement, permettant une personnalisation plus contrôlée qui peut également répondre aux normes d'accessibilité.
Note
Si vous souhaitez renvoyer la barre de défilement par défaut, vous pouvez commenter ou supprimer le CSS suivant de src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > De plus, mettez à jour la balise <html> pour supprimer la classe scrollbar-hide , résultant en:
< html lang =" en " class =" scroll-pt-16 " >La configuration du référencement dans le modèle Screwfast est conçue pour permettre aux utilisateurs d'optimiser la visibilité de leur site Web sur les moteurs de recherche et les plateformes de médias sociaux. Cette documentation décrit les détails de mise en œuvre et les instructions d'utilisation pour gérer efficacement les paramètres de référencement.
La configuration SEO a été centralisée à l'aide du fichier constants.ts . Ce fichier gère des données liées au référencement telles que les titres de page, les descriptions, les données structurées et les balises graphiques ouvertes, fournissant une approche plus structurée et gérable de la gestion du référencement.
Pour personnaliser les paramètres de référencement, modifiez les valeurs dans le fichier constants.ts . Les configurations clés incluent le site, le référencement et l'OG, permettant aux développeurs de définir les paramètres de référencement à l'échelle du site.
// 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...
} ; Lorsque vous appliquez des métadonnées dans vos dispositions, telles que MainLayout.astro , vous pouvez transmettre les valeurs de métadonnées souhaitées sous forme d'accessoires à la Meta composante:
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Pour les remplacements de référencement spécifiques à la page, les développeurs peuvent transmettre des propriétés de schéma individuelles dans des fichiers de page spécifiques.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
Avec cette configuration, le composant Meta reçoit la méta-description personnalisée et l'applique aux métadonnées de la page. Si aucune valeur personnalisée n'est passée, la valeur par défaut de Meta.astro sera utilisée à la place.
Pour une stratégie de référencement plus robuste, vous pouvez créer des propriétés supplémentaires dans le composant Meta.astro . Par exemple, vous pouvez inclure des balises de graphe ouverte spécifiques pour des dates de publication d'articles ou des balises pour les métadonnées spécifiques à Twitter.
Les données structurées au format JSON-LD peuvent être gérées par le composant Meta.astro , améliorant la façon dont les moteurs de recherche comprennent le contenu de votre page et améliorent potentiellement les résultats de recherche avec des extraits riches. Modifiez la propriété structuredData avec des types et propriétés schéma.org pertinents:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>Bien que le modèle fournit une solution de référencement personnalisée, vous pouvez choisir d'utiliser une intégration Astro telle que Astro SEO pour des fonctionnalités de référencement supplémentaires et des optimisations. L'intégration d'un tel package pourrait fournir une gestion plus automatisée des métadonnées et des fonctionnalités supplémentaires axées sur le référencement.
robots.txt est généré dynamiquement à l'aide du code trouvé dans SRC / Pages / Robots.txt.ts. Cette configuration suit l'exemple des documents 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' ,
} ,
} ) ;
} ; L'ajout du fichier .vscode/settings.json dans le répertoire racine facilite l'intégration d'image directement dans les collections de contenu dans les éditeurs de Markdown. Cette fonctionnalité permet la création sans effort de liens Markdown avec les fichiers multimédias et la copie transparente dans l'espace de travail.
() .src/images/content/<path> . Coller getting-started.png dans src/content/post-1.md en résulte:
 à post-1.md .src/images/content/post-1/getting-started.png . Note
N'oubliez pas d'appuyer sur Shift tout en supprimant les images.
Maximisez l'efficacité de votre site Web avec ces intégrations Astro intégrées:
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 ( ) ] ,
} ) ;La grande chose à propos d'Astro est son riche écosystème d'intégations, vous permettant d'adapter les fonctionnalités du projet à vos besoins exacts. N'hésitez pas à explorer la page des intégrations Astro et à ajouter des capacités supplémentaires comme bon vous semble.
Ce projet est construit à l'aide d'une variété d'outils et de technologies qui améliorent ses performances, sa maintenabilité et son expérience des développeurs. Vous trouverez ci-dessous une liste des outils clés et de leurs rôles dans le projet:
Des composants interactifs comme les barres de navigation, les modaux et les accordéons sont construits à l'aide de l'interface utilisateur de la préline, une bibliothèque de composants open source complète.
Le style de notre projet tire parti des cours de service publics offerts par Tailwind CSS. Cette méthodologie nous permet de créer des dispositions et des composants personnalisés avec vitesse et efficacité.
Pour assurer le formatage cohérent du code, en particulier pour le tri des classes, nous avons intégré le plugin prettier-plugin-tailwindcss . La configuration suivante est définie dans le fichier .prettierrc à la racine du projet:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Nous déployons notre projet sur Vercel, capitalisant sur leur plate-forme robuste pour les workflows CI / CD sans couture. En utilisant vercel.json , nous définissons des en-têtes de sécurité stricts et des politiques de mise en cache, assurant l'adhésion aux meilleures pratiques de sécurité et de performance:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Pour les performances optimales du site, nous postons nos fichiers HTML avec process-html.mjs , un script personnalisé qui divise HTML après la phase de construction pour réduire la taille du fichier et améliorer les temps de chargement.
Voici un extrait de notre script de minification HTML dans process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Nous vous encourageons à vous référer à la documentation détaillée de chaque outil pour comprendre pleinement leurs capacités et comment elles contribuent au projet:
Si vous souhaitez aider, vous pouvez contribuer de plusieurs manières:
Ce projet est publié sous la licence du MIT. Veuillez lire le fichier de licence pour plus de détails.
Remarque: Ce modèle de site Web n'a aucune affiliation avec les sociétés affichées. Les logos sont utilisés à des fins de démonstration uniquement et doivent être remplacés dans des versions personnalisées.
