Next 主题设置-添加相册、标签云、友情链接

添加相册

可以使用Next自带功能Group Pictures建立相册或者在文章中插入图片,这是一种最简单的方法。

标签云特效,参考cloud

  1. 安装:npm install hexo-tag-cloud@^2.0.* --save
  2. 对于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 %}
  1. 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
  1. 先关闭原先的友情链接,注释掉即可。
  2. 现在要在侧栏上方菜单里添加友情链接选项,hexo new page "links",打开Hexo\source\links里的index.md,修改title、type等。
1
2
3
4
title: 友情链接 #为了标题中出现
type: "links" #必须有
comments: true # 是否再下方显示评论栏
此处编辑你想写的内容,默认显示在所有友情链接下方。比如放置申请友链的要求等。
  1. themes\next\languages\zh-CN里添加links的翻译。如果已有翻译,也可以自行改成其他翻译,比如友链、朋友等。
  2. 此创建方法针对我所使用的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: #友链说明