新Jekyll页面不呈现默认css.style：仅index.html正常工作(&amp；Quot；New Jekyll Page&amp；Quot；；Not)

2022-04-12 00:00:00 css stylesheet github-pages jekyll

总的来说，我对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)_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：chek！(主页运行正常！)

4)根目录中的new_page.md：chek！(css未呈现！)

已尝试new_page.html：也不工作：(

5)new_page.md：Chek中的YAML头条！

6)YAML封面中的布局链接到Default：Chek！

7)当我检查new_page url：http://127.0.0.1:4000/boilerplate/about/时，我注意到<head>完全具有指向css.style heet的链接。

结构_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

css

问题在于您如何在head.html推荐答案中包含css文件。行#12和#15：

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

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

它们使用的是相对路径，这意味着当您转到您站点的子文件夹(如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">

相关文章