2017-12-27 17 views
1

私はjekyllに基づいて私のブログを編集しています。私は自分のブログテーマのすべてのページに同じヘッダーを作成しようとしていますが、一部のページではCSSを拾いません。ここでは、フォルダ構造について簡単に説明します。jekyllベースのサイトのすべてのレイアウトでスタイルシートをリンクする

_layoutフォルダ内にあるdeafult.htmlfont-awesomeスタイルシートへのリンクを持っている

<head> 
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> 
</head> 

次のように_layoutフォルダ内にあるheader.htmlは次のとおりです。

<header class="navigation"> 
    <a href="/" class="logo" title="blog home"> 
    <img src="/static/home.png" alt="home"> 
    </a> 
    <nav> 
    <ul> 
     <li class="no-bullet"><a href="/"><i class="fa fa-keyboard-o" aria-hidden="true"></i> posts </a></li> | 
     <li class="no-bullet"><a href="/archive"><i class="fa fa-archive" aria-hidden="true"></i> archive </a></li> | 
     <li class="no-bullet"><a href="/about"><i class="fa fa-user" aria-hidden="true"></i> about </a></li> | 
     <li class="no-bullet"><a href="/atom.xml" target="_blank"><i class="fa fa-rss-square" aria-hidden="true"></i> rss </a></li> 
    </ul> 
    </nav> 
</header> 

<h1 class="bigtitle"> 
    <i class="fa fa-user-secret" aria-hidden="true"></i> 
Blog title 
</h1> 
<h1 class="subtitle"> 
    Some blog 
</h1> 

<hr /> 

index.mdファイルarchiveフォルダーは、次のように始まります。

次のように0
--- 
layout: post 
title: Archives 
skip_related: true 
--- 

そして_layoutフォルダ内のpost.htmlが始まる:

--- 
layout: default 
--- 

{% include header.html %} 

ベースフォルダ内の元index.mdは、次のような構造を持っており、正確にすべてのフォント素晴らしいモジュールを表示します。

--- 
layout: default 
title: Blog Posts 
--- 

ただし、archieveフォルダのindex.mdには、フォントのすばらしいモジュールがすべて表示されるわけではありません。

具体的には、<i class="fa fa-user-secret" aria-hidden="true"></i>は空白のままです。

は、要約すると:

  • default.htmlは、フォント素晴らしいスタイルシートへのリンクが含まれています。
  • post.htmlは(したがって、default.htmlの)デフォルトのレイアウト
  • index.mdアーカイブフォルダは、これが真でない場合(これはデフォルトのレイアウトをピックアップ)ポストレイアウトをピックアップでは、私が何をすべきをピックアップ?

私は何が欠けていますか?なぜ、index.mdは、他のすべてのフォント - すばらしいモジュールを集めますが、h1タグ内のモジュールではないのですか?

答えて

1

あなたのdefault.htmlには、フォントの素晴らしいCSSへのリンクがあります。それはこのようになります

<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> 

...しかし、それは次のようになります。つまり

<link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css"> 

を、あなただけ/css/...css/...を変更する必要があります。がへの相対リンクで、

http://example.com/css/font-awesome... 

あなたの元のコード(スラッシュなし):スラッシュで


は、それは常にルートレベルにcssフォルダにリンクcssサブフォルダは現在のフォルダの下にあります。
default.htmlはサイトのすべてのページと投稿に埋め込まれているため、ブラウザはページの場所に応じて別のフォルダにある素晴らしいファイルを検索します。 http://example.com/index.html

は、それが行くまで:

http://example.com/css/font-awesome... 

(これは、理由はあなたのインデックスページの作品)


しかしhttp://example.com/archive/index.htmlに、リンクはフォント素晴らしいするには、実際にこのフォルダに行きます:

http://example.com/archive/css/font-awesome... 

...これは存在しません。そのため、アーカイブページ(およびすべてのフォルダ内のすべてのページがルートではありません)は素晴らしいフォントを拾いません。

+0

Aah!それは私の馬鹿だった。ありがとう! – kingmakerking

関連する問題