A Small World of unnamedtat

unnamedtat的技术博客

0%

hexo-Next8博客搭建、美化（darkmode、waline等）

发表于 更新于 分类于
本文字数： 1.1k
本篇详细地描述了如何快速搭建hexo博客，以及博客个性化、评论系统添加、域名部署等

我现在的版本是NEXT8.19.2，整理一下大佬们的教程和资源

基础部分的教程放在公众号里面了，请走：三分钟快速搭建个性化博客。

本篇内容：

界面美化（darkmode-next插件、动态背景、点击特效等）

在布局中引入(animatejs库已经引入过了)：

1
2
 <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 41; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="/js/firework.js"></script>

/js/firework.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
var canvasEl = document.querySelector('.fireworks');
var ctx = canvasEl.getContext('2d');
var numberOfParticules = 30;
var pointerX = 0;
var pointerY = 0;
var tap = "mousedown";
var colors = ["#fa5557", "#54b4f1", "#f3eed9", "#6f0000"];

function setCanvasSize() {
  canvasEl.width = window.innerWidth * 2;
  canvasEl.height = window.innerHeight * 2;
  canvasEl.style.width = window.innerWidth + 'px';
  canvasEl.style.height = window.innerHeight + 'px';
  canvasEl.getContext('2d').scale(2, 2);
}

function updateCoords(e) {
  pointerX = e.clientX || e.touches[0].clientX;
  pointerY = e.clientY || e.touches[0].clientY;
}

function setParticuleDirection(p) {
  var angle = anime.random(0, 360) * Math.PI / 180;
  var value = anime.random(50, 180);
  var radius = [-1, 1][anime.random(0, 1)] * value;
  return {
    x: p.x + radius * Math.cos(angle),
    y: p.y + radius * Math.sin(angle)
  }
}

function createParticule(x,y) {
  var p = {};
  p.x = x;
  p.y = y;
  p.color = colors[anime.random(0, colors.length - 1)];
  p.radius = anime.random(16, 32);
  p.endPos = setParticuleDirection(p);
  p.draw = function() {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
    ctx.fillStyle = p.color;
    ctx.fill();
  }
  return p;
}

function createCircle(x,y) {
  var p = {};
  p.x = x;
  p.y = y;
  p.color = "#F00";
  p.radius = 0.1;
  p.alpha = .5;
  p.lineWidth = 6;
  p.draw = function() {
    ctx.globalAlpha = p.alpha;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
    ctx.lineWidth = p.lineWidth;
    ctx.strokeStyle = p.color;
    ctx.stroke();
    ctx.globalAlpha = 1;
  }
  return p;
}

function renderParticule(anim) {
  for (var i = 0; i < anim.animatables.length; i++) {
    anim.animatables[i].target.draw();
  }
}

function animateParticules(x, y) {
  var circle = createCircle(x, y);
  var particules = [];
  for (var i = 0; i < numberOfParticules; i++) {
    particules.push(createParticule(x, y));
  }
  anime.timeline().add({
    targets: particules,
    x: function(p) { return p.endPos.x; },
    y: function(p) { return p.endPos.y; },
    radius: 0.1,
    duration: anime.random(1200, 1800),
    easing: 'easeOutExpo',
    update: renderParticule,
  })
    .add({
    targets: circle,
    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,
  },  0);
}

var render = anime({
  duration: Infinity,
  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, false);



其中darkmodeJS可以自己添加,自定义交互逻辑以及检测目前的perfer ,但是比较麻烦.我这里直接用的大佬的插件,再覆盖上自己喜欢的样式,可惜的是按钮切换模式时的动效没了

网站收录和推送

提示块: primary success info warning danger default

enable国内访问及评论系统

又是不务正业的几天……~~现在还在苦苦等待我的域名下来……~~直接买了个便宜域名。

刚刚开始的时候我把waline后端部署和前端静态网页部署搞混了~~~现在两个端都躺到vercel上了，不得不说vercel的部署太友好了，真是开箱即用，以下是参考教程：

把waline后端和你的blogs项目都扔到vercel上部署，按照上面的教程，取得Leancloud凭证，配置好 vercel-settings-environment variables。

再搞个域名，然后在blog项目的 vercel-settings-domains配置一级域名 xxx.com cname解析，再配置好 www.xxx.com的重定向。

这里vercel会自动recommend这个方案，按照它上面的方式配置就好了，注意域名解析的时候的 address/value 值要写 cname-china.vercel-dns.com，以避免dns污染！

与之相对的把二级域名 waline.xxx.com解析到后端评论系统，address/value值同上。

放一下我个人的custom styles样式

动力主要是因为嫌弃原生的codeblock颜色太少。

胡乱配色一通，以看得清楚为主，色彩理论不懂。

真的是看元素选择器和css眼睛都看花了，果然美化是一条不归路，还是blogs的内容最重要😂默默回去学习了……

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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
//整个主体的透明度
.main-inner { 
   opacity: 0.7;
}
// 顶栏
.site-brand-container{
  background: #3d3d3d;
  }
.site-title{
  font-weight: bold;
  // letter-spacing: 0.1em;
  }
//文章标题颜色
.post-title-link, .post-title{
    font-weight: bold;
}
//文字颜色
.post-body{
    color: #000;
}
//连接颜色
.post-body  a{
    color: #484848;
    font-weight: bold;
}
/* 基于hljs魔改的代码块样式*/
code {
//   background-color: #1e1e1e; 
  color: #000000; 
}
//字符串
.hljs-string {
  color: #866900;
}
//数值
.hljs-number,
.hljs-params {
  color: #72801c; 
}
//关键字、函数名等
.hljs-keyword,
.hljs-function
.hljs-title, 
.hljs-function_ {
  color: #d73a49; 
  font-weight: bold; 
}
//标签名
.hljs-tag,
.hljs-name{
  color: #007b2e; 
  font-weight: bold; 
}
//注释
.hljs-comment {
  color: #430100; 
  font-style: italic; 
}
//属性名
.hljs-attr,
.hljs-attribute {
  color: #be6f24; 
  font-weight: bold;
}
.hljs-selector-class {
  color: #4d0c00; 
}
.hljs-selector-pseudo{
  color: #bd5925;
}

.darkmode--activated{
  .site-brand-container{
    background: #000;
  }
  .post-body{
    color: #ffffff;
  }
  strong {
  color: #000000;
  background-color: #fb9325;
  }
  .post-body a{
    color: #cccccc;
  }
  code {
    color: #fb9325!important;
    background: rgb(111, 111, 111,0.5)!important;
  }
  /* 基于hljs魔改的darkmode代码块样式*/
  //代码本身
  code {
    color: #d4d4d4; 
  }
  //字符串
  .hljs-string {
    color: #ce9178;
  }
  //数值
  .hljs-number,
  .hljs-params {
    color: #00c9ac
  }
  
  //关键字、函数名等
  .hljs-keyword,
  .hljs-function
  .hljs-title, 
  .hljs-function_ {
    color: #dcdcaa; 
  }
  //标签名
  .hljs-tag,
  .hljs-name{
    color: #8e8e8e; 
  }  
  //注释
  .hljs-comment {
    color: #7f9f7f; 
  }
  //属性名
  .hljs-attr,
  .hljs-attribute {
    color: #569cd6; 
  }
  //进度条
  .reading-progress-bar{
    background: #fb9325;
  }
  .hljs-selector-class {
    color: #dfad87; 
  }
  .hljs-selector-pseudo{
    color: #ffeacf;
  }
  // 选中状态
  ::selection {
    background: #5f6368;
    color: #eee;
  }
  .posts-expand  .post-eof {
    border: 1px double #eee;
  }
  //评论区
  .data-waline{
    color: #373737;
  }
  .wl-panel{
    background: #404040;
  }
  .comments * {
    color: #fff;
  }
  .wl-input:focus,
  .wl-editor:focus,
  .wl-nick:focus {
    background-color: rgba(120, 120, 120, 0.1)!important; 
    color: #ffffff; 
    outline: none; 
  }
  .back-to-top{
    background: #fb9325;
  }
}
::selection {
  background: #000000;
  color: #eee;
}
.posts-expand .post-eof {
    width: 80%;
    height: 0px;
    background: none;
    border: 1px double #868686;
    text-align: center;
  }
// 去掉顶部黑线
.headband {
  background-color: transparent;
}

:root {
  --waline-theme-color: #ff6347!important; 
  --waline-active-color: #fb9325!important; 
}
//返回顶部按钮
.back-to-top{
  border-radius: 15%;
}




最后是一个好用的颜色生成网站：ColorSpace

不过他只能根据一个颜色生成，想加入两个以上的颜色就不行了😭

还有在页面上关闭waline评论/开启搜索的话会发生内容移动，不知道什么情况……

关于permalink设置

安装hexo-abbrlink插件，避免permalink又臭又长。

post-body-end切换博文按钮

由于没找到next主题的切换博文功能，参考landscape主题的写了一个。

放在post-body-end.njk，在next主题里面config文件取消该路径的注释就可以了。🥰

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
{# 导航部分 #}
<nav id="article-nav">
  {# 上一篇文章链接 #}
  {% if post.prev %}
  <div id="article-nav-pre" class="article-nav-link-wrap">
    <span class="article-nav-caption">{{ __('precious') }} {{ __('symbol.colon') }}</span>
    <a class="article-nav-title" href="{{ url_for(post.prev.path) }}" >
      {% if post.prev.title %}
        {{ post.prev.title }}
      {% else %}
        (no title)
      {% endif %}
    </a>
  </div>
  {% endif %}
  {# 下一篇文章链接 #}
  {% if post.next %}
  <div id="article-nav-next" class="article-nav-link-wrap">
    <span class="article-nav-caption">{{ __('next') }}  {{ __('symbol.colon') }} </span>
    <a class="article-nav-title" href="{{ url_for(post.next.path) }}" >
      {% if post.next.title %}
        {{ post.next.title }}
      {% else %}
        (no title)
      {% endif %}
    </a>
  </div>
</nav>
  {% endif %}

#####然后在zh-CN.yml里面添加
precious: 上一篇
next: 下一篇