在Jekyll网站上实施面包屑有哪些好方法？

Question

在Jekyll网站上实施面包屑有哪些好方法？

我知道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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Joo*_*stS 15

我对前面给出的答案略有改进.我删除了无序列表,并用一个字符(正斜杠)分隔了这些项目.我为'index.html'和'.html'添加了一个过滤器,因此也支持像'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 %}

Run Code Online (Sandbox Code Playgroud)

PS.我已经为这样的片段创建了一个在线资源:jekyllcodex.org/without-plugins

Answer 2

huo*_*uon 7

这应该给任何深度的面包屑(有一个警告,见结束).不幸的是,Liquid过滤器是相当有限的,所以这是一个不稳定的解决方案:任何时候/index.html出现,它被删除,这将打破具有以index.html(例如/a/index.html/b/c.html)开头的文件夹的URL ,希望这不会发生.

{% 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>

Run Code Online (Sandbox Code Playgroud)

它的工作原理是:

分隔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.contentfor循环只是给一些遍历,魔术是由完成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.

这是一个例子(它没有使用与上面完全相同的代码,但它只是一些小修改).

归档时间：	13 年，8 月前
查看次数：	7316 次
最近记录：	7 年，11 月前