это мой джекилл с настройкой / стратегией маршрутизации хэша - есть ли лучший способ? - PullRequest
Новая
       25

это мой джекилл с настройкой / стратегией маршрутизации хэша - есть ли лучший способ?

2 голосов
/ 31 марта 2012

Я пытался понять, как получить статический генератор веб-сайтов со встроенным решением для маршрутизации хэшей. Полагаю, я мог бы описать его только как «клиентский JavaScript-фреймворк бедного человека с маршрутизацией, которая работает локально без сервера».

Моя главная цель - избежать ненужной перезагрузки страниц. Хотя некоторые страницы будут обновлены, я надеюсь, что большинство не будет. Кроме того, я все еще хотел сохранить разметку страницы с помощью отформатированных страниц разметки.

Я пытался сделать это с помощью чистого клиентского javascript и шаблонов, но не смог получить какие-либо фреймворки для анализа разметки для меня.

Это моё взломанное решение, возможно, у некоторых из вас есть настройка, которая работает лучше или более элегантно. Возможно, используя Jekyll плюс еще один фреймворк, например angular?

Примечание. Я создал макет с именем «empty» для страниц с хеш-маршрутизацией, потому что если дублируется тип документа, заголовок и т. Д., Страницы не будут загружаться.

Проблема: файлы в других каталогах, которые загружают изображения. Эти файлы загружают изображения из своего собственного каталога, но при вызове через pagify.js в другой каталог все ссылки прерываются

Jekyll + Pagify.js с Liquid включает «root» для относительных 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>

setup core 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>

загрузить скрипт из pagify.js в конце основного html: 

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

1 Ответ

0 голосов
/ 12 апреля 2012

Я создал плагин Jekyll , чтобы немного облегчить этот процесс. Это устраняет необходимость вручную указывать все страницы, на которые вы хотите сослаться. Дайте мне знать, что вы об этом думаете.

...