static
1.0.0
Um gerador de site estático que você vai adorar. Não há configurações mais complicadas, estruturas inchadas ou sentindo que você foi chutado no rosto por um cavalo! Aqui está o discurso:
Não vai mais isso! A estática está aqui para recuperar o trono da simplicidade!
Certifique -se de ter o nó instalado em sua máquina e copie/cole o comando a seguir em seu terminal:
npm install -g @devdojo/static
Agora você terá o comando estático disponível em sua máquina, permitindo que você execute o seguinte:
_site )Em seguida, vá até a documentação oficial para saber mais sobre a construção de seu site.
Cada arquivo dentro do diretório pages corresponde a uma rota em seu site. Com uma estrutura como esta:
pages
├── index.html
├── about.html
├── contact
│ ├── index.html
│ ├── form
│ │ ├── index.html
Seu novo site terá as seguintes rotas disponíveis:
http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form
Layouts de design que várias páginas podem utilizar.
<!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 >Em seguida, use -o em qualquer página.
<layout title="Radical Righteousness" src="main.html">
<h1>?♂️ Totally Tubuloso Website</h1>
</layout>
Crie parciais html reutilizáveis com a tag <include> . Especifique o arquivo HTML com o atributo src .
<layout title="Behind the Scenes!" src="main.html">
<include src="about-header.html"></include>
<include src="about-copy.html"></include>
</layout>
Adicione o código de atalho Tailwindcss ao <head> de qualquer layout e ele será automaticamente injetado. Exemplo:
<!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>
Ele será substituído pelo link CDN do Tailwind no dev , e um arquivo CSS minificado será compilado durante build .
Adicione coleções de dados ao seu aplicativo. Aqui está uma coleção de exemplo localizada em coleções/menu.json
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]
Agora, você pode facilmente dar um pau nesta coleção:
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>
Esses são apenas alguns dos recursos quentes disponíveis, mas há muito mais para descobrir e aprender.
Você pode aprender sobre todos os recursos disponíveis no estático visitando a documentação oficial. Você também pode estar interessado em verificar alguns dos modelos aqui.
Estático html é rei?
