插件hexo-tag-aplayer

安装

1
npm install hexo-tag-aplayer --save

使用

1.aplayer使用

1
{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" %}

        

2.MetingJS ,网易云歌单

1
2
<!-- 简单示例 (id, server, type)  -->
{% meting "6870752010" "netease" "playlist" %}
阅读全文 »

插件hexo-tag-echarts

安装

1
npm install hexo-tag-echarts3 --save

示例(可以操作)

使用说明

模板

1
2
3
{% echarts 400 '85%' %}
\\TODO option goes here
{% endecharts %}

echarts 是标签名,不需要更改,400 是图表容器的高度,85% 是图表容器的相对宽度。中键添加自己的表格样式

阅读全文 »

插件theme-next/hexo-next-title

安装

1
npm install theme-next/hexo-next-title

使用

官方介绍

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
# Change title and favicon when window is hidden and visible.
title_change:
enable: false

# Enabling this feature on non-desktop devices may not be a good choice, but it depends on you.
onmobile: false

# Enable random title or not.
# Basically `random: true` means you have several titles to display and `random: false` means you have only one title to display.
# When `random: true`, YOU MUST FOLLOW the format which has been commented in two title options below.
# When `random: false`, please fill in the same line of the title option, like `title: one title`.
random: false

# Restore the original title after the specified time in milliseconds.
timeout: 2019

# Options when window is hidden.
hidden:
favicon: /images/favicon-32x32-next.png
title:
#- 404
#- φ(* ̄0 ̄)
#- Waiting for you.

# Options when window is visible.
visible:
favicon: /images/favicon-32x32-next.png
title:
#- 200
#- (✿◡‿◡)
#- Welcome back!

说的是在两个配置文件都可以设置,但是我在主题文件设置没什么用,在网站的设置里面弄成功了

这是我的配置,配置好后,清理一下

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
#插件heme-next/hexo-next-title
# Change title and favicon when window is hidden and visible.
#改变标题和图标时,窗口是隐藏和可见的。
title_change:
enable: true

# Enabling this feature on non-desktop devices may not be a good choice, but it depends on you.
#在非桌面设备上启用此功能可能不是一个好选择,但这取决于您。
onmobile: true

# Enable random title or not.是否启用随机标题。
# Basically `random: true` means you have several titles to display and `random: false` means you have only one title to display.
#基本上,“random:true”表示要显示多个标题,“random:false”表示只显示一个标题。
# When `random: true`, YOU MUST FOLLOW the format which has been commented in two title options below.您必须遵循以下两个标题选项中注释的格式。
# When `random: false`, please fill in the same line of the title option, like `title: one title`. 请填写标题选项的同一行,如“标题:一个标题”。
random: false

# Restore the original title after the specified time in milliseconds.在指定的时间(毫秒)后还原原始标题。
timeout: 2019

# Options when window is hidden.隐藏窗口时的选项。
hidden:
favicon: /images/favicon-32x32-next.png
title:
- !!str 404
- φ(* ̄0 ̄)
- Waiting for you.

# Options when window is visible.
visible:
favicon: /images/favicon-32x32-next.png
title:
- !!str 200
- (✿◡‿◡)
- Welcome back!
阅读全文 »

配置

在前面讲过创建categories,今天把所有的文章都添加了categories属性

问题

没有跳转:

hexo clean && hexo g && hexo s

重新清理执行一下

格式

1
2
3
4
5
categories:
- hexo
- 主题
- next
- 配置

我是这样配置的,分级

阅读全文 »

插件hexo-helper-live2d

安装

主要是一些二次元的任务(看板娘,面板娘…)

1
npm install -save hexo-helper-live2d

配置

站点的配置文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
model:
use: live2d-widget-model-wanko #选择哪种模型
display: #放置位置和大小
position: right
width: 150
height: 300
mobile:
show: false #是否在手机端显示

安装需要显示的模型

1
npm install live2d-widget-model-wanko
阅读全文 »

md语法

1.配置note tag(md的一个语法)

Note标签通过在左边界使用特殊颜色划线,实现提醒功能。

1
2
3
4
5
6
7
8
  #  - simple    bootstrap callout old alert style. Default.引导调用旧提示样式。默认
# - modern bootstrap callout new (v2-v3) alert style. 引导调用新(v2-v3)提示样式
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# 带背景的扁平callout样式,就像在Mozilla或StackOverflow上一样。
# - disabled disable all CSS styles import of note tag.禁用注释标记的所有CSS样式导入
note:
style: flat
icons: true

flat:

flat

simple:

simple

modern

阅读全文 »

阅读全文 »

警告

1.警告日志

1
2
3
4
5
6
7
8
$ (node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
bash: syntax error near unexpected token `Warning:'
(node:10816) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:10816) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency

出现原因:node版本过高

目前我用的是

1
2
$ node -v
v14.17.0

解决办法:

参考:Warning: Accessing non-existent property xxxx of module exports inside –CSDN博客

解决:

阅读全文 »

建立图册

原理:就是html写道md文档中,完后就能显示了

网页显示,弄一个原图文件夹(/img)和缩略图文件夹(img/s)

来个示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<center>这里相册名字比较好</center>
<style type="text/css">
.post-block {<!-- 有些人使用了透明背景,为了图片好看,这里改成不透明 -->
opacity: 1;
}
</style>
<center>********************************************************************</center>
<div class="gallery-page">
<div class="img-list">
<div class="img-column">
<a href="img/原图1.jpg" target="_Blank"><img src="img/s/缩略图1.jpg"></a>
<a href="img/原图2‬.jpg" target="_Blank"><img src="img/s/原图2‬.jpg"></a>
</div>
</div>
<center>********************************************************************</center>
</div>

配上一个css样式

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
.gallery-page {
margin-top: -50px;
opacity: 1;
}
.img-list,
.gallery-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.img-column {
display: flex;
flex-direction: column-reverse;
}
.img-column a,
.gallery-column a {
border-bottom: 0px;
}
.gallery-item {
margin-bottom: -50px
}
.gallery-item p {
margin: -25px auto -10px;
max-width: 50%;
text-align: center;
font-size: 15px;
color: $black-deep;
background: rgba(255,255,255,.3);
border-radius: 7px;
border: 1px solid $black-deep;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
.posts-expand .post-body .gallery-column a img {
height: 250px;
width: 300px;
object-fit: cover;
}
@media (max-width: 767px){
.gallery-item p {
min-width: 75px;
font-size: 13px;
}
}

这个css自我感觉不怎么好用,会的请在next/source/css/main.style(next8.6.1)中自行添加.
/source/_data/styles.styl这里也可以加css

阅读全文 »

由于下载的版本多,所以…以下关于8.6.1

版本缺点

1.支持的动态背景就一个,其他的难搞

2.代码折叠,没弄成

2.设置

1.进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Reading progress bar

reading_progress:
enable: true

# Available values: left | right

start_at: left

# Available values: top | bottom

position: bottom
reversed: false
color: "#37c6c0

2.回到顶部

1
2
3
4
5
6
7
8
9
10
back2top:
enable: true

# Back to top in sidebar.回到侧边栏的顶部

sidebar: true

# Scroll percent label in b2t button.滚动b2t按钮中的百分比标签。

scrollpercent: true
阅读全文 »

由于下载的版本多,所以…以下关于7.8

版本缺点

1.对于目录toc的支持不是很好

阅读全文 »