p5js 与杰基尔
p5js with Jekyll
我对 Jekyll 很陌生,我不确定如何创建一个网站,其中嵌入了我正在从事的项目的 p5.js 草图。
我怀疑它与依赖关系有关,我将不胜感激任何 help/pointers 我能得到的!
Jekyll和P5.js的结合没有什么特别之处。
需要了解的重要一点是 Jekyll 的输出是 "just" 常规 HTML。您可以在任何 HTML 页面中包含 P5.js 草图。所以你可以在 Jekyll 中包含 P5.js 就好了。
Here is an example page that embeds a P5.js sketch in a website created using Jekyll. Here 是该页面的源标记。 Jekyll 接受降价并输出 HTML.
很难比这更具体,但对您问题的一般回答是关注 HTML 并关注您遇到的任何错误。
如果您仍然无法弄明白,请 post 新问题,其中包含一个 link 示例 Jekyll 存储库,该示例显示错误,并将完整的错误包含在您的 post.
我也想知道@Kevin Workman 的示例是否有效。请注意,您不需要在脚本对象中添加整个 javascript 代码,您可以指向它(我一个小时前才知道这些)
您可以在 post 的 .md 文件中添加类似这样的内容来引用名为“myjavascriptfile.js”的文件。请注意,您还可以使用 p5.js 文件
的托管版本
<div id="sketch-holder"></div>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="myjavascriptfile.js"></script>
“sketch-holder”可以让您更好地控制草图,并需要您将其添加到 setup() 函数中:
function setup() {
....
const canvas = createCanvas(something, something)
canvas.parent('sketch-holder')
....
}
我对 Jekyll 很陌生,我不确定如何创建一个网站,其中嵌入了我正在从事的项目的 p5.js 草图。
我怀疑它与依赖关系有关,我将不胜感激任何 help/pointers 我能得到的!
Jekyll和P5.js的结合没有什么特别之处。
需要了解的重要一点是 Jekyll 的输出是 "just" 常规 HTML。您可以在任何 HTML 页面中包含 P5.js 草图。所以你可以在 Jekyll 中包含 P5.js 就好了。
Here is an example page that embeds a P5.js sketch in a website created using Jekyll. Here 是该页面的源标记。 Jekyll 接受降价并输出 HTML.
很难比这更具体,但对您问题的一般回答是关注 HTML 并关注您遇到的任何错误。
如果您仍然无法弄明白,请 post 新问题,其中包含一个 link 示例 Jekyll 存储库,该示例显示错误,并将完整的错误包含在您的 post.
我也想知道@Kevin Workman 的示例是否有效。请注意,您不需要在脚本对象中添加整个 javascript 代码,您可以指向它(我一个小时前才知道这些)
您可以在 post 的 .md 文件中添加类似这样的内容来引用名为“myjavascriptfile.js”的文件。请注意,您还可以使用 p5.js 文件
的托管版本<div id="sketch-holder"></div>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
<script src="myjavascriptfile.js"></script>
“sketch-holder”可以让您更好地控制草图,并需要您将其添加到 setup() 函数中:
function setup() {
....
const canvas = createCanvas(something, something)
canvas.parent('sketch-holder')
....
}