使用 Markdown、Vento、Nunjucks、Liquid、JSX、TSX、JavaScript、TypeScript、Pug、Eta… 等创建页面,或轻松添加你自己的引擎。
# Galician municipalities
- O Pino
- Tordoia
- Ordes
- Cedeira
<h1>{{ title }}</h1>
<ul>
{{ for item of items }}
<li>{{ item }}</li>
{{ /for }}
</ul>
<h1>{{ title }}</h1>
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
export default function ({ title, items }) {
return <>
<h1>{ title }</h1>
<ul>
{ items.map((item) => <li>{ item }</li>)}
</ul>
</>;
}
export default function ({ title, items }) {
return `
<h1>${ title }</h1>
<ul>
${ items.map((item) => `<li>${ item }</li>`)}
</ul>
`;
}
interface Data {
title: string;
items: string[];
}
export default function ({ title, items }: Data): string {
return `
<h1>${ title }</h1>
<ul>
${ items.map((item) => `<li>${ item }</li>`)}
</ul>
`;
}
h1= title
ul
each item in items
li= item
<h1><%= title %></h1>
<ul>
<% for (const item of items) { %>
<li><%= item %></li>
<% }) %>
</ul>
使用 JSON 或 YAML 等静态格式存储数据。使用 JavaScript 或 TypeScript 从数据库或 API 获取数据。
title: Galician municipalities
items:
- O Pino
- Tordoia
- Ordes
- Cedeira
{
"title": "Galician municipalities",
"items": [
"O Pino",
"Tordoia",
"Ordes",
"Cedeira"
]
}
export const title = "Galician municipalities";
export const items = [
"O Pino",
"Tordoia",
"Ordes",
"Cedeira"
];
const title = "Galician municipalities";
const response = await fetch("https://example.com/galician-minicipalities.json");
const items = (await response.json()) as string[];
export { title, items };
处理器可以编译和优化 CSS 或 JavaScript 等资源。它们还可以使用 DOM API 转换 HTML 代码。
site.process([".css"], (files) => {
for (const file of files) {
file.content = customTransform(file.content);
}
})
site.process([".html"], (pages) => {
for (const page of pages) {
const externalLinks = page.document.querySelectorAll('a[href^="http"]');
externalLinks.forEach((link) => {
link.setAttribute("target", "_blank");
});
}
})
你可以创建像 NPM 中那样的自定义脚本,并从 CLI 或在任何事件之后执行它们。
// Create a script and run it after build
site.script("deploy", "rsync -r _site/ user@host.com:/site");
site.addEventListener("afterBuild", "deploy");
// Or run arbitrary code
site.addEventListener("afterBuild", () => console.log("site build"));
在一个单独的 _config.ts 或 _config.js 文件中配置你的站点构建,使用插件 和一个简单而清晰的 API。
import lume from "lume/mod.ts";
const site = lume();
export default site;
import lume from "lume/mod.ts";
import lightningcss from "lume/plugins/lightningcss.ts";
import esbuild from "lume/plugins/esbuild.ts";
import svgo from "lume/plugins/svgo.ts";
import jsx from "lume/plugins/jsx.ts";
import date from "lume/plugins/date.ts";
const site = lume();
site.use(lightningcss())
.use(esbuild())
.use(svgo())
.use(jsx())
.use(date());
export default site;
忘掉包含数千个依赖项的 node_modules 文件夹。Lume 使用 Deno 和 HTTPS 导入构建,只下载你使用的内容。干净、快速且安全。
Lume 仅导出你的代码。它不会生成任何额外的客户端 JavaScript 代码。
静态站点可以托管在任何地方(免费):GitHub/GitLab Pages、Deno Deploy、Vercel、Netlify… 探索部署方式
想要使用新的模板引擎或新的 JavaScript 编译器?Lume 允许你使用任何你想要的。探索官方插件
这个网站
字体设计师和字型绘图师 Rubén Prol 的个人网站
Deno 和 Web Components 的框架
为您的 Bluesky 个人资料链接设计的动态图标
Andreas Nedbal 的个人网站
设计师 Segundo Fdez 的个人网站
位于卢戈(加利西亚)的设计工作室
Frank Harris 的个人网站
自从我发现 lume.land by @misteroom 以来,很久没有遇到能让我如此愉快地使用的东西了。多么出色的软件。一切都正常运行,涵盖了所有常用场景,并且整个文档都非常到位。喜欢它。
Kamil Ogórek (@kamilogorek)
我们通过一个简单的小技巧大大改善了我们的核心网络指标💡️
不使用客户端渲染
(我们将文档从 docusaurus 迁移到了 lume.land)Deno (@deno_land)
再次非常感谢 @cadey 向我展示了 @lume。
在我过去几年使用的所有静态站点构建器中,这是构建网站最流畅和最愉快的体验。 :pixel_love:Andy (@pixel@desu.social)
𝗟𝘂𝗺𝗲 for @deno_land 可能是目前最好的 #StaticSiteGenerator。
V2 现已发布,Vento 作为默认模板引擎。
Vento 是对 Nunjucks 的改进(仍然作为插件提供):
➜ JavaScript 和异步支持,
➜ 更少的样板代码。Doğa Armangil (@DogaArmangil)
我发现了 #lume,用于使用 #deno 创建静态网站。它提供的灵活性、你可以实现的许多功能以及它的乐趣都令人惊叹 https://t.co/JtA3g86u14
Mario Girón (@m_giron)
快速 PSA:@misteroom 的 SSG Lume 真的帮助我以简单安全的方式重建了我的网站。并排使用 three.js 和 Lume 简单、灵活且非常有趣。非常感谢 Lume。❤️
🎀 𖤐𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼𖤐 🎀 (@angeldollface66)
是时候放弃 @jekyllrb 作为我首选的 #StaticSiteGenerator 了。
Lume 的突出特点,除了在 @deno_land 的 TypeScript 和 JavaScript 运行时上运行之外:
▶︎ 页面可以用 YAML 编写,其中包含页面内容的轮廓
▶︎ 嵌套布局Doğa Armangil (@DogaArmangil)
我对 Lume 的评价从“非常棒”升级为“天哪,这是我多年来构建网站最有趣的一次”。它吸收了 Eleventy 最好的想法,然后将生产力提高到 11。如果你像我一样是厌倦了网络的恐龙,请不要错过它!https://t.co/XHKLWshU3U
Hendrik Mans (@hmans)
我只花了 30 分钟玩 @deno_land 的 Lume 静态站点生成器,我就已经爱上它了!它速度极快,而且似乎拥有我开箱即用的所有功能。#deno #typescript #webdev
Kacper Kula (@kulak_at)
很高兴看到 @deno_land 的生态系统与 Fresh 或 Lume 🦕 这样的好东西一起成长
Lauchita. (@_LautaroLopez)
试用了 Lume。它很紧凑且易于使用 https://t.co/IBdWKpe9BA #zenn
hashrock (@hashedrock)
好的,爱上了 @deno_land 和 Lume SSG。不必担心 node_modules 😄 真是太好了
freeLance (@freeLance0451)
我最近使用 Lume 重新设计了我的网站 (https://t.co/n9FcC2ATtp):一个由 @misteroom 构建的精美静态站点生成器。易于使用、简单快速。如果你是 Node.js 上 11ty 的粉丝,绝对值得一试。
Naiyer Asif نیر آصف (@Microflash)
#tarugo22 网站的代码是完全开源的,我们没说过吗?
而且我们也没说过它是用加利西亚技术创建的?https://t.co/5hJNkf7otYTarugoconf (@tarugoconf)
Deno 很棒。如果你正确使用它,你将永远不想回到 Node - 而 Lume (https://t.co/EIFgNe07Sc) 做对了:强大、对开发者友好、超级简单且极其灵活的静态站点生成。
@dragonwocky
Lume 是一个很棒的工具。它比我过去 5 年 Web 开发中使用过的任何静态站点生成器都更强大和灵活。
Braden East (@bradenthehair)
这是一个漂亮的 Deno 静态站点生成器。让我想起 11ty。https://t.co/EiE4yOHlmS
Matthew Phillips (@matthewcp)
我在静态生成器方面一直处于瘫痪状态,不知道用哪个来编写我的网站,我最终决定使用 Lume(一个用 Deno 编写的静态生成器)。我喜欢它,而且它很容易配置
@automaetopia
tapi sekarang sih pengennya pakai lumeland https://t.co/v6konf7O0Z
Poes (@kuspoes)
就我个人而言,我从 Jekyll 迁移到 Eleventy 再到 Lume (https://t.co/aSHo422kxJ)。我喜欢它。如果你自己构建它(不依赖 Github 的 MD 解析器),Github 页面就很好。
Fernando Serboncini (@fserb)