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

步骤

新建 js

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

1
-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
52
53
54
55
56
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);

新建对应 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
.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;
    }
  }
}

重启程序,清除缓存

在 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 %}

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