麻烦链接外部JavaScript与Jekyll [英] Trouble Linking External JavaScript with Jekyll

问题描述

我有一个由GitHub托管的使用Jekyll的网站，并且我已经（成功地）在每个布局中使用内部定义的脚本，它们会从它们的数组中生成随机标语。

我试图将这个脚本移动到一个外部的 tagline.js ，但到目前为止我还没有成功。

下面是基本的标语生成脚本，以防代码中存在某些内容导致这种情况（我怀疑，由于它的简单性，我怀疑它;但它总是可能的）：

 
 var tags = ['tag1'，'tag2'，'tag3'];  
 
 函数getTag（）{
返回标签[Math.floor（Math.random（）* tags.length）]; 
 
 
 $（document）.ready（function（）{
 $（＃tagline）。text（getTag（））; 
}）; 
  
 

就像我说的，它在内部工作时很好，但是当我尝试链接到外部时它不会。我非常肯定，这仅仅是我将< script> 指向的位置：包含< script> 位于 _layouts / default.html 中，但脚本位于 scripts / tagline.js 。

编辑：对不起，我实际上是用< link> C $ C><脚本> 。这样就消除了您使用错误标签的解决方案！ ：P

EDIT2：完整的< script> （同样位于 _layouts / default.html ）是这样的：< script type =text / javascripthref =../ scripts / tagline.js><< ; / script>

解决方案

要用于脚本调用的属性是 src 而不是 href 。例如：

 < script type =text / javascriptsrc =../ scripts / tagline.js> ;< /脚本> 
  

另外，我强烈推荐使用站点根目录（又名docroot）而不是相对于文件。这样你就可以在多个地方使用相同的呼叫，并且它总是会打到正确的位置。要使用docroot相对URL，请使用 / 开始路径。

假设您的脚本位于 http://example.com/scripts/tagline.js ，你要做的调用是：

 < script type =text / javascriptsrc =/ scripts / tagline.js >< /脚本> 
  

如果不使用docroot，您将不断调整路径，具体取决于调用HTML文件的位置脚本位于树中。如果所有的文件都在同一个地方，这不是什么大问题，但是避免出现问题是一个很好的习惯。

I have a site hosted by GitHub that uses Jekyll, and I've been (successfully) using an internally defined script in each layout that will generate a random tagline from an array of them.

I'm trying to move this script to an external tagline.js, but so far I've been unsuccessful.

Here's the basic tagline generating script, in case there's something in the code causing this (which I doubt, honestly, due to its simplicity; but it's always a possibility):

var tags = [ 'tag1', 'tag2', 'tag3' ];
function getTag() {
    return tags[Math.floor(Math.random() * tags.length)];
}

$(document).ready(function() {
    $("#tagline").text(getTag());
});

Like I said, it works fine when it's internal, but it doesn't when I try linking to external. I'm pretty sure it's just a case of where I'm pointing the <script> to: the HTML file containing the <script> is in _layouts/default.html, but the script is in scripts/tagline.js.

EDIT: Sorry, I was using "<link>" when I actually meant "<script>". So that eliminates the solution "you're using the wrong tag"! :P

EDIT2: The full <script> (again, located in an HTML file in _layouts/default.html) is this: <script type="text/javascript" href="../scripts/tagline.js"></script>

解决方案

The attribute you want to use for a script call is src instead of href. For example:

<script type="text/javascript" src="../scripts/tagline.js"></script>

Also, I would highly recommend using paths from the site root (aka docroot) instead of relative to the file. That way you can use the same call in multiple places and it will always hit the correct location. To use a docroot relative URL, you start the path with a /.

Assuming you're script is located at http://example.com/scripts/tagline.js, the call you would make is:

<script type="text/javascript" src="/scripts/tagline.js"></script>

Without using the docroot, you will constantly have to adjust the path depending on where the HTML file calling the script is located in the tree. If all the files are in the same place, that's not a big deal, but it's a good habit to get into to avoid issues down the road.

这篇关于麻烦链接外部JavaScript与Jekyll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！