雨落朝阳
0%

Hexo更换Next主题

发表于 更新于 分类于 ，

1 安装

1.1 下载主题

进入Hexo项目根文件夹下执行：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

1.2 修改配置

打开Hexo项目根文件夹下的_config.yml文件，找到如下位置修改：

1
theme: next

2 优化

2.1 修改风格

Next共有4种主题风格：

可以在themes/next/_config.yml中修改，将对应风格前的#去掉即可：

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

2.2 修改菜单（Menu）

编辑themes/next/_config.yml，找到menu选项，将想要展示的选项前的#去掉即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

如果想要替换菜单中的文字，请进入themes/next/languages/目录，找到你的博客对应的语言文件，以zh-CN为例，则打开zh-CN.yml文件，找到menu，然后对相应的标签修改即可:

1
2
3
4
5
6
7
8
9
10
menu:
  home: 首页
  archives: 全部文章
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

2.3 修改文章目录

编辑themes/next/_config.yml，找到toc部分:

  • number: 日志列表是否自动编号，设置为false，因为会与自己设置的编号冲突
  • wrap: 日志列表标题过长时是否换行显示，依据个人喜好设置
  • expand_all：是否展开所有目录层级，为了方便查看，设置为true
1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

2.4 修改文章底部标签样式

编辑themes/next/_config.yml，修改如下部分:

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

2.5 设置头像

编辑themes/next/_config.yml，找到Sidebar Avatar部分，修改如下：

1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg # 头像图片
  # If true, the avatar will be dispalyed in circle.
  rounded: true # 是否将头像显示为圆形
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 鼠标移入和移出是是否旋转头像

其中avatar.jpg应放于博客的source\images目录下，或者主题的themes\next\source\images目录下。

2.6 添加动态背景

编辑themes/next/_config.yml，找到Animation Settings部分
默认配置中列出了4种动画:

  • motion: 自带，用于设置加载动画，默认开启
  • pace：没看出来什么效果
  • three：三种3D背景动画
  • canvas_ribbon：彩带背景，鼠标每次点击生成新的彩带

想要设置背景动画（后三种），只需要将其所在位置上方注释中Dependencies指定的项目克隆到themes/next/source/lib/，然后将对应的动画中enable设置为true即可。
以canvas_ribbon为例：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

然后在themes/next/_config.yml中将其开启：

1
2
3
4
5
6
7
8
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # 彩带宽度
  alpha: 0.6 # 透明度
  zIndex: -2 # 指定网页上的Z轴，当开启多个背景时，可以用来指定层次

但是默认配置中并没有下面这种很流行的Canvas-nest动画（虽然很吃GPU，但是就想要）

想要这种动画，我们可以自己来添加，只需要在相同的位置添加相应的配置，其配置如下：

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 100 # the number of lines

并克隆Dependencies中的依赖文件：

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

2.7 设置鼠标点击红心特效

在/themes/next/source/js/src下新建clicklove.js文件，填入以下内容：

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在\themes\next\layout\_layout.swig的<head>标签内引入该js文件：

1
2
3
4
5
6
<head>
  ...

  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
</head>

2.8 修改代码块风格

打开themes/next/_config.yml，找到highlight_theme，并修改为上方注释里支持的风格。另外还可以添加复制按钮，以及设置Mac窗口样式。具体配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

如果设置night风格，会发现代码块颜色太亮，可以手动修改其样式。找到themes/next/source/css/main.styl，在其尾部追加样式，覆盖掉原本的样式即可。
此处贴出我所添加的样式，当然其中还有一些别的样式设置，仅供参考：

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
/*代码块相关样式*/
.highlight,
pre,
.highlight .code pre 
{
  background: #2a2d2d;
}

.highlight .gutter pre {
  background: #1d1f21;
  border-right: 1px solid;
}

code {
  color: #c31e48;
  background: #fbf7f8;
  margin: 2px;
}
code {
  border: 1px solid #d6d6d6;
}
pre code {
  border: none;
}

/*字体及间距样式*/
hr {
  margin: 20px 0;
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  padding-top: 0px;
}
.btn {
  border-radius: 2px;
}
.sidebar-nav li {
  font-size: 1em;
}
.post-toc {
  font-size: 0.8em;
}
code,
kbd,
samp {
  font-size: 0.85em; /* 2 */
}
.post-eof {
  background: #ccc;
  height: 2px;
  margin: 80px auto 60px;
  text-align: center;
  width: 10%;
}
.post-body .image-caption,
.post-body .figure .caption {
  margin: 0px auto 15px;
}
.posts-expand .post-title {
  font-size: 30px;
}
p {
  margin: 10px 0 10px 0;
}
.menu-item a,
.menu-item span.exturl {
  font-size: 0.875em;
}
ol {
  margin-block-start: 0;
  margin-block-end: 0;
}
ul {
  margin-block-start: 0;
  margin-block-end: 0;
}

/*文本选中样式*/
::selection {
  background: #ddd;
  color: #555;
}
.highlight *::selection {
  background: #ddd;
  color: #000;
}

2.9 设置备案号

编辑themes/next/_config.yml，找到footer部分的beian设置，修改如下：

1
2
3
4
5
6
7
8
9
10
# Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
beian:
  enable: true
  icp: 苏ICP备xxxxxxxx号
  # The digit in the num of gongan beian.
  gongan_id:
  # The full num of gongan beian.
  gongan_num:
  # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
  gongan_icon_url:

只需要设置icp部分即可，剩下三项为公安备案。

此部分设置对应的模板代码在themes\next\layout\_partials\footer.swig中：

1
2
3
4
5
6
7
8
9
10
11
{%- if theme.footer.beian.enable %}
  <div class="beian">
    {{- next_url('https://beian.miit.gov.cn', theme.footer.beian.icp + ' ') }}
    {%- if theme.footer.beian.gongan_icon_url %}
      <img src="{{ url_for(theme.footer.beian.gongan_icon_url) }}" style="display: inline-block;">
    {%- endif %}
    {%- if theme.footer.beian.gongan_id and theme.footer.beian.gongan_num %}
      {{- next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=' + theme.footer.beian.gongan_id, theme.footer.beian.gongan_num + ' ') }}
    {%- endif %}
  </div>
{%- endif %}