最近在CSSDesignAwards中发现了一个很戳我审美的静态网站，很适合用来做个人网站或者学术网站。
尤其是这种毛玻璃风格的header。
进一步搜索，发现这个网站是一个名为static的静态网站生成框架里的模板，star数为124。
尽管用的人不多，但是我很喜欢这个框架的架构、Feature和自带模版的风格，因此决定尝试用该框架生成一个学术风格的实验室招聘网站。
1.安装和初始化
安装的方式很简单：
npm install -g @devdojo/static
安装成功后，使用new命令生成项目，并用--来指定使用aria模版。
sudo static new lab-ly --aria
创建完成后，cd到项目的主分支，使用dev命名运行项目
static dev
2.了解页面组织方式
自顶向下，页面组织方式分别为：
2.1 Page
Page负责每一个页面的逻辑。
例如,主页的路径为pages/about.html，内容为：
<layout title="Aria · Personal, Portfolio, Blog Template" src="main.html">
<div>
</div>
</layout>
它通过一个Layout标签来加载页面的基础布局main。
除了直接在pages目录下直接放置页面，也可以将index.html放置在同名文件夹中。
即pages/about.html == pages/about/index.html。
2.2 Layout
Layout负责页面的布局，是一种纯HTML结构，可以在任何的页面中复用。
例如，在layouts/main.html中，定义了网站的基础布局，为一个背景组件、导航组件、底部组件。
<body class="antialiased bg-white dark:bg-neutral-950">
<!-- 顶部方形线段特效 -->
<include src="square-lines.html"></include>
<!-- 导航栏 -->
<include src="header.html"></include>
{slot}
<include src="footer.html"></include>
<script src="/assets/js/main.js"></script>
</body>
上述的Page页面中调用了该Layout，即pages/index.html的内容将会被加载到{slot}。
2.3 Include
Include组件可以视为被封装好的组件。
例如，在includes/header.html中定义了页面的导航栏，在上述的layouts/main.html中通过<include>来引用。
Include组件的写法和纯HTML相同，即使是一段简单的文字。
<p>This is a simple HTML paragraph</p>
3.了解数据加载方式
3.1 Collections
Collections(集合)可用于循环访问数据集合。
例如导航项的可重复数据collections/menu.json：
[
{
"name" : "Home",
"url" : "/"
},
{
"name" : "Posts",
"url" : "/posts"
}
]
在上述的header组件中，通过<ForEach>遍历，属性collection指定了集合中的特定数据，名称与集合的文件名相同。
<nav>
<ForEach collection="menu">
<a href="{menu.link}">{menu.title}</a>
</ForEach>
</nav>
3.2 Content
Content即Markdown(.md)文件，它像其他的静态博客一样进行组织，但它的加载方式比较特殊。
例如，有一个content/post/code-to-canvas.md文件，那么它将会尝试在pages/post.html中渲染到{content}。
如果content/post下有多个md文件，那么这些文件都会被加载到{content}中。
pages/post.html页面内容如下：
<layout title="{frontmatter.title}" src="main.html">
<main class="relative z-30 max-w-4xl pb-1 mx-auto mt-10 bg-white dark:bg-neutral-950 md:rounded-t-md text-neutral-900">
<article class="w-full max-w-2xl mx-auto mb-20 prose-sm prose px-7 lg:px-0 lg:prose-lg dark:prose-invert">
{content}
</article>
</main>
</layout>
官方教程提供了一个案例，对于一个文件content/blog/coding.md，它被加载到的page页面顺序如下：
查找 pages/blog/coding.html（如果存在则使用页面，如果不存在则使用👇）
查找 pages/blog/index.html （如果存在则使用页面，如果不存在则使用👇）
查找 pages/blog.html （如果存在则使用页面，如果不存在则使用👇）
查找 pages/index.html （使用页面或抛出错误）
需要注意，pages/blog/index.html的优先级高于pages/blog.html。
而每一条content的属性，如标题、日期等通过frontmatter控制。具体的内容可参考https://static.devdojo.com/docs/features/content/。