mirror of https://gitlab.com/curben/blog
feat: use page's screenshot as og:image
- Some microbrowser loads all "og:image" images before choosing one - Now there is only one "og:image" tag and it's a screenshot of the page - https://24ways.org/2019/microbrowsers-are-everywhere/
This commit is contained in:
parent
80c9e584f2
commit
ff34956550
|
@ -1,3 +1,4 @@
|
||||||
# Reverse proxy to cdn
|
# Reverse proxy to cdn
|
||||||
/libs/* https://cdn.statically.io/libs/:splat 200
|
/libs/* https://cdn.statically.io/libs/:splat 200
|
||||||
/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
|
/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
|
||||||
|
/screenshot/* https://cdn.statically.io/screenshot/curben.netlify.com/:splat?mobile=true 200
|
||||||
|
|
|
@ -9,10 +9,9 @@
|
||||||
* https://nodejs.org/api/url.html#url_the_whatwg_url_api
|
* https://nodejs.org/api/url.html#url_the_whatwg_url_api
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
const moment = require('moment')
|
const moment = require('moment')
|
||||||
const { encodeURL, escapeHTML, htmlTag, stripHTML } = require('hexo-util')
|
const { escapeHTML, htmlTag, prettyUrls, stripHTML } = require('hexo-util')
|
||||||
|
const fullUrlFor = require('hexo-util').full_url_for
|
||||||
|
|
||||||
function meta (name, content) {
|
function meta (name, content) {
|
||||||
return `${htmlTag('meta', {
|
return `${htmlTag('meta', {
|
||||||
|
@ -30,15 +29,13 @@ function og (name, content) {
|
||||||
|
|
||||||
function openGraphHelper () {
|
function openGraphHelper () {
|
||||||
const { config, page, theme } = this
|
const { config, page, theme } = this
|
||||||
const { content } = page
|
|
||||||
let images = page.photos || []
|
|
||||||
let description = page.excerpt || theme.description || false
|
let description = page.excerpt || theme.description || false
|
||||||
const author = config.author
|
const author = config.author
|
||||||
const keywords = page.tags || false
|
const keywords = page.tags || false
|
||||||
const title = page.title || theme.nickname
|
const title = page.title || theme.nickname
|
||||||
const type = (this.is_post() ? 'article' : 'website')
|
const type = (this.is_post() ? 'article' : 'website')
|
||||||
const url = config.pretty_urls.trailing_index ? encodeURL(this.url)
|
const url = prettyUrls(this.url, config.pretty_urls)
|
||||||
: encodeURL(this.url).replace(/index\.html$/, '')
|
const screenshot = '/screenshot/' + prettyUrls(this.path, config.pretty_urls)
|
||||||
const siteName = config.subtitle || theme.nickname || false
|
const siteName = config.subtitle || theme.nickname || false
|
||||||
const published = page.date || false
|
const published = page.date || false
|
||||||
const updated = page.lastUpdated || false
|
const updated = page.lastUpdated || false
|
||||||
|
@ -76,35 +73,7 @@ function openGraphHelper () {
|
||||||
|
|
||||||
result += og('og:locale', language)
|
result += og('og:locale', language)
|
||||||
|
|
||||||
if (!images.length && content && content.includes('<img')) {
|
result += og('og:image', fullUrlFor.call(this, screenshot))
|
||||||
images = images.slice()
|
|
||||||
|
|
||||||
let img
|
|
||||||
const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi
|
|
||||||
while ((img = imgPattern.exec(content)) !== null) {
|
|
||||||
images.push(img[1])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Array.isArray(images)) images = [images]
|
|
||||||
|
|
||||||
images = images.map(path => {
|
|
||||||
let url
|
|
||||||
// resolve `path`'s absolute path relative to current page's url
|
|
||||||
// `path` can be both absolute (starts with `/`) or relative.
|
|
||||||
try {
|
|
||||||
url = new URL(path).href
|
|
||||||
} catch (e) {
|
|
||||||
url = new URL(path, config.url).href
|
|
||||||
return url
|
|
||||||
}
|
|
||||||
|
|
||||||
return url
|
|
||||||
})
|
|
||||||
|
|
||||||
images.forEach(path => {
|
|
||||||
result += og('og:image', path)
|
|
||||||
})
|
|
||||||
|
|
||||||
if (published) {
|
if (published) {
|
||||||
if ((moment.isMoment(published) || moment.isDate(published)) && !isNaN(published.valueOf())) {
|
if ((moment.isMoment(published) || moment.isDate(published)) && !isNaN(published.valueOf())) {
|
||||||
|
|
Loading…
Reference in New Issue