两个Hexo小插件

2020
fontend
hexo

吹响！ 悠风号~

最近把落了好久的京吹一口气补完了，不得不感叹京都动画的制作水平。
像这样大量涉及音乐和演奏的作品，业内恐怕也只有你京能做的如此优秀。
抛去音乐元素，这部作品就贵在真实，相比于于其他乱七八糟的异能高中生(とある魔術の禁書目録)

没错，说的就是你啊！

君(きみ)の 指先(ゆびさき)で　舞(ま)っている　電光(でんこ)は、僕(ぼく)の　今生(こんじょう)に変(かわ)わらない　信仰(しんこ)、唯私(ただわたし)の　超電磁砲永世生(レールガンえいせいい)き!

とある科学の超電磁砲御坂美琴

京吹的故事可就太普通了，关键词可归纳为“管乐团”，“吹奏部”，“全国大赛金奖”。
这样平凡的故事在京阿尼的演绎下，却变得格外真实，充斥着青春的味道。

5周年纪念图



甚至还诞生出了“吹学”——

  • 为什么历史选择了久石奏
  • 黄前部长万寿无疆
  • 后黄前时代北宇治吹奏部中枢政局初探
  • 北宇治高中吹奏乐部止步关西大赛，如何问责
  • 一个有良心的吹学研究者带你深入剖析伞木希美

等等。“南中四霸”，“三香主义” 每个看过京吹的人看到这些词，应该都会不禁莞尔。
想详细了解吹学，请移步[京吹日报]。

写到这里发现新的需求！

如果能够在文章中根据番组在Bangumi上的ID直接渲染出一张关于动漫信息的小卡片就好了。

于是有了下面这个小插件。

莉兹与青鸟

リズと青い鳥

排名 #50话数 18.4 力荐

铠塚霙，高中3年级，双簧管演奏者。 伞木希美，高中3年级，长笛演奏者。 初中时，是希美牵起了霙的手，带领她走出了孤独。 自那以后，希美就占据了霙的整个世界。 只有与希美在一起的生活，才令霙感到幸福。 可在高中一年级，希美一度退出了吹奏部。而她的归来，也始终未能抹去霙心中的不安。 ——是否有一天，希美会再次消失在自己面前呢？ 就这样，二人迎来了高中最后的竞演会。 参赛的自由曲是「莉兹与青鸟」。 在这首以童话为蓝本创作的乐曲当中，有一段双簧管与长笛交相呼应的章节。 「故事的结局，还是越美满越好啦。」 虽然希美如此认为，霙却依然对终将到来的离别心怀恐惧。 ——请永远，永远，留在我身边吧—— 在继续着日常生活的同时，两人总是情不自禁地将自己投影到童话当中。 霙是莉兹，希美是青鸟。 但是…… 两枚略有嫌隙的齿轮，仍不停地转动，寻找着与彼此相契合的那个瞬间。

Install 0x00

使用 npm 安装。

npm
1
npm install hexo-tag-bangumi --save

然后在文章中插入标签：

1
{ % bangumi animeId % }

比如插入京吹🎺的动画信息：

1
{ % bangumi 152091 % }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="bangumi-anime_card">
    <div class="bangumi-info_section">
        <div class="bangumi-anime_header">
            <a href="http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg">
                <img src="http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg" class="bangumi-locandina">
            </a>
            <h1>吹响！悠风号 第二季</h1>
            <h4>響け！ユーフォニアム 2</h4>
            <div>
                <span class="bangumi-rankspan">排名 <span class="bangumi-rank">#113</span></span>
                <span class="bangumi-rankspan"> 话数 <span class="bangumi-rank">13</span></span>
                <span class="bangumi-score">8.2</span><span style="color:#545454">&nbsp;力荐</span>
            </div>
        </div>
        <div class="bangumi-anime_desc">
            <p class="bangumi-text">吹奏乐竞赛京都府大赛。在那里漂亮地取得金奖的北宇治高中吹奏乐部，向着下一个舞台・强豪云集的关西大赛发起挑战！</p>
        </div>
    </div>
    <div class="bangumi-blur_back" style="background: url(http://lain.bgm.tv/pic/cover/l/69/28/152091_Bg7Hc.jpg); no-repeat fixed;background-size: cover;"></div>
</div>

Options 0x01

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

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

1
2
bangumi:
  css: https://cdn.alias.zone/css/hexo-tag-bangumi.css

See the Pen hexo-tag-bangumi by Chang (@alias_e) on CodePen.

GetAnimeId 0x02

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

  1. 打开Bangumi番组计划。
  2. 搜索需要插入的动漫，比如利兹与青鸟。
  3. 得到动漫详情的详细 URL：http://bangumi.tv/subject/216371
  4. 最后的数字就是电影的 ID。

API 0x03

API 使用Bangumi官方提供的API接口：
请求方式 - GET
请求地址 - https://api.bgm.tv/subject/
请求参数

参数 描述
id 动漫 id

Dependencies 0x04

插件需要安装以下依赖，请您知悉：

  • hexo-util
  • request
  • request-promise

谢谢你，京阿尼

放火事件后的京阿尼，特别是对京吹制作组来说，损失是十分惨重的。
去年夏天，在事件发生一个月后，也曾去了一趟现场，焦黑带黄的墙壁向下，是各色的鲜花，
即使在一个月后，仍有不少人来到这里，为京都动画献上祝福。




愿一直给我带来欢笑和快乐的京都动画，能在这烈火中涅槃重生。

ありがとう、京アニ。

迷思

最近练习长笛，才发现音乐的信息化程度做的真的很低。

网上找各种谱子，水印跟叠杀人书一样，叠的谱子都残了。

要么就是图片质量过低，最后连音符在哪根线上都看不清。

为了得到清晰，保存性好，可再加工的谱子，只好都用打谱软件MuseScore再打一遍。

但发现MuseScore的那套渲染系统，貌似没有开源，只开源了用Qt写的桌面应用。

没有办法，只好另寻他法。

最后找到这个方案：OSMD (OpenSheetMusicDisplay)

可以把MusicXML文件渲染成SVG或者在Canvas组件内绘制出谱子。

下面直接上完成版。

hexo-musicxml-sheetmusic

使用方法

安装：

npm
1
npm install hexo-musicxml-sheetmusic --save

本地文件：

1
{ % musicxml C:\Flute\moon.musicxml "false" % }

网络文件：

1
{ % musicxml https://raw.githubusercontent.com/netbeifeng/hexo-musicxml-sheetmusic/master/Liz_and_the_Blue_Bird_Mvt._3_Flute_and_Oboe_Duet_Only.musicxml "false" % }

参数：

  • false: 只渲染谱子
  • true: 另外渲染Player以及Converter

已知的Bug

  1. 多行乐谱时，点击音符跳转的位置错误
  2. 导出 MIDI 的 MIDI 乐器只有 0 号钢琴
  3. 导出 PDF 不能正常分页，故不能正常打印

后记

什么时候才能吹出利兹与青鸟-第三乐章呢？

🥳 加载 Disqus 评论