有的时候发现官方的组件不够用,所以需要自己制作一个合适的组件。这里我简单写了一个可以互相交流一下。
步骤
- 新建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);
|
- 新建对应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; } } }
|
- 重启程序,清除缓存
在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 %}
|
成功啦,我们来看下效果图:
说明
菜鸟一个,欢迎大佬指正!