作者:坨大大 | 来源:互联网 | 2023-05-26 15:19
我有一个相当复杂的Javascript项目,直到最近我一直在本地工作.它的目的是在我的github-pages网站上作为项目页面进行部署.
问题是,代码中的几个位置,url从根目录开始(例如,/js/script.js
).这是必要的,因为这些文件分散在子目录中,我不想尝试思考".." - 我的方式在目录树上.这种方法在本地工作得很好.但是一旦它被推送到github,由于url中的项目名称介入,所有内容都会中断,将根目录推离我想要获取文件的位置一步.
我尝试了这个答案site.baseurl
中概述的内容,关于使用Jekyll的模板功能,但由于某种原因,Jekyll拒绝实际替换这些模板!这些网址都与{{ site.baseurl }}
刚刚坐在网址中的网页混在一起,有逃脱字符和一切.我拒绝安装ruby,所以我可以尝试在本地运行这个东西,只是为了调试github自己的混乱; 如果我能帮助它,我不想使用杰基尔解决这个问题.
更复杂的是,我实际上有两个repos这个相同的代码正在进入; 由于这个项目相当复杂,我有一个repo的"测试"版本(看到只有"gh-pages"分支最终可以作为github.io上的页面远程访问,解决方案是进行两次回购和推送一个到另一个).因此,baseurl
无论如何,静态定义是令人反感的,但如果它使事情有效,我会忍受它.
我究竟做错了什么??
1> Tustin2121..:
(我花了几个小时的时间来解决这个问题,这就是为什么我认为我会提交这个预先回答的问题,以帮助那些有类似问题的人.)
让我们以小的,可独立使用的块来回答:
为什么Jekyll拒绝替换每个人都建议的模板
虽然几个地方给大家介绍一下液体模板系统的奇观{{ output }}
和{% tags %}
,极少数地方告诉你,为了让杰基尔实际处理这些模板,文件必须包含前页.也就是说,您要处理的文件必须以下列内容开头,至少:
---
---
是的,三个破折号,在两条不同的线上.不,你可能不会将它们压缩成一行.这是您希望Jekyll实际处理模板语法的每个文件所必需的,而不是仅仅按原样复制.
如何动态访问github页面上的项目路径
正如我上面提到的,我有两个不同的存储库,相同的代码将最终进入,所以如果我可以避免硬编码我的项目的名称,它将是可爱的.
幸运的是,github提供了一个非标准的jekyll站点变量site.github
,它是各种存储库元数据的宝库,以及有关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 }}
.从而:
因此,在我的每个html文件的顶部,我有以下内容:
---
---
{% capture baseurl %}{{ site.github.project_title | prepend:'/' }}{% endcapture %}
(然后在head标签中,因为我不想把它也放在我的js文件的顶部,我有
)
幸运的是,我已经设置了一个构建过程(涉及browserify),所以我只是通过构建步骤将这些行添加到任何.html文件的开头.那些没有这种东西的人将不得不记得手动添加它.
这怎么可能搞砸那些真正使用jekyll的人
我不使用Jekyll,我只是想让我的程序在github页面上工作.我完成上面提到的构建过程在完成之后又采取了另一个步骤来轻松复制Jekyll,因为它删除了所有模板语法,因此我可以在本地测试它.那些使用Jekyll进行本地测试的人可能会发现设置site.github.project_title
为命令行参数或在_config.yml中会导致路径中包含无关的斜杠.
我希望这可以帮助别人节省几个小时,至少在试图弄清楚为什么jekyll不会处理模板,如果不是其他部分.