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

Eleventy不会向从嵌套index.md文件生成的索引文件添加html后缀

Eleventy是一个静态网站生成器,它可以帮助开发者快速构建高性能的静态网站。在Eleventy中,通过配置文件可以指定生成网站的规则和选项。

对于不会向从嵌套index.md文件生成的索引文件添加html后缀的问题,可以通过Eleventy的配置文件进行解决。在配置文件中,可以使用插件或自定义过滤器来修改生成文件的命名规则。

一种解决方法是使用Eleventy的插件eleventy-plugin-navigation。该插件可以帮助生成导航结构,并且可以自定义生成文件的命名规则。具体使用方法如下:

  1. 首先,安装eleventy-plugin-navigation插件:
代码语言:txt
复制
npm install eleventy-plugin-navigation --save-dev
  1. 在Eleventy的配置文件(通常是.eleventy.js.eleventy.config.js)中引入插件并进行配置:
代码语言:txt
复制
const pluginNavigation = require("eleventy-plugin-navigation");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginNavigation, {
    // 配置导航结构
    navigation: {
      index: {
        sortBy: "title",
        permalink: "/{{ page.fileSlug }}/",
        title: "Index"
      }
    },
    // 配置文件命名规则
    permalink: {
      index: "/{{ page.fileSlug }}/index.html"
    }
  });
};

在上述配置中,navigation选项用于配置导航结构,permalink选项用于配置文件命名规则。通过设置permalink选项中的index属性,可以指定从嵌套的index.md文件生成的索引文件的命名规则为index.html

  1. 运行Eleventy生成网站:
代码语言:txt
复制
npx eleventy

生成的索引文件将会带有.html后缀。

除了使用插件,还可以通过自定义过滤器来修改生成文件的命名规则。具体方法如下:

  1. 在Eleventy的配置文件中定义一个自定义过滤器:
代码语言:txt
复制
module.exports = function(eleventyConfig) {
  eleventyConfig.addFilter("addHtmlExtension", function(value) {
    if (value.endsWith("/index")) {
      return value + ".html";
    }
    return value;
  });
};

在上述代码中,定义了一个名为addHtmlExtension的过滤器,用于给文件名添加.html后缀。

  1. 在模板文件中使用自定义过滤器:
代码语言:txt
复制
<a href="{{ page.url | addHtmlExtension }}">{{ page.data.title }}</a>

在上述代码中,通过addHtmlExtension过滤器给链接的URL添加.html后缀。

通过以上方法,可以解决Eleventy不会向从嵌套index.md文件生成的索引文件添加.html后缀的问题。这样生成的索引文件将会带有.html后缀,符合网站的命名规则。

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

相关·内容

Eleventy 建立一个静态网站

Eleventy 是一个基于 JavaScript Jekyll 和 Hugo 替代品,用于构建静态网站。 静态网站生成器是一种基于原始数据和一组模板生成完整静态 HTML 网站工具。...Eleventy: 一个静态网站生成Eleventy(11ty)是一个简单静态网站生成器,是 Jekyll 和 Hugo 替代品。...在你确认安装完成后,尝试运行 Eleventy: $ npx @11ty/eleventy 4、创建一些模板 现在运行两个命令来创建两个新模板文件(一个 HTML 和一个 Markdown 文件):...'# Page header' > index.md 这就把当前目录或子目录中任何内容模板编译到输出文件夹中(默认为 _site)。...然后把 _site 中文件上传到你 Web 服务器,发布你网站给世界看。 尝试 Eleventy Eleventy 是一个静态网站生成器,它易于使用,有模板和主题。

2K10
  • 一个现代静态网站生成Eleventy

    所以 Eleventy(通常简称为 11ty)是奇怪命名 JavaScript 工具包中又一个。但作为静态站点生成器,它有什么优势呢?...现在我们将创建两种不同类型内容文件(或模板),并观察 Eleventy 处理它们方式。按照指示,我在命令行上生成了这些内容。 echo '<!...如果我们查看新 _site 目录,可以确认: 所以它将我 README.md 文件输出视为一个新路径,具有自己默认索引页面。它似乎还使用了 Liquid,一种模板语言,来处理这些文件。...但如果我们仅使用这个,Eleventy 将认为布局页面只是一个类似 README 路径。因此,我们将其放在一个名为 _includes 特殊文件夹中,该文件不会被构建,但可以被引用。...如果我们清理 _site 目录(旧页面将保留)并忽略庞大 node-modules 目录,你应该有这个: 由于没有打开 index.html,什么都不会提供。我们只有旧 README。

    12810

    Hugo 与 Hexo 异同

    好不容易有一篇文章出现在 Google 相关搜索结果前排,却因为 URL 变化导致原链接 404 从而导致该文章 Google 索引中移除,这一定会是非常令人沮丧?。...然后是 .html 后缀,博主当时年轻,想着加上这个显得 COOL 一点,于是添加了此参数并随着那篇教程带偏了很多人。...URL 是有 .html 后缀,但需要注意是:这样是会产生一些 bugs ——具体我就不再花时间叙述了——因此还是建议直接抛弃 .html 后缀。...还有一个是 index.md 问题,在 Hugo 中你必须在它前面添加一个下划线,即 _index.md。...需注意是子文件夹内必须有 _index.md,否则 Hugo 不会认为该子文件夹为一个分区,见:https://gohugo.io/content-management/sections/#nested-sections

    4.3K10

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

    /image.png) 所有引用资源文件 在生产打包时,会被复制到 dist 目录并文件名会带上 hash 未被引用资源文件不会被复制 图片资源小于 4kb 会被 base64 公开文件 public...目录是个特殊目录 用来放置你没有在任何 markdown 里面引用资源文件 这个目录下文件不会被重命名加上 hash 值 引用该目录资源需要直接使用根路径引用,比如 public/icon.png...index.html, 并且访问路径是 / 举个例子: . ├─ index.md ├─ foo │ ├─ index.md │ ├─ one.md │ └─ two.md └─ bar ├...-- 指向在 foo 目录 README 文件某个标题 --> [bar - three](../bar/three) [bar - three](...../bar/four.html) 页面后缀 页面及内部链接默认自动添加 .html 后缀

    3.5K40

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

    它们具有高度可定制化、快速生成静态文件以及拥有多种主题和插件等核心优势。此外,这些项目在文档资料方面也做得很好,对于初学者来说上手较为轻松。...11ty/eleventy Stars: 14.6k License: MIT Language: JavaScript eleventy 是一个简单静态网站生成器,它是 Jekyll 一种替代方案...多样化支持:eleventy 支持多种模板语言 (如 HTML、Markdown、JavaScript 等),让开发者有更大灵活度来选择适合自己需求和喜好方式进行编码。...如果你正在寻找一个简单但又功能齐全、容易上手操作与维护、并拥有广泛应用领域 (个人博客到企业级门户) 静态网站生成器,elevevnty 将会是您理想之选!...多种技术框架和中间件:满足不同需求场景下应用要求。 支持搜索引擎和对象存储服务:方便用户进行数据检索与文件上传下载操作。 提供定时任务管理器:可自动执行指定时间周期内需要完成任务。

    46840

    博客用不着什么JavaScript框架

    我想提高网站性能:静态 HTML 文件在 99% 时候都比动态页面更快。...服务器将静态生成 HTML 文档发送到用户浏览器,然后浏览器开始渲染页面。...很有可能,你构建第一个网页性能要比之后构建许多页面都要好得多——它由一个 HTML 文件和一些 CSS 组成,也许还有一些未优化图像,但它们并不会阻止页面加载。...Eleventy 为你提供了十种可以任意搭配模板语言选项,包括 markdown、nunjucks 和 liquid;这意味着我可以 Craft 中复制并粘贴旧模板,更改文件扩展名,并做一些细微调整就能运行在...例如,在 Eleventy 中没有一种优雅方法来生成响应式图像。

    4.1K10

    Hexo迁移到Hugo-送漂亮Hugo Theme主题

    新主题已经实现了文章归档,只需要在新建content/archives/index.md文件文件内容为: content/archives/index.md title: "归档" description...content/archives/index.md表示在content/archives/目录下index.md文件 这样Hugo就会自动生成/archives/index.html归档页面,通过类似...对于Hexo迁移到Hugo来说,比较重要就是保持URL链接一致性,这样已经被搜索索引,其他文章引用文章才可以继续被打开,否则就会出现404错误。...只有文章是html后缀格式,分类、标签等聚合页是目录Path格式,如:http://www.flysnow.org/categories/Golang/。...在新Hugo系统中,我也想这么做,但是Hugopermalink是不能配置html后缀,即可你配置了,也只会生成如下URL/year/month/day/title.html/还是一个目录,无法以

    2.1K10

    Hugo 跨版本升级

    构建速度随着内容增多变慢 去年十月,在网站架构简化之后,我完整发布编译时间 1分钟 进入了 40s 阶段,但是随着内容膨胀、编译时间越来越慢了,可以看到不少发布时间变长。...页面模板查找逻辑、模板语法、站点配置文件变更,现有模板无法直接使用。 分类标签系统扁平化,不再支持树形层级嵌套,链接兼容如何处理? 下面我来逐个击破。...首先是禁用官方RSS生成能力,在站点 config.toml 配置文件添加下面的内容: disableKinds= ["RSS"] 如果你有定义 output 格式,并包含 RSS 定义,也需要删除该内容...index.md 两个文件。.../容器化" ] 老版本 Hugo 会自动生成两级分类目录,并且两个目录都支持索引,像是下面这样。

    95210

    Hexo使用攻略-添加分类及标签

    创建“分类”选项 生成“分类”页并添加tpye属性 打开命令行,进入博客所在文件夹。...,找到index.md这个文件,打开后默认内容是这样: --- title: 文章分类 date: 2017-05-27 13:47:40 --- 添加type: "categories"到内容中,添加后是这样...注意:hexo一篇文章只能属于一个分类,也就是说如果在“- web前端”下方添加“-xxx”,hexo不会产生两个分类, 而是把分类嵌套(即该文章属于 “- web前端”下 “-xxx ”分类)。...当然,只有添加了categories: xxx文章才会被收录到首页“分类”中。 创建“标签”选项 生成“标签”页并添加tpye属性 打开命令行,进入博客所在文件夹。...这个文件,打开后默认内容是这样: --- title: 标签 date: 2017-05-27 14:22:08 --- 添加type: "tags"到内容中,添加后是这样: --- title:

    2.5K31

    用 Markdown 写一本自己电子书吧(一)手动篇

    既然 epub 内部就是 html 页面,我们 Markdown 文章也能编译成 html,那我们写个工具将以往文档处理成符合 epub 标准文件包,不就可以做一本自己电子书了?...以后我们电子书添加内容时,还需要根据实际情况继续更新其中 package > manifest 资源清单 和 package > spine 书脊 相关信息。 1-2....添加页面 接下来就是其中添加内容了。...此时,如果将 example 目录内容进行 zip 打包,生成文件名称改为 example.epub,就已经可以在一些 epub 阅读器中正常打开进行阅读了。...文章内引用图片资源 其中,后者可以直接在 Markdown 文档渲染成 html 文件后,进行 html 解析再对所有 img 标签进行汇总即可得出配置列表。

    1.2K30

    用Python写静态博客

    MkDocs 使用Markdown项目文档。 概观 MkDocs是一个快速,简单且彻头彻尾华丽静态站点生成器,旨在构建项目文档。...有一个名为配置文件mkdocs.yml,以及一个名为文件夹 docs,其中包含您文档源文件。现在,该docs 文件夹只包含一个名为文档页面index.md。...,您可能需要编辑配置文件,并通过添加pages 设置在导航标题中添加有关每个页面的顺序,标题和嵌套一些信息: site_name: MkLorum nav: - Home: index.md...请注意,您源文档已输出为两个名为index.htmlHTML文件 about/index.html。...一段时间后,文件可能会文档中删除,但它们仍将驻留在site目录中。要删除这些陈旧文件,只需mkdocs 使用--clean开关运行即可。

    1.6K20

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

    提供更好阅读体验,如可以自由跳转,添加评论等。 此外,将生成电子书形式静态站点,可以托管到其他平台,达到了备份效果。...Eleventy 基于 JavaScript 实现,是一个简单、灵活、快速静态站点生成器,可以将各种模板语言(如 Markdown、Pug、Liquid、Handlebars 等)转换为 HTML、CSS...Pelican 主要特点包括: 静态网站生成:Pelican 将输入文本文件转换为静态HTML文件,不需要使用数据库或其他后端技术。...Middleman 是一个用 Ruby 编写静态站点生成器,它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。...Sphinx 是一个用于创建技术文档工具,可以将文本文件(如reStructuredText、Markdown等)转换成HTML、PDF、EPUB等格式。

    3.6K21

    Vitepress网站搭建教程

    │ └─ config.js # 配置文件│ └─ index.md # 主页相关└─ package.json 启动在cmd里面输入下面命令就可以运行vitepress...对于链接,将路径设置为不带 .md 后缀实际文件,并且始终以 / 开头。...里面的icon图标都是可以自定义,替换成表情或者图片,vitepress默认是没有icon,所以你需要手动添加或直接复制我下面的代码 在每个板块中也可以添加link,可以点击跳转到链接features...github.com/vuejs/vitepress---页脚如果你想在底部添加版权信息,只要找到config.mjs文件,然后在export default themeConfig里面添加 footer...首先在本地cmd窗口输入命令,build 生成一个静态网站pnpm run docs:build运行完成之后是这样子然后在 .vitepress 目录会生成一个 dist 文件夹打开就会发现熟悉 html

    36810

    HTMLCSS 第一章

    web标准 网页结构(后缀名字为.html文件) 网页样式(后缀名字为.css文件) 网页行为(后缀名字为.js文件) ### 各司其职: 网页结构:负责网页内容整理和分类 网页样式...标签关系 嵌套关系 并列关系 HTML标签分类 双标签:如标签内容<...sublime使用 创建临时文件:ctrl+n 保存时候一定记得添加文件后缀名.html 写完标签之后 按 tab键 自动生成完整版骨架快捷方式:!...一个是没有语义,没有强调作用 语义好网页更受SEO喜欢,在搜索引擎里面的排名会更靠前 SEO优化 ===> 在输入关键字时候,搜索引擎会罗列很多很多网页出来,而用户基本习惯都是点前面的网页,不会去点后面的网页...http://www.baidu.com/logo.png"> 相对地址:当前文件出发去找目标文件过程就称之为相对路径 如果当前文件和目标文件在同一个文件夹的话,路径直接写目标文件名称即可

    95420

    写一个自定义loader,看完,就会

    但是官方提供另外一种方式 在resolveLoader中可以给加载loader快捷注册路径,这样就可以像官方一样直接写test-loader了,这个是文件名,文件后缀名默认可以省略。...--port=8081", "build": "webpack" }, 我们执行npm run build test-loader与test-babel-loader都会执行,而且生成...); 我们运行npm run build 已经获取到了doc/index.md内容了 在loader中我需要解析md内容,此时我们需要借助一个第三方md解析器marked[4] npm i marked...所以需要解析html,那么此时需要另外一个loader来解决,html-loader npm i html-loader --save-dev 然后添加html-loader { test: /...可以获取loader中options loader执行顺序是从下往上或者右往左,在后一个loader中content是前一个loader返回结果 loader有两种类型,一种是同步this.callback

    38510

    使用Hexo+Github+腾讯云+Netlify搭建个人博客

    并且文章是以markdown形式保存。 其实也可以自己手动在source/_posts目录下新建markdown文件。当我们编译博客目录时,这些markdown文件将会生成对应网页文件。...: avatar: 添加标签页面 新建页面: hexo new page tags 设置页面(编辑 source/tags/index.md): --- type:...://post.zz173.com/posts/8ddf18fb.html crc32 & dec https://post.zz173.com/posts/1690090958.html 验证 先清理下本地文件...该插件会在每篇文章开头增加内容: abbrlink: df27ccfb 这个字符串就是这篇文章唯一标识,无论修改标题还是发布文章都不会改变。...所以推送东西不应该包含运行hexo g命令生成文件。 然后,在Netlify 上注册一个帐号。最好直接使用Github帐号。 并添加好维护博客内容仓库。

    69800

    Islands Architecture 孤岛(岛屿)架构

    静态内容是无状态不会触发事件,并且在呈现后不需要再次激活。呈现后,动态内容(按钮、筛选器、搜索栏)必须重新连接到其事件。DOM 必须在客户端重新生成(虚拟 DOM)。...这种重新生成、激活和事件处理功能会导致发送到客户端 JavaScript。岛屿架构有助于服务器端呈现包含所有静态内容页面。但在这种情况下,呈现 HTML 将包含动态内容占位符。...Astro:Astro 是一个静态网站构建器,可以其他框架(如 React、Preact、Svelte、Vue 等)中构建 UI 组件生成轻量级静态 HTML 页面。...Eleventy + Preact:Markus Oberlehner 演示了 Eleventy 使用,Eleventy 是一种静态站点生成器,具有可以部分水合同构 Preact 组件。...图片提供:https://divriots.com/blog/our-experience-with-astro/搜索引擎优化:由于所有静态内容都在服务器上呈现;页面对 SEO 友好。

    20810
    领券