一、效果

之前引入的标签云插件，看似很炫酷，实则有点鸡肋，今天忍不住又开始魔改前端css了
Hexo（sakura）建立标签云hexo-tag-cloud

演示页面快速门

文章末尾显示标签云：

如果感觉还行的话，可以向你的博客里加入哦！步骤超简单~

二、演示

我这里是hexo-sakura主题，以这主题来演示一遍操作流程！

1. 新建tags资源文件夹

sakura主题已有静态标签生成插件，大多数主题都有哦，如果没有添加即可：

npm install hexo-generator-tag --save

新建tags资源文件夹
```
hexo new page tags
```
编辑tags page
打开source\tags\index.md编辑成如下内容：
```
---
title: tags
layout: tags
date: 2020-02-13 20:24:16
---
```
主题目录添加tags
```
标签: {path: /tags, fa: fa-tags },
```
在themes\sakura\languages\zh-cn.yml声明tags（大部分主题也有声明，如果没有则添加）
```
tags: 标签
```

2. 创建样式文件

标签页面：themes\sakura\layout\tags.ejs

<div class="blank" style="padding-top: 75px;">
</div>
<div id="content" class="site-content"><div id="main"><header class="page-header"><h1 class="cat-title">标签云</h1><span class="cat-des"><p><%- "Tags " + site.tags.length %></p></span></header><div id="main-part"><div class="tag-cloud"><div class="tag-cloud-title"></div><div class="tag-cloud-tags"><%- tagcloud({min_font: 15,max_font: 30,amount: 200,color: true,start_color: '#ff6666',end_color: '#0099cc'}) %></div></div></div></div>
</div>

themes\sakura\layout\_partial\head.ejs引入样式

  <link rel="stylesheet" href="/css/tags.css" media="all">

创建样式文件themes\sakura\source\css\tags.css

/*tag-cloud*/
.tag-cloud {text-align: center;margin-top: 20px;}.tag-cloud-title {font-size: 1.8rem;text-align: center;}.tag-cloud-tags {text-align: center;}.tag-cloud a {display: inline-block;margin: 0 0.4rem;text-decoration: none;font-weight: normal;font-size: 15px;cursor: pointer;line-height: normal;padding: 5px 5px 5px 10px;position: relative;border-radius: 0 5px 5px 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;-ms-transition: all 0.3s;transition: all 0.3s;}.tag-cloud a:hover {color: #ff7242 !important;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}

运行效果如图：

3. 局部显示标签云

如果要在其他地方显示，好比如文章末尾：

sakura主题修改：themes\sakura\layout\_widget\common-article.ejs
找到：<div class="post-tags"> </div> 添加如下内容即可：

             <div class="tag-cloud"><div class="tag-cloud-title"></div><div class="tag-cloud-tags"><%- tagcloud({min_font: 10,max_font: 20,amount: 200,color: true,start_color: '#F38181',end_color: '#95E1D3'}) %></div></div>

根据需要调整字体大小和颜色，如果还不满意标签的样式，可以再修改一下css。

Hexo（sakura）自定义标签云相关推荐

[jQuery]3D效果的标签云
刚才看了篇园友关于如何自定义标签云的文章,心痒痒自己也想弄一个,其实原理非常简单,就是动态load标签页里的标签,按需要的格式重新动态生成DOM结构,再通过第三方的js插件(他们用的是Google V ...
wordpress标签云_如何在WordPress中建立更好的标签云
wordpress标签云 Once you've defined a great set of tags for your WordPress posts (or pages), you'll wan ...
Hexo（sakura）建立标签云hexo-tag-cloud
Hexo博客Next主题建立标签云hexo-tag-cloud及效果展示
Hexo Butterfly 主题功能拓展 - 标签云云养猫
记录一下正在使用的两款Hexo插件效果请看这里~ TaQini Hexo-Tag-Cloud Hexo 标签云插件:官方文档安装流程进入到 hexo 的根目录,然后在 package.json ...
Hexo 优化配置汇总【GitHub Actions 看板娘数学公式标签云 README 转义问题】
服务器快到期了,这几天迁移到 GitHub 上,用免费的 GitHub Pages 重新部署下杰森的博客 .以下样式及优化配置基于 Hexo,主题 Next 文章目录 GitHub Actions ...
添加分类、标签云（球状）、彩色标签
添加分类页面 1.新建页面 $ cd your-hexo-site $ hexo new page categories 在终端窗口下,定位到 Hexo 站点目录下.使用 hexo new page ...
Python pytagcloud 中文分词生成标签云系列（一）
转载地址:https://zhuanlan.zhihu.com/p/20432734 工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万 ...
标签云打印/微信小程序蓝牙标签打印开放平台功能
微信小程序蓝牙标签打印/标签云打印开放平台(www.herro.cn),是在云端部署的云平台,支持开发者通过API调用完成标签蓝牙打印或标签云打印功能. 平台蓝牙打印模块支持各厂商各品牌蓝牙标签打印 ...
php框架标签,CMF5自定义标签
自定义标签自定义函数里做的标签云功能函数我们下面来将这个函数做成标签首先选择你的标签作用范围应用级/app/portal/taglib/Portal.php全局级/simplewind/cmf/li ...

Hexo（sakura）自定义标签云

自定义标签云