Wie Skript-Tag in Jekyll hinzufügen?

Question

Jekyll ist ein einfacher Blog-basierter, statischer Site-Generator für persönliche Projekte. Wie füge ich ein Skript-Tag in ein solches Ruby-Projekt ein?

Meine index.html sieht wie folgt aus:

--- 
layout: default 
--- 

<div class="home"> 

    <h1 class="page-heading">Posts</h1> 

    <ul class="post-list"> 
    {% for post in site.posts %} 
     <li> 
     <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span> 

     <h2> 
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> 
     </h2> 
     </li> 
    {% endfor %} 
    </ul> 

    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p> 

</div> 

die Ordnerstruktur besteht auch aus Dateien und Ordner wie folgt aus: about.md _config.yml css feed.xml _includes index.html _layouts _posts _sass _site

Ich versuche, die jekyll Plattform für statische Web-Seiten zu erkunden.

Answer 1

Schritt 1: Erstellen Sie die Skriptdatei.

Erstellen Sie das Skript (.js) Datei als normal.

Vielleicht möchten Sie in einem entsprechenden Ordner speichern, zum Beispiel:

../assets/js/some-script.js

Sie müssen möglicherweise die /assets/ Ordner machen, wenn Sie es nicht haben.

Verwenden Sie keinen Unterstrich (_) an der Vorderseite des Ordnernamens, und Jekyll kopiert dann einfach diesen Ordner und Inhalt in den Build an `_site 'als statisches Asset.

Schritt 2: Rufen Sie das Skript in Ihrem HTML-Code auf.

Dann ist es nur nennen, wie Sie es wollen, wie:

...<script src="{{ base.url | prepend: site.url }}/assets/some-script.js"></script>....

Wenn das Skript auf jeder Seite verfügbar sein soll, fügen Sie den Anruf in Ihre Layoutdatei ein. Jede Seite, die dieses Layout default.html verwendet, ruft dann das Skript auf. Diese Layout-Datei kann unter _layouts/default.html gefunden werden.

Wenn Sie es nur auf Ihrer aktuellen Seite wollen, rufen Sie es einfach in Ihrem some-page.md Markdown auf die gleiche Weise.

Wenn Sie es nur aufrufen möchten, wenn es live ist und Sie es NICHT während der Entwicklung aufrufen möchten - wie z. B. ein Google Analytics-Skript - dann wickeln Sie den Anruf in eine if -Anweisung wie diese:

{% if site.environment == "production" %}<script src="//localhost:35729/livereload.js"></script>{% endif %}

Hoffe das hilft.