咳咳,在实现hexo二级导航栏功能之前,我们先学习下yaml语法。(yaml就是hexo中_config.yml文件使用的语言)
以下内容摘至阮一峰老师的博客
简介
YAML 语言(发音 /jml/ )的设计目标,就是方便人类读写。它实质上是一种通用的数据串行化格式。
它的基本语法规则如下。
大小写敏感使用缩进表示层级关系缩进时不允许使用Tab键,只允许使用空格。缩进的空格数目不重要,只要相同层级的元素左侧对齐即可
#表示注释,从这个字符一直到行尾,都会被解析器忽略。
YAML 支持的数据结构有三种。
对象:键值对的集合,又称为映射(mapping)/ 哈希(hashes) / 字典(dictionary)数组:一组按次序排列的值,又称为序列(sequence) / 列表(list)纯量(scalars):单个的、不可再分的值这次我们实现过程主要是使用对象和数组。
对象
对象的一组键值对,使用冒号结构表示。
转为 JavaScript 如下。
Yaml 也允许另一种写法,将所有键值对写成一个行内对象。
转为 JavaScript 如下。
数组
一组连词线开头的行,构成一个数组。
转为 JavaScript 如下。
数组也可以采用行内表示法。
转为 JavaScript 如下。
四、复合结构
对象和数组可以结合使用,形成复合结构。
转为 JavaScript 如下。
好了,了解到这里就能运用起来实现我们的二级导航栏功能的配置了。
首先我们看下一般的目录配置
类似这种,前面的是目录名,后边的是path(路径)和图标的class名(中间用||隔开)
我们可以看下现在要实现的这种菜单导航栏的需求
前面横着部分可以和上面配置一样实现,下边竖着的部分又要怎么实现呢。
稍微改了下_config的菜单配置如下:
在学习了阮一峰老师的那部分内容应该能看懂上图的配置了。接下来就是模板中怎么遍历出菜单了。废话不多说,直接上代码:(注意这里是ejs模板的代码,swig、pub等模板代码还需自己照瓢画葫芦)
可以看出我是用行内对象来实现的,后来想想用数组实现会比较简单,当是那样会用下标0、1、2等代替具体的值,而不是像现在有具体的含义的属性path,fa等,数组实现没有这种方式易懂。就没有改成数组了。
到此hexo二级导航栏功能实现,完。