"New Jekyll Page" 不渲染默认 css.stylesheet ：只有 index.html 工作正常

Question

总的来说，我对 Jekyll 和网页设计还很陌生。到目前为止，我已经按照有关如何使用 jekyll 构建新页面的常规说明进行操作。从理论上讲，这一切听起来相当简单。但在实践中，我遇到了理论中没有解释的问题。

下面我尽量描述的：

目录结构：

├── _includes
│           ├── footer.html
│           ├── head.html
│           ├── header.html
│           └── scripts.html
├── _layouts
│           └── default.html
├── _site
│     └── ...
│
├── css
│     └── style.css
├── fonts
│     └── ...
├── img
│     └── ...
├── js
│     └── ...
│
├──_config.yml
│ 
├──_gitignore.txt
│
├── CNAME
│ 
├── index.html
│ 
└── new_page.md

到目前为止我做了什么？

1) <link href="css/style.css" rel="stylesheet"> 添加到 head.html: chek!

结构`<head>`:

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="{{ site.description }}">
  <meta name="author" content="{{ site.author }}">



  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/style.css" rel="stylesheet">

  <!-- Add icon library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
</head>

2) default.html 在 _layouts 文件夹中：chek!

结构`default.html`：

<!DOCTYPE html>
<html lang="en">
    {% include head.html %}

    <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
        {% include header.html %}

    {{ content }} 

        {% include footer.html %}
        {% include scripts.html %}
    </body>
</html>

3) index.html 在根目录中：chek! （主页运行正常！）

4) new_page.md 在根目录中：chek! （css 没有渲染！）

已尝试 new_page.html：也不起作用 :(

5) new_page.md 中的 YAML 前端内容：chek!

6) YAML front matter 中的布局 links 默认：chek!

7) 当我检查 new_page url 时：http://127.0.0.1:4000/boilerplate/about/ 我注意到 <head> 是完全结构化的 link 到 css.stylesheet .

结构`_config.yml`：

# ----------------------- #
#      Main Configs       #
# ----------------------- #

url: http://werkbaar.net
baseurl: /boilerplate/
title: WerkBaAr
email: aline@werkbaar.net
author: aline
description: > # ""
copyright:
credits: 'Credits: '
port: 4000

# ----------------------- #
#    Jekyll & Plugins     #
# ----------------------- #

plugins:
  #  - jekyll-seo-tag
  #  - jekyll-sitemap


# Build settings
markdown: kramdown
permalink: pretty

# ----------------------- #
#   3rd Party Settings    #
# ----------------------- #

social:
  - title: twitter
    url:
  - title: github
    url:
  - title: linkedin
    url:

Link 回购：https://github.com/bomengeduld/boilerplate/tree/gh-pages Link 到实际网站：werkbaar.net

Answer 1

问题在于您如何在 head.html 包含中包含 CSS 文件。第 #12 and #15 行：

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">

他们使用的是 relative 路径，这意味着当您转到站点子文件夹中的页面时，例如 werkbaar.net/about/，浏览器期望 css 文件分别位于 werkbaar.net/about/css/bootstrap.min.css 和 werkbaar.net/about/css/style.css。

解决此问题的一个简单方法是在声明 CSS 文件时以 / 开头，这样您就可以告诉浏览器从网站的根目录开始。

例如

<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">

"New Jekyll Page" 不渲染默认 css.stylesheet ：只有 index.html 工作正常

"New Jekyll Page" not rendering default css.stylesheet : Only index.html works fine

css

stylesheet

jekyll

github-pages

目录结构：

到目前为止我做了什么？

结构`<head>`:

结构`default.html`：

结构`_config.yml`：

"New Jekyll Page" 不渲染默认 css.stylesheet ：只有 index.html 工作正常

"New Jekyll Page" not rendering default css.stylesheet : Only index.html works fine

css

stylesheet

jekyll

github-pages

目录结构：

到目前为止我做了什么？

结构<head>:

结构default.html：

结构_config.yml：

结构`<head>`:

结构`default.html`：

结构`_config.yml`：