如何为Bootstrap共享(.case-study.html)模板的每个页面添加自定义类？

核心思路 #

利用静态站点生成器的**页面前置元数据（Front Matter）**传递自定义类名，再在模板中通过Liquid语法动态渲染class属性，既保留模板复用性，又能实现单页自定义样式。

具体步骤 #

• 1. 在目标页面定义自定义类
  每个需要修改sheet样式的页面，在文件开头的Front Matter中添加sheet_class字段，支持多个类名（用空格分隔，符合Bootstrap类写法）：

  ---
  layout: case-study
  sheet_class: "custom-sheet-about custom-bg-light"
  ---
  

  不需要自定义的页面可以省略这个字段，模板会自动保留默认的sheet类。

• 2. 修改模板实现动态类渲染
  更新你的case-study.html模板，将sheet容器的class属性改为动态拼接，保留原有sheet类的同时，读取页面定义的自定义类：

  {% include header.html %}
  
  <div class="sheet{% if page.sheet_class %} {{ page.sheet_class }}{% endif %}">
     <div class="content">
       {{ content }}
     </div>
      
     {% include footer.html %}
  </div>
  

  这里用Liquid的条件判断语法，只有当页面存在sheet_class字段时，才会追加对应的类名，完全不影响原有页面的默认样式。

• 3. 编写自定义类的样式
  在你的自定义CSS文件中（比如assets/css/custom.css）添加对应类的样式，结合Bootstrap的样式体系调整：

  .custom-sheet-about {
    max-width: 1220px;
    margin: 2.5rem auto;
    border-radius: 0.5rem;
  }
  .custom-bg-light {
    background-color: #f9fafb;
    padding: 3rem 2rem;
  }
  

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