github pages搭建个人网站如何添加导航

折腾过github pages的同学都清楚使用jekyll搭建个人网站的目录结构，而导航最终的代码是在使用的主题目录中的default.html文件中的。

我的结构如下：

.
├── .html
├── about.html
├── archive.html
├── assets
│   └── themes
├── atom.xml
├── categories.html
├── changelog.md
├── _config.yml
├── _drafts
│   └── jekyll-introduction-draft.md
├── History.markdown
├── _includes
│   ├── JB
│   └── themes
├── index.md
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── pages.html
├── _plugins
│   └── debug.rb
├── _posts
│   ├── ---hello-world.md
│   ├── ---mysql-.md
│   └── ---to-myself.md
├── Rakefile
├── README.md
├── rss.xml
├── screenshot.png
├── _site
│   ├── .html
│   ├── about.html
│   ├── archive.html
│   ├── assets
│   ├── atom.xml
│   ├── categories.html
│   ├── History.markdown
│   ├── index.html
│   ├── mysql
│   ├── pages.html
│   ├── rss.xml
│   ├── screenshot.png
│   ├── sitemap.txt
│   ├── tags.html
│   └── untitled
├── sitemap.txt
├── tags.html
└── _theme_packages
    └── hooligan

也就是图中画红线的目录中，里面是使用的主题目录

在使用的主题中有四个文件：default.html、page.html、post.html、setting.yml，跟导航相关的代码就在default.html中

<ul class="nav">
    {% assign pages_list = site.pages %}
    {% assign group = 'navigation' %}
    {% include JB/pages_list %}

    {% assign pages_list = site.pages %}
    {% assign group = 'aboutme' %}
    {% include JB/pages_list %}
</ul>

ul标签中前三行是默认的，后面三行是我为了添加一个自己介绍的页面而添加的。

自我介绍的页面头部是这样的：

---
layout: page
title: About me
header: About me
group: aboutme
---
{% include JB/setup %}

<h1> hh </h1>

需要注意的是group这个地方，它的值是单独的aboutme，这也是为什么我在default.html页面中添加了三行的缘故，因为默认的三行只导入group为navigation的页面。

同样，如果所有页面都为navigation，则我们是无法控制他们的顺序的。也就是说aboutme可能会排在最前面。