Jekyll 博客 post headers 层层叠叠
Jekyll blog post headers stacking above each other
所以我正在基于开始 bootstrap 主题在 Jekyll 中创建一个博客（也在学习 Udemy 上的课程）我已经制作了 post 布局等，并且一切正常，直到我添加第二个 post 把一切都搞砸了。
Post 布局只有一个 post（删除 /remove-this/second-image/ 以获得第一个和第二个 link 以查看具有一个 post 的布局, 左边 link, 和两个 post 的布局, 右边 link sry 我没有足够的声誉 ^^)
我想知道如何解决这个问题
感谢您的帮助
这里是post布局使用的代码（我也做了一个GitHub repository）：
{% include post_header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
包括：
post_header.html:
{% for post in site.posts %}
<!DOCTYPE html>
<html lang="en">
<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="">
<meta name="author" content="">
<title> {{ post.title }} </title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
{% include nav.html %}
<!-- Post Header -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ post.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.description }}</h2>
<span class="meta">Publié par <a href="#">{{ post.author }}</a> on {{ post.date | date_to_string }}</span>
</div>
</div>
</div>
</div>
</header>
{% endfor %}
footer.html:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/Bonny_AG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/BonnyAG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright ©BonnyAG 2015, All content made by BonnyAG for this blog, please ask permission before using the content in other websites.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="{{ site.url }}/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ site.url }}/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ site.url }}/js/clean-blog.min.js"></script>
</body>
</html>
因此，在深入研究之后，我发现导致错误的原因是我有一个 header 用于静态页面，一个用于博客文章，这就是导致错误的原因。所以这是代码修复
Post布局：
{% include header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
header.html:
<!DOCTYPE html>
<html lang="en">
<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="">
<meta name="author" content="">
<title>{{ page.title }}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% include nav.html %}
<body>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ page.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if page.author %}
<div class="post-heading">
<h1>{{ page.title }}</h1>
<h2 class="subheading">{{ page.description }}</h2>
<span class="meta">Publié par <a href="#">{{ page.author }}</a> on {{ page.date | date_to_string }}</span>
</div>
{% else %}
<div class="site-heading">
<h1>{{ page.header }}</h1>
<hr class="small">
<span class="subheading">{{ page.description }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</header>
所以我正在基于开始 bootstrap 主题在 Jekyll 中创建一个博客（也在学习 Udemy 上的课程）我已经制作了 post 布局等，并且一切正常，直到我添加第二个 post 把一切都搞砸了。
Post 布局只有一个 post（删除 /remove-this/second-image/ 以获得第一个和第二个 link 以查看具有一个 post 的布局, 左边 link, 和两个 post 的布局, 右边 link sry 我没有足够的声誉 ^^)
我想知道如何解决这个问题 感谢您的帮助
这里是post布局使用的代码（我也做了一个GitHub repository）：
{% include post_header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
包括：
post_header.html:
{% for post in site.posts %}
<!DOCTYPE html>
<html lang="en">
<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="">
<meta name="author" content="">
<title> {{ post.title }} </title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
{% include nav.html %}
<!-- Post Header -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ post.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.description }}</h2>
<span class="meta">Publié par <a href="#">{{ post.author }}</a> on {{ post.date | date_to_string }}</span>
</div>
</div>
</div>
</div>
</header>
{% endfor %}
footer.html:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/Bonny_AG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/BonnyAG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright ©BonnyAG 2015, All content made by BonnyAG for this blog, please ask permission before using the content in other websites.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="{{ site.url }}/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ site.url }}/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ site.url }}/js/clean-blog.min.js"></script>
</body>
</html>
因此，在深入研究之后，我发现导致错误的原因是我有一个 header 用于静态页面，一个用于博客文章，这就是导致错误的原因。所以这是代码修复
Post布局：
{% include header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
header.html:
<!DOCTYPE html>
<html lang="en">
<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="">
<meta name="author" content="">
<title>{{ page.title }}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% include nav.html %}
<body>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ page.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if page.author %}
<div class="post-heading">
<h1>{{ page.title }}</h1>
<h2 class="subheading">{{ page.description }}</h2>
<span class="meta">Publié par <a href="#">{{ page.author }}</a> on {{ page.date | date_to_string }}</span>
</div>
{% else %}
<div class="site-heading">
<h1>{{ page.header }}</h1>
<hr class="small">
<span class="subheading">{{ page.description }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</header>