高度教程
#javascript #css #网络开发人员 #web3

高度，也称为11ty，是使用JavaScript构建的流行静态站点生成器。它使您可以使用各种模板语言，例如Markdown，Nunjucks，车把等来构建快速，灵活和现代网站。在本教程中，我将带您浏览设置和使用高度的基础知识，以及一些示例代码来帮助您开始。

步骤1：设置一个新的升降机项目

要开始，请确保系统上安装了node.js。您可以从官方网站（https://nodejs.org/）下载它。安装了Node.js后，请按照以下步骤：

  1. 创建一个新的项目文件夹并使用命令行工具导航到它。
  2. 通过运行以下命令来初始化一个新的node.js项目： 
   npm init -y
  1. 通过运行将高度作为DEV依赖性安装： 
   npm install --save-dev @11ty/eleventy
  1. 在您的项目的根目录中创建一个名为.eleventy.js的新文件。此文件将保持高度配置。

步骤2：配置高度

在.eleventy.js文件中，您可以指定高度的各种配置选项。这是一个基本示例：

module.exports = function (eleventyConfig) {
  // Set input and output directories
  eleventyConfig.addPassthroughCopy("assets");

  return {
    dir: {
      input: "src",
      output: "dist",
    },
  };
};

在此示例中，我们将输入目录设置为src，并将输出目录设置为dist。此外，assets目录中的任何文件都将被复制到输出目录。

步骤3：创建模板

高度支持多种模板语言。在此示例中，让我们使用流行的Markdown和Nunjucks。

  1. 在您的项目的根目录中创建一个名为src的新文件夹。
  2. 在src文件夹中，创建一个名为index.md的新文件。这将是您网站的主页。在其中添加一些Markdown内容，例如： 
---
title: My Eleventy Site
---

# Welcome to my Eleventy site!

This is the homepage of my Eleventy site. Feel free to explore!
  1. 在src文件夹中创建另一个名为layout.njk的文件。该文件将是其他模板使用的基本布局。添加以下代码： 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>
  1. 现在，让我们在src文件夹中创建一个名为index.njk的新文件。该文件将扩展layout.njk模板并渲染Markdown内容。添加以下代码： 
---
layout: layout.njk
---

{{ content }}

步骤4：建立您的网站

要使用高度生成静态站点，请运行以下命令：

npx eleventy

高度将处理您的模板，并在指定的输出目录中生成输出文件（在我们的情况下，dist）。您应该在dist文件夹中查看生成的HTML文件。

步骤5：服务您的网站（可选）

如果您想在本地预览您的网站，则可以使用开发服务器。 Hiretty不提供自己的开发服务器，但您可以使用诸如browsersync之类的工具或来实现此目的。

  1. 通过运行以下命令之一来安装browsersync或用作DEV依赖性：

    • browsersync： 
     npm install --save-dev browser-sync

  • 服务：

     npm install --save-dev serve
  1. 打开您的.eleventy.js文件并修改导出函数以添加browserSync或serve配置：

  • browsersync：

     const browserSync = require("browser-sync");

 module.exports = function (eleventyConfig) {
   // ... other configuration options

   eleventyConfig.setBrowserSyncConfig({
     notify: true,
     open: true,
     files: "dist/**/*", // Watch for changes in the output directory
     server: "dist", // Serve files from the output directory
   });
 };

  • 服务：

     const serve = require("serve");

 module.exports = function (eleventyConfig) {
   // ... other configuration options

   eleventyConfig.setBrowserSyncConfig({
     server: {
       baseDir: "dist", // Serve files from the output directory
     },
   });

   eleventyConfig.on("afterBuild", () => {
     serve("dist", {
       port: 8080, // Set the port number as per your preference
       ignore: ["node_modules"], // Exclude certain directories from being served
     });
   });
 };

  1. 将更改保存到.eleventy.js文件中。

  2. 再次运行高度构建命令以再生该站点：

   npx eleventy
  1. 通过运行以下命令之一启动开发服务器，具体取决于您选择的工具：

  • browsersync：

     npx browser-sync start --config .eleventy.js

  • 服务：

     npx eleventy --serve

这将启动服务器并在浏览器中打开您的网站。您对源文件的任何更改（例如，降价，模板）都会触发自动重建和浏览器刷新。

就是这样！现在，您拥有带有示例代码的基本高度设置。您可以进一步探索Eleventy的文档（https://www.11ty.dev/docs/），以了解更多高级功能和自定义选项。愉快的编码！

查看有关eleventy forms

的更多信息

关于作者。 Geoffrey Callaghan是Fabform.io的程序员，在form backend团队中工作。