首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将带有.html后缀的页面保留在eleventy (静态站点生成)输出中?

Eleventy是一个静态站点生成器,它可以将各种模板语言(如HTML、Markdown等)转换为静态HTML页面。默认情况下,Eleventy会将所有的页面文件转换为HTML,并将其输出到指定的目录中。

如果你想保留带有.html后缀的页面在Eleventy的输出中,你可以按照以下步骤进行操作:

  1. 在Eleventy的配置文件(通常是.eleventy.js)中,找到eleventyConfig.addPassthroughCopy方法。该方法用于将指定的文件或目录复制到输出目录中,而不进行任何转换。
  2. eleventyConfig.addPassthroughCopy方法中,添加一个参数,指定带有.html后缀的页面所在的目录或文件。例如,如果你的页面位于src/pages目录下,可以使用以下代码:
代码语言:txt
复制
eleventyConfig.addPassthroughCopy("src/pages/**/*.html");

这将告诉Eleventy将src/pages目录下的所有带有.html后缀的页面复制到输出目录中。

  1. 运行Eleventy生成静态站点。你可以使用以下命令:
代码语言:txt
复制
npx eleventy

Eleventy将根据配置文件中的设置,将带有.html后缀的页面复制到输出目录中,同时将其他页面转换为静态HTML。

这样,带有.html后缀的页面就会保留在Eleventy的输出中了。

注意:以上步骤是基于Eleventy的默认配置进行的。如果你在Eleventy的配置文件中进行了其他自定义设置,可能需要根据实际情况进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一个现代静态网站生成Eleventy

我进入了 Jamstack 和静态站点生成世界,当时我使用 Publii 和 Netlify 启动了一个页面。 从那时起,Jamstack 这个术语被 Netlify 推广了一番。...所以 Eleventy(通常简称为 11ty)是奇怪命名 JavaScript 工具包又一个。但作为静态站点生成器,它有什么优势呢?...模板语言和前置内容 现在进入有趣部分。对于个人网站,我们希望页面共享一个布局。我们希望将内容保留在 Markdown ,并让 Eleventy 为我们创建站点。...Eleventy 使用两个有用概念来实现这一点。 模板语言允许你在你目标输出语言(网站 HTML插入代码指令。通常我们需要区分“这是代码,不要动它”行和“将这个结果放在屏幕上”行。...但我们只想在 Markdown 编写内容,而不是深入 HTML。 首先,我让 ChatGPT “创建一个带有漂亮猫图 HTML 模板”。 结果如下: <!

10810

Islands Architecture 孤岛(岛屿)架构

tl;dr:孤岛架构鼓励在服务器渲染网页中进行小而集中交互。岛屿输出是逐步增强HTML,对增强发生方式更加具体。与单个应用程序控制整个页面渲染不同,其存在多个入口点。...动态内容占位符包含独立组件小部件。每个小部件类似于一个应用程序,结合了服务器端呈现输出和用于在客户端激活应用程序 JavaScript。在渐进式激活页面的激活架构是自上而下。...实现岛屿孤岛架构借鉴了不同来源概念,旨在将它们最佳地结合起来。基于模板静态站点生成器(例如 Jekyll 和 Hugo)支持将静态组件渲染到页面。...Astro:Astro 是一个静态网站构建器,可以从其他框架(如 React、Preact、Svelte、Vue 等)构建 UI 组件生成轻量级静态 HTML 页面。...Eleventy + Preact:Markus Oberlehner 演示了 Eleventy 使用,Eleventy 是一种静态站点生成器,具有可以部分水合同构 Preact 组件。

17110

Eleventy 建立一个静态网站

Eleventy 是一个基于 JavaScript Jekyll 和 Hugo 替代品,用于构建静态网站。 静态网站生成器是一种基于原始数据和一组模板生成完整静态 HTML 网站工具。...它可以自动完成单个 HTML 页面的编码任务,并让这些页面准备好为用户服务。由于 HTML 页面是预先建立,它们在用户浏览器中加载得非常快。...Eleventy: 一个静态网站生成Eleventy(11ty)是一个简单静态网站生成器,是 Jekyll 和 Hugo 替代品。...$ npx @11ty/eleventy-serve 在你网络浏览器打开 http://localhost:8080/README/,看你 Eleventy 输出。...然后把 _site 文件上传到你 Web 服务器,发布你网站给世界看。 尝试 Eleventy Eleventy 是一个静态网站生成器,它易于使用,有模板和主题。

2K10

博客生成静态站点工具 Top 20

MkDocs 是一个简单易用静态网站生成器,基于 Markdown 文档构建漂亮 HTML 文档页面。 MkDocs具有以下特点: 采用Markdown格式编写文档,易于编写和维护。...部署简单,可以将生成HTML静态页面部署到任何Web服务器上。 使用 MkDocs,您可以快速创建漂亮文档页面,非常适合技术写作、软件文档、项目文档等。...Eleventy 基于 JavaScript 实现,是一个简单、灵活、快速静态站点生成器,可以将各种模板语言(如 Markdown、Pug、Liquid、Handlebars 等)转换为 HTML、CSS...Middleman 是一个用 Ruby 编写静态站点生成器,它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。...多种输出格式:Sphinx支持生成HTML、PDF、EPUB等多种格式文档,方便发布和分享文档。 社区支持:Sphinx 是一个开源项目,有庞大社区支持和开发者社区,您可以轻松地获取帮助和支持。

3.3K21

Eleventy配置和Collection快速上手

上周,我们设置了一个静态站点生成Eleventy,并对其进行了一些基本操作。我使用 Warp 命令终端和 Zed 编辑器来创建了一个以猫为主题索引页面。...确保你了解 Eleventy 是如何获取最小 index.md 文件,并使用 layout.html 模板在 _site 目录下创建 index.html 文件。...在上周我结束时候,"输出"目录被称为 _site(Eleventy 默认名称),但是没有"源"目录,所以模板文件就栖息在项目的根目录: 我们上周结束时样子 想要搞清网页项目中什么在做什么已经够糟糕了...我习惯了一个叫 src 源目录,大多数网站都将他们输出保存在 public ,所以让我们使用这个约定: module.exports = function(eleventyConfig) {...我们主线是,我们希望用 Markdown 写内容,并让 Eleventy生成网站。在维护网站时,我们不想处理 HTML

9610

博客用不着什么JavaScript框架

我想提高网站性能:静态 HTML 文件在 99% 时候都比动态页面更快。...当我决定使用静态站点生成器和 JavaScript(排除了 Jekyll 和 Hugo)后,就只剩下两个差别颇大选项了: “我听说 Gatsby 很好用” 根据官方网站说法,“Gatsby 是一个基于...当我第一次听说我可以编写 React 并使用这个很酷 GraphQL 新玩意儿,同时还能输出不需要 JavaScript 静态页面时,我很想尝试它一下。...用户首次访问 Gatsby 网站时会发生这些事情: 用户请求一个页面。 服务器将静态生成 HTML 文档发送到用户浏览器,然后浏览器开始渲染页面。...例如,在 Eleventy 没有一种优雅方法来生成响应式图像。

4.1K10

JavaScript 框架太多了?相反,是太少了

也许你要开发是一个静态站点,也就是那种被打包起来、用来承载内容分发网络所提供 HTML 文件和资产网站。这类站点内容不会经常变更,所以构建难度较低。...另一种可能,就是构建是需要在服务器端进行渲染站点,其中各个 HTML 页面都是由服务器在收到请求时全新构建出来。这指就是那些需要通过各个页面为用户带来自定义体验动态站点。...当然,我们也可以将二者结合起来,一部分是静态页面、一部分是动态页面,我将其称为混合模式。 问题二是,你需要跨多个页面进行状态维护吗?但这方面需求是有多种实现方式,所以我承认这个问题提得有点毛病。...但是,假定我们项目需要同时提供静态内容加服务器端渲染页面,也就是混合模式,而且又属于多页面应用程序,那可选框架有哪些?...Next.js 和 Gatsby 使用是默认为 SPA React,所以并不完全适合我用例。当然,我们可以想办法用 Next.js 或 Gatsby 生成静态站点,再将站点转换成多页应用程序。

2.6K30

【学习图片】14.网站生成器、框架和内容管理系统

了解内容管理系统(CMS),如WordPress和其他站点生成器如何使响应式图像使用更加容易。...静态站点生成器 与任务运行器相比,静态网站生成器(如Jekyll或Eleventy)处理图像方式有一些相似之处。...与任务运行器不同,静态网站生成器可以直接了解这些库配置和使用情况,以及为生产网站生成标记--这意味着它可以做更多事情来自动化我们响应式图像标记。...例如,当作为显示图像简码一部分被调用时,这个插件将根据传递给夏普配置选项输出HTML。...默认情况下,WordPress输出任何图片都会有一个基于你主题中配置图片尺寸而生成srcset属性。 可以为生成图像配置两个关键设置是压缩质量和输出mime类型。

88320

开垦属于你网络空间:简单易用静态博客框架推荐

总之,如果您需要一个简单易用、功能齐全且具备扩展性强大静态网站生成器或博客框架,请考虑选择其中之一。...gohugoio/hugo Stars: 68.0k License: Apache-2.0 Language: Go Hugo 是一个使用 Go 语言编写静态网站生成器,旨在提供快速和灵活构建体验...11ty/eleventy Stars: 14.6k License: MIT Language: JavaScript eleventy 是一个简单静态网站生成器,它是 Jekyll 一种替代方案...使用 JavaScript 编写,可以将包含不同类型模板目录转换为 HTML。...多样化支持:eleventy 支持多种模板语言 (如 HTML、Markdown、JavaScript 等),让开发者有更大灵活度来选择适合自己需求和喜好方式进行编码。

40240

Hexo博客详细教程(一)| 建立本地站点

安装之后检查一下是否正常输出版本信息: ? 安装Hexo 本文中所有的命令执行时,可以在Git bash执行,但速度比较慢;如果要在cmd执行,速度比较快,但要确保 git 已经添加到环境变量!...Hexo是一款快速简洁博客框架,可以将 md 文档渲染为静态 HTML 页面,拥有非常多主题和插件可以选择,安装过程如下: npm install -g hexo-cli ?...文章写好后,可以先在本地生成页面并启动服务,然后在浏览器预览一下,确认没问题再推送到服务器上,方便很多。...这些配置项自己修改,一定要注意语法,修改之后进行如下操作: 清除旧生成页面 hexo clean 生成HTML页面 hexo g ?...下一节讲述如何将本地Hexo站点部署到 Github/Coding/Gitee 三个平台,可以先看一下效果,然后选择一个平台部署自己站点~

84820

Astro 从静态网站生成器到 Next.js 劲敌旅程

Astro 就像一个功能强大静态网站生成器,但尽管它对 JavaScript 依赖性较低,但它与 Next.js、Vue 和其他 Web 框架一样强大。...在 The New Stack 教程 ,Paul Scanlon 解释了他如何将个人网站从 React 框架迁移到 Astro,“并加入了一点 JavaScript”。...Astro 文档 将“岛屿”定义为“页面任何交互式 UI 组件”,并邀请开发者将岛屿视为“漂浮在一片静态、轻量级、服务器渲染 HTML 海洋交互式小部件”。...,它非常擅长生成静态 HTML 页面(当然,这是内容网站基础)。...Astro 优点在于它介于 Eleventy 和 Hugo 等框架静态网站生成器方法,以及 Next.js、Vue 等完全 JavaScript 世界之间。

26610

为什么做页面优化要用静态化,静态化如何落地?

在了解静态化之前,我们需要先了解什么叫静态网页,静态网页是服务器上面真实存在页面,它不需要编译,用户就可以直接访问这样网页,后缀一般为.html或者是.HTM。...如果黑客不知道网站后台、网站采用程序、数据库地址,静态网页更不容易受到黑客攻击网站静态生成html有什么好处SEO网站优化。...如何实时生成静态页面 使用freemarker实现生成静态页面,将页面的实际存在于服务器硬盘,然后通过nginx反向代理服务器访问资源; 将动态页面转化为实际存在静态页面这种方法,由于静态页面的存在...虽然静态页访问速度快,但实现起来毕竟还是比较麻烦了,维护也是一个麻烦事情。如果您站点更新速度快那么就需要在你后台数据更新部分调用相应createHTML方法实时生成静态页面。...实战商品详情页面静态输出文件名称:商品id+“.html输出文件路径:工程外部任意目录。 网页访问:使用nginx访问网页。在此方案下tomcat只有一个作用就是生成静态页面

4.2K41

如何在Ubuntu上安装和使用Hugo

介绍 Hugo是由Go语言实现静态网站生成器。简单、易用、高效、易扩展、快速部署。Hugo这样选择允许您简化堆栈,编写友好markdown,处理更新和自定义内容,从而生成网站。...在本教程,我们将介绍如何在Ubuntu服务器上安装和使用Hugo。这将允许我们配置静态站点,创建内容,并在同一服务器上发布或部署到生产位置。.../content/.gitkeep 我们还希望确保我们渲染网站内容不会添加到源代码管理。实际HTML,JavaScript和CSS资产应该在每次部署时新生成,而不是保存在源代码控制本身。...为了让Hugo能够从我们Markdown页面正确生成HTML,我们需要创建以.md扩展名结尾文件。 创建关于页面 将从主页链接到页面以及页面所需相对路径在很大程度上取决于您主题。...注意:每次构建后,ugo都不会清理输出目录。这意味着过去内容可能会从之前版本中保留在公共目录。Hugo开发人员建议您在每次构建后删除public目录,以便可以全新地重新创建内容。

6.5K10

静态站点生成器:makesite.py

通过在Python编写自己简单、轻量级、无魔法静态站点生成器,完全控制静态网站/博客生成。对!重新发明轮子,伙计们! 目录 简介 但是为什么呢?...静态目录所有文件都将复制到此目录。 稍后将生成静态网站并写入此目录。 然后它创建一个带有一些默认参数params字典。这个字典被传递给其他功能。...我们希望每个页面在标题中包含此品牌名称作为后缀。例如,关于页面的标题中有“About - Lorem Ipsum”。现在查看用作静态网站中所有页面布局页面布局模板。...为此,我们用页面布局模板HTML代码替换页面布局模板{{content}}占位符以获取最终独立模板。 这是通过在代码中进一步调用render()来完成。...快速回顾一下,我们创建一个_site目录来编写生成静态网站,定义一些默认参数,加载所有布局模板,然后调用make_pages()来渲染带有这些模板页面和博客帖子,调用make_list()来呈现博客列表页面

2K30

黑帽SEO剖析之工具篇

寄生虫分类 寄生虫分为动态与静态,动态寄生虫程序就是会不断自动生成页面(如我上面所述案例),或者是刷新页面以后自动变化内容,动态寄生虫生成恶意文件往往是asp/php后缀文件;而静态寄生虫程序生成页面往往都是固定不变内容...,大多为html后缀文件。...通过登录服务器日志分析,我们最终发现黑客是通过web应用程序漏洞获取到了服务器权限,并在该服务器上利用静态寄生虫程序创建了大量恶意html后缀文件,并存放在ds目录下,其利用便是高权重网站二级目录手法...当想要推广一个新站点时,只需要将该站点以外链形式添加到站群,就能吸引蜘蛛爬取收录。简单来说就是通过购买大量域名,租用大量服务器,批量搭建网站形成站群。...蜘蛛池站点案例 在为本篇文章收集黑帽SEO相关资料时,我发现了一款经典蜘蛛池站点,在此分享。 ? 其特点是内容动态生成,刷新页面发现内容随机改变 ?

1.7K61

WordPress固定链接伪静态设置图文教程

%post_id% (序列数字) %category% (分类别名) %author% (作者名) 2、相对来说,百度更喜欢html、htm后缀页面,现在IP过万WordPress博客都使用了htm...后缀静态化,百度、Google权重都到了7,可见修改固定链接是很有必要。...国内各大搜索引擎都声明可以正常收录动态链接,但是由于互联网最原始网页设计都是html、htm,切搜索引擎本身站点都是静态页面,所以种种原因使得众多站长把网站静态化。...,或使用Linux或Windows系统VPS主机,不会配置伪静态规则,可以咨询你空间商,他们会帮助你实现wordpress伪静态,虽然设置了伪静态,只是展示静态后缀,其实还是动态页面,如果想完全静态页面...,可以安装WP Super Cache或者Hyper Cache插件,为全站生成静态页面缓存。

4.1K40

vitepress搭建markdown文档博客

功能强大,与 Gatsby 相似(React)dumi - 一款 UmiJS 生态组件开发文档工具(React)Nextra - 一个基于 Next.js 静态站点生成器。...一个只有几页简单文档站点启动开发服务器所花费时间变得难以忍受。即使是 HMR 更新也可能需要几秒钟才能反映在浏览器。...有了 Vite 和 Vue 3,真的是时候从新考虑“Vue 驱动静态站点生成器(vue系列说明文档几乎都是这样生成)创建博客:mkdir blog-vitepresscd blog-vitepressnpm...此外,每一个子目录包含每一个 index.md 都将自动转换为 index.html,并带有相应 URL/。.../bar/four.html页面后缀默认状况下,生成页面和内部连接后缀是.html

1.6K20

vitePress快速搭建及部署一个博客

改进地方 1.利用了 Vue 3 改进模板静态分析来尽可能字符串化静态内容 2.静态内容以字符串模式而不是渲染函数代码发送,JS 负载更便宜,注水(SSR 时生成 js 交互逻辑代码)也更快 3....这些优化仍然允许在 markdown 混合使用 Vue 组件,编译器会帮你处理静态/动态分离工作 4.使用了 Vite 5.更快 dev 服务器启动 6.更快热更新 7.更快构建(使用 Rollup...文件则需要通过 /icon.png 引用 基础 URL 解决你站点部署不是在根目录情况。...-- 指向在 foo 目录 README 文件某个标题 --> [bar - three](../bar/three) [bar - three](...../bar/four.html) 页面后缀 页面及内部链接默认自动添加 .html 后缀

3.4K40
领券