如何引用我网站的根目录?为什么Jekyll不会渲染一些页面?

时间:2015-01-16 03:56:49

标签: javascript github jekyll github-pages

我有一个相当复杂的javascript项目,直到最近我一直在本地工作。它的目的是在我的github-pages网站上作为项目页面进行部署。

问题是,代码中的几个位置,url从根目录开始(例如,/js/script.js)。这是必要的,因为这些文件分散在子目录中,我不想尝试思考" .." - 我的方式在目录树上。这种方法在本地工作得很好。但是一旦它被推送到github,所有都会中断,因为url中的项目名称介入,将根目录推离我想要获取文件的位置一步。

我尝试了this answer, pertaining to using Jekyll's templating features and site.baseurl中概述的内容,但出于某种原因,Jekyll拒绝实际替换这些模板!这些网址都被{{ site.baseurl }}搞砸了,只是坐在网址中,有逃脱字符和一切。我拒绝安装ruby,所以我可以尝试在本地运行这个东西,只是为了调试github自己的混乱;如果我能帮助它,我不想使用杰基尔解决这个问题。

为了使问题复杂化,我实际上有两个repos这个相同的代码正在进入;由于这个项目相当复杂,我有一个"测试" repo的版本(只看到" gh-pages"分支最终可以作为github.io上的页面远程访问,解决方案是制作两个repos并从一个转发到另一个)。因此,静态定义baseurl无论如何都是令人反感的,但如果它使工作,我就会生活在其中。

我做错了什么?

1 个答案:

答案 0 :(得分:5)

(我花了几个小时的时间来解决这个问题,这就是为什么我认为我会提交这个预先回答的问题,以帮助那些有类似问题的人。)

让我们以小的,可独立使用的块来回答:

为什么Jekyll拒绝更换每个人一直建议的模板

虽然有几个地方会告诉你液体模板系统{{ output }}{% tags %}的奇迹,但很少有地方会告诉你,为了让杰基尔真正进程这些模板,文件必须包含Front Matter。也就是说,您要处理的文件必须至少从以下内容开始:

---
---

是的,三个破折号,分成两行。不,你可能不会将它们压缩成一行。这是您希望Jekyll实际处理模板语法的每个文件所必需的,而不是仅仅按原样复制。

如何动态访问github页面上的项目路径

正如我上面提到的,我有两个不同的存储库,相同的代码将最终进入,所以如果我可以避免硬编码我的项目的名称,它将是可爱的。

幸运的是,github以site.github的形式提供了一个非标准的jekyll站点变量,它是a treasure trove of various repository metadata以及有关github-pages如何运行的隐藏信息。

幸运的是,许多元数据属性中有一个是site.github.project_title,它为您提供了项目的标题,巧合的是页面将在其下运行的路径。当然,我可以将其分配给site.baseurl,一切都会好的。

Jekyll如何不像它自己的那样灵活

可悲的是没有。 _config.yml文件实际上非常严格:您可能从此处引用其他变量,静态文本和对象定义仅 。令我沮丧的是,同样适用于每个文件顶部必须处理的Front Matter。

模板系统使用的格式也非常传统:没有传统的运营商。您不能使用" ="进行分配,也不能使用" +"来连接字符串。或"。"或任何其他角色。要为变量分配文字和变量的串联字符串,您需要使用"捕获标记"。

那么如何将github非常方便的变量内容提供到我的网址中呢?好吧,我可以使用以下内容:

{% capture baseurl %}{{ site.github.project_title | prepend:'/' }}{% endcapture %}

这个标签和输出的集合在前面提到的项目标题上加上斜线,然后将其分配给名为" baseurl"的变量。 (也可以在输出之前简单地设置一个斜杠,但这就是我所使用的。)不,这个变量与" site.baseurl"不同。此变量仅在运行此行的页面上可用,并使用输出{{ baseurl }}引用。因此:

<script src="{{ baseurl }}/js/jquery-2.1.1.min.js"></script>

因此,在我的每个html文件的顶部,我都有以下内容:

---
---
{% capture baseurl %}{{ site.github.project_title | prepend:'/' }}{% endcapture %}

(然后在head标签中,因为我不想将放在我的js文件的顶部,我有<script>window.BASEURL = "{{ baseurl }}";</script>

幸运的是,我已经设置了一个构建过程(涉及browserify),所以我只是通过构建步骤将这些行添加到任何.html文件的开头。那些没有这种东西的人必须记住手动添加它。

这可能会使那些真正使用jekyll

的人感到不安

我不使用Jekyll,我只是想让我的程序在github页面上运行。我完成上面提到的构建过程在完成之后又采取了另一个步骤来轻松复制Jekyll,因为它删除了所有模板语法,因此我可以在本地测试它。那些使用Jekyll进行本地测试的人可能会发现将site.github.project_title设置为命令行参数或在_config.yml中将导致路径中包含无关的斜杠。

我希望这可以帮助别人节省几个小时,至少在试图找出为什么jekyll不会处理模板,如果不是其他部分。