Modules 默认

使用 ESM 和 TypeScript 模块来创建页面、布局和存储数据。

配置参数

extensions string[]: The list of extensions this plugin applies to
Default:
[ ".js", ".ts" ]
pageSubExtension string: Optional sub-extension for page files
Default:
".page"
includes string: Custom includes path
Default:
site.options.includes

描述

Lume 构建于 Deno 之上，因此原生支持 JavaScript 和 TypeScript 模块。这个插件允许你使用 JavaScript 和 TypeScript 来创建页面、布局和数据文件。

安装

这个插件默认安装。🎉

创建 _data 文件

创建 _data.js 或 _data/*.js (或者 TypeScript 等效文件 _data.ts 或 _data/*.ts) 文件来保存共享数据。

export const users = [
  {
    name: "Oscar",
    surname: "Otero",
  },
  {
    name: "Michael",
    surname: "Jackson",
  },
];

创建页面

要使用 JavaScript 或 TypeScript 创建页面，创建一个扩展名为 .page.js 或 .page.ts 的文件 (.page 子扩展名是必需的，用于区分生成 HTML 页面的 JavaScript/TypeScript 文件和要在浏览器中执行的其他 JavaScript 文件)。要导出变量，使用命名导出；要导出主要内容，你可以使用默认导出。

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default "This is my first post using lume. I hope you like it!";

默认导出可以是一个函数。它将被执行，并将所有可用的数据作为第一个参数传递，过滤器作为第二个参数传递:

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data, filters) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data: Lume.Data, helpers: Lume.Helpers) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

JavaScript/TypeScript 允许从同一个文件生成多个页面。查看 Pagination 获取更多信息。

创建布局

可以使用 JavaScript/TypeScript 创建布局。只需在 _includes 目录中创建 .js 或 .ts 文件。

export default ({ title, content }, filters) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

export default ({ title, content }: Lume.Data, helpers: Lume.Helpers) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

配置 VSCode

你可以使用一些 VS Code 扩展来为模板字符串语法高亮:

ES6 String HTML: 使用 Js 注释 /*html*/ 高亮 HTML

export default (params) => /*html*/ `<p>It's work!</p>`;

lit-html: 使用 Js 标签函数高亮 HTML

// utilities.ts
export const html = (str: string[], ...val: unknown[]): string =>
  String.raw({ raw: str }, ...val);

import { html } from "utilities.ts";

export default (params) => html`<p>It's work!</p>`;