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

我一直在想如何获得一个静态网站生成器与内置散列路由解决方案。我想我只能将它描述为一个可怜的人的客户端JavaScript框架，其路由可以在本地使用服务器进行工作。这是我的哈希路由设置/策略 - 有没有更好的方法？

我的主要目标是避免不必要地重新加载页面。虽然有些页面会更新，但我希望大多数人不会。此外，我仍然希望通过降价格式化页面来保持页面标记。

我试图用纯客户端JavaScript和模板做到这一点，但无法获得任何框架来为我解析降价。

这是我破解的解决方案，或许你们有一些设置可以更好或更优雅。也许使用Jekyll加上另一个像angular这样的路由框架？

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

问题：文件在加载图像其他目录 - 这些文件加载图片来自自己的目录，但调用时通过pagify.js到另一个目录的链接被各个击破

杰基尔+ Pagify.js液体包括用于相对URL '根'（感谢kikito）：

根包括：

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

个

负载脚本：

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

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

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

从核心HTML的结束pagify.js

负载脚本：

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

样品YAML从哈希标题路由页：

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

这是名为'empty.html'的布局如下所示：

{% include root %} 

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



{{ content }}

来源

2012-03-30 user1026169

我创建了一个Jekyll plugin以简化这个过程。它不需要手动指定要链接的所有页面。告诉我你对它的想法。

来源

2012-04-12 14:12:07 HankSmackHood

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

回答

相关问题