代码之家 › 专栏 › 技术社区 › kingmakerking

链接基于jekyll的站点中所有布局中的样式表

font-awesome jekyll css html

kingmakerking · 技术社区 · 7 年前

我正在编辑基于杰基尔的博客。虽然我打算让我的博客主题中的所有页面都有相同的标题,但有些页面没有找到css。下面是关于文件夹结构的简短说明。

这个 deafult.html 在 _layout 文件夹具有指向的链接 font-awesome 样式表

<head>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

这个 header.html 在 _布局图 文件夹如下:

<header class="navigation">
  <a href="/" class="logo" title="blog home">
    <img src="/static/home.png" alt="home">
  </a>
  <nav>
    <ul>
      <li class="no-bullet"><a href="/"><i class="fa fa-keyboard-o" aria-hidden="true"></i> posts </a></li> |
      <li class="no-bullet"><a href="/archive"><i class="fa fa-archive" aria-hidden="true"></i> archive </a></li> |
      <li class="no-bullet"><a href="/about"><i class="fa fa-user" aria-hidden="true"></i> about </a></li> |
      <li class="no-bullet"><a href="/atom.xml" target="_blank"><i class="fa fa-rss-square" aria-hidden="true"></i> rss </a></li>
    </ul>
  </nav>
</header>

<h1 class="bigtitle">
   <i class="fa fa-user-secret" aria-hidden="true"></i>
 Blog title
</h1>
<h1 class="subtitle">
     Some blog
</h1>

<hr />

这个 index.md 中的文件 archive 文件夹开始如下:

---
layout: post
title: Archives
skip_related: true
---

以及 post.html 在 _布局图 文件夹开始如下:

---
layout: default
---

{% include header.html %}

原件 指数md公司 在基本文件夹中,具有以下结构,并正确显示所有字体awesome模块。

---
layout: default
title: Blog Posts
---

然而,指数。archieve文件夹中的md并没有显示所有的字体awesome模块。

更具体地说 <i class="fa fa-user-secret" aria-hidden="true"></i> 保持空白。

总结如下:

default.html 包含指向字体awesome样式表的链接。
邮递html 选择默认布局(因此是default.html)
指数md公司 在存档文件夹中选择帖子布局(反过来选择默认布局),如果这不是真的,我该怎么办?

我错过了什么?为什么索引。md会选择所有其他字体很棒的模块,但不会选择其中的一个 h1 标签

1 回复 | 直到 4 年前

Christian Specht 7 年前

在您的 default.html ,您错误地获得了指向字体awesome CSS的链接。

看起来是这样的:

<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

...但它应该是这样的:

<link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">

换句话说,你只需要改变 css/... 进入 /css/... .

使用斜杠,它总是链接到 css 根级别的文件夹:

http://example.com/css/font-awesome...

您的原始代码(不带斜杠), 是与 css 当前文件夹下的子文件夹 .
自从 违约html 嵌入到站点中的每个页面和帖子中,浏览器会根据页面的位置在不同的文件夹中搜索字体awesome文件。

在里面 http://example.com/index.html ,转到:

http://example.com/css/font-awesome...

(这就是索引页工作的原因)

但在 http://example.com/archive/index.html ,指向font awesome的链接实际上会转到以下文件夹:

http://example.com/archive/css/font-awesome...

...这就是为什么你的归档页面不存在的原因 (以及每个非根目录文件夹中的其他每一页) 不会拾取字体太棒了。