この記事はHexo時代の記事です。 現在のブログとは見た目や機能が異なる可能性があります。
cocoen は2枚の画像をスライダーで比較するできるようにするJavaScriptライブラリ。
早い話がこれ↓だよこれ↓。 スマホの人は画面を横向きにすると操作しやすいと思う。
こういう同じ構図だけどフォーカスが違う写真とか、 RAW現像のbefore/after的な表示がやりたかったのだ❗ これでできるようになったぞ❗
以下、やり方などは記事続きから〜。
手順
landscape themeが前提なので、それ以外のを使ってる人は適宜読み替えてね。
cocoen.min.cssの最新をDLして、↓に配置。themes/landscape/source/css/cocoen/cocoen.min.css
cocoen.min.jsの最新をDLして、↓に配置。themes/landscape/source/css/js/cocoen/cocoen.min.js
続き。head.ejsの</head>の直前に↓を追加。
これでcssが全ページでlinkされるようになる。
<!-- support cocoen.js: <https://github.com/koenoe/cocoen> -->
<%- css('css/cocoen/cocoen.min') %>after-footer.ejsの<%- js('js/script') %>の直前に↓を追加。
<%- js('js/script') %>よりあとに追加すると動作しないので注意。
<!-- support cocoen.js: <https://github.com/koenoe/cocoen> -->
<!-- You must place `cocoen.min.js` before `script.js` -->
<%- js('js/cocoen/cocoen.min') %>landscape/source/js/script.jsでjQueryのfayncyboxがcocoen用の画像を除外するようにする。
後でcocoen用の画像はcocoen classを持った<div>で囲まれるのが前提。
// Caption
$('.article-entry').each(function(i){
$(this).find('img').each(function(){
if ($(this).parent().hasClass('fancybox')) return;
// ↓これを追加。
if ($(this).parent().hasClass('cocoen')) {
return;
}これで準備完了。 あとは記事本編中で↓のように指定すれば良い。
markdownほげほげ。
<div class="cocoen">
<img src="./images/figures/prisma_klangfest_chloe_35.webp" alt="美遊ちゃんフォーカス">
<img src="./images/figures/prisma_klangfest_chloe_36.webp" alt="クロエちゃんフォーカス">
</div>
markdownふがふが。解説と蛇足
webpは使える?
使える。
というより、気にしてなさそう。
<img> tagが使えるものならなんでもいけるんじゃなかろうか。
cocoenのホスティングはcdnを使わないのか?
使わない。4[KB]しかないので自前でホスティングしちゃったほうが早い。 最近、googleのspeedテストで「外部リソースのloadがなげえよ💢」って怒られてるのもある。
cocoenはnpmでバージョン管理しないの?
やる方法がわからなかった。
hexo generateするときにnode_modules以下のファイルを拾ってくる方法が分からん。
webpackとか使ってるならできるのかも。
あと、npm scriptでコピーしても良かったが、あんまりスマートに思えなかった。
hexoのtagプラグイン化はしないの
やれたらやる〜(やらない)。
tagプラグイン化って、markdownに↓みたいなのを書くと、いい感じにhtml作ってくれるやつね。
{% cocoen miyu.webp chloe.webp %}実は、 cocoenじゃなくjQueryのtwentytwentyで実現してる人は既にいる ( demoはご本人様のブログ記事 )。 この方の方法を真似すればできそう。
