mirror of https://gitlab.com/curben/blog
refactor: replace 'image' tag plugin with marked:renderer filter plugin
This commit is contained in:
parent
4620bfe915
commit
8e421b9202
|
@ -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>`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue