github pages搭建个人网站如何添加导航
2015-06-02 15:46
891 查看
折腾过github pages的同学都清楚使用jekyll搭建个人网站的目录结构,而导航最终的代码是在使用的主题目录中的default.html文件中的。
我的结构如下:
也就是图中画红线的目录中,里面是使用的主题目录
在使用的主题中有四个文件:default.html、page.html、post.html、setting.yml,跟导航相关的代码就在default.html中
ul标签中前三行是默认的,后面三行是我为了添加一个自己介绍的页面而添加的。
自我介绍的页面头部是这样的:
需要注意的是group这个地方,它的值是单独的aboutme,这也是为什么我在default.html页面中添加了三行的缘故,因为默认的三行只导入group为navigation的页面。
同样,如果所有页面都为navigation,则我们是无法控制他们的顺序的。也就是说aboutme可能会排在最前面。
我的结构如下:
. ├── 404.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 │ ├── 2015-01-29-hello-world.md │ ├── 2015-02-01-mysql-00.md │ └── 2015-02-01-to-myself.md ├── Rakefile ├── README.md ├── rss.xml ├── screenshot.png ├── _site │ ├── 404.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可能会排在最前面。
相关文章推荐
- 关于大型网站技术演进的思考(九)--网站静态化处理--总述(1)
- Android开发实用的网站
- 大规模高性能网站架构设计思路整理
- 新网站SEO要做的事情有哪些
- 网站压力测试工具webbench
- 谈网站SEO的一些注意事项
- 关于大型网站技术演进的思考(八)--存储的瓶颈终篇(8)
- 关于大型网站技术演进的思考(七)--存储的瓶颈(7)
- SEO必须要知道的网站页面优化策略
- 关于大型网站技术演进的思考(六)--存储的瓶颈(6)
- 关于大型网站技术演进的思考(五)--存储的瓶颈(5)
- 关于大型网站技术演进的思考(三)--存储的瓶颈(3)
- 关于大型网站技术演进的思考(四)--存储的瓶颈(4)
- JNI网站
- 关于大型网站技术演进的思考(二)--存储的瓶颈(2)
- 关于大型网站技术演进的思考(一)--存储的瓶颈(1)
- 教你快速高效接入SDK——总体思路和架构
- android系统架构及源码目录结构
- 如何一个人打造日PV百万的网站架构——SDCC 2013讲师曹力专访
- 网站添加ga后,显示流量来源/媒介是paypal.com / referral