Javascript 这是我的具有哈希路由设置/策略的jekyll-有更好的方法吗？

我一直在想如何获得一个带有内置哈希路由解决方案的静态网站生成器。我想我只能把它描述为一个穷人的“客户端javascript框架，路由在本地工作，没有服务器”

我的主要目标是避免页面被不必要地重新加载。虽然有些页面会被刷新，但我希望大多数不会。此外，我仍然希望通过标记格式的页面来维护页面标记

我试着用纯客户端javascript和模板来实现这一点，但找不到任何框架来解析降价

这是我的黑客解决方案也许你们中的一些人有一个更好或更优雅的设置。也许使用Jekyll加上另一个路由框架，比如angular

注意：我为散列路由页面创建了一个名为“empty”的布局，因为如果doctype、head等重复，那么页面将不会加载

问题：加载图像的其他目录中的文件-这些文件从自己的目录加载图像，但当通过pagify.js调用到另一个目录时，它们的链接都断开了

Jekyll+Pagify.js和Liquid包含相对URL的“root”（感谢kikito）：

---

根目录包括：

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

---

加载脚本：

---

设置核心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>

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

---

这就是名为“empty.html”的布局的外观：

{% include root %}

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



{{ content }}

{%include root%}
{{page.title}{{site.tagline}}
{{content}}

我创建了一个新的方法来简化这个过程。这样就不需要手动指定要链接到的所有页面。让我知道你对它的看法

为了简化这个过程，我创建了一个。这样就不需要手动指定要链接到的所有页面。让我知道你对它的看法

{% include root %}

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



{{ content }}