jekyll 可以支持视差效果吗？
Can jekyll support parallax effect?
我创建了一个空白的 jekyll 博客，并将 parallax.js 包含在 CDNlink 中，link 是：
(脚本类型="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">)
但是当我 运行 它在本地主机中时，我导入的移动效果不起作用。在我创建的 rails 应用程序中，如果我将它部署在 GITHUB 页面上，它可以完美地工作 there.Also，视差会在那里工作吗？我应该怎么做才能解决这个问题？
我上传 github 页 https://lazospap.github.io/LazPap/。有很多问题需要修复，但目前我看不到图像。
是的，视差效果可以在 Github 页上工作。
您可能刚刚编写了一些代码 errors/mistakes。
要遵守的规则
1. </body></html>
后面不能放任何东西
我看到的第一个错误是 </body></html> 之后不能放置任何内容。您的 layout file 包含以下内容：
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
应该是：
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2。打开和关闭 body 仅一次
您将内容嵌入布局中。您的布局有一个 body 打开标签和一个 body 关闭标签...但是，您的内容也有一个 body 打开标签和一个 body 关闭标签。因此，您打开和关闭 HTML 文件的 body 两次。在您的内容文件中删除它，您就设置好了。在此文件中找到 <body id="page-top"> 和 </body> 以及 this file 并删除它们。
3。为（复杂）HTML 和 JS
使用布局
第 184 行的代码 < 150 被错误地转义。这可能是由于您在 markdown 文件中编写了复杂的 HTML 和 JS。您可以通过将 'index.md' 中的 HTML 和 'default.html' 组合到布局目录中的文件 'home.html' 中来防止这种情况发生。然后，您的 index.md 文件应该引用 'home' 作为布局而不是 'default'。这是错误：
SyntaxError: missing ) after conditionLazPap:184:34
4.函数声明后才调用
我知道当你使用 'defer' 时它变得有点难以理解，但经验法则是只有在你声明它之后才调用它。 Parallax 是在 default.html:
的第 71 行中声明的函数
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
但是您在第 38 行调用了同一个文件的内容部分中的函数。这不起作用，如果它起作用，那完全是由于 'defer' 语句。
5.使用基数url
当您在 Github 页面上托管时，您需要一个 basurl。对您图片的引用是 /images/HTML_5.png。因为您在 Github 页面上托管您的基础 url 应该是 /LazPap 所以您的 url 变成 /LazPap/images/HTML_5.png。 More reading about baseurl...
更简单的解决方案...
您从以下代码的副本开始：https://blackrockdigital.github.io/startbootstrap-creative/。实现 parallax-like 效果的最简单方法是在原始代码中添加一个 CSS 规则：
header.masthead {background-attachment: fixed;}
虽然这是我会使用的解决方案，但它可能不是您想要的，因为您特别提到了视差和 javascript 解决方案。
我创建了一个空白的 jekyll 博客，并将 parallax.js 包含在 CDNlink 中，link 是： (脚本类型="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">) 但是当我 运行 它在本地主机中时，我导入的移动效果不起作用。在我创建的 rails 应用程序中，如果我将它部署在 GITHUB 页面上，它可以完美地工作 there.Also，视差会在那里工作吗？我应该怎么做才能解决这个问题？ 我上传 github 页 https://lazospap.github.io/LazPap/。有很多问题需要修复，但目前我看不到图像。
是的，视差效果可以在 Github 页上工作。
您可能刚刚编写了一些代码 errors/mistakes。
要遵守的规则
1. </body></html>
后面不能放任何东西
我看到的第一个错误是 </body></html> 之后不能放置任何内容。您的 layout file 包含以下内容：
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
应该是：
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2。打开和关闭 body 仅一次
您将内容嵌入布局中。您的布局有一个 body 打开标签和一个 body 关闭标签...但是，您的内容也有一个 body 打开标签和一个 body 关闭标签。因此，您打开和关闭 HTML 文件的 body 两次。在您的内容文件中删除它，您就设置好了。在此文件中找到 <body id="page-top"> 和 </body> 以及 this file 并删除它们。
3。为（复杂）HTML 和 JS
使用布局
第 184 行的代码 < 150 被错误地转义。这可能是由于您在 markdown 文件中编写了复杂的 HTML 和 JS。您可以通过将 'index.md' 中的 HTML 和 'default.html' 组合到布局目录中的文件 'home.html' 中来防止这种情况发生。然后，您的 index.md 文件应该引用 'home' 作为布局而不是 'default'。这是错误：
SyntaxError: missing ) after conditionLazPap:184:34
4.函数声明后才调用
我知道当你使用 'defer' 时它变得有点难以理解，但经验法则是只有在你声明它之后才调用它。 Parallax 是在 default.html:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
但是您在第 38 行调用了同一个文件的内容部分中的函数。这不起作用，如果它起作用，那完全是由于 'defer' 语句。
5.使用基数url
当您在 Github 页面上托管时，您需要一个 basurl。对您图片的引用是 /images/HTML_5.png。因为您在 Github 页面上托管您的基础 url 应该是 /LazPap 所以您的 url 变成 /LazPap/images/HTML_5.png。 More reading about baseurl...
更简单的解决方案...
您从以下代码的副本开始：https://blackrockdigital.github.io/startbootstrap-creative/。实现 parallax-like 效果的最简单方法是在原始代码中添加一个 CSS 规则：
header.masthead {background-attachment: fixed;}
虽然这是我会使用的解决方案，但它可能不是您想要的，因为您特别提到了视差和 javascript 解决方案。