标签云特效，参考cloud。
- 安装：
npm install hexo-tag-cloud@^2.0.* --save
- 对于next8版本，找到
theme/next/layout/_macro/sidebar.njk，打开后搜索back2top.sidebar，在其上方添加如下代码。
1
2
3
4
5
6
7
8
9
10
11
12
| {% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3> #为标签云命名，建议不命名，直接删除此行
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width:100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}
|
hexo-tag-cloud插件支持自定义，可以改变标签云的字体和颜色，还有突出高亮。在站点配置里添加如下的配置项:
1
2
3
4
5
6
7
| tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#333'
textHeight: 25
outlineColor: '#E2E1D1'
maxSpeed: 0.5
pauseOnSelected: true # true 意味着当选中对应 tag 时,停止转动
|
自定义友情链接
next主题自带添加友情链接功能，在侧栏下方显示。
1
2
3
4
5
6
| links_settings:
icon: fa fa-globe
title: 友情链接
layout: inline # Available values: block | inline
links:
name: url
|
- 先关闭原先的友情链接，注释掉即可。
- 现在要在侧栏上方菜单里添加友情链接选项，
hexo new page "links"，打开Hexo\source\links里的index.md，修改title、type等。
1
2
3
4
| title: 友情链接 #为了标题中出现
type: "links" #必须有
comments: true # 是否再下方显示评论栏
此处编辑你想写的内容，默认显示在所有友情链接下方。比如放置申请友链的要求等。
|
- 在
themes\next\languages\zh-CN里添加links的翻译。如果已有翻译，也可以自行改成其他翻译，比如友链、朋友等。
- 此创建方法针对我所使用的next8.8.1，其它不同版本的next主题也可以参照以下方法。
在Hexo\themes\next\layout\_partials\page里新建links.njk文件，复制以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| {% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}
<div id="links">
<style>
.links-content{
margin-top:1rem;
}
.link-navigation::after {
content: " ";
display: block;
clear: both;
}
.card {
width: 300px;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 236px;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">
{% for link in theme.mylinks %}
<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>
{% endfor %}
</div>
{{ page.content }}
</div>
</div>
{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}
|
修改Hexo\themes\next\layout\page.njk文件，注意格式。
在
1
2
| {%- elif page.type === 'schedule' and not page.title %}
{{- __('title.schedule') + page_title_suffix }}
|
下面添加：
1
2
| {%- elif page.type === 'links' and not page.title %}
{{- __('title.links') + page_title_suffix }}
|
在
1
2
| {% elif page.type === 'schedule' %}
{%- include '_partials/page/schedule.njk' -%}
|
下面添加：
1
2
| {% elif page.type === 'links' %}
{%- include '_partials/page/links.njk' -%}
|
在主题配置文件_config.yml末尾处添加友链：
1
2
3
4
5
6
7
8
9
| mylinks:
- nickname: #友链名称
avatar: #友链头像
site: #友链地址
info: #友链说明
- nickname: #友链名称
avatar: #友链头像
site: #友链地址
info: #友链说明
|