2017-12-27 12 views
1

Ich bearbeite meinen Blog, der auf Jekyll basiert. Während ich vorhabe, den gleichen Header für alle Seiten in meinem Blogthema zu haben, vermissen einige der Seiten das css. Hier ist eine kurze Notiz zur Ordnerstruktur.Verknüpfen von Stylesheets in allen Layouts in jekyll-basierten Websites

Die deafult.html die im _layout Ordner hat den Link zu font-awesome Sheet

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

Die header.html, die es in den _layout Ordner lautet wie folgt:

<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 /> 

Die index.md Datei in der archive Ordner beginnt wie folgt:

--- 
layout: post 
title: Archives 
skip_related: true 
--- 

Und die post.html im _layout Ordner beginnt wie folgt:

--- 
layout: default 
--- 

{% include header.html %} 

Die ursprüngliche index.md im Basisordner hat die folgende Struktur und zeigt alle font-awesome Module richtig.

Allerdings zeigt die index.md im Archieve-Ordner nicht alle der font-awesome-Modul.

Genauer gesagt bleibt die <i class="fa fa-user-secret" aria-hidden="true"></i> leer.

Fassen wir zusammen:

  • default.html enthält den Link zum font-awesome Sheet.
  • post.html nimmt das Standard-Layout auf (daher default.html)
  • index.md im Archivordner abholt das Post-Layout (was wiederum das Standard-Layout aufgreift) Ist dies nicht der Fall ist, was soll ich tun ?

Was fehlt mir? Warum nimmt der index.md alle anderen font-awesome Module auf, aber nicht das innerhalb des Tags h1?

Antwort

1

In Ihrem , haben Sie den Link zum font-awesome CSS falsch.

Es sieht wie folgt aus:

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

... aber es sollte wie folgt aussehen:

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

Mit anderen Worten: Sie müssen nur css/... in /css/... ändern.


Mit dem Schrägstrich, es verbindet sich immer auf die css Ordner auf der obersten Ebene:

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

Ihr Original-Code (ohne Schrägstrich), ein relativer Link zu a css Unterordner unter dem aktuellen Ordner.
Da in jede Seite und jeden Post in Ihrer Site eingebettet ist, sucht der Browser nach den font-awesome Dateien in einem anderen Ordner, abhängig vom Speicherort der Seite.

In http://example.com/index.html, es geht an:

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

(das ist, warum Ihre Indexseite Werke)


Aber in http://example.com/archive/index.html, der Link zu font-awesome geht eigentlich in diesen Ordner:

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

... die nicht existiert - deshalb ist Ihre Archivseite (und jede andere Seite in jedem Ordner, die nicht die Wurzel ist) nicht font-awesome abholen.

+0

Aah! Das war so albern von mir. Vielen Dank! – kingmakerking

Verwandte Themen