如何使用Eleventy SSG自动为Markdown表格包裹table-wrapper容器

有两种常用的自动实现方式，无需手动修改每篇Markdown文档：

方法一：修改Markdown渲染器（推荐） #

Eleventy默认使用markdown-it作为Markdown解析器，你可以通过重写它的表格渲染规则，自动给表格包裹table-wrapper容器。

在项目根目录的.eleventy.js文件中添加以下配置：

module.exports = function(eleventyConfig) {
  // 配置markdown-it并添加表格包裹逻辑
  eleventyConfig.setLibrary("md", require("markdown-it")({
    html: true,
    breaks: true,
    linkify: true
  }).use(function(md) {
    // 保存默认的表格渲染函数
    const defaultTableRender = md.renderer.rules.table || function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

    // 重写表格渲染规则，包裹div容器
    md.renderer.rules.table = function(tokens, idx, options, env, self) {
      const tableHtml = defaultTableRender(tokens, idx, options, env, self);
      return `<div class="table-wrapper">${tableHtml}</div>`;
    };
  }));

  // 保留你原有的其他Eleventy配置...
};

这种方法在Markdown转HTML的阶段直接处理表格，性能更优，且只针对Markdown里的表格生效。

方法二：使用Eleventy Transform处理最终HTML #

如果你的表格不仅来自Markdown，还可能来自其他模板（比如Nunjucks），可以用Transform遍历生成的HTML文件，自动给所有表格添加包裹容器。

1. 首先安装依赖：

npm install cheerio --save-dev

2. 在.eleventy.js中添加Transform配置：

const cheerio = require('cheerio');

module.exports = function(eleventyConfig) {
  eleventyConfig.addTransform("wrapTables", function(content, outputPath) {
    // 仅处理HTML输出文件
    if (outputPath && outputPath.endsWith(".html")) {
      const $ = cheerio.load(content);
      // 给所有table元素包裹div.table-wrapper
      $('table').wrap('<div class="table-wrapper"></div>');
      return $.html();
    }
    return content;
  });

  // 保留你原有的其他Eleventy配置...
};

这种方法会处理生成的所有HTML中的表格，适用范围更广，但需要额外依赖，性能略低。

最后不要忘记在你的bundle.css中添加样式：

.table-wrapper {
  overflow-x: auto;
}

内容的提问来源于stack exchange，提问作者Sartaj Ansari