【问题标题】:Jekyll blog post headers stacking above each otherJekyll 博客文章标题相互堆叠
【发布时间】:2015-07-26 16:44:25
【问题描述】:

所以我在 Jekyll 中基于启动引导主题(也在 Udemy 上的课程之后)制作了一个博客,我已经制作了帖子布局等,并且一切正常,直到我添加第二个搞砸了一切的帖子。

只有一个 post 的帖子布局(删除 /remove-this/second-image/ 以获取第一个和第二个链接以查看带有一个帖子的布局,左侧链接,以及带有两个帖子的布局,右侧链接对不起,我没有足够的声誉^^)

我想知道如何解决这个问题 感谢您的帮助

这是用于帖子布局的代码(我也做了一个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 %}

页脚.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 &copy;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>

【问题讨论】:

    标签: html css jekyll blogs jekyll-bootstrap


    【解决方案1】:

    所以在深入挖掘之后,我发现导致错误的原因是我有一个用于静态页面的标题和一个用于博客文章的标题,这导致了错误。所以这里是代码修复

    帖子布局:

    {% 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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-17
      • 2016-08-29
      • 2016-03-31
      • 1970-01-01
      相关资源
      最近更新 更多