在博客文章中忽略的前置問題

我正在製作一個博客用jekyll，它使用index.html頁面並鏈接到博客帖子，如下面第一個代碼示例中所示。前面提到的默認佈局是一個典型的佈局文件，其中包括Twitter引導程序的css樣式。但是，當我點擊鏈接到index.html中的博客帖子時，博客帖子正在顯示（即url更改，博客帖子內容顯示），但是博客帖子的前臺內容正在被忽略，或者至少它出現這種方式，因爲沒有任何CSS樣式在博客文章上工作。例如，Twitter引導程序導航欄的css僅顯示在主頁上，而不是博客文章。在博客文章中忽略的前置問題

你能解釋爲什麼會發生這種情況嗎？

的index.html

--- 
layout: default 
--- 

{% for post in paginator.posts %} 

<div class="row-fluid"> 
    <!-- <div class="span12"> --> 
    <h2>{{ post.title }}</h2> 
    <h4>{{ post.date | date_to_long_string }}</h4> 
    <p> 
     <a href="{{ post.url }}">Read Post</a> 
    </p> 
<!-- </div> --> 
</div> 

{% endfor %}

2013-10-15 - LOREM-存有 - 博客 - 後

--- 
title: Lorem Ipsum Dolor Sit Amet 
layout: default 
--- 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elemen\ 
tum leo non felis porttitor vulputate. Nulla ipsum quam, auctor ut hendreri\ 
t quis, tincidunt eu metus. Quisque ipsum tellus, semper a tempus quis, int\ 
erdum vel magna. Cras a nisl diam, in accumsan augue. Pellentesque varius n\ 
ibh eu diam tempor rhoncus.

_layouts/default.html中

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>{{ site.name }}</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="{{ site.description }}"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
    <script src="js/respond.min.js"></script> 

</head> 
<body> 

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".na\ 
v-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#">{{ site.name }}</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li class="active"><a href="/about">About</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 

<div class="container"> 

<div class="row-fluid"> 
    <div class="col-lg-9 col-sm-8"> 
    {{ content }} 
    </div> 
    <div class="col-lg-3 col-sm-4"> 
    {% include sidebar.html %} 
    </div> 
</div> 

    </div> <!-- container --> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

</body> 
</html>

來源

2013-10-16 Leahcim

你能後的佈局default.html中 –

@MadhurAhuja我更新了default.html中的OP。謝謝 – Leahcim

由於您的佈局文件只是一個相對文件，我建議你從根目錄添加CSS和JavaScript的路徑。例如

<link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
    <script src="js/respond.min.js"></script>

應該成爲

<link href="/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="/css/custom.css" rel="stylesheet"> 
    <script src="/js/respond.min.js"></script>

來源

2013-10-16 05:49:18

在博客文章中忽略的前置問題

回答

相關問題