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

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

我的结构如下:

.
├── 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可能会排在最前面。

时间: 2024-10-11 22:03:28

github pages搭建个人网站如何添加导航的相关文章

学会Git玩转Github笔记(三)—— Github Pages 搭建个人网站

https://help.github.com/categories/github-pages-basics/ 一.个人站点 访问 https://用户名.github.io 搭建步骤 1) 创建个人站点   ->  新建仓库(注:仓库名必须是[用户名.github.io]) 2) 在仓库下新建index.html的文件即可 注意: 1.github pages 仅支持静态网页 2.仓库里面是.html文件 3.个人主页也可以设置主题 二.Project Pages 项目站点 访问 https:

Github Pages 搭建个人博客

1.Github简介 Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery.Twitter等.为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了Github Pages的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客. Github Pages有以下几个优点: 轻量级的博客系统,没有麻烦的配置 使用

用Github pages搭建自己制作的网页,方法最简单,适用于新手

本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建网站的方法,发现不是要收费就是很麻烦.终于黄天不负有心人,让我找见了github pages,不但免费,还非常的方便!! 于是乎又开始搜索github pages搭建网站的步骤,发现基本都是各种搭建个人博客的方法,好不容易找到个关于搭载自己制作的网页,却又发现还需要去学习如何使用git...一堆代码让人实在难受..于是乎就自己开始研究github pages,终于让我找到最简单的方法了!在这里我就来分享给大家,同时也希望像我一样的前端

GitHub+Hexo 搭建个人网站详细教程

原文链接 GitHub+Hexo 搭建个人网站详细教程 前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程. 你见过的最棒的个人博客界面是什么样的? 什么是Hexo ? Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便

使用Octopress和Github Pages搭建博客的高级技巧

如何果还不知道如何使用Octopress和Github Pages搭建的同学可以参考码农的救赎:使用Github Pages搭建博客 提升速度 按照教程搭建好的博客,访问起来总是很慢很慢,即使把什么Google Plus和Google Analyze之类的都关闭掉后,仍然很慢.原因就是在HTML中的某些资源,比如脚本或者字体什么的是使用 点击阅读全文

使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

title: 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客 date: 2019-04-29 00:05:50 tags: 其他 --- 准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm install hexo-material cp node_modules/hexo-material themes/

github pages搭建静态的网站

hexo是一个快速打造个人博客的框架,生成纯净太的html代码,不需要编译,浏览器直接解析,非常酷! hexo中文文档 http://hexo.io/zh-cn/docs/ 生成静态网站之后,可以上传到github,利用githubPage打造自己的网站,可以自定义域名. github pages https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/ 有问题的可以:

github pages搭建网站(三)

一.个人站点 访问 https://用户名.github.io 搭建步骤 (1)创建个人站点 ->新建仓库(注:仓库名必须是[用户名.github.io]) (2)在仓库下新建index.html的文件即可 注意: github pages只支持静态网页 仓库里面只能是.html文件 二.项目站点 访问 https://用户名.github.io/仓库名 搭建步骤 (1)进入项目主页,点击settings (2)在setting页面,点击[Choose a theme] (3)选择一个主题[Se

Hexo+GitHub Pages搭建的个人博客

1. 什么是 Hexo,什么是 NexT 主题? Hexo 是一个基于 Node.js 的静态站点生成框架,快速.简洁且高效.Hexo 主要使用 Markdown 解析文章,在几秒内,即可利用靓丽的主题生成静态网页.NexT 是其一个非常简洁优雅的主题. 2. 什么是 Markdown? Markdown 用过一些简单的标记,让你的文字实现精致的排版,实现易读易写,无需考虑美化,专注文字本身. 3. 什么是 GitHub ? GitHub 是基于 Git 技术的社交编程及代码托管网站.你可以用它