static
1.0.0
あなたが愛する静的サイトジェネレーター。これ以上の複雑な構成、肥大化したフレームワーク、または馬で顔を蹴られたように感じます！これがスピルです：
これはもう立っていません！ Staticは、シンプルさの玉座を取り戻すためにここにあります！
マシンにノードがインストールされていることを確認してから、端末に次のコマンドをコピー/貼り付けます。
npm install -g @devdojo/static
これで、マシンで静的コマンドを使用できるようになり、以下を実行できます。
_siteディレクトリで利用可能）次に、公式のドキュメントにアクセスして、サイトの構築について詳しく知りましょう。
pagesディレクトリ内の各ファイルは、Webサイトのルートに対応しています。このような構造で：
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>
任意のレイアウトの<head>にTailWindCSSショートコードを追加すると、自動的に注入されます。例：
<!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のTailWind CDNリンクに置き換えられ、 build中に邪魔されたCSSファイルがコンパイルされます。
アプリケーションにデータのコレクションを追加します。これは、コレクション/menu.jsonにあるコレクションの例です
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]
これで、このコレクションを簡単にループできます。
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>
これらは利用可能なホット機能のほんの一部ですが、明らかにして学ぶべきことがたくさんあります。
公式ドキュメントにアクセスして、静的に利用可能なすべての機能について学ぶことができます。また、こちらのテンプレートの一部をチェックすることに興味があるかもしれません。
静的HTMLは王ですか？
