标签改造
自今年6月份搭建这个jekyll博客后,标签一直没有用起来,还保持着主题默认的标签样式.
随着博文的变多,想找一篇博客比较麻烦,周末的时候添加了静态搜索.今天就把标签也改造一下成云标签吧.
使用插件
- 3D云标签 tagcloud
使用步骤
- 下载tagcloud的js
- 在
_includes/header.html中引入tagcloud的css<!-- 3d云标签 --> <link href="/js/lib/tagcloud-1.1.1/dist/tagcloud.min.css" rel="stylesheet" type="text/css"> - 在
_includes/footer.html中引入tagcloud的js<!-- 3d云标签 --> <script src="/js/lib/tagcloud-1.1.1/dist/tagcloud.min.js"></script> <script> (function() { // 开启渲染 tagcloud(); })(); </script> - 修改
_includes/links-list.html的内容如下<h1>标签</h1> <div class="tagcloud"> {% for post in site.posts %} {% if post.tags %} <a href="#">{{ post.tags | split: ', ' }}</a> {% endif %} {% endfor %} </div> -
完成后前后对比
原有样式:
现有样式:
- 优化配置
a. 对标签进行分词 + 去重
liquid的语法有点头痛,数组用的一直有问题,转化成遍历tags为字符串然后split做处理了 修改后的_includes/links-list.html如下:<h1>标签</h1> <div class="tagcloud"> {% assign allTags = '' %} {% for post in site.posts %} {% if post.tags %} {% assign tagsString = post.tags | join: ',' %} {% assign allTags = allTags | append: ',' | append: tagsString %} {% endif %} {% endfor %} {% assign allTags = allTags | split: ',' |uniq %} {% for allTag in allTags %} {% if allTag != '' %} <a href="#">{{ allTag }}</a> {% endif %} {% endfor %} </div>虽然问题最终解决了,不过效果因布局的问题,还是不太美观,后续考虑更换
b.TODO优化链接/样式 - 2017-12-28日更新,更3dtag新为词云
词云参考wordcloud2.js,效果如下:
