要创建高度(11)模板,您需要遵循以下步骤:
-
建立一个新的升降机项目:
- 确保您的系统上安装了node.js。
- 创建一个新的项目目录。
- 打开命令提示或终端并导航到项目目录。
- 运行
npm init -y
以初始化带有默认设置的新node.js项目。 - 通过运行
npm install --save-dev @11ty/eleventy
安装高度安装。
-
创建目录结构:
- 在您的项目目录中,创建一个名为
_site
的文件夹(这是高度将输出生成的站点)。 - 创建一个名为
_data
的文件夹(这是您可以在模板中访问的数据文件)。 - 创建一个名为
_includes
的文件夹(这是您可以放置可重复使用的组件或部分的文件夹)。
- 在您的项目目录中,创建一个名为
-
创建一个基本模板:
- 在项目目录中,创建一个html文件(例如,
index.html
)。 - 将必要的HTML结构添加到文件中。
- 您可以使用液体模板语言(高度默认)来包括动态内容和模板。例如,
{{ content }}
将渲染页面的内容。
- 在项目目录中,创建一个html文件(例如,
-
设置配置:
- 在项目目录中创建一个配置文件(例如,
.eleventy.js
)。 - 在此文件中,您可以指定各种高度选项并自定义构建过程。
- 例如,您可以设置输入和输出目录,选择模板语言并配置其他插件。
- 在项目目录中创建一个配置文件(例如,
-
构建和预览您的网站:
- 在您的命令提示或终端中,运行
npx eleventy
以构建您的网站。 - 高度将根据您的模板和数据在
_site
文件夹中生成站点。 - 要预览网站,您可以使用
http-server
或live-server
等本地服务器。在全球安装这些工具之一,导航到_site
文件夹,然后运行服务器命令。
- 在您的命令提示或终端中,运行
-
自定义并扩展您的模板:
- 高度支持布局,部分,过滤器和其他功能。
- 您可以创建可重复使用的布局并将其包括在模板中。
- 将共享组件放置在
_includes
文件夹中,并使用液体语法包含它们。 - 探索高度的文档以了解高级功能和技术。
请记住要查阅高度文档以获取有关配置选项,模板语言和其他功能的详细信息:https://www.11ty.dev/docs/。
关于作者。 Geoffrey Callaghan是Fabform.io的程序员,在form backend service团队中工作。