Каковы хорошие способы реализации хлебных крошек на сайте Jekyll? - PullRequest
10 голосов
/ 08 марта 2012

Я знаю, что в http://raphinou.github.com/jekyll-base/ есть одноуровневые хлебные крошки, но я ищу несколько хороших способов иметь хлебные крошки на сайте Jekyll, когда каталоги достигают глубины четырех или пяти уровни .

(Да, я хорошо знаю, что Jekyll - это, прежде всего, движок для ведения блогов, и, возможно, мне не следует использовать его для веб-сайта общего назначения, особенно со многими уровнями каталогов. Я также осведомлен о http://octopress.org но не нашел подходящий плагин.)

Основываясь на http://forums.shopify.com/categories/2/posts/22172 Я придумал следующую схему Jekyll для панировочных сухарей, вариант которой вы можете увидеть в действии на http://crimsonfu.github.com/members/pdurbin. Вы должны увидеть хлебные крошки « home» members »» вверху.

Вот мой макет. Да, это некрасиво. Я мало изучал жидкость. Можете ли вы предложить лучший способ?

<html>
<head>
<title>{{ page.title }}</title>
<style type="text/css">
#bread ul {
  padding-left: 0;
  margin-top: 2px;
  margin-bottom: 2px;
} 
#bread ul li {
  display: inline;
  font-size: 70%;
}
</style>
</head>
<body>
<div id="bread">
<ul>

{% assign url = {{page.url}} %}
{% assign delimiter = '/' %}
{% capture allparts %}{{ url | replace: delimiter, ' ' }}{% endcapture %}

{% capture myFirstWord  %}{{ allparts    | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusFirst   %}{{ allparts    | replace_first: myFirstWord, ''   }}{% endcapture %}

{% capture mySecondWord %}{{ minusFirst  | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusSecond  %}{{ minusFirst  | replace_first: mySecondWord, ''  }}{% endcapture %}

{% capture myThirdWord  %}{{ minusSecond | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusThird   %}{{ minusSecond | replace_first: myThirdWord, ''   }}{% endcapture %}

{% capture myFourthWord %}{{ minusThird  | truncatewords: 1 | remove: '...' }}{% endcapture %}
{% capture minusFourth  %}{{ minusThird  | replace_first: myFourthWord, ''  }}{% endcapture %}

{% capture myFifthWord  %}{{ minusFourth | truncatewords: 1 | remove: '...' }}{% endcapture %}

{% if myFirstWord contains '.html' %}
  <li><a href="/">home</a> &nbsp; </li>
{% elsif mySecondWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  {% unless mySecondWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myThirdWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  {% unless myThirdWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myFourthWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  {% unless myFourthWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  {% endunless %}
{% elsif myFifthWord contains '.html' %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  {% unless myFifthWord == 'index.html' %}
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> &#187; </li>
  {% endunless %}
{% else %}
  <li><a href="/">home</a> &#187; </li>
  <li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> &#187; </li>
  <li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> &#187; </li>
{% endif %}
</ul>
</div>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>

Ответы [ 11 ]

15 голосов
/ 14 августа 2015

Я немного улучшила ответы, данные ранее. Я удалил неупорядоченный список и разделил элементы символом (косая черта). Я добавил фильтр для «index.html» и «.html», поэтому также поддерживаются URL-адреса, такие как «mysite.com/path/index.html» и «mysite.com/path/item-name.html». Наконец я заглавными буквами. В результате получается что-то похожее на это:

Дом / Путь / Название предмета

{% assign crumbs = page.url | remove:'/index.html' | split: '/' %}

<a href="/">Home</a>
{% for crumb in crumbs offset: 1 %}
  {% if forloop.last %}
    / {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
  {% else %}
    / <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
  {% endif %}
{% endfor %}

PS. Я создал онлайн-ресурс для таких фрагментов: jekyllcodex.org / без подключаемых модулей

7 голосов
/ 09 марта 2012

Это должно дать хлебные крошки на любой глубине (с оговоркой, см. Конец). К сожалению, жидкостные фильтры довольно ограничены, поэтому это нестабильное решение: в любое время, когда появляется /index.html, он удаляется, что приводит к разрыву URL-адресов с папкой, начинающейся с index.html (например, /a/index.html/b/c.html), надеюсь не произойдет.

{% capture url_parts %} {{ page.url | remove: "/index.html" | replace:'/'," " }}{% endcapture %}
{% capture num_parts %}{{ url_parts | number_of_words | minus: 1 }}{% endcapture %}
{% assign previous="" %}
<ol>
 {% if num_parts == "0" or num_parts == "-1" %}
  <li><a href="/">home</a> &nbsp; </li>
 {% else %}
  <li><a href="/">home</a> &#187; </li>

  {% for unused in page.content limit:num_parts %}
   {% capture first_word %}{{ url_parts | truncatewords:1 | remove:"..."}}{% endcapture %}
   {% capture previous %}{{ previous }}/{{ first_word }}{% endcapture %}

   <li><a href="{{previous}}">{{ first_word }}</a> &#187; </li>

   {% capture url_parts %}{{ url_parts | remove_first:first_word }}{% endcapture %}
  {% endfor %}
 {% endif %}
</ol>

Как это работает:

  • разделяет URL, игнорируя index.html (например, /a/b/index.html становится a b, /a/b/c.html становится a b c.html),
  • последовательно берет и удаляет первое слово url_parts, чтобы перебрать все слова, кроме последнего (например, оно идет a b c.html -> (a, b c.html) -> (b, c.html); тогда мы остановимся).
  • на каждом шаге устанавливает связь с использованием текущих first_word и previous, то есть всех предыдущих просмотренных каталогов (для приведенного выше примера это будет "" -> "/a" -> "/a/b")

NB. page.content в цикле for просто дает что-то для перебора, волшебство делает limit:num_parts. Однако это означает, что если page.content имеет меньше абзацев, чем num_parts, не все хлебные крошки появятся, если это вероятно, можно определить переменную сайта в _config.yml, как breadcrumb_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] и использовать site.breadcrumb_list в качестве заполнителя вместо page.content.

Вот пример (он не использует точно такой же код, как указано выше, но это всего лишь несколько небольших модификаций).

3 голосов
/ 25 января 2013

Я сделал следующие хлебные крошки с жидкими шаблонами, это настолько элегантно, насколько я мог себе представить :) Он использует jQuery для установки активного класса на последний элемент li.

            <ul class="breadcrumb">
                <li><a href="#"><i class="icon-home"></i>Home</a> </li>
                {% assign crumbs = page.url | split: '/' %}
                {% assign crumbstotal = crumbs | size %}
                {% for crumb in crumbs offset:2 %}
                    {% unless crumb == 'index.html' %}
                        <li><span class="divider">&#187;</span> {{ crumb | remove: '.html' }} </li>
                    {% endunless %}
                {% endfor %}
            </ul>
                            <script>$(".breadcrumb li").last().addClass('active');</script>
2 голосов
/ 22 декабря 2017

Я нашел альтернативную технику, которая не является полностью автоматической, но работает на страницах GitHub.

Она состоит из создания файла данных со списком возможных путей.Например, для моего сайта _data/breadcrumbs.csv:

url,title
/,Home
/api/,API
/api/jsonarray/,JsonArray
/api/jsonbuffer/,JsonBuffer
/api/jsonobject/,JsonObject
/api/jsonvariant/,JsonVariant
/doc/,Manual
/example/,Examples
/news/,News
/faq/,FAQ

Затем простой цикл создает хлебную крошку:

<ol class="breadcrumb">
  {% for crumb in site.data.breadcrumbs %}
    {% assign url_prefix = page.url | slice: 0, crumb.url.size %}
    {% if (url_prefix == crumb.url) and (page.url != crumb.url) %}
    <li class="breadcrumb-item">
      <a href="{{ crumb.url | prepend: site.baseurl }}">
        {{ crumb.title }}
      </a>
    </li>
    {% endif %}
  {% endfor %}
  <li class="breadcrumb-item active">
    <a href="{{ page.url | prepend: site.baseurl }}">
      {{ page.title }}
    </a>
  </li>
</ol>

Подробнее см. в этой статье и ссылки на реализацию.

2 голосов
/ 26 мая 2016

Вот мое решение, которое работает с Jekyll 3.1.3 и GitHub Pages на сегодняшний день. Как и некоторые решения, предложенные другими, он просто проверяет URL-адрес страницы и строит из нее хлебные крошки.

{% unless page.hide-breadcrumbs %}
  <ul class="breadcrumb">
    <li><a href="/">{{site.title}}</a> </li>
    {% assign crumbs = page.url | split: '/' %}
    {% for crumb in crumbs offset:1 %}
      <li {% if forloop.last %}class="active"{% endif %}>
        {% unless forloop.last %}
          <a href="/{% for crumb in crumbs offset:1 limit:forloop.index %}{{crumb}}/{% endfor %}">
            {{ crumb | capitalize }}
          </a>
        {% else %}
          {{ crumb | capitalize }}
        {% endunless %}
      </li>
    {% endfor %}
  </ul>
{% endunless %}
2 голосов
/ 01 июля 2015

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

Вот что я придумал.

<ol class="pull-right breadcrumb">
            <li><a href="/">Home</a></li>
            {% assign crumbs = page.url | split: '/' %}
            {% assign crumbs_total = crumbs | size | minus: 1 %}
            {% for crumb in crumbs offset: 1 %}
                {% if forloop.index == crumbs_total %}
                    <li class="active"><a href="{{ site.baseurl }}{{ page.url }}">{{page.title}}</a></li>
                {% else %}
                    {% assign crumb_limit = forloop.index | plus: 1 %}
                    {% capture crumb_url %}{% for c in crumbs limit: crumb_limit %}{{ c | append: '/' }}{% endfor %}{% endcapture %}
                    {% capture crumb_with_index %}{{ crumb_url | append: 'index.html' }}{% endcapture %}
                    {% capture current_page %}{{ site.baseurl }}{{ page.url }}{% endcapture %}
                    {% for p in site.pages %}
                        {% if crumb_with_index != current_page and crumb_with_index == p.url %}
                            <li><a href="{{ crumb_with_index }}">{{ crumb | replace:'-',' ' | capitalize}}</a>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </ol>
2 голосов
/ 11 декабря 2013

Этот плагин кажется чуть более надежным.

1 голос
/ 19 мая 2016

И я улучшил ответ JoostS, чтобы иметь следующие возможности:

  • Заменить разделитель пути "/" треугольником, направленным вправо (▶ ▶)
  • Если таковой существует, используйте breadcrumb: в начале последней страницы

    {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
    
    <a href="/">Home</a>
    {% for crumb in crumbs offset: 1 %}
      {% if forloop.last %}
        {% if page.breadcrumb != '' %}
          &#9654; <a href="#">{{ page.breadcrumb }} </a>
        {% else %}
          &#9654; <a href="#">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
        {% endif %}
      {% else %}
          &#9654; <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a>
      {% endif %}
    {% endfor %}
    
1 голос
/ 25 апреля 2015

Я думал о автоматической хлебной крошке , которая также отображает хороший текст элемента хлебной крошки из frontmatter .

Это отлично работает на GitHub Pages .

Проверьте это здесь: http://blog.comsysto.com/2015/04/25/automatic-breadcrumb-for-jekyll-on-github-pages/

Если у вас есть эта настройка:

/ mypage1 / index.html

---
layout: default
title: My Page 1 - My Homepage
breadcrumb: My Page 1
---
<div class="container">
  <div class="row">
    <div class="col-md-12">
      peace yo!
    </div>
  </div>
</div>

/ mypage1 / subpage1 / index.html

---
layout: default
title: My Sub Page 1 - My Homepage
breadcrumb: My Sub Page 1
---
<div class="container">
  <div class="row">
    <div class="col-md-12">
      foobar!
    </div>
  </div>
</div>

хлебная крошка отобразит следующее

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/mypage1/index.html">My Page 1</a></li>
  <li class="active"><a href="/mypage1/subpage1/index.html">My Sub Page 1</a></li>
</ol>
1 голос
/ 26 февраля 2015

Мне удалось просто еще дальше. Вот что я сейчас использую:

{% assign crumbs = page.url | split: '/' %}

<ul class="lv-breadcrumbs">
    <li><a href="/">Home</a></li>
    {% for crumb in crumbs offset: 1 %}
        {% if forloop.last %}
            <li class="active">{{ crumb | replace:'-',' ' }}</li>
        {% else %}
            <li><a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a></li>
        {% endif %}
    {% endfor %}
</ul>
...