美文网首页我爱编程
Jekyll架站之内外链

Jekyll架站之内外链

作者: GeekJun | 来源:发表于2018-06-30 22:02 被阅读417次

    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

    相关文章

      网友评论

        本文标题:Jekyll架站之内外链

        本文链接:https://www.haomeiwen.com/subject/etzzyftx.html