0
私はfullpage.jsライブラリを使用して、自分のポートフォリオが含まれているスライドページを使って自分のポートフォリオを表示するようにしています。私が抱えている問題は、すべて正常に動作することです。しかし、いったんgihub.ioや他のパブリックドメインにFTP接続すると、ノードモジュールから適切なファイルを見つけるためにGETエラーが発生します。パスは正しいファイルを指していますが、デベロッパーツールを使用しても同じエラーが発生します。私は以下のコードをコピーしていると、次のエラーが午前：node_modulesの前にスラッシュを追加することで、相対パスを使用しFulpage.jsはローカルでのみ動作していますか？
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:1
Mixed Content: The page at 'https://kghumaan.github.io/index.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:14
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js 404 (Not Found)
index.html:25
Uncaught TypeError: $(...).fullpage is not a function
at HTMLDocument.<anonymous> (index.html:25)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)`
<html>
<head>
<!-- IMPORT JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- FULL PAGE JS -->
<link rel="stylesheet" type="text/css" href="node_modules/fullpage.js/dist/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="node_modules/fullpage.js/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/dist/jquery.fullPage.js"></script>
<!-- FONT -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
navigationPosition: 'right',
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">
<h1 id="title" class="animated fadeInUp">NAME</h1>
<div id="buttons">
<div id="button1" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Resume
</div>
</div>
<div id="button2" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
LinkedIn
</div>
</div>
<div id="button3" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-github-alt fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Github
</div>
</div>
<div id="button4" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-envelope-open-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Email
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<p style="position: absolute; left: 10%; top: 3%; color: white; font-family: 'Quicksand', sans-serif; font-size: 120%;">Recent Work :</p>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInUp" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInLeft" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
</div>
</div>
</body>
</html>
非常に明確なエラーメッセージがあります.jQueryをHTTPでロードしようとしていますが、ページ自体がHTTPSの場合は許可されていません。最初に修正して、問題がなくなる可能性があります。 –