一些简单的Hexo插件

hexo

🔌 简单的电影卡片插件

这是一个简单的插件，使用了非官方的时光网API，可以在Hexo博客中插入一条电影卡片，就像这样：

流浪地球

2019，郭帆

125分钟

冒险，科幻，剧情

太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，为了人类能在漫长的2500年后抵达新的家园，流浪地球时代的年轻人挺身而出，展开争分夺秒的生死之战。

有了hexo-tag-link-card的基础，终于可以完成稍微复杂一点点的插件了！（其实一点也不复杂

详细页：

hexo-tag-mtime

在Hexo博客中插入一条电影卡片

使用

使用NPM安装：

1
npm install hexo-tag-mtime --save

然后在文章中插入标签：

1
{% mtime moiveId %}

比如插入关于流浪地球🌍的电影信息：

1
{% mtime 218707 %}

然后插件就会生成一段HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="mtime-movie_card">
    <div class="mtime-info_section">
        <div class="mtime-movie_header"><img src="http://img5.mtime.cn/mt/2019/01/30/152305.14999287_1280X720X2.jpg"
                class="mtime-locandina">
            <h1>流浪地球</h1>
            <h4>2019，郭帆</h4><span class="mtime-minutes">125分钟</span>
            <p class="mtime-type">冒险，科幻，剧情</p>
        </div>
        <div class="mtime-movie_desc">
            <p class="mtime-text">太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，为了人类能在漫长的2500年后抵达新的家园，流浪地球时代的年轻人挺身而出，展开争分夺秒的生死之战。</p>
        </div>
    </div>
    <div class="mtime-blur_back" style="background: url(http://img5.mtime.cn/pi/2018/03/30/185755.98495617_1280X720X2.jpg); no-repeat fixed;background-size: cover;"></div>
</div>

获取电影的ID

目前还不支持自动获取标签，需要手动查找电影的ID。

  1. 打开时光网。
  2. 搜索需要插入的电影，比如星际穿越。
  3. 得到电影详情的详细URL：http://movie.mtime.com/51119/
  4. /^\d+$/就是电影的ID。

选项

考虑到插件样式可能会和主题样式冲突，所以使用了外部链接css样式，并可自定义修改。

  • css：可以自定义css的样式地址

如果css为空，则会使用默认的CDN地址：https://cdn.mayuko.cn/css/hexo-tag-mtime.css

如果要自定义类名需要在 Hexo 根目录下的_config.yml文件中添加：

1
2
mtime:
  css: https://cdn.mayuko.cn/css/hexo-tag-mtime.css

接口

API使用仓库-API提供的时光网API接口：

请求方式GET

请求地址https://ticket-api-m.mtime.cn/movie/detail.api

请求参数

参数 描述
locationId 区域
movieId 电影ID

然后就会返回大家熟悉的JSON了。

🔌 简单的链接插件

👇这是一个炒鸡超级简单的链接预览的插件，采用卡片式，适用于Hexo。

hero-tag-link-card

在Hexo中生成一个简单的链接卡片

安装

1
npm install hexo-tag-link-card --save

使用

只需要使用标签就可以了：

1
{% linkCard url title desc %}

比如这样：

1
{% linkCard https://blog.mayuko.cn Title Desc %}

然后，Hexo s时会生成一段HTML：

1
2
3
4
5
6
<a class="link-card" href="https://blog.mayuko.cn/" target="_blank">
  <div class="link-card__content">
    <h1>Title</h1>
    <p>Desc</p>
  </div>
</a>

⚠️ 参数内容中不能有空格 //Todo

选项

  • className：自定义类名 (默认：link-card & link-card__content)

如果要自定义类名需要在Hexo根目录下的_config.yml文件中添加：

1
2
linkCard:
  className: link-card

样式

你可以根据类名在主题中自定义样式，或者CodePen中提供了一段Demo：

最后

流浪地球真的真的太好看了，尤其是从地面到太空站的长镜头，每次看到都要泪目了，对，是每次。（刷了好几遍

众筹的时候买了个火石钥匙扣，不知道什么时候能送到杭州。🤔

小破球冲鸭！

 加载Disqus评论