Jekyll架站之内外链

jekyll.jpg

1、跳转内外链接网页的前提是你在 _config.yml 里的 url 是正确的，一定要加上双引号，如图：

确保提交url是正确的带有双引号.jpg

2、在 _data 的 navigation.yml 里更改导航栏，想要跳转的url链接先在里面写好。先写外链（外部链接-直接添加url即可），内链需要在结束时才写，注意要去掉 url 前面的 - ，否则无法跳转，

更改导航栏没有内链.jpg

3、更改主题皮肤：
第一种方法——在 _sass 文件夹里面找到 skins ，接着复制一份 _aqual.scss 更改为自己的名字。找到原作者的 3.1.6 分支下的 skin 颜色，在 Adobe颜色查看器 里面与自己希望的颜色对比，并且把自己想要颜色代码添加到刚刚复制的命名文件中。

作者master的色轮.jpg

更改成自己喜欢的色环变成主色调.jpg

补充： SCSS中颜色的mix使用

色调中mix元素的作用，方便全改.png

第二种方法——直接在 _variable.scss 里面更改颜色，方法和 skins 是一样的

和skin同级文件夹下的varaable可改.jpg

4、完成后就在 _config.yml 中使用的主题皮肤更改为 "aqua_wenjun"

config中使用皮肤改为aqua_wenjun.jpg

5、中间出现了bug，部署失败是因为没加 # ，所以导致颜色不生效

部署失败因为没加#不生效2.jpg

部署失败因为没加#不生效.png

6、但在 _variable.scss 里面，要区分好衬线字体和不衬线字体的不同

衬线字体和不衬线字体区别.jpg

7、然后添加中文字型在自己主题皮肤的 aqua_wenjun 文件中

添加中文字型在自己的皮肤文件夹.png

8、内链 category-archive(归类)，md档一般都要写category-archive(归类)和tag(标签)

9、collection.archive 在 Quick Start Guide 中有详细用法 可以参考其中的 concent 部分内容。
而在网站首页也有 category.archive 和 tag-achive 可以参考

10、现在在目录里新建 _svg 文件夹，在里面放3篇md文章

11、我们实现了读取文章，并且知道文章放在哪里。md档和html档是可以一起使用没有冲突的。新建一个文件夹 pages ，往里面放md档，一共有5个md档比较重要，分别是：about.md 、 category-archive.md 、 collection-archive.md 、 design-archive.md 、 svg-archive.md

12、我们可以在 3.1.6 分支里面的查询 pages 模板，但 year / tag / category / collection-archive 是最重要的组织文件框架

13、把 3.1.6 分支里的4个md档：about.md 、 category-archive.md 、 design-archive.md 、 svg-archive.md 复制在 master 分支的 pages 文件夹里面

14、因为 3.1.6 分支里是html文档，但没有关系，html和md是可以通用的，我们把html的后缀改为md同样是可以显示出来的

把3.1.6的pages中html复制过来后并且改为md档.jpg

15、把 collection-archive 改成 svg-archive 也没事，便于我们区分。

16、所以 collection-archive 一共要做三步：

先新建一个 svg 的文件夹，放几篇文章，
接着新建 pages 文件夹并放上从 3.1.6分支中 复制过来的 collection-archive，也可以改名为 svg- archive，
然后更改 config.yml 中的collection（直接复制进去）和 default 中的 recipices-archive 为 svg-archive ，
这三步做完后，在 data文件夹中 navigation.里面加上路径内链就可以点击查询跳转了

17、除了 collection-archive ，还有 category-archive，操作步骤和 collection-archive 差不多，只是 category-archive 需要更改md档 category-archive(归类)和tag(标签) 的内容，还要更改 config.yml 中的category-archive(归类)和tag(标签)

在config.yml中更改category-archive.jpg

18、然后在 navigation.yml 添加链接就可以跳转了

19、关于 about.md ，直接更改md 档的文字就可以了，再在 navigation.yml 添加链接就同样可以实现跳转

20、最后要注意格式问题，一定要排列清楚。

正确书写内外链格式，实现正确跳转.jpg