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

How do I reference the root directory of my site? And why won't Jekyll render some pages?

我有一个相当复杂的 javascript 项目,直到最近我一直在本地工作。它注定要作为项目页面部署在我的 github 页站点上。

问题是,在代码的几个位置,url 从根目录开始(例如,/js/script.js)。这是必要的,因为这些文件分散在子目录中,我不想尝试考虑“..”-在目录树中向上移动。这种方法在本地工作得很好。但是一旦它被推送到 github, 一切 就会中断,由于 url 中的干预项目名称,将根目录推离我想要的位置一步获取文件。

我尝试了 this answer, pertaining to using Jekyll's templating features and site.baseurl 中概述的内容,但出于某种原因,Jekyll 拒绝实际 替换 那些模板! url 都被 {{ site.baseurl }} 搞得一团糟,只是坐在 url 中,带有转义字符和所有内容。而且我拒绝安装 ruby 只是为了我可以在本地尝试 运行 这个东西,只是为了调试 github 自己的混乱;如果可以的话,我不想使用 Jekyll 来解决这个问题。

使事情复杂化的是,我实际上有两个相同代码进入的回购协议;由于这个项目相当复杂,我有一个 "Test" 版本的 repo(因为只有 "gh-pages" 分支最终可以作为 github.io 上的页面远程访问,解决方案是制作两个回购并从一个推送到另一个)。所以静态定义 baseurl 无论如何都是令人反感的,但如果它使事情 工作 ,我会接受它。

我做错了什么??

(我花了好几个小时才解决这个问题,这就是为什么我想我会提交这个 pre-answered 问题,以帮助其他与我的问题有相似方面的人。)

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

为什么 Jekyll 拒绝替换大家一直建议的模板

虽然很多地方都告诉你 Liquid Templating 系统 {{ output }}{% tags %} 的神奇之处,但很少有地方告诉你为了让 Jekyll 实际上 处理 这些模板,文件必须包含Front Matter。也就是说,您要处理的文件必须至少以以下开头:

---
---

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

如何在 github-pages 上动态访问项目路径

正如我上面提到的,我有两个不同的存储库,相同的代码最终会出现在这些存储库中,所以如果我能避免 hard-coding 我的项目名称,那就太好了。

幸运的是,github 以 site.github 的形式提供了一个 non-standard jekyll 站点变量,即 a treasure trove of various repository metadata 和有关 github-pages 如何运行的隐藏信息.

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

Jekyll 为何不像它自己表现的那样灵活

遗憾的是没有。 _config.yml 文件实际上是相当严格的:你可以 从这里引用其他变量,它是 只有 用于静态文本和 object 定义。令我沮丧的是,您必须在每个文件的顶部处理的 Front Matter 也是如此。

模板系统使用的格式也很不传统:没有传统的运算符。不能用“=”赋值,也不能用“+”或“.”连接字符串。或任何其他角色。要将文字和变量的串联字符串分配给变量,您需要使用 "capture tag".

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

{% 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-pages 上运行。我前面提到的构建过程在完成浅层复制 Jekyll 之后又采取了另一个步骤,因为它删除了所有模板语法,所以我可以在本地测试它。那些使用 Jekyll 在本地进行测试的人可能会发现将 site.github.project_title 设置为 command-line 参数或在 _config.yml 中会导致路径中有多余的斜线。

我希望这可以帮助某人节省几个小时,至少在尝试弄清楚为什么 jekyll 不处理模板(如果不是其他部分)时。