在我的 Jekyll 网站上渲染 p5.js 草图

Question

我对 CSS 和 HTML 非常陌生。最近，我使用 Jekyll 创建了一个网页，默认主题名为“minima”。我正在尝试渲染一些我使用 p5.js 编写的草图。特别是，我希望草图的画布应该是使用设备全宽的页面内容区域（不包括页眉和页脚）。此外，它应该处于网站主要内容的背景中，并且不应与之冲突。例如，

这是一个网页，我希望我的 p5.js 草图使用两行（页眉和页脚）之间的所有空间。当我通过创建一个像

这样的 div .sketch-container 来做到这一点时

<main class="page-content" aria-label="Content">
      <div class="sketch-container">
        <script defer src="/Manoline-git.github.io/p5/Game of Life.js"></script>
      </div>
      <div class="wrapper">
          {{ content }}
      </div>
</main>

草图位于页面主要内容之后，如下所示：

我尝试了一些方法，例如放置 z-index 或移动代码，但它不起作用。

.sketch-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Ensure the sketch is on top of other content */
}

CSS 中可能存在冲突，但我不确定。你能帮我解决这个问题吗？

如何重现上述内容？

首先设置 Jekyll（参见文档）

gem install bundler jekyll
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

您可以将p5.js（可以从这里下载）包含在head.html中

<script src="/assets/js/p5.js"></script>

包含here给出的 p5.js 草图文件 Game of Life.js。在页面上使用它，例如在index.md上

<script defer src="Game of Life.js"></script>

请确保各处都给出了正确的文件位置。

Answer 1

有许多变量会影响此问题：

p5js 草图的大小。如果您
```
createCanvas(400,400)
```
，那么无论您的CSS如何，您的草图尺寸都不会超过400x400。
您的
```
sketch-holder
```
及其父级 的位置。为了使用
```
z-index
```
属性，
```
sketch-holder
```
及其父级都必须具有
```
position
```
属性（父级
```
position
```
可以是
```
relative
```
，但必须定义）
我假设您事先不知道内容的大小，因此
```
sketch-holder
```
父级必须有其
```
overflow:hidden
```
。否则草图也会覆盖页脚（或页眉）。

我的 ruby 很脆弱，因此无法安装新网站，但您可以在我自己的网站上查看结果。

在

_layouts/so-demo-page.html

：

<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}" class="no-js">
{% include head.html %}

<body
    class="layout--{{ page.layout | default: layout.layout }}{% if page.classes or layout.classes %}{{ page.classes | default: layout.classes | join: ' ' | prepend: ' ' }}{% endif %} {% if page.entries_layout == 'grid' %}page--wide{% endif %} {{ page.title | slugify }}">
    {% include skip-links.html %}
    {% include navigation.html %}
    {% include masthead.html %}
    <main class="page-content" aria-label="Content">
        
        <!--p5JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
        <script type="text/javascript" src="/processing/vines/vine.js"></script>
        <script type="text/javascript" src="/processing/vines/flower.js"></script>
        <script type="text/javascript" src="/processing/vines/leaf.js"></script>

        <!--wrapper for sketch-holder and content: note position and overflow -->
        <div class="wrapper" style="position:relative;overflow:hidden;">

            <!--sketch-holder: note position and z-index -->
            <!-- as my sketch starts from the bottom I used bottom:0 -->
            <div id="sketch-holder" style="position:absolute;top:0;left:0;z-index:-1">
                <script type="text/javascript" src="/processing/vines/growing-vines.js?fullscreen=true"></script>
            </div>

            <!-- page content -->
            {{ content }}
        </div>
    </main>
    {% include footer.html %}
    {% include scripts.html %}
</body>

</html>

以及

so-demo.md

中的实际页面：

---
layout: so-demo-page
---

# Welcome!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
 in culpa qui officia deserunt mollit anim id est laborum...

在你的 p5.js 草图中：

var w = window.innerWidth;
//I used a smaller height for the demo, otherwise my sketch
//just looks blank for a long time
//var h = window.innerHeight/2;
var h = window.innerHeight;

function setup() {
  const canvas = createCanvas(w, h);
  canvas.parent("sketch-holder");
//etc...
}

如果您知道网页的最大高度，则可以使用它来代替最大高度。如果您想要更多地关注草图的中心而不是

bottom

或

top

，您也可以调整定位。

祝你好运！

在我的 Jekyll 网站上渲染 p5.js 草图

问题描述投票：0回答：1

1个回答

最新问题

在我的 Jekyll 网站上渲染 p5.js 草图

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1