如何在Eleventy+WebC生态中通过自定义前置数据传递自定义类？

实现逻辑和Nunjucks思路一致，适配WebC语法即可，具体操作如下：

• 编写WebC布局文件
  在你的WebC布局（比如_includes/layouts/base.webc）里，通过模板插值获取前置数据中的class值，绑定到<body>标签：

  <body class="{{ class }}">
    <!-- 页面内容会插入到这个插槽中 -->
    <slot></slot>
  </body>
  

• 在页面/文章中配置前置数据
  和之前的用法完全相同，在页面的Front Matter里定义class字段：

  ---
  class: "home"
  ---
  

额外优化技巧 #

• 如果需要给<body>设置默认类名，同时兼容自定义类，可以用插值拼接：

  <body class="site-body {{ class or '' }}">
  

  这样页面未定义class时，只会保留默认类，不会出现空class属性。

• 传递多个类名时，直接在前置数据里写空格分隔的字符串即可：

  ---
  class: "home dark-mode"
  ---
  

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