curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: replace 'image' tag plugin with marked:renderer filter plugin

This commit is contained in:
curben 2019-12-26 06:14:26 +00:00
parent 4620bfe915
commit 8e421b9202
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
1 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
themes/chameleon/scripts/image.js
View File

@ -6,58 +6,59 @@
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images * https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
* Image is resized on-the-fly using Statically Imgpx * Image is resized on-the-fly using Statically Imgpx
* https://statically.io/imgpx * https://statically.io/imgpx
* Usage: {% image 'folder/filename.jpg' 'description' %} * Usage: ![alt](/path/to/img "title")
*/ */
hexo.extend.tag.register('image', (args) => { hexo.extend.filter.register('marked:renderer', (renderer) => {
let [fileName, alt] = args renderer.image = (href, title, alt) => {
if (!alt) alt = '' if (!alt) alt = ''
let modern = fileName if (!title) title = alt
let legacy = fileName let modern = href
// /img/ is a reverse proxy of Statically CDN let legacy = href
// See source/_redirects // /img/ is a reverse proxy to Statically CDN
const link = '/img/' // See source/_redirects
const link = '/img/'
if (fileName.endsWith('.png') || fileName.endsWith('.jpg')) { if (href.endsWith('.png') || href.endsWith('.jpg')) {
modern = fileName.concat('?format=webp') modern = href.concat('?format=webp')
} else if (fileName.endsWith('.webp')) { } else if (href.endsWith('.webp')) {
// Statically has yet to support animated webp // Statically has yet to support animated webp
// https://github.com/marsble/statically/issues/36 // https://github.com/marsble/statically/issues/36
// modern = fileName.concat('?auto_format=false') // modern = href.concat('?auto_format=false')
modern = fileName.replace(/\.webp$/, '.gif') modern = href.replace(/\.webp$/, '.gif')
legacy = fileName.replace(/\.webp$/, '.gif') legacy = href.replace(/\.webp$/, '.gif')
} }
const modernLink = link + modern const modernLink = link + modern
const legacyLink = link + legacy const legacyLink = link + legacy
const img = `<img const img = `<img srcset="${legacyLink}&w=320 320w,` +
srcset="${legacyLink}&w=320 320w, `${legacyLink}&w=468 468w,` +
${legacyLink}&w=468 468w, `${legacyLink}&w=768 768w,` +
${legacyLink}&w=768 768w, `${legacyLink} 800w"` +
${legacyLink} 800w" ' sizes="(max-width: 320px) 320px,' +
sizes="(max-width: 320px) 320px, '(max-width: 468px) 468px,' +
(max-width: 468px) 468px, '(max-width: 768px) 768px,' +
(max-width: 768px) 768px, '800px"' +
800px" ` src="${legacyLink}"` +
src="${legacyLink}" ` title="${title}" alt="${alt}" loading="lazy">`
alt="${alt}" loading="lazy">`
if (fileName.endsWith('.png') || fileName.endsWith('.webp')) { if (href.endsWith('.png') || href.endsWith('.webp')) {
return `<a href="${legacyLink}"> return `<a href="${legacyLink}">` +
<picture> '<picture>' +
<source type="image/webp" '<source type="image/webp"' +
srcset="${modernLink}&w=320 320w, ` srcset="${modernLink}&w=320 320w,` +
${modernLink}&w=468 468w, `${modernLink}&w=468 468w,` +
${modernLink}&w=768 768w, `${modernLink}&w=768 768w,` +
${modernLink} 800w" `${modernLink} 800w"` +
sizes="(max-width: 320px) 320px, ' sizes="(max-width: 320px) 320px,' +
(max-width: 468px) 468px, '(max-width: 468px) 468px,' +
(max-width: 768px) 768px, '(max-width: 768px) 768px,' +
800px"> '800px">' +
${img} `${img}` +
</picture></a>` '</picture></a>'
} else { } else {
return `<a href="${legacyLink}">${img}</a>` return `<a href="${legacyLink}">${img}</a>`
}
} }
}) })