如何增加导航栏进一步的页面

增加SDG页面

首先要做好导航栏这步才能做到接下来要说的页面

老师的是导航栏是SDG，而我的是作品集，我就以我的来举例。老师的：我的：

首先找到navigation.yml这个文件夹，每个人的模板不同可能在的位置会不一样。
用notepad++打开看到作品集下面的url：/portfolio/，这个是需要我们自己添加的的文件夹。
打开github desktop，按ctrl+shift+f,找到本地端的文件夹所在后，新建一个portfolio文件夹。
将 index.md 文档（这个文档可以找我要）放入portfolio，然后在desktop上更新数据到云端，现在在你的博客上点击作品集一栏就可以看到我们刚刚放进去的页面。

使用Bootstrap Grid System和markdown语法在HTML中的显示

这一步主要是教你如何在你刚刚添加的页面上进行布局的修改，以及如何让markdown语法在HTML中显示。

在刚刚的本地端文件夹中找到_layouts/default.html这个文件，在<head>标签里面加入这段代码：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

这行代码是栅格系统的免费免安装形式的代码，Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

++只有添加了这行代码，后面的布局设置才会生效！++

没有修改布局之前的index页面的图片是占据整个屏幕的，字也堆积在图片后面。

用notepad++打开你添加的index.md的文档，在文章中，在你想要进行分割的地方添加代码。

这样我们就将图片和文字分为左边一栏和右边一栏。

![image](http://m.qpic.cn/psb?/V13hHmxu1vMZsZ/Ihv*fCf