在Jekyll minima主题网站中实现p5.js画布背景布局求助

针对你遇到的画布被主内容盖住的问题，核心是调整容器层级、定位方式，同时适配 Minima 主题的默认布局，以下是一步步的解决方法：

1. 调整页面布局结构 #

打开 _layouts/default.html，把 .sketch-container 放在 .page-content 的前面、页眉之后，确保画布能处于内容底层：

<body>
  {% include header.html %}
  <!-- 画布容器必须放在主内容之前 -->
  <div class="sketch-container"></div>
  <main class="page-content" aria-label="Content">
    <div class="wrapper">
      {{ content }}
    </div>
  </main>
  {% include footer.html %}
</body>

2. 编写自定义 CSS 覆盖主题样式 #

在 assets/css/style.scss 开头先导入 Minima 的基础样式（文件不存在就新建），然后添加以下样式：

@import "minima";

// 画布容器：占满页眉到页脚的全屏区域，放在最底层
.sketch-container {
  position: absolute;
  top: 64px; // Minima 默认页眉高度约64px，可根据实际调整
  left: 0;
  right: 0;
  bottom: 64px; // 默认页脚高度，按需调整
  z-index: -1;
}

// 让主内容区域背景透明，避免白色背景盖住画布
.page-content .wrapper {
  background-color: transparent;
  // 想要内容区域有半透明背景的话，换成这个：
  // background-color: rgba(255, 255, 255, 0.85);
}

// 确保页眉页脚在画布上方
header.header, footer.footer {
  position: relative;
  z-index: 1;
  background-color: #fff; // 保留主题默认白色背景
}

不知道页眉/页脚准确高度的话，用浏览器F12开发者工具选中元素就能看到实际高度，替换上面的数值即可。

3. 修改 p5.js 草图代码，绑定到容器并适配尺寸 #

把你的 Game of Life.js 改成下面这样，确保画布挂载到指定容器，并且能随窗口大小调整：

// 用实例化方式创建p5草图，避免全局污染
const sketch = (p) => {
  p.setup = () => {
    const container = document.querySelector('.sketch-container');
    // 创建和容器尺寸匹配的画布
    const canvas = p.createCanvas(container.offsetWidth, container.offsetHeight);
    // 把画布放到容器里
    canvas.parent('.sketch-container');
    
    // 这里写你的初始化逻辑，比如Game of Life的初始网格
  };

  p.draw = () => {
    // 你的绘制逻辑
  };

  // 窗口大小变化时重新调整画布尺寸
  p.windowResized = () => {
    const container = document.querySelector('.sketch-container');
    p.resizeCanvas(container.offsetWidth, container.offsetHeight);
  };
};

new p5(sketch);

4. 调整脚本引入位置 #

把草图脚本的引入从页面（比如index.md）移到 _layouts/default.html 的 </body> 标签前，确保容器已经加载完成：

<script src="/assets/js/p5.js"></script>
<!-- 建议把文件名改成game-of-life.js，避免空格导致路径问题 -->
<script src="/assets/js/game-of-life.js"></script>

排查要点 #

• 画布还是被盖住？检查 .page-content .wrapper 的 z-index 是否被主题样式覆盖，或者画布容器的 z-index 是否确实为负数。
• 画布尺寸不对？确认 windowResized 函数是否生效，或者容器的 top/bottom 值是否设置正确。
• 样式不生效？看看自定义CSS是否在Minima样式之后导入，或者给样式加!important临时测试（不推荐长期使用）。

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