hexo-vtuber-banner

1.1.0 • Public • Published

hexo-vTuber-Banner

添加你喜欢的vTuber/vup的卡片到你的博客

在线演示:demo

文档:中文 English

安装

所需依赖

  • hexo-fs

所需Hexo版本

  • 3.0以上版本

安装vBanner

npm install -s hexo-vtuber-banner

yarn add hexo-vtuber-banner

配置

_config.yml下的配置

Hexo_config.yml中需要添加如下配置

vBanner:
  enable: true	# true or false

配置项说明:

enable

开启让插件是否自动渲染到localtion配置的页面


VJson的配置

执行hexo g命令后会在hexo_config.yml同级目录生成VJson文件夹,里面有vtuber.json配置文件

[{
    Vname: "",
    VLogo: "",
    VBirthday: "",
    VColor: "",
    VBanner: "",
    Vlink: "",
    VSlogan: ""
}]

配置项

属性名 属性值
Vname * vtuber或vup的名字
[VLogo] logo图片的url
[VBirthday] 生日 [xx-xx]
VColor * 映像色 [16进制]
VBanner * 人物图片url
Vlink * 图片来源url
[VSlogan] 标语

*为必填,[]可选

说明

  • 为了有更好的显示效果。VLogo图片、VBanner图片比例最好为16:9的比例,即 宽:高
  • 图片可以放到VJson文件夹下的bannerImg文件夹下,本地图片url为http://your_site_url/bannerImg/your_image_file
  • 图片的格式:png、jpg、jpeg
  • 图片的链接必须可以直接访问到
  • 建议图片放入OSS

使用

vBanner一共提供了两种使用的方法

  • markdown中使用tag
  • 通过辅助函数引入vBanner

Markdown中书写

{%vBanner [填入vTuber/vup的名字] %}

说明

必须使用json中配置的vTuber/vup的名字

在theme中手动引入

  • ejs模板中
<%- vBanner('vtuber/vup 的名字') %>
  • njk模板中 (next主题v8.0及以上)
{{ vBanner('vtuber/vup 的名字') }}

将上面的代码放到你要添加vBanner的地方,比如要在header中添加,就到header的模板中添加上面的代码

最后

需要反馈请到issue区

各位帅老DD们,觉得不错给个💯

许可证

MIT License

Readme

Keywords

none

Package Sidebar

Install

npm i hexo-vtuber-banner

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

15.1 kB

Total Files

9

Last publish

Collaborators

  • _midou_