cgartlab.github.io
1.0.0
Tornyfast es una plantilla de código abierto diseñada para una configuración de proyecto web rápida y eficiente, combinando el minimalismo con la funcionalidad . Ya sea que esté exhibiendo una cartera, lanzando una página de destino de una empresa o ejecutando un blog, Tornyfast proporciona todo lo que necesita. Al combinar el poder del Astro, el viento de cola CSS y la interfaz de usuario Preline, esta plantilla ofrece una solución funcional y estéticamente agradable para su presencia en la web.
Ver demostración en vivo
Componente de compartir social :
Componente del botón de marcador :
localStorage .localStorage con cookies para persistir en publicaciones marcadas.Componente de retroalimentación de publicaciones :
Integración del tema de la documentación de Starlight :
Componente de conjunto de iconos :
<Icon name="iconName" /> en tus componentes Astro.Características de internacionalización (i18n) :
LanguagePicker .monolingual-site . Tabla dinámica de contenido (TOC) con indicador de progreso de desplazamiento :
Nota
Actualmente, no hay mejoras planificadas o errores conocidos. Si se encuentra con algún problema, informarlos en nuestra página de problemas o comenzar una discusión para compartir ideas, sugerencias o hacer preguntas.
Esta guía le proporcionará los pasos necesarios para configurar y familiarizarse con el proyecto Astro en su máquina de desarrollo local.
Para comenzar, haga clic en el botón Use this template (el Big Green en la esquina superior derecha) para crear su propio repositorio a partir de esta plantilla en su cuenta GitHub.
Una vez que se crea su repositorio, puede clonarlo a su máquina local utilizando los siguientes comandos:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Comience por instalar las dependencias del proyecto. Abra su terminal, navegue al directorio raíz del proyecto y ejecute:
npm install Este comando instalará todas las dependencias necesarias definidas en el archivo package.json .
Con las dependencias instaladas, puede utilizar los siguientes scripts NPM para administrar el ciclo de vida de desarrollo de su proyecto:
npm run dev : inicia un servidor de desarrollo local con recarga en caliente habilitado.npm run preview : sirve su salida de compilación localmente para una vista previa antes de la implementación.npm run build : Bundle su sitio en archivos estáticos para la producción.Para obtener ayuda detallada con los comandos Astro Cli, visite la documentación de Astro.
Antes de la implementación, debe crear una compilación de producción:
npm run build Esto crea un dist/ Directorio con su sitio construido (configurable a través de Outdir en Astro).
Haga clic en el botón a continuación para comenzar a implementar su proyecto en Vercel.
Haga clic en el botón a continuación para comenzar a implementar su proyecto en Netlify:
Tornyfast organiza componentes modulares, contenido y diseños para optimizar el desarrollo y la gestión de contenido.
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
Los archivos estáticos servidos directamente al navegador están dentro del directorio public en la raíz del proyecto.
public/
└── banner-pattern.svg
Tornyfast permite una fácil personalización para satisfacer sus necesidades específicas. Aquí hay un par de formas en que puede configurar componentes y contenido:
Algunos componentes tienen propiedades definidas como variables TypeScript dentro del archivo de componentes. Aquí hay un ejemplo de personalización del componente 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." ;Para colecciones de contenido como testimonios o estadísticas, edite la matriz correspondiente de objetos:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Modifique el contenido dentro de estas matrices para reflejar sus datos.
Puede pasar valores a los accesorios directamente en los archivos de página para componentes utilizados en las páginas. Aquí hay un ejemplo de componente HeroSection y ClientsSection con accesorios en línea:
< 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. "
/> Edite los accesorios como title , subTitle , primaryBtn , etc., para personalizar estas secciones. Asegúrese de mantener la estructura y los tipos de datos de los accesorios.
Edite el archivo navigation.ts dentro del directorio utils para administrar la barra de navegación y los enlaces de pie de página:
Edite la matriz navBarLinks para ajustar los enlaces de la barra de navegación:
// 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" } ,
] ; Reemplace name con el texto de visualización y url con la ruta apropiada a las páginas en su sitio.
Del mismo modo, ajuste los enlaces que se muestran en el pie de página editando la matriz 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" } ,
] ,
} ,
] ; Cada sección dentro de la matriz footerLinks representa un grupo de enlaces. Actualice el valor section para el encabezado del grupo y modifique name y url de cada enlace según sea necesario.
Reemplace las URL del marcador de posición en el objeto socialLinks con sus perfiles de redes sociales:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Nota
Recuerde agregar URL completas y válidas para que la navegación funcione correctamente. Estas personalizaciones se reflejarán en todo su sitio astro, promoviendo la consistencia en todas las páginas.
Tenemos dos opciones para los componentes de la barra de navegación: Navbar.astro para un Navbar regular y NavbarMegaMenu.astro para un menú Mega. Ambos están ubicados en src/components/sections/navbar&footer .
Los componentes Navbar.astro y NavbarMegaMenu.astro se pueden configurar dentro de MainLayout.astro , lo que le permite elegir el estilo de navegación que mejor se adapte a su proyecto. Para personalizar estos componentes, puede modificarlos directamente en src/components/sections/navbar&footer para aplicar configuraciones específicas o actualizaciones de diseño.
Tornyfast ahora está equipado con Starlight, diseñado para elevar la experiencia del usuario con la documentación. Este tema moderno y elegante incluye un conjunto de características para hacer que el contenido sea más accesible y agradable para navegar.
Características clave:
Con Starlight, obtiene acceso a características e integraciones potentes, así como opciones de personalización extensas para satisfacer sus necesidades.
Nota
Sumérgete en la lista completa de características de Starlight y aprende cómo puede optimizar su proceso de desarrollo visitando el sitio de documentación del tema.
Importante
Si la barra lateral en su sitio de Starlight no se desplaza, y debe arrastrar manualmente la barra de desplazamiento, elimine la etiqueta de script relacionada con la biblioteca de desplazamiento suave de Lenis de src/components/ui/starlight/Head.astro .
Experimente el desplazamiento suave y mantecoso con Lenis. Hemos integrado a Lenis para proporcionar una experiencia de desplazamiento mejorada que sea fluida y receptiva.
Así es como configuramos Lenis en 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 ) ; Y luego agréguelo a MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Tenga en cuenta que el desplazamiento suave puede afectar la accesibilidad y el rendimiento en algunos dispositivos, así que asegúrese de probarlo de manera integral en diferentes entornos.
Nota
Si desea eliminar Lenis y regresar al comportamiento de desplazamiento predeterminado del navegador, simplemente comente o elimine estas líneas del archivo MainLayout.astro y /starlight/Head.astro si está utilizando documentos.
Para las páginas de productos individuales, GSAP se ha integrado para agregar animaciones atractivas que se ejecutan tan pronto como se carga la página del producto. Puede encontrar y modificar la configuración de GSAP en las secciones de script del archivo de página del producto ubicado en src/pages/products/[...slug].astro y la página Insights en src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Personalización de animaciones:
Adapte las animaciones GSAP dentro de este guión para que se ajuste a la apariencia de su proyecto. El ejemplo proporcionado es un punto de partida, que representa cómo aprovechar GSAP para un impacto visual inmediato como una página de producto.
Modificación o eliminación de animaciones:
gsap.from() , o agregue nuevas llamadas de animación GSAP según sea necesario.Nota
Hemos elegido mantener la integración delgada y enfocada, pero la documentación integral de GSAP puede referirse para animaciones más complejas: la documentación de GSAP.
Para lograr un diseño más limpio y espacioso, la barra de desplazamiento predeterminada se ha eliminado visualmente. Si bien esta elección se ajusta a los objetivos estéticos del proyecto, es importante considerar que ocultar barras de desplazamiento a veces puede afectar la accesibilidad y la experiencia del usuario. Recomendamos evaluar esta decisión de diseño dentro del contexto de su base de usuarios y sus necesidades.
Para aquellos que prefieren barras de desplazamiento de estilo personalizado, sugerimos usar el complemento Tailwind-Scrollbar, que agrega utilidades CSS de viento de cola para estilos de barra de desplazamiento, lo que permite una personalización más controlada que también puede cumplir con los estándares de accesibilidad.
Nota
Si desea devolver la barra de desplazamiento predeterminada, puede comentar o eliminar los siguientes CSS de src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > Además, actualice la etiqueta <html> para eliminar la clase scrollbar-hide , lo que resulta en:
< html lang =" en " class =" scroll-pt-16 " >La configuración de SEO en la plantilla de tornillo está diseñada para capacitar a los usuarios para optimizar la visibilidad de su sitio web en los motores de búsqueda y las plataformas de redes sociales. Esta documentación describe los detalles de implementación y las instrucciones de uso para administrar de manera efectiva la configuración de SEO.
La configuración de SEO se ha centralizado utilizando el archivo constants.ts . Este archivo gestiona datos relacionados con SEO, como títulos de página, descripciones, datos estructurados y etiquetas de gráficos abiertos, proporcionando un enfoque más estructurado y manejable para la gestión de SEO.
Para personalizar la configuración de SEO, modifique los valores en el archivo constants.ts . Las configuraciones clave incluyen Sitio, SEO y OG, lo que permite a los desarrolladores definir los parámetros de SEO en todo el sitio.
// 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...
} ; Al aplicar metadatos dentro de sus diseños, como MainLayout.astro , puede pasar los valores de metadatos deseados como accesorios para el Meta componente:
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Para las anulaciones de SEO específicas de la página, los desarrolladores pueden pasar propiedades de esquema individual dentro de archivos de página específicos.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
Con esta configuración, el meta componente recibe la meta descripción personalizada y la aplica a los metadatos de la página. Si no se pasa ningún valor personalizado, se utilizará el valor predeterminado de Meta.astro .
Para una estrategia de SEO más robusta, puede crear propiedades adicionales en el componente Meta.astro . Por ejemplo, es posible que desee incluir etiquetas de gráficos abiertos específicas para fechas de publicación de artículos o etiquetas para metadatos específicos de Twitter.
Los datos estructurados en formato JSON-LD pueden ser administrados por el componente Meta.astro , mejorando cómo los motores de búsqueda comprenden el contenido de su página y potencialmente mejorando los resultados de búsqueda con fragmentos ricos. Modifique la propiedad structuredData con tipos y propiedades relevantes Schema.org:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>Si bien la plantilla proporciona una solución de SEO personalizada, puede optar por utilizar una integración Astro como Astro SEO para características y optimizaciones adicionales de SEO. La integración de dicho paquete podría proporcionar una gestión de metadatos más automatizada y una funcionalidad adicional centrada en SEO.
robots.txt se genera dinámicamente utilizando el código que se encuentra en SRC/Pages/Robots.txt.ts. Esta configuración sigue el ejemplo de Astro Docs:
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' ,
} ,
} ) ;
} ; La adición de el archivo .vscode/settings.json en el directorio raíz facilita la integración de imágenes directamente en las colecciones de contenido dentro de los editores de Markdown. Esta característica permite la creación sin esfuerzo de enlaces de Markdown con archivos multimedia y una copia perfecta en el espacio de trabajo.
() .src/images/content/<path> . Pastar getting-started.png en src/content/post-1.md da como resultado:
 a post-1.md .src/images/content/post-1/getting-started.png . Nota
Recuerde presionar Shift mientras deja caer imágenes.
Maximice la eficiencia de su sitio web con estas integraciones Astro incorporadas:
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 ( ) ] ,
} ) ;Lo mejor de Astro es su rico ecosistema de integraciones, lo que le permite adaptar las funcionalidades del proyecto a sus necesidades exactas. Siéntase libre de explorar la página de integraciones Astro y agregar capacidades adicionales como mejor le parezca.
Este proyecto se crea utilizando una variedad de herramientas y tecnologías que mejoran su rendimiento, mantenimiento y experiencia en desarrolladores. A continuación se muestra una lista de las herramientas clave y sus roles en el proyecto:
Los componentes interactivos como las barras de navegación, los modales y los acordeones se construyen utilizando la interfaz de usuario Preline, una biblioteca integral de componentes de código abierto.
El estilo en nuestro proyecto aprovecha las clases de utilidad que ofrece Tailwind CSS. Esta metodología nos permite crear diseños y componentes personalizados con velocidad y eficiencia.
Para garantizar un formato de código constante, particularmente para la clasificación de clases, hemos integrado el complemento prettier-plugin-tailwindcss . La siguiente configuración se establece en el archivo .prettierrc en la raíz del proyecto:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Implementamos nuestro proyecto en VERCEL, capitalizando en su plataforma robusta para flujos de trabajo CI/CD sin problemas. Usando vercel.json , establecemos encabezados de seguridad estrictos y políticas de almacenamiento en caché, asegurando la adherencia a las mejores prácticas de seguridad y rendimiento:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Para un rendimiento óptimo del sitio, posprocesamos nuestros archivos HTML con process-html.mjs , un script personalizado que minifica HTML después de la fase de compilación para reducir el tamaño del archivo y mejorar los tiempos de carga.
Aquí hay un fragmento de nuestro script de minificación HTML en process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Le recomendamos que consulte la documentación detallada para cada herramienta para comprender completamente sus capacidades y cómo contribuyen al proyecto:
Si está interesado en ayudar, puede contribuir de varias maneras:
Este proyecto se publica bajo la licencia MIT. Lea el archivo de licencia para obtener más detalles.
Nota: Esta plantilla del sitio web no tiene afiliación con las empresas que se muestran. Los logotipos se utilizan solo para fines de demostración y deben reemplazarse en versiones personalizadas.
