static
1.0.0
Un generador de sitio estático que te va a amar. ¡No más configuraciones complicadas, marcos hinchados o sintiendo que un caballo lo pateó en la cara! Aquí está el Spiel:
¡Ya no se pondrá esto! ¡Static está aquí para reclamar el trono de la simplicidad!
Asegúrese de tener el nodo instalado en su máquina y luego copie/pegue el siguiente comando en su terminal:
npm install -g @devdojo/static
Ahora tendrá el comando estático disponible en su máquina, lo que le permite ejecutar lo siguiente:
_site )Luego, diríjase a la documentación oficial para obtener más información sobre cómo construir su sitio.
Cada archivo dentro del directorio pages corresponde a una ruta en su sitio web. Con una estructura como esta:
pages
├── index.html
├── about.html
├── contact
│ ├── index.html
│ ├── form
│ │ ├── index.html
Su nuevo sitio tendrá las siguientes rutas disponibles:
http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form
Diseños de diseño que pueden utilizar varias páginas.
<!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< title > {title} </ title >
</ head >
< body >
{slot}
</ body >
</ html >Luego, úsalo en cualquier página.
<layout title="Radical Righteousness" src="main.html">
<h1>?♂️ Totally Tubuloso Website</h1>
</layout>
Cree parciales HTML reutilizables con la etiqueta <include> . Especifique el archivo HTML con el atributo src .
<layout title="Behind the Scenes!" src="main.html">
<include src="about-header.html"></include>
<include src="about-copy.html"></include>
</layout>
Agregue el código corto TailWindcss al <head> de cualquier diseño y se inyectará automáticamente. Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
{tailwindcss}
</head>
<body>
{slot}
</body>
</html>
Se reemplazará con el enlace CDN de viento de cola en dev , y se compilará un archivo CSS minificado durante build .
Agregue colecciones de datos a su aplicación. Aquí hay una colección de ejemplo ubicada en colecciones/menú.json
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]
Ahora, puede recorrer fácilmente esta colección:
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>
Esas son solo algunas de las características disponibles, pero hay mucho más para descubrir y aprender.
Puede aprender sobre todas las características disponibles en Static visitando la documentación oficial. También puede estar interesado en visitar algunas de las plantillas aquí.
¿HTML estático es el rey?
