Jekyll Docs文件夹

时间:2014-03-16 10:38:36

标签: jekyll

我的Jekyll网站我需要创建一个类似于原始网站的文档部分。但是,我不确定文档部分是如何呈现的。例如,位于站点根目录中的docs文件夹中填充了文档.md文件。此文件夹不包含任何负责网站布局的index.html文件。该文件夹的链接是

 <a href="{{ site.url }}/docs/home/">Doc<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">Documentation</span></a>

有人可以了解这部分的呈现方式吗?

1 个答案:

答案 0 :(得分:2)

docs文件夹包含index.md,在最终网站中呈现为index.html

如果你看看index.md的YAML前面的内容,你会看到这个:

---
layout: docs
title: Welcome
next_section: quickstart
permalink: /docs/home/
---

permalink: /docs/home/行将最终网址设置为{{ site.url }}/docs/home/,即使实际文件位于/docs文件夹中,/docs/home文件夹也不存在。
(有关permalink设置的详情,请参阅文档中的Predefined Global Variables

这就是URL的来源。


关于文档主题列表(右侧边栏)

index.md 的YAML前端问题(见上文),也包含layout: docs行。
这是指/_layouts/docs.htmllayout file

在布局文件中,行{% include docs_contents.html %}引用_includes/docs_contents.htmlinclude file,其中包含以下代码:

{% for section in site.data.docs %}
<h4>{{ section.title }}</h4>
{% include docs_ul.html items=section.docs %}
{% endfor %}

site.data.docs(在第一行)引用/_data/docs.ymlYAML data file
它看起来像(缩短)

- title: Getting Started
  docs:
  - home
  - quickstart
  - installation
  - usage
  - structure
  - configuration

- title: Your Content
  docs:
  - frontmatter
  - posts
  - drafts
  - pages
  - variables
  - datafiles
  - assets
  - migrations

docs_contents.html内的代码循环遍历数据文件中的项目,显示title值(&#34;入门&#34;,&#34;您的内容&#34; .. 。)然后包括another include file /_includes/docs_ul.html,从数据文件中传递docs列表。

第二个包含文件循环遍历docs列表,并为每个文件执行以下操作:

第1步:

{% assign item_url = item | prepend:'/docs/' | append:'/' %}

这将根据列表项构建页面的URL。例如,quickstart变为/docs/quickstart/

第2步:

{% if item_url == page.url %}
  {% assign c = 'current' %}
{% else %}
  {% assign c = '' %}
{% endif %}

这会通过检查上一步中创建的URL是否等于当前页面的URL来标记当前页面(在下一步中使用)

第3步:

{% for p in site.pages %}
  {% if p.url == item_url %}
    <li class="{{ c }}"><a href="{{ site.url }}{{ p.url }}">{{ p.title }}</a></li>
  {% endif %}
{% endfor %}

这将循环整个站点中的所有页面,直到找到包含在第一步中创建的URL的页面 (为了确保网址相同,docs文件夹中的所有Markdown文件都在前端设置了permalink,例如quickstart.md permalink: /docs/quickstart/ })

然后,它输出一个<li>,其中包含指向页面的链接,使用相应Markdown文件中的标题作为链接文本。
另外,<li>的类如果是当前页面(请参阅步骤2),则设置为current,因此当前的pae会在列表中突出显示:

current page