static
1.0.0
您會喜歡的靜態站點生成器。沒有更多複雜的配置,腫的框架或感覺就像是被馬踢在臉上!這是Spiel:
不再會站起來!靜態是為了恢復簡單的寶座!
確保您在計算機上安裝了節點,然後在終端中復制/粘貼以下命令:
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>
使用<include>標籤創建可重複使用的HTML部分。用src屬性指定HTML文件。
<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>
它將用dev中的尾風CDN鏈接替換,並且在build中將編譯一個縮小的CSS文件。
將數據集添加到您的應用程序。這是位於Collections/Menu.json的示例集合
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]
現在,您可以輕鬆地循環通過此集合:
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>
這些只是可用的一些熱門功能,但是還有很多東西要探索和學習。
您可以通過訪問官方文檔來了解靜態可用的所有功能。您可能也有興趣在此處查看一些模板。
靜態HTML是國王嗎?