static
1.0.0
Статический генератор сайта, который вам понравится. Нет больше сложных конфигураций, раздутых рамок или ощущения, что вам ударили лошадь! Вот Spiel:
Это больше не будет стоять! Static здесь, чтобы вернуть трон простоты!
Убедитесь, что на вашем компьютере установлен узел, а затем скопируйте/вставьте следующую команду в ваш терминал:
npm install -g @devdojo/static
Теперь у вас будет статическая команда, доступная на вашей машине, что позволит вам запустить следующее:
_site )Затем перейдите к официальной документации, чтобы узнать больше о создании вашего сайта.
Каждый файл в каталоге pages соответствует маршруту на вашем сайте. С такой структурой:
pages
├── index.html
├── about.html
├── contact
│ ├── index.html
│ ├── form
│ │ ├── index.html
Ваш новый сайт будет иметь следующие маршруты:
http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form
Дизайн макетов , которые могут использовать несколько страниц.
<!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 >Затем используйте его на любой странице.
<layout title="Radical Righteousness" src="main.html">
<h1>?♂️ Totally Tubuloso Website</h1>
</layout>
Создайте многоразовые часты HTML с тегом <include> . Укажите файл HTML с атрибутом src .
<layout title="Behind the Scenes!" src="main.html">
<include src="about-header.html"></include>
<include src="about-copy.html"></include>
</layout>
Добавьте шорткод Tailwindcss в <head> любого макета, и он будет автоматически вводить. Пример:
<!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>
Он будет заменен на канал CDN Taillid в dev , а мини -файл CSS будет составлен во время build .
Добавьте коллекции данных в ваше приложение. Вот примеры коллекции, расположенная по адресу collections/menu.json
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]
Теперь вы можете легко пройти эту коллекцию:
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>
Это лишь некоторые из доступных горячих функций, но есть гораздо больше, чтобы раскрыть и учиться.
Вы можете узнать обо всех функциях, доступных на статике, посетив официальную документацию. Вы также можете быть заинтересованы в проверке некоторых шаблонов здесь.
Статический HTML - король?
