Question

我正在尝试更新使用Jekyll构建的网站，但我遇到的问题是HTML中的链接无法正常工作。以下是header.html文件标题的开头：

<div id="primary-header" class="{{include.class_name}}">
<div class="container">
<div class="row">
  <div class="logo-wrap">
    <a href="/">
      <img src="/img/logos/header-logo.png" alt="Logo">
    </a>
  </div>

项目位于/ Volumes / Holder / Work / Projects / c4 header-logo.png位于/Volumes/Holder/Work/Projects/c4/img/logos/header-logo.png 我在浏览器中加载的文件是/Volumes/Holder/Work/Projects/c4/index.html

出于某种原因，当我在计算机上显示此文件（OSX 10.9.4）时，它将无法识别“/ img”指示的文件。如果我删除“/”它将找到没有问题的文件，但这不是一个有效的解决方案，因为有几百个左右的前导“/”通过几个文件。

我知道如果我删除“/”它会找到正确的文件并正确显示但如何在不删除前导“/”的情况下找到指示的文件？

Answer 1

这就是 baseurl 的用途。

在_config.yml中：

baseurl: '/Volumes/Holder/Work/Projects/c4'

现在，当您调用资产（css，jss或image）时，只需将您的基本网址添加到其中。

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >

<script src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>

<img src="{{ site.baseurl }}/img/logos/header-logo.png">

Answer 2

您有几个不同的选项，包括在img路径前使用~，所以它看起来像：

 <img src="~/img/logos/header-logo.png" alt="Logo">

~表示文件路径的一部分未包含在内，可能位于此路径中未提及的文件夹中，例如：

your image location = MyComputer/MyStuff/img/logos/header-logo.png

可以使用以下方式引用：

~/img/logos/header-logo.png

将为您找到它。

您也可以查看转义字符，这可能会对您有所帮助，也可能不会对您有所帮助。

修改

有关何时使用波形符号斜线（仅限斜线）的说明，请参阅：https://stackoverflow.com/a/6424147/3436942

Answer 3

将img文件夹放在根路径

领导＆＃34; /＆＃34;打破标题中的文件链接

3 个答案: