我对Jekyll＆amp; amp;网页设计一般。到目前为止，我已经按照常规说明如何使用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）_layouts文件夹中的default.html：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 in rootdirectory：chek！ （主页工作正常！）
4）rootdirectory中的new_page.md：chek！ （css不渲染！）
尝试使用new_page.html：不工作：（
5）new_page.md中的YAML前端问题：chek！
6）YAML前端的布局链接到默认值：chek！
7）当我检查new_page网址时：http://127.0.0.1:4000/boilerplate/about/我注意到<head>已完全构建了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:
回购链接：https://github.com/bomengeduld/boilerplate/tree/gh-pages 链接到实际网站：werkbaar.net
答案 0 :(得分：2)
问题在于如何将CSS文件包含在head.html包含中。行#12和#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文件时以/开头，以便告诉浏览器从您网站的根目录开始。
e.g。
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">