mirror of https://gitlab.com/curben/blog
refactor: use native responsive image function
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images * https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary * https://www.html5rocks.com/en/tutorials/responsive/picture-element/ * https://alligator.io/html/picture-element/ * https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
This commit is contained in:
parent
35daa88cfb
commit
4baa40a641
|
@ -14,6 +14,48 @@
|
||||||
hexo.extend.tag.register('cloudinary', (args) => {
|
hexo.extend.tag.register('cloudinary', (args) => {
|
||||||
const fileName = args[0]
|
const fileName = args[0]
|
||||||
const alt = args[1] || ''
|
const alt = args[1] || ''
|
||||||
|
let modern = ''
|
||||||
|
let legacy = ''
|
||||||
|
|
||||||
return '<a href="https://res.cloudinary.com/curben/' + fileName + '"><img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/' + fileName + '" src="/svg/loading.svg" alt="' + alt + '"></a>'
|
if (fileName.endsWith('.png')) {
|
||||||
|
modern = fileName.replace(/\.png$/, '.webp')
|
||||||
|
legacy = fileName
|
||||||
|
} else if (fileName.endsWith('.webp')) {
|
||||||
|
modern = fileName
|
||||||
|
legacy = fileName.replace(/\.webp$/, '.gif')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
|
||||||
|
return `<a href="https://res.cloudinary.com/curben/${fileName}">
|
||||||
|
<picture>
|
||||||
|
<source type="image/webp"
|
||||||
|
srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${modern} 300w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${modern} 450w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${modern} 600w"
|
||||||
|
sizes="(max-width: 300px) 280px,
|
||||||
|
(max-width: 450px) 430px,
|
||||||
|
600px"
|
||||||
|
src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}">
|
||||||
|
<img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${legacy} 300w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${legacy} 450w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy} 600w"
|
||||||
|
sizes="(max-width: 300px) 280px,
|
||||||
|
(max-width: 450px) 430px,
|
||||||
|
600px"
|
||||||
|
src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}"
|
||||||
|
alt="${alt}">
|
||||||
|
</picture></a>`
|
||||||
|
} else {
|
||||||
|
return `<a href="https://res.cloudinary.com/curben/${fileName}">
|
||||||
|
<picture>
|
||||||
|
<img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${fileName} 300w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${fileName} 450w,
|
||||||
|
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName} 600w"
|
||||||
|
sizes="(max-width: 300px) 280px,
|
||||||
|
(max-width: 450px) 430px,
|
||||||
|
600px"
|
||||||
|
src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName}"
|
||||||
|
alt="${alt}">
|
||||||
|
</picture></a>`
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
|
|
||||||
const moment = require('moment')
|
const moment = require('moment')
|
||||||
const { escapeHTML, htmlTag, stripHTML } = require('hexo-util')
|
const { escapeHTML, htmlTag, stripHTML } = require('hexo-util')
|
||||||
|
const micromatch = require('micromatch')
|
||||||
|
|
||||||
function meta (name, content, escape) {
|
function meta (name, content, escape) {
|
||||||
if (escape !== false && typeof content === 'string') {
|
if (escape !== false && typeof content === 'string') {
|
||||||
|
@ -70,9 +71,12 @@ function openGraphHelper (options = {}) {
|
||||||
|
|
||||||
// https://github.com/hexojs/hexo/pull/3680
|
// https://github.com/hexojs/hexo/pull/3680
|
||||||
let img
|
let img
|
||||||
const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi
|
const imgPattern = /<a [^>]*href=['"]([^'"]+)([^>]*>)/gi
|
||||||
while ((img = imgPattern.exec(content)) !== null) {
|
while ((img = imgPattern.exec(content)) !== null) {
|
||||||
if (!img[1].endsWith('.svg')) images.push(img[1])
|
const imgExt = ['*.jpg', '*.png', '*.webp']
|
||||||
|
if (micromatch.isMatch(img[1], imgExt, { basename: true })) {
|
||||||
|
images.push(img[1])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,5 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" data-sri-fallback="/js/clipboard.min.js" integrity="sha384-8CYhPwYlLELodlcQV713V9ZikA3DlCVaXFDpjHfP8Z36gpddf/Vrt47XmKDsCttu" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" data-sri-fallback="/js/clipboard.min.js" integrity="sha384-8CYhPwYlLELodlcQV713V9ZikA3DlCVaXFDpjHfP8Z36gpddf/Vrt47XmKDsCttu" crossorigin="anonymous"></script>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.6.3/cloudinary-core-shrinkwrap.min.js" data-sri-fallback="/js/cloudinary-core-shrinkwrap.min.js" integrity="sha384-AtUi14V2IZNnJArkg9+Z7S73y5MplnidfGOr3uLWrW2VTnQKUnJnRZl0IdvfTueI" crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
<%/* javascript of Typing theme */%>
|
<%/* javascript of Typing theme */%>
|
||||||
<%- js('js/typing') %>
|
<%- js('js/typing') %>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -8,7 +8,7 @@ document.getElementById('searchClickMob').addEventListener('click', () => {
|
||||||
}, false)
|
}, false)
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Copy button and Cloudinary functions.
|
* Copy button
|
||||||
* Following functions only execute after
|
* Following functions only execute after
|
||||||
* the 'document' is ready or
|
* the 'document' is ready or
|
||||||
* <script src> is executed.
|
* <script src> is executed.
|
||||||
|
@ -36,8 +36,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
event.trigger.textContent = 'Copy'
|
event.trigger.textContent = 'Copy'
|
||||||
}, 2000)
|
}, 2000)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Initialize Cloudinary responsive function
|
|
||||||
const cl = cloudinary.Cloudinary.new({ cloud_name: 'curben' })
|
|
||||||
cl.responsive()
|
|
||||||
}, false)
|
}, false)
|
||||||
|
|
Loading…
Reference in New Issue