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

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。

    14510

    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.4K10

    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 --> 页面后缀 页面及内部链接默认自动添加 .html 后缀。

    3.5K40

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

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

    50340

    你的博客用不着什么JavaScript框架

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

    4.1K10

    Hugo 跨版本升级

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

    96710

    从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系统中,我也想这么做,但是Hugo的permalink是不能配置html后缀的,即可你配置了,也只会生成如下的URL/year/month/day/title.html/还是一个目录,无法以

    2.1K10

    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.6K31

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

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

    1.3K30

    博客生成静态站点工具 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.9K21

    基于 Hugo 搭建静态博客网站

    注册完域名后,点击 DNS 条目进入域名管理页面,可以添加域名的后端服务地址: 在 DNS 的列表页可以点击 SSL 图标,为域名生成证书: 生成证书后可以在 SSL 证书管理页面找到对应的证书条目,并将证书下载下来...优化网站性能:通过在构建过程中对图像进行优化,如压缩图像文件大小,减少图像的加载时间,使网站加载速度更快,有助于提高网站的搜索引擎排名和用户满意度。...每篇文章在 content/posts 下有单独的目录 操作命令为:hugo new content/posts/xxxx/index.md 直接在 index.md 中写文章内容,index.md中需要插入的图片等...值为true时,文章在正常生成静态文件时不会被包含在内,只有使用hugo -D命令时才会生成。...hidden:如果设置为true,文章可能不会在正常的文章列表等位置显示,但可以通过直接访问URL等方式查看,常用于一些不希望公开展示但又需要保留的文章。 toc:是否生成文章的目录。

    447109

    用Python写静态博客

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

    1.6K20

    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

    45910

    HTMLCSS 第一章

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

    97120

    使用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帐号。 并添加好维护博客内容的仓库。

    72500

    写一个自定义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

    41110

    hexo 添加自定义单静态页面 跳过hexo渲染

    项,如:skip_render: navi/**,这样projects文件夹下的所以文件内容将不会转化为 html,直接被 copy 到 public 文件夹 在「工具盒」文件夹下添加 index.html...多个文件 skip_render: - 'xxxxx' - 'xxxx' 支持正则语法 skip_render: - '*.html' - 'demo/**' 修改了配置但生成出来的内容不一定及时应用了新配置...,最好在生成之前执行一下hexo clean命令,清除掉旧的生成文件和缓存。...例如我们要使 about 页面跳过渲染,创建 /source/about/index.md,将这个页面的相关 HTML 代码写进.md文件并保存,然后在 index.md 的头部写入:, 避免渲染的办法就是在文件头部...HTML 代码要用 ` 和 ` 包起来,使其能正确编译里面的代码   这样,这个文件就不会经过模板渲染,最终发布到/public/里的文件就是去掉标记后的文件的样子。

    1.3K30
    领券