【问题标题】:Can jekyll support parallax effect?jekyll 可以支持视差效果吗?
【发布时间】:2020-02-23 09:08:07
【问题描述】:

我创建了一个空白的 jekyll 博客,并在 CDNlink 中包含了 parallax.js,链接是: (script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">) 但是当我在 localhost 中运行它时,我导入的移动效果不起作用。在我创建的 Rails 应用程序中,它在那里完美运行。此外,如果我将它部署在 GITHUB 页面上,视差会在那里工作吗?我应该怎么做才能解决这个问题? 我在github页面上传https://lazospap.github.io/LazPap/。有很多要修复的,但现在我看不到图像。

【问题讨论】:

  • 分享你的 repo 或代码,以便我们看看出了什么问题... ;-)
  • 我刚刚编辑了你可以看看

标签: jekyll github-pages parallax.js


【解决方案1】:

是的,视差效果可以在 Github 页面上使用。

您可能只是犯了一些编码错误/错误。


遵循的规则

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。仅打开和关闭主体一次
您将内容嵌入到布局中。您的布局有一个正文打开和一个正文关闭标签......但是,您的内容也有一个正文打开和一个正文关闭标签。因此,您打开和关闭 HTML 文件的正文两次。在您的内容文件中删除它并设置好。在此文件中找到&lt;body id="page-top"&gt;&lt;/body&gt;this file 并删除它们。

3.为(复杂的)HTML 和 JS 使用布局
第 184 行的代码 &lt; 150 被错误地转义。这可能是因为您在 Markdown 文件中编写复杂的 HTML 和 JS。您可以通过在布局目录中的文件“home.html”中组合来自“index.md”和“default.html”的 HTML 来防止这种情况。然后,您的 index.md 文件应将“home”作为布局而不是“default”。这是错误:

SyntaxError: missing ) after conditionLazPap:184:34

4.仅在声明函数后调用函数
我知道当你使用 'defer' 时它会变得有点难以掌握,但经验法则是只有在你声明了一个函数之后才调用它。视差是在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.使用基本网址
当您在 Github Pages 上托管时,您需要一个 basurl。对您的图像的引用是/images/HTML_5.png。因为你托管在 Github 页面上,所以你的 baseurl 应该是 /LazPap,所以你的 url 变成了 /LazPap/images/HTML_5.pngMore reading about baseurl...


更简单的解决方案...

您从以下代码的副本开始:https://blackrockdigital.github.io/startbootstrap-creative/。实现类似视差效果的最简单方法是在原始代码中添加 JUST ONE CSS 规则:

header.masthead {background-attachment: fixed;}

虽然这是我会使用的解决方案,但它可能不是您想要的,因为您特别提到了视差和 javascript 解决方案。

【讨论】:

  • 我已经更新了我的 gh 页面,我没有发现与参考文件有任何区别
  • 你只修正了一个错误……你需要同时修正它们。
  • 如果你是这个意思,我也修复了 body 标签。
  • 你忘了baseurl (5)。
  • 它终于成功了,baseurl 是错误的 我没有把“/”放在我的基本 url 前面我有这样的:baseurl:“LazPap”,我应该这样做 -> baseurl : "/LazPap"
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-10-15
  • 2016-07-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多