热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何引用我网站的根目录?为什么Jekyll不会渲染一些页面?》经验,为你挑选了1个好方法。

我有一个相当复杂的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不会处理模板,如果不是其他部分.


推荐阅读
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 突破MIUI14限制,自定义胶囊图标、大图标样式,支持任意APP
    本文介绍了如何突破MIUI14的限制,实现自定义胶囊图标和大图标样式,并支持任意APP。需要一定的动手能力和主题设计师账号权限或者会主题pojie。详细步骤包括应用包名获取、素材制作和封包获取等。 ... [详细]
  • 本文介绍了OkHttp3的基本使用和特性,包括支持HTTP/2、连接池、GZIP压缩、缓存等功能。同时还提到了OkHttp3的适用平台和源码阅读计划。文章还介绍了OkHttp3的请求/响应API的设计和使用方式,包括阻塞式的同步请求和带回调的异步请求。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 解决文件名过长下载失败问题的jQuery方案
    本文介绍了使用jQuery解决文件名过长导致下载失败的问题。原方案中存在文件名部分丢失的问题,通过动态生成隐藏域表单并提交的方式来解决。详细的解决方案和代码示例在文章中给出。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
author-avatar
坨大大
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有