das ist mein Jekyll mit Hash Routing Setup/Strategie - gibt es einen besseren Weg?

Question

Ich habe versucht herauszufinden, wie man einen statischen Website-Generator mit integrierter Hash-Routing-Lösung bekommen. Ich schätze, ich könnte es nur als ein Client-seitiges JavaScript-Framework für Arme mit Routing beschreiben, das lokal mit einem Server arbeitet.

Mein Hauptziel ist es, zu vermeiden, dass Seiten unnötigerweise neu geladen werden. Während einige Seiten aktualisiert werden, hoffe ich, dass die Mehrheit nicht würde. Darüber hinaus wollte ich Seitenmarkierung weiterhin über Markdown formatierte Seiten beibehalten.

Ich habe versucht, dies mit reinem clientseitigem JavaScript und Templates zu tun, konnte aber keine Frameworks zum Parsen von Abschriften für mich bekommen.

Dies ist meine gehackte Lösung vielleicht einige von Ihnen haben ein Setup, das besser oder eleganter funktioniert. Vielleicht mit Jekyll plus einem anderen Routing-Framework wie eckig?

Hinweis: Ich habe ein Layout mit dem Namen 'leer' für Hash-geroutete Seiten erstellt, da die Seiten nicht geladen werden, wenn der Doctype, der Kopf usw. dupliziert werden.

Problem: Dateien in andere Verzeichnisse, die Bilder laden - Diese Dateien laden Bilder aus ihrem eigenen Verzeichnis, aber wenn über pagify.js in ein anderes Verzeichnis, ihre Verbindungen sind alle gebrochen

Jekyll + Pagify.js genannt mit Flüssigkeit umfassen 'Wurzel' für relative URLs (dank kikito):

---

root umfassen:

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%} 

---

Last-Skripte:

<script type="text/javascript" src="{{ root }}/js/jquery.js"></script>

<script type="text/javascript" src="{{ root }}/js/pagify.js"></script>

---

Setup Kern html:

{% include root %} 

<h1>Pagify.js<small>A jQuery plugin for single page web sites</small></h1> 
<nav> 
    <a href='{{ root }}#about'>About</a> 
    <a href='{{ root }}#usage'>Usage</a> 
    <a href='{{ root }}#options'>Options</a> 
    <a href='{{ root }}#gallery'>Gallery</a> 
    <a href='{{ root }}#Showcase/VM'>Showcase</a> 
</nav> 

---

Ladeskript von pagify.js am Ende des Kern html:

<script> 
$(document).ready(function() { 
    $('#page_holder').pagify({ 
    pages: [ 
    'about', 
    'usage', 
    'options', 
    'gallery', 
    'Showcase/VM'  
    ], 
    animation: 'fadeIn', 
    'default': 'about', 
    cache: true 
    }); 
}); 

---

YAML Probe aus einer Hash Überschrift geroutet Seite:

--- 
layout: empty 
title : about 
root: .\ 
--- 
{% include root %} 

---

Diese So sieht das Layout 'empty.html' aus:

{% include root %} 

<div class="page-header"> 
    <h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1> 
</div> 



{{ content }} 

Answer 1

Ich habe ein Jekyll plugin diesen Prozess ein wenig zu erleichtern. Dadurch müssen Sie nicht mehr alle Seiten manuell angeben, mit denen Sie eine Verknüpfung herstellen möchten. Lass mich wissen, was du davon hältst.