我的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>
有人可以了解这部分的呈现方式吗?
答案 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.html
,layout file。
在布局文件中,行{% include docs_contents.html %}
引用_includes/docs_contents.html
,include file,其中包含以下代码:
{% for section in site.data.docs %}
<h4>{{ section.title }}</h4>
{% include docs_ul.html items=section.docs %}
{% endfor %}
site.data.docs
(在第一行)引用/_data/docs.yml
,YAML 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
列表,并为每个文件执行以下操作:
{% assign item_url = item | prepend:'/docs/' | append:'/' %}
这将根据列表项构建页面的URL。例如,quickstart
变为/docs/quickstart/
。
{% if item_url == page.url %}
{% assign c = 'current' %}
{% else %}
{% assign c = '' %}
{% endif %}
这会通过检查上一步中创建的URL是否等于当前页面的URL来标记当前页面(在下一步中使用)。
{% 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会在列表中突出显示: