为什么 Jekyll 会加载 navbar.less?
Why does Jekyll load navbar.less?
我正在使用 Jekyll 在本地和 on Github pages 生成一个站点。这两个实例都加载了一个 navbar.less 文件(这会影响我的导航栏),但我在我的代码中找不到。
如何加载这个 navbar.less 文件?
这是我的 head.html 文件:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
</head>
我的style.css file没有提到这个。是 Bootstrap 加载它还是 Jekyll 以某种方式加载它?
您看到的是 chrome/firefox 对 map file generated from less transformation. You can see a reference to it at the very end of you bootstrap css file. This file is here for debugging preprocessor code like less or sass with chrome 的解释。
事实上,您的 css 规则在 bootstrap.min.css 文件中。
您只需在 css/style.css
中通过替换来覆盖它:
.navbar .navbar-header .navbar-brand img {
max-height: 43px;
margin-top: -14px;
}
作者:
.navbar .navbar-header .navbar-brand img {
max-height: 43px;
margin-top: -14px;
display: inline;
}
我正在使用 Jekyll 在本地和 on Github pages 生成一个站点。这两个实例都加载了一个 navbar.less 文件(这会影响我的导航栏),但我在我的代码中找不到。
如何加载这个 navbar.less 文件?
这是我的 head.html 文件:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
</head>
我的style.css file没有提到这个。是 Bootstrap 加载它还是 Jekyll 以某种方式加载它?
您看到的是 chrome/firefox 对 map file generated from less transformation. You can see a reference to it at the very end of you bootstrap css file. This file is here for debugging preprocessor code like less or sass with chrome 的解释。
事实上,您的 css 规则在 bootstrap.min.css 文件中。
您只需在 css/style.css
中通过替换来覆盖它:
.navbar .navbar-header .navbar-brand img {
max-height: 43px;
margin-top: -14px;
}
作者:
.navbar .navbar-header .navbar-brand img {
max-height: 43px;
margin-top: -14px;
display: inline;
}