首页
学习
活动
专区
工具
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。

10710

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

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.3K40

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

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

39340

博客用不着什么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 会自动生成两级分类目录,并且两个目录都支持索引,像是下面这样。

92810

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

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.3K30

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

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

1.1K30

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

用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.5K20

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

28610

HTMLCSS 第一章

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

94020

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

66200

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

33710

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.2K30
领券