一页所有文件名+内容

<section>
  {% for post in site.posts %}
<article>
  <h1>
<a href="{{ post.url }}">
  {{ post.title }}
</a>
  </h1>
  <time>{{ post.date | date: "%B %-d, %Y" }}</time>
  
  {{ post.content }}
</article>
  {% endfor %}
</section>

{% assign tags = "all" %}
// 设置变量, 这里用all来表示默认的第一个tag, 代表全部tags的情况
{% for post in site.posts %}
// 取所有的post出来逐一判定, 这里未来post很多的话, 会进行数量限制, 目前数量太少, 就糙着用啦
{% for tag in post.tags %}
// 取post自己的tags出来, 逐一进行判定是否已经在tags数组列表中了
{% unless tags contains tag %}
// 为了去掉重复的tag~
{% capture tags %}{{ tags }}|{{ tag }}{% endcapture %}
// 把所有不在tags数组中的tag都加到tags中
{% endunless %}
{% endfor %}
{% endfor %}
{% assign alltags = tags | split: '|' %}
// 生成一个新的数组, 似乎本身liquid中没有直接append数组的方法... 看到此处的朋友有知道的请不吝告知~
<ul class="tags">
{% for tag in alltags %}
// 展现tag
<a href="javascript:;" data-rel="{{ tag }}" class="filter tag {% if tag == 'all'  %}active{% endif %}" >{{ tag }}</a>
// 这里的data-rel是为了筛选做的准备, 后文会介绍
{% endfor %}
</ul>









{% comment %}
  Dynamically generates a list of links to pages with layout: page in the front-matter, sorted alphabetically by URL.
{% endcomment %}

{% assign pages_list = site.pages | sort:"url" %}
{% for node in pages_list %}
  {% if node.title != null %}
{% if node.layout == "page" %}
  <a class="{% if page.url == node.url %} active{% endif %}" href="{{ node.url }}">
{{ node.title }}
  </a>
{% endif %}
  {% endif %}
{% endfor %}

高亮菜单

用 js 高亮的话… 是页面加载之后 再换的.. 时间不对… jekyll 的 config.yml 文件 页可以定义菜单内容.

nav:
text: about
	url: /about/index.html
text: resume
	url: /resume/index.html
text: contact
	url: /contact/index.html
text: blog
	url: /blog/index.html

其次,在使用到 nav 的地方,例如 layout 里面,这样写:

<nav>
{% for link in site.nav %}
{% assign active = nil %}
{% if page.url == link.url or page.layout == link.layout %}
  {% assign active = 'class="active"' %}
{% endif %}
<li>
    <a {{ active }} href="{{ link.text }}">
        {{ link.text }}
    </a>
    {{ indicator }}
</li>
  {% endfor %}
</nav>

这样写大致的意思是: • 把配置中定义好的 nav 通过循环取出来。 • 判断当前页面的 url,如果是和 nav 中一致的,就赋予一个样式类「active」。 • 随后在模板中把定义好的参数 active 写上去。 通过这样写的好处是可以在页面生成的时候就有这个样式,而不需要通过 Javascript 去动态添加。原理是差不多的,但这样写更加合理。