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) => { 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; });
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系は生ものなので、すぐ使えなくなるかもしれないけどひとまずはよいかな。

コメント: