2019-08-09 13:02:51 +00:00
|
|
|
'use strict'
|
|
|
|
/* global hexo */
|
|
|
|
|
2018-10-01 02:24:11 +00:00
|
|
|
/*
|
2019-05-23 07:16:02 +00:00
|
|
|
* Put {% cloudinary 'folder/filename.jpg' 'description' %} in your post.
|
2018-10-01 02:24:11 +00:00
|
|
|
*/
|
2019-08-25 07:45:44 +00:00
|
|
|
|
2019-05-23 07:16:02 +00:00
|
|
|
hexo.extend.tag.register('cloudinary', (args) => {
|
2019-09-03 02:48:42 +00:00
|
|
|
let [fileName, alt] = args
|
|
|
|
if (!alt) alt = ''
|
2019-09-03 19:26:50 +00:00
|
|
|
let modern = fileName
|
|
|
|
let legacy = fileName
|
|
|
|
const link = '/img/'
|
2019-05-23 07:16:02 +00:00
|
|
|
|
2019-09-03 19:26:50 +00:00
|
|
|
if (fileName.endsWith('.png') || fileName.endsWith('.jpg')) {
|
|
|
|
modern = fileName.concat('?format=webp')
|
2019-08-25 06:37:58 +00:00
|
|
|
} else if (fileName.endsWith('.webp')) {
|
2019-09-03 19:26:50 +00:00
|
|
|
// Statically has yet to support animated webp
|
2019-08-30 06:24:07 +00:00
|
|
|
// https://github.com/marsble/statically/issues/36
|
2019-09-03 19:26:50 +00:00
|
|
|
// modern = fileName.concat('?auto_format=false')
|
2019-08-30 06:24:07 +00:00
|
|
|
modern = fileName.replace(/\.webp$/, '.gif')
|
2019-08-25 06:37:58 +00:00
|
|
|
legacy = fileName.replace(/\.webp$/, '.gif')
|
|
|
|
}
|
|
|
|
|
2019-09-03 19:26:50 +00:00
|
|
|
const modernLink = link + modern
|
|
|
|
const legacyLink = link + legacy
|
2019-08-30 03:31:44 +00:00
|
|
|
|
2019-08-25 09:39:26 +00:00
|
|
|
const img = `<img
|
2019-08-30 04:52:16 +00:00
|
|
|
srcset="${legacyLink}&w=320 320w,
|
|
|
|
${legacyLink}&w=468 468w,
|
|
|
|
${legacyLink}&w=768 768w,
|
|
|
|
${legacyLink} 800w"
|
2019-08-25 09:39:26 +00:00
|
|
|
sizes="(max-width: 320px) 320px,
|
|
|
|
(max-width: 468px) 468px,
|
|
|
|
(max-width: 768px) 768px,
|
2019-08-25 23:44:35 +00:00
|
|
|
800px"
|
2019-08-30 04:52:16 +00:00
|
|
|
src="${legacyLink}"
|
2019-08-25 23:56:02 +00:00
|
|
|
alt="${alt}" loading="lazy">`
|
2019-08-25 09:39:26 +00:00
|
|
|
|
2019-08-25 06:37:58 +00:00
|
|
|
if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
|
2019-08-30 04:52:16 +00:00
|
|
|
return `<a href="${legacyLink}">
|
|
|
|
<picture>
|
2019-08-25 06:37:58 +00:00
|
|
|
<source type="image/webp"
|
2019-08-30 04:52:16 +00:00
|
|
|
srcset="${modernLink}&w=320 320w,
|
|
|
|
${modernLink}&w=468 468w,
|
|
|
|
${modernLink}&w=768 768w,
|
|
|
|
${modernLink} 800w"
|
2019-08-25 09:39:26 +00:00
|
|
|
sizes="(max-width: 320px) 320px,
|
|
|
|
(max-width: 468px) 468px,
|
|
|
|
(max-width: 768px) 768px,
|
|
|
|
800px">
|
|
|
|
${img}
|
2019-08-30 07:23:06 +00:00
|
|
|
</picture></a>`
|
2019-08-25 06:37:58 +00:00
|
|
|
} else {
|
2019-08-30 07:23:06 +00:00
|
|
|
return `<a href="${legacyLink}">${img}</a>`
|
2019-08-25 06:37:58 +00:00
|
|
|
}
|
2018-10-25 09:03:38 +00:00
|
|
|
})
|