Hexoのプラグインをカスタマイズする
目次
IMDBタグを作りたかった
プラグインのカスタマイズは前にも行ったのだが、今回は私が年に100以上は見ている映画の管理でお世話になっているIMDBへのリンクをパッと作れないかなと思ったのがきっかけ。
こんなことがしたい
\{% imdb 'Mademoiselle' %}
hexoのmdファイルにこんな風に書いてみたら、、、
<div class='imdb'>
<img src='https://m.media-amazon.com/images/M/MV5BYzRjNDg0NzItNmI3Ny00MmIwLWI4OTgtMGMzNmI2MjQwM2IxXkEyXkFqcGdeQXVyNjYxOTg2ODI@._V1_UY268_CR0,0,182,268_AL_.jpg' alt="Mademoiselle">
</div>
こんな感じで展開されてほしい。
既存のプラグインに追加したい
一から作るよりもいつも使っているプラグインに追加したい。
以前よりhexo-tag-owlを使っていたのでこれにimdbタグを追加してみる。
参考
今回参考にしたモジュールが、shreyansh3010さんのimdb-node-scraper。
大変参考になりました。 I appreciate it.
対象ファイル
hexo-tag-owlの以下のファイルを修正する。
- hexo-tag-owl/lib/tag/index.js; need to modify
- hexo-tag-owl/lib/tag/image/imdb.js; create new
1. index.js
以下の通り
14c14
< tags: ['local', 'giphy']
---
> tags: ['local', 'giphy', 'imdb']
2. imdb.js
新規で作成
'use strict';
const cheerio=require('cheerio-httpcli');
module.exports = (hexo, args) => {
/* search */
let q=args[1];
let title=((q)=>{
let titleArray=q.split(" ");
let searchTitle="";
for(let i=0;i<titleArray.length;i++){
(i!=titleArray.length-1)?searchTitle+=titleArray[i]+'+':searchTitle+=titleArray[i];
}
return searchTitle;
})(q);
let movies=[];
let searchurl='https://www.imdb.com/find';
let searchoptions={
s: 'tt',
ttype: 'ft',
ref_: 'fn_ft',
q: title,
};
const result=cheerio.fetchSync(searchurl, searchoptions);
if(result.error)
return '<div class="owl-media owl-image owl-imdb"><img src="/assets/no-media.png" alt="no media"></div>';
let $=result.$;
$('.findResult').each(async (i, element)=>{
const $image = $(element).find('td a img');
const $title = $(element).find('td.result_text a');
const imdbID = $title.attr('href').match(/title\/(.*)\//)[1];
const movie = {
image: $image.attr('src'),
title: $title.text(),
imdbID : imdbID
};
movies.push(movie);
return false;
});
/* details */
let detailurl='https://www.imdb.com/title/'+movies[0].imdbID+'/';
let detailoptions={
ref_:'fn_al_tt_1',
};
const result2=cheerio.fetchSync(detailurl, detailoptions);
if(result2.error)
return '<div class="owl-media owl-image owl-imdb"><img src="/assets/no-media.png" alt="no media"></div>';
$=result2.$;
var articleChildren = $('.subtext').children()
var movieDetails = {
title : $('.title_wrapper h1').text(),
year: $('#titleYear a').text(),
rating : $('.ratingValue strong span').text(),
votes : $('.imdbRating a span').text(),
time : $('.subtext time').text().trim(),
poster : $('.poster a img').attr('src'),
release : $(articleChildren[7]).text().trim(),
story : $('.article .canwrap p span').text().trim(),
writtenBy : $('.article .canwrap em a').text()
}
return '<div class="owl-media owl-image owl-imdb"><img src="'+movieDetails.poster+'" alt="'+movieDetails.title+'"><div class="imdb-staff"><ul><li>Title: '+movieDetails.title+'</li><li>Release Date: '+movieDetails.release+'</li></ul></div></div>';
}
テストしてみる。
test.mdファイルを新規作成して下記のような内容にしてみる。
---
title: tested imdb tag
tag: development
---
{% owl imdb 'Soylent Green' %}
以下を実行。
$ cd $HEXO_HOME
$ cd node_modules/hexo-tag-owl
$ npm i cheerio-httpcli --save
$ cd ../..
$ rm db.json
$ hexo g
変数HEXO_HOMEは適宜読み替えてほしい。
エラーが出ていないことを確認して、ページをみて変換されていることを確認する。
Web Scraping系は生ものなので、すぐ使えなくなるかもしれないけどひとまずはよいかな。
