杨记

碎片化学习令人焦虑，系统化学习使人进步

0%

hexo之next主题

置顶 | 发表于 更新于 分类于

hexo静态博客之next主题的配置

官方教程：开始使用 - NexT 使用文档 (iissnan.com)

1、Hexo-NexT (v7.0+) 主题配置 | 小丁的个人博客 (tding.top)

2、hexo搭建个人博客—NexT主题优化 - 简书 (jianshu.com)

3、hexonext主题解决无法显示数学公式 - 百度文库 (baidu.com)

4、Hexo 搭建个人博客系列：主题美化篇 | Yearito’s Blog

我的本地博客根目录为yanglinqi_blog

下载next

下载方式二选一：

1、打开终端，进入hexo站点目录，执行命令

cd e:\yanglinqi_blog 这是我的站点根目录

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

完成后，在themes文件夹下会多出next文件夹

2、打开Releases · theme-next/hexo-theme-next (github.com) 选择版本下载，将文件夹命名为next放入themes下就行

然后打开站点配置文件_config.yml，选择next主题 theme: next

终端一键三连，看网页是否正常

1
2
3
hexo clean
hexo g
hexo s

next提供了四种页面样式，可以在主题配置文件_config.yml中选择，我选择的Pisces

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

配置next

标签和分类

1、主题配置文件_config.yml内：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags             # 标签
  categories: /categories/ || th   # 分类
  archives: /archives/ || archive  # 归档
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true  # 显示图标
  badges: true  # 显示统计信息

image-20220521170628394

2、新建tags和categories页面

终端输入（要进入hexo博客根目录）

1
2
hexo new page tags
hexo new page categories

在 tags 页面文件 hexo/source/tags/index.md 的头部修改为：

1
2
3
4
5
6
---
title: 标签
date: 2019-06-29 11:35:42   # 时间随意
type: "tags"                # 类型一定要为tags
comments: false             # 提示这个页面不需要加载评论
---

在 categories 页面文件 hexo/source/categories/index.md 的头部修改为：

1
2
3
4
5
6
---
title: 文章分类
date: 2018-10-15 00:03:57
type: "categories"
comments: false
---

之后在对应博客md文件中添加tags和categories就行了。如有一个test.md，给它添加分类和标签，在它首部添加

1
2
3
4
5
---
title: test
tags: AI
categories: Linux
---

image-20220521171550584

image-20220521171616249

背景图片和字体

将你要作为背景的图片background.jpg放在next\source\images文件夹下

所修改的文件：E:\yanglinqi_blog\themes\next\source\css\_common\scaffolding\base.styl内的body

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
/*body {
  background: var(--body-bg-color);
  color: var(--text-color);
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;

  +tablet-mobile() {
    // Remove the padding of body when the sidebar is open.
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}*/

body {
  background:url(/images/background.jpg);// 设定背景图片,images同处于source文件夹下
  // 或直接使用 url
  // background: https://gitee.com/yanglinqi107/Images/raw/master/img/background.jpg;
  background-repeat: no-repeat;// 设定背景图片非重复填充
  background-attachment: fixed;// 设置背景图片不随页面滚动
  background-position: 50% 50%;// 设置背景图片位置
  //background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
  //background: var(--body-bg-color);
  color: var(--text-color);
  font-family: 'Monda', "PingFang SC", "Microsoft YaHei", sans-serif;  // 字体
  font-size: 1em;	// 字体大小 1em=16px 修改这个可以修改字体，如0.75em是12px
  line-height: 2;
}

image-20220521173026040

头像

将要作为头像的图片放在next\source\images文件夹下，我的图片名称是headpic.jpg

在主题配置文件中修改avatar

1
2
3
4
5
6
7
avatar:
  # Replace the default image and set the url here.
  url: /images/headpic.jpg  
  # If true, the avatar will be dispalyed in circle.
  rounded: true   # 头像圆形
  # If true, the avatar will be rotated with the cursor.
  rotated: false  # 是否旋转

image-20220521173545908

网页图标

将你要作为图标的图片修改好大小，放在E:\yanglinqi_blog\themes\next\source\images文件夹下

修改主题配置文件E:\yanglinqi_blog\themes\next\_config.yml

中的favicon：我的图片命名为icon.png

1
2
3
4
5
6
7
8
9
10
# 网页的图标 icon
favicon:
  #small: /images/favicon-16x16-next.png
  #medium: /images/favicon-32x32-next.png
  small: /images/icon.png
  medium: /images/icon.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

image-20220522105049516

侧边菜单栏

所修改的文件：E:\yanglinqi_blog\themes\next\source\css\_schemes\Pisces\_layout.styl内的.header-inner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.header-inner {
  background: rgba(255,255,255,0.7);
  //background: var(--content-bg-color);
  border-radius: 20px 20px 20px 20px; //圆角
  box-shadow: $box-shadow-inner;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: $sidebar-desktop;

  +desktop-large() {
    width: $sidebar-desktop;
  }

  +tablet-mobile() {
    border-radius: initial;
    position: relative;
    width: auto;
  }
}

image-20220521175152652

侧边头像栏

要修改的文件：E:\yanglinqi_blog\themes\next\source\css\_schemes\Pisces\_sidebar.styl

.sidebar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.sidebar {
  background: var(--body-bg-color);
  box-shadow: none;
  margin-top: 100%;
  position: static;
  width: $sidebar-desktop;

  +tablet-mobile() {
    display: none;
  }

  //自定义增加
  transition-duration: 0.4s; 
  opacity: 0.85;  // 透明度
  border-radius: 20px 20px 20px 20px; //边框圆角
}

.sidebar-inner注释掉

1
//background: var(--content-bg-color);

image-20220521202143730

标签样式

要修改的文件：E:\yanglinqi_blog\themes\next\source\css\_common\components\pages\tag-cloud.styl

注释掉原来的.tag-cloud

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
/*.tag-cloud {
  text-align: center;

  a {
    display: inline-block;
    margin: 10px;

    &:hover {
      color: $link-hover-color !important;
    }
  }
}*/

.tag-cloud {
  text-align: center;

    a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: rgba(193,66,92,0);
    border-bottom: none;
    border-radius: 20px;
  }
}

image-20220521203106391

分类样式

要修改的文件：

E:\yanglinqi_blog\themes\next\source\css\_common\components\pages\categories.styl

修改.category-list 的 list-style: circle;

1
2
3
4
5
6
.category-list {
  //list-style: none;
  list-style: circle;
  margin: 0;
  padding: 0;
}

image-20220521203629889

主体背景

修改的文件：E:\yanglinqi_blog\themes\next\source\css\_schemes\Pisces\_layout.styl

.content-wrap更换为下面内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.content-wrap {
  opacity: 0.9;  // 透明度
  //background: var(--content-bg-color);
  background: rgba(255,255,255,0) none repeat scroll !important;
  border-radius: $border-radius-inner;
  box-shadow: $box-shadow-inner;
  box-sizing: border-box;
  //padding: $content-desktop-padding;
  padding: initial;
  width: $content-wrap;

  +tablet-mobile() {
    border-radius: initial;
    padding: 20px;
    width: 100%;
  }
}

再在文件E:\yanglinqi_blog\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
.posts-expand {
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 25px;
  -webkit-box-shadow: 0 0 14px rgba(202,203,203,0.5);
  -moz-box-shadow: 0 0 14px rgba(202,203,204,0.5);
}

.post-block {
  background: var(--content-bg-color);
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
  padding: 40px;
}
.post-block + .post-block {
  border-radius: 20px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  margin-top: 12px;
}

image-20220521213008253

再修改文件 E:\yanglinqi_blog\themes\next\layout\_macro\post.swig

删除以下<footer class="post-footer">的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<footer class="post-footer">
        {%- if post.tags and post.tags.length %}
          {%- if theme.tag_icon %}
            {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
          {% else %}
            {%- set tag_indicate = '#' %}
          {%- endif %}
          <div class="post-tags">
            {%- for tag in post.tags.toArray() %}
              <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
            {%- endfor %}
          </div>
        {%- endif %}

        {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}

        {{ post_nav(post) }}
      </footer>
    {% else %}
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>

image-20230303152430265

链接样式

修改文件：E:\yanglinqi_blog\themes\next\source\css\_common\components\post\post-expand.styl

在.post-body中添加以下内容

1
2
3
4
5
6
7
8
9
10
a:not(.btn):not(.hexo-douban-button):not(.hexo-douban-tab) {
  color: #5073b8;
  border-bottom: none;
  text-decoration: none;
}

a:not(.btn):not(.hexo-douban-button):not(.hexo-douban-tab):hover,.footer-inner a:hover {
  color: #5073b8;
  border-bottom: 1px solid #5073b8;
}

image-20220521215133835

代码块样式

修改文件：E:\yanglinqi_blog\themes\next\_config.yml

修改codeblock部分

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

image-20220521220053994

搜索功能

安装插件:

1
npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml 文件，添加如下内容：

1
2
3
4
5
6
# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 100
  • path：索引文件的路径，相对于站点根目录
  • field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  • limit：限制搜索的条目数

然后修改主题配置文件_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

数学公式

常⽤的Markdown编辑器都会集成Mathjax，⽤来渲染⽂档中的类Latex格式书写的数学公式

原因

Hexo 默认使⽤ hexo-renderer-marked 引擎渲染⽹页，该引擎会把⼀些特殊的 markdown 符号转换为相应的 html 标签，⽐如在markdown 语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。因为类 Latex 格式书写的数学公式下划线_表⽰下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。类似的语义冲突的符号还包括*, {, }, \\等

解决方法：

更换 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了⼀些bug ，两者⽐较接近，也⽐较轻量级

1
2
npm uninstall hexo-renderer-marked --save  # 先卸载 hexo-renderer-marked
npm install hexo-renderer-kramed --save    # 安装 hexo-renderer-kramed

再修改文件E:\yanglinqi_blog\node_modules\kramed\lib\rules\inline.js

  • 修改第11行的escape

    1
    2
    //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    escape: /^\\([`*\[\]()#$+\-.!_>])/,

  • 修改第20行的em

    1
    2
    //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

在next主题配置文件中开启MathJax开关，_config.yml文件

1
2
3
4
mathjax:
  enable: true
  # See: https://mhchem.github.io/MathJax-mhchem/
  mhchem: true

在想要渲染数学公式的md文件首加上 mathjax: true

image-20220521222108756

行内代码

修改的文件E:\yanglinqi_blog\themes\next\source\css\_common\scaffolding\highlight\highlight.styl

修改code如下

1
2
3
4
5
6
7
8
9
code {
  //background: $code-background;
  background: #f9f2f4;
  border-radius: 3px;
  //color: $code-foreground;
  color: #c7254e;
  padding: 2px 4px;
  word-wrap();
}

image-20220521222344749

展开目录

主题配置文件_config.yml的toc

再把目录的下划线去掉，修改文件E:\yanglinqi_blog\themes\next\source\css\_common\outline\sidebar\sidebar-toc.styl 的 .post-toc > ol > a标签

1
2
3
4
5
a {
  //transition-property: all;
  //the-transition();
  border-bottom: none;
}

或者在主题配置文件_config.yml的toc下增加border-bottom: none

文章置顶

1、卸载 hexo-generator-index

npm uninstall hexo-generator-index --save

2、安装 hexo-generator-index-pin-top

npm install hexo-generator-index-pin-top --save

3、在想要置顶的md文件首，添加top: 10或top: true，数字越大，级别越高

4、修改themes/next/layout/_macro/post.swig⽂件
在<span class='post-time'>标签下，插⼊以下代码：

1
2
3
4
5
6
7
{% if post.top %}
      <span class="post-meta-item-icon">
      <i class="fa fa-thumb-tack"></i>
      </span>
      <font color=red>置顶</font>
      <span class="post-meta-divider">|</span>
{% endif %}

点击特效

下面是四个比较常用的鼠标点击特效脚本，我们可以把它们放置在 themes\next\source\js\cursor\ 目录下：

礼花特效代码

创建fireworks.js文件

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
class Circle {
  constructor({ origin, speed, color, angle, context }) {
    this.origin = origin
    this.position = { ...this.origin }
    this.color = color
    this.speed = speed
    this.angle = angle
    this.context = context
    this.renderCount = 0
  }

  draw() {
    this.context.fillStyle = this.color
    this.context.beginPath()
    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
    this.context.fill()
  }

  move() {
    this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
    this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
    this.renderCount++
  }
}

class Boom {
  constructor ({ origin, context, circleCount = 16, area }) {
    this.origin = origin
    this.context = context
    this.circleCount = circleCount
    this.area = area
    this.stop = false
    this.circles = []
  }

  randomArray(range) {
    const length = range.length
    const randomIndex = Math.floor(length * Math.random())
    return range[randomIndex]
  }

  randomColor() {
    const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
  }

  randomRange(start, end) {
    return (end - start) * Math.random() + start
  }

  init() {
    for(let i = 0; i < this.circleCount; i++) {
      const circle = new Circle({
        context: this.context,
        origin: this.origin,
        color: this.randomColor(),
        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
        speed: this.randomRange(1, 6)
      })
      this.circles.push(circle)
    }
  }

  move() {
    this.circles.forEach((circle, index) => {
      if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
        return this.circles.splice(index, 1)
      }
      circle.move()
    })
    if (this.circles.length == 0) {
      this.stop = true
    }
  }

  draw() {
    this.circles.forEach(circle => circle.draw())
  }
}

class CursorSpecialEffects {
  constructor() {
    this.computerCanvas = document.createElement('canvas')
    this.renderCanvas = document.createElement('canvas')

    this.computerContext = this.computerCanvas.getContext('2d')
    this.renderContext = this.renderCanvas.getContext('2d')

    this.globalWidth = window.innerWidth
    this.globalHeight = window.innerHeight

    this.booms = []
    this.running = false
  }

  handleMouseDown(e) {
    const boom = new Boom({
      origin: { x: e.clientX, y: e.clientY },
      context: this.computerContext,
      area: {
        width: this.globalWidth,
        height: this.globalHeight
      }
    })
    boom.init()
    this.booms.push(boom)
    this.running || this.run()
  }

  handlePageHide() {
    this.booms = []
    this.running = false
  }

  init() {
    const style = this.renderCanvas.style
    style.position = 'fixed'
    style.top = style.left = 0
    style.zIndex = '999999999999999999999999999999999999999999'
    style.pointerEvents = 'none'

    style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
    style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

    document.body.append(this.renderCanvas)

    window.addEventListener('mousedown', this.handleMouseDown.bind(this))
    window.addEventListener('pagehide', this.handlePageHide.bind(this))
  }

  run() {
    this.running = true
    if (this.booms.length == 0) {
      return this.running = false
    }

    requestAnimationFrame(this.run.bind(this))

    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

    this.booms.forEach((boom, index) => {
      if (boom.stop) {
        return this.booms.splice(index, 1)
      }
      boom.move()
      boom.draw()
    })
    this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
  }
}

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()

爆炸特效代码

创建explosion.min.js文件

1
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=.1,a.alpha=.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++)e.animatables[t].target.draw()}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++)n.push(createParticule(e,t));anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}

浮出爱心特效代码

创建love.min.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);

浮出文字特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var a_idx = 0;
jQuery(document).ready(function($) {
  $("body").click(function(e) {
    var a = new Array("喜欢我", "不喜欢我");
    var $i = $("<span/>").text(a[a_idx]);
    var x = e.pageX,
    y = e.pageY;
    $i.css({
      "z-index": 99999,
      "top": y - 28,
      "left": x - a[a_idx].length * 8,
      "position": "absolute",
      "color": "#ff7a45"
    });
    $("body").append($i);
    $i.animate({
      "top": y - 180,
      "opacity": 0
    }, 1500, function() {
      $i.remove();
    });
    a_idx = (a_idx + 1) % a.length;
  });
});

修改文件

然后我们在主题自定义布局文件hexo/source/_data/body-end.swig中，没有则创建，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  <script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/cursor/text.js"></script>
{% endif %}

然后在 NexT 的配置文件 next.yml 中取消 body-end.swig 的注释：

1
2
3
custom_file_path:
-  #bodyEnd: source/_data/body-end.swig
+  bodyEnd: source/_data/body-end.swig

欢迎关注我的其它发布渠道