Hexo 标签函数 list_tags 用法

最近正在研究Hexo主题文档,关于标签函数有两条:

  • <%- list_tags([options]) %>
    
    1
    2
    3

    - ```ejs
    <%- tagcloud([tags], [options]) %>

因为现在用的主题采用的是list_tag标签,着重讲一下这个标签。

官网参数

其中list_tag有以下参数:

选项 描述 预设值
orderby 标签排列方式 name
order 标签排列顺序。1, asc 升序;-1, desc 降序。 1
show_count 显示每个标签的文章总数 true
style 标签列表的显示方式。使用 list 以无序列表(unordered list)方式显示。 list
separator 标签间的分隔符号。只有在 style 不是 list 时有用。 ,
class Class name of tag list (string) or customize each tag’s class (object, see below). tag
transform 改变标签名称显示方法的函数。
amount 要显示的标签数量(0 = 无限制) 0
suffix 为链接添加前缀 None

list_tags用法详解

函数写法示例如下:

1
list_tags(site.tags,{orderby: 'name', order: 'desc', amount: 0,class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: list, separator: ' | '})
  • 其中第一个参数site.tags还可以写post.tags,意思是分别调用全站标签和当前文章标签

  • orderby这里默认值是name,如果想按照标签下的文章数量来进行排序的话,很明显name已经满足不了我们的需求,于是我们可以这样调用,使用length参数(之前一直想要找到这样的写法,最后还是在hexo官方github的issue上看到的,还是个外国朋友提供的),这样也称之为热门标签,并通过amount参数控制显示数量,这样的标签群放在侧边栏效果更佳:

    1
    <%- list_tags(site.tags,{orderby: 'length', order: 'desc',amount: 8}) %>

    效果如下图:

    黑石博客热门标签

  • order是升序和降序的参数

  • amount标签数量的控制

  • class这里是个参数集,区分ullispan分别给其加上css类,用于css美化,示例如图:

    黑石博客标签class

  • styleseparator配合使用,给标签与标签之间加上分隔符:

    1
    style: false, separator: ' | '

    效果:

    黑石标签分隔符

  • show_count为是否显示每个标签的文章数,这个就很好理解了,填truefalse即可。

  • transform可为标签字符串进行转化,最常见的就是大小写转化,这也是一个常见的方法,比如我喜欢给每个标签用小写,如hexo,但显示出来不好看,于是我们可以利用transform转为大写,写法如下:

    1
    <%- list_tags(site.tags,{orderby: 'length', order: 'desc', amount: 0,transform(str) {return str.toUpperCase();}}) %>

    原本小写的hexo,转变为大写,效果如下:

    黑石标签大小写转化

References

Hexo官方文档