“新的杰基尔页面"不呈现默认的css.stylesheet:仅index.html可以正常工作 [英] "New Jekyll Page" not rendering default css.stylesheet : Only index.html works fine
问题描述
我对Jekyll&网页设计.到目前为止，我已经按照常规说明如何使用jekyll构建新页面.从理论上讲，这听起来很简单.但是在实践中，我遇到的问题只是理论中没有解释的问题.
I am quite new to Jekyll & webdesign in general. So far I have followed the regular instructions on how to build a new page with jekyll. It all sounds fairly simple in theory. But in practice I experience issues that are just not explained in the theory.
下面我尝试尽可能地描述一下:
Below I try to be as descriptive as possible:
├── _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:che！
What I did so far?
1) <link href="css/style.css" rel="stylesheet"> added to head.html: chek!
<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！
2) default.html in _layouts folder: chek!
<!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！ (主页运行正常！)
3) index.html in rootdirectory: chek! (homepage is working fine!)
4)根目录中的new_page.md:检查！ (css无法呈现！)
4) new_page.md in rootdirectory: chek! (css is not rendering!)
尝试过new_page.html:均不起作用:(
tryed new_page.html: not working either :(
5)new_page.md中的YAML首要问题:che！
5) YAML front matter in new_page.md: chek!
6)YAML前端事务中的布局链接到默认值:chek！
6) layout in YAML front matter links to default: chek!
7)当我检查new_page网址时: http://127.0.0.1:4000/boilerplate /about/我注意到<head>是完全结构化的，具有指向css.stylesheet的链接.
7) When I inspect the new_page url: http://127.0.0.1:4000/boilerplate/about/ I notice the <head> is fully structured with link to css.stylesheet.
# ----------------------- #
# 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
Link to Repo: https://github.com/bomengeduld/boilerplate/tree/gh-pages Link to actual website: werkbaar.net
推荐答案
问题在于您如何在head.html include中包含CSS文件.第#12 和#15 :
The issue is in how you are including the CSS files in your head.html include. Lines #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.
They are using a relative path, which means that when you go to a page that is in a sub-folder of your site, like werkbaar.net/about/, the browser expects the css files to be located at werkbaar.net/about/css/bootstrap.min.css and werkbaar.net/about/css/style.css respectively.
解决此问题的一种简单方法是，在声明CSS文件时以/开头，以便您告诉浏览器从网站的根目录开始.
An easy way to fix this, is to start with a / when declaring your CSS files, so that you tell the browser to start from the root of your website.
例如
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
这篇关于“新的杰基尔页面"不呈现默认的css.stylesheet:仅index.html可以正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
