有的时候发现官方的组件不够用,所以需要自己制作一个合适的组件。这里我简单写了一个可以互相交流一下。

步骤

  1. 新建js

首先我们需要找到修改的位置

1
2
3
4
-hexo-theme-volantis
-scripts
-tags
-xxx.js

我们需要在tags文件夹中创建一个自己的js,例如moviebox.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
function postMoviebox(args, content) {
return `<div class='moviebox'><img class='moviebox-img' src='/images/mlzg02.webp' alt='豆瓣'/>`
+ `<div class='moviebox-msg'>`
+ content
+ `</div></div>`
}

function postMovieboxTitle(args) {
args = args.join(' ').split(',')
return `<p>` + args[0] + `<span class='moviebox-tag'>` + args[1] + `</span</p>`
}

function postMovieboxMsg(args) {
args = args.join(' ').split(',')
return `<p>` + args[0] + `</p>`
}

function postMovieboxStar(args) {
args = args.join(' ').split(',')
var stars = Math.floor(parseInt(args[0]) / 2)
var halfStars = parseInt(args[0]) % 2
var result = '<p>评分:'
if (stars <= 5 && stars >= 0) {
for (let i = 0; i < stars; i++) {
result += '<i class="fa fa-star" aria-hidden="true" style="color:yellow"></i>'
}
if (halfStars >= 1) {
result += '<i class="fa fa-star-half" aria-hidden="true" style="color:yellow"></i>'
for (let i = 0; i < 4 - stars; i++) {
result += '<i class="fa fa-star" aria-hidden="true"></i>'
}
} else {
for (let i = 0; i < 5 - stars; i++) {
result += '<i class="fa fa-star" aria-hidden="true"></i>'
}
}

result += +args[0]
} else {
result += '这可能是个迷'
}

result += '</p>'
return result
}


hexo.extend.tag.register('moviebox', postMoviebox, { ends: true });
hexo.extend.tag.register('title', postMovieboxTitle);
hexo.extend.tag.register('star', postMovieboxStar);
hexo.extend.tag.register('msg', postMovieboxMsg);
  1. 新建对应css文件
1
2
3
4
5
-hexo-theme-volantis
-source
-css
-tag-plugins
-xxx.css

名字我和上面一样的moviebox.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
.moviebox {
display: flex;
justify-content: flex-start;
position: relative;
margin-bottom: 10px;
width: 100%;

.moviebox-tag {
padding: 0px 10px;
background-color: #fcc;
font-size: 12px;
color: white;
border-radius: 4px;
z-index: 20;
margin-left: 5px;
}

.moviebox-img {
width: 125px;
height: 180px;
margin: 0;
}

.moviebox-msg {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 5px;

p {
margin: 0;
font-size: 12px;

i {
margin-left: 2px;
}

i:first-child {
margin-left: 3px;
}

i:last-child {
margin-right: 2px;
}
}

p:first-child {
display: flex;
align-items: center;
font-size: 14px;
font-weight: bold;
}
}
}

  1. 重启程序,清除缓存

在md文件中使用

1
2
3
4
5
6
7
8
9
10
{% moviebox %}
{% title 标题:弥留之国的爱丽丝2020 , 已追完 %}
{% star 9.2 %}
{% msg 导演: 佐藤信介 %}
{% msg 编剧: 渡部辰城 / 仓光泰子 / 佐藤信介 %}
{% msg 主演: 山崎贤人 / 土屋太凤 / 村上虹郎 / 森永悠希 / 三吉彩花 / 更多... %}
{% msg 类型: 动作 / 科幻 / 悬疑 / 惊悚 / 奇幻 %}
{% msg 制片国家/地区: 日本 %}
{% msg 首播: 2020-12-10(日本) %}
{% endmoviebox %}

成功啦,我们来看下效果图:

说明

菜鸟一个,欢迎大佬指正!