在Jekyll网站上实现面包屑的一些好方法是什么? [英] What are some good ways to implement breadcrumbs on a Jekyll site?
问题描述
我知道 http://raphinou.github.com/jekyll-base/中有单级面包屑,但我正在寻找一些好方法,以便在目录达到四到五个级别的深度时在Jekyll网站上添加面包屑.
I'm aware that there are single-level breadcrumbs in http://raphinou.github.com/jekyll-base/ but I'm looking for some good ways to have breadcrumbs on a Jekyll site when directories get to a depth of four or five levels.
(是的,我很清楚Jekyll主要是一个博客引擎,也许我不应该将其用于通用网站,尤其是在许多目录级别的网站.我也知道
(Yes, I'm well aware that Jekyll is primarily a blogging engine and that perhaps I shouldn't use it for a general purpose website, especially with many directory levels. I'm also aware of http://octopress.org but haven't found a suitable plugin.)
主要基于 http://forums.shopify.com/categories/2/posts/22172我提出了以下面包屑的Jekyll布局,您可以在 http://crimsonfu.github上看到其变化形式. com/members/pdurbin .您应该在顶部看到面包屑"首页»成员»".
Based heavily on http://forums.shopify.com/categories/2/posts/22172 I came up with the following Jekyll layout for breadcrumbs, a variation of which you can see in action at http://crimsonfu.github.com/members/pdurbin . You should see the breadcrumbs "home » members »" at the top.
这是我的布局.是的,这很丑.我还没研究过Liquid.你能建议一个更好的方法吗?
Here's my layout. Yes, it's ugly. I haven't studied Liquid much. Can you suggest a better way?
<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> </li>
{% elsif mySecondWord contains '.html' %}
<li><a href="/">home</a> » </li>
{% unless mySecondWord == 'index.html' %}
<li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> » </li>
{% endunless %}
{% elsif myThirdWord contains '.html' %}
<li><a href="/">home</a> » </li>
<li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> » </li>
{% unless myThirdWord == 'index.html' %}
<li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> » </li>
{% endunless %}
{% elsif myFourthWord contains '.html' %}
<li><a href="/">home</a> » </li>
<li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> » </li>
{% unless myFourthWord == 'index.html' %}
<li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> » </li>
{% endunless %}
{% elsif myFifthWord contains '.html' %}
<li><a href="/">home</a> » </li>
<li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> » </li>
{% unless myFifthWord == 'index.html' %}
<li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> » </li>
{% endunless %}
{% else %}
<li><a href="/">home</a> » </li>
<li><a href="/{{myFirstWord}}">{{myFirstWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}">{{mySecondWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}">{{myThirdWord}}</a> » </li>
<li><a href="/{{myFirstWord}}/{{mySecondWord}}/{{myThirdWord}}/{{myFourthWord}}">{{myFourthWord}}</a> » </li>
{% endif %}
</ul>
</div>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
推荐答案
这应该在任何深度都提供面包屑(带有警告,请参见结尾).不幸的是,Liquid过滤器相当有限,因此这是一个不稳定的解决方案:每当出现/index.html
时,它都会被删除,这将破坏具有以index.html
开头的文件夹(例如/a/index.html/b/c.html
)的URL,希望不会发生.
This should give breadcrumbs at any depth (with a caveat, see end). Unfortunately, the Liquid filters are fairly limited, so this is an unstable solution: any time /index.html
appears, it is deleted, which will break URLs that have a folder that starts with index.html
(e.g. /a/index.html/b/c.html
), hopefully that won't happen.
{% 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> </li>
{% else %}
<li><a href="/">home</a> » </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> » </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
,);然后我们停止). - 在每个步骤中,它将使用当前的
first_word
和previous
进行面包屑链接,这是以前看到的所有目录(对于上面的示例,它将进入""
->"/a"
->"/a/b"
)
- separates the URL, ignoring
index.html
(e.g./a/b/index.html
becomesa b
,/a/b/c.html
becomesa b c.html
), - successively takes and removes the first word of
url_parts
, to iterate through all but the last word (e.g. it goesa b c.html
-> (a
,b c.html
) -> (b
,c.html
); then we stop). - at each step, it makes the breadcrumb link using the current
first_word
, andprevious
which is all the previous directories seen (for the example above, it would go""
->"/a"
->"/a/b"
)
NB. for循环中的page.content
只是给一些要迭代的内容,魔术是由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
.
NB. the page.content
in the for loop is just to give something to iterate over, the magic is done by the limit:num_parts
. However, this means that if page.content
has fewer paragraphs than num_parts
not all breadcrumbs will appear, if this is likely one might define a site variable in _config.yml
like breadcrumb_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
and use site.breadcrumb_list
as the placeholder instead of page.content
.
这是一个示例(它使用的代码与上面,但这只是一些小的修改.
Here is an example (it doesn't use precisely the same code as above, but it's just a few little modifications).
这篇关于在Jekyll网站上实现面包屑的一些好方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!