关于JAM Stack静态站点生成器短代码支持能力的技术问询

我明白你在挑选JAMStack静态站点生成器时，核心盯着的就是短代码支持能力——不管是自定义还是quote、figure、YouTube这类预定义的，能让内容编辑用简洁的标签（比如<youtube video-id="379232">）生成对应的HTML输出。Hugo的shortcodes确实做得相当成熟，下面我给你整理几个其他热门SSG的相关实现方式，供你参考：

Eleventy (11ty) #

Eleventy对短代码的支持和Hugo最为接近，官方原生就提供了灵活的自定义能力：

• 首先在项目的.eleventy.js配置文件里注册自定义短代码：

module.exports = function(eleventyConfig) {
  // 注册YouTube短代码
  eleventyConfig.addShortcode('youtube', function(videoId) {
    return `<div class="youtube-embed">
      <iframe src="https://www.youtube.com/embed/${videoId}" 
              title="YouTube video player" 
              frameborder="0" 
              allowfullscreen></iframe>
    </div>`;
  });
};

• 内容编辑者在Markdown里可以直接用模板语法调用：{% youtube "379232" %}
• 如果需要支持属性式的写法（比如你提到的<youtube video-id="379232">），可以借助社区插件（比如eleventy-plugin-shortcode-tag）实现，让编辑体验更贴近HTML标签的习惯。
• 还能扩展短代码的参数，比如增加自定义宽度选项，满足更灵活的需求。

Next.js #

Next.js本身没有内置短代码系统，但可以通过MDX+自定义组件的方式实现类似效果，这也是社区的主流方案：

• 先创建一个React组件，比如components/YouTube.js：

export default function YouTube({ videoId }) {
  return (
    <div className="youtube-embed">
      <iframe
        src={`https://www.youtube.com/embed/${videoId}`}
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      ></iframe>
    </div>
  );
}

• 编辑者在MDX文件里可以直接导入并使用组件：

import YouTube from '../components/YouTube'

<YouTube videoId="379232" />

• 要是想让编辑者不用每次手动导入，可以配置MDX的全局组件，把常用组件注册为全局可用，这样直接写<YouTube videoId="379232">就行。

Astro #

作为新兴的SSG，Astro对短代码/组件的支持非常友好，原生就能在Markdown中直接使用组件：

• 先写一个Astro组件components/YouTube.astro：

---
const { videoId } = Astro.props;
---
<div class="youtube-embed">
  <iframe
    src={`https://www.youtube.com/embed/${videoId}`}
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  ></iframe>
</div>

• 编辑者在Markdown文件里无需导入，直接调用组件即可：

---
title: 我的测试文章
---

<YouTube videoId="379232" />

• 如果偏好<youtube video-id="379232">这种自定义标签格式，还可以编写自定义Astro插件来解析这类标签，转换为对应组件渲染。

Gatsby #

Gatsby主要通过MDX+自定义组件实现短代码能力，思路和Next.js类似，也有插件可以简化流程：

• 基础用法：创建React组件后，在MDX中导入使用，比如：

import YouTube from '../components/YouTube'

<YouTube videoId="379232" />

• 全局组件配置：通过gatsby-plugin-mdx的globalScope选项，把常用组件注册为全局可用，省去每次导入的步骤。
• 社区插件辅助：比如gatsby-remark-shortcodes插件，支持用类似Hugo的短代码语法（{% youtube 379232 %}），在配置中映射到对应的组件或HTML输出。

这些方案里，Eleventy的短代码体验最贴近Hugo，而Next.js、Astro、Gatsby则是通过组件体系实现类似能力，灵活性也很强，你可以根据项目的技术栈偏好来选择。

内容的提问来源于stack exchange，提问作者all jazz