feat: Video covers support + fetchpriority tuning for LCP covers

layout/includes/mixins/article-sort.pug

@@ -1,23 +1,39 @@
 mixin articleSort(posts)
   .article-sort
     - let year
-    - posts.forEach(article => {
+    - posts.forEach((article, index) => {
       - const tempYear = date(article.date, 'YYYY')
-      - const noCoverClass = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+      - const hasArticleSortCover = article.article_sort_cover !== undefined
+      - const cover = hasArticleSortCover ? (article.article_sort_cover === false ? false : article.article_sort_cover) : article.cover
+      - const noCoverClass = cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
       - const title = article.title || _p('no_title')
       if tempYear !== year
         - year = tempYear
         .article-sort-item.year= year
       .article-sort-item(class=noCoverClass)
-        if article.cover && theme.cover.archives_enable
+        if cover && theme.cover.archives_enable
+          - const eagerCoversCount = theme.LCP_Optimization.enable ? (theme.LCP_Optimization.articles_sort_page ?? 0) : 0
+          - const isEager = index < eagerCoversCount
+          - const coverType = hasArticleSortCover ? article.article_sort_cover_type : article.cover_type
+          - const coverMime = hasArticleSortCover ? article.article_sort_cover_mime : article.cover_mime
+          - const articleSortVideoParameters = article.article_sort_video_parameters || {}
+          - const coverVideoParameters = article.cover_video_parameters || {}
+          - const autoplay = hasArticleSortCover ? articleSortVideoParameters.autoplay : (articleSortVideoParameters.autoplay ?? coverVideoParameters.autoplay)
+          - const loop = hasArticleSortCover ? articleSortVideoParameters.loop : (articleSortVideoParameters.loop ?? coverVideoParameters.loop)
+          - const poster = hasArticleSortCover ? articleSortVideoParameters.poster : (articleSortVideoParameters.poster ?? coverVideoParameters.poster)
+          if coverType === 'video' && isEager && poster
+            link(rel='preload' as='image' href=url_for(poster) fetchpriority='high')
           a.article-sort-item-img(href=url_for(article.path) title=title)
-            if article.cover_type === 'img'
-              img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
+            if coverType === 'video'
+              video(autoplay=autoplay loop=loop muted playsinline poster=poster ? url_for(poster) : undefined)
+                source(src=url_for(cover) type=coverMime || undefined)
+            else if coverType === 'img'
+              img(src=url_for(cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title loading=isEager ? 'eager' : undefined fetchpriority=isEager ? 'high' : undefined decoding=isEager ? undefined : 'async')
             else
-              div(style=`background: ${article.cover}`)
+              div(style=`background: ${cover}`)
         .article-sort-item-info
           .article-sort-item-time
             i.far.fa-calendar-alt
             time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
           a.article-sort-item-title(href=url_for(article.path) title=title)= title
-    - })
+    - })

layout/includes/mixins/indexPostUI.pug

@@ -13,9 +13,18 @@ mixin indexPostUI()
 
           if postCover && theme.cover.index_enable
             .post_cover(class=leftOrRight)
+              - const eagerCoversCount = theme.LCP_Optimization.enable ? (theme.LCP_Optimization.main_page ?? 3) : 0
+              - const isEager = index < eagerCoversCount
+              - const coverVideoParameters = article.cover_video_parameters || {}
+              - const poster = coverVideoParameters.poster
+              if article.cover_type === 'video' && isEager && poster
+                link(rel='preload' as='image' href=url_for(poster) fetchpriority='high')
               a(href=url_for(link) title=title)
-                if article.cover_type === 'img'
-                  img.post-bg(src=url_for(postCover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+                if article.cover_type === 'video'
+                  video.post-bg(autoplay=coverVideoParameters.autoplay loop=coverVideoParameters.loop muted playsinline poster=poster ? url_for(poster) : undefined)
+                    source(src=url_for(postCover) type=article.cover_mime || undefined)
+                else if article.cover_type === 'img'
+                  img.post-bg(src=url_for(postCover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title loading=isEager ? 'eager' : undefined fetchpriority=isEager ? 'high' : undefined decoding=isEager ? undefined : 'async')
                 else
                   div.post-bg(style=`background: ${postCover}`)
           .recent-post-info(class=noCover)
@@ -116,4 +125,4 @@ mixin indexPostUI()
           if (index + 1) % 3 === 0
             .recent-post-item.ads-wrap!= theme.ad.index
 
-    include ../pagination.pug
+    include ../pagination.pug

layout/includes/pagination.pug

@@ -18,11 +18,23 @@ if page.total !== 1
           - className = getPostDesc ? className : className + ' no-desc'
 
           a.pagination-related(class=className href=url_for(direction.path) title=direction.title)
-            if direction.cover_type === 'img'
-              img.cover(src=url_for(direction.pagination_cover || direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
-            else
-              .cover(style=`background: ${direction.cover || 'var(--default-bg-color)'}`)
+            - const hasPaginationCover = direction.pagination_cover !== undefined
+            - const cover = hasPaginationCover ? direction.pagination_cover : direction.cover
+            - const coverType = hasPaginationCover ? direction.pagination_cover_type : direction.cover_type
+            - const coverMime = hasPaginationCover ? direction.pagination_cover_mime : direction.cover_mime
+            - const paginationVideoParameters = direction.pagination_video_parameters || {}
+            - const coverVideoParameters = direction.cover_video_parameters || {}
+            - const autoplay = hasPaginationCover ? paginationVideoParameters.autoplay : (paginationVideoParameters.autoplay ?? coverVideoParameters.autoplay)
+            - const loop = hasPaginationCover ? paginationVideoParameters.loop : (paginationVideoParameters.loop ?? coverVideoParameters.loop)
+            - const poster = hasPaginationCover ? paginationVideoParameters.poster : (paginationVideoParameters.poster ?? coverVideoParameters.poster)
 
+            if coverType === 'video'
+              video.cover(autoplay=autoplay loop=loop muted playsinline poster=poster ? url_for(poster) : undefined)
+                source(src=url_for(cover) type=coverMime || undefined)
+            else if coverType === 'img'
+              img.cover(src=url_for(cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`)
+            else
+              .cover(style=`background: ${cover || 'var(--default-bg-color)'}`)
             .info(class=key === 'prev' ? '' : 'text-right')
               .info-1
                 .info-item-1=_p(`pagination.${key}`)
@@ -35,4 +47,4 @@ if page.total !== 1
       .pagination
         if globalPageType === 'home'
           - options.format = 'page/%d/#content-inner'
-        !=paginator(options)
+        !=paginator(options)

layout/includes/widget/card_recent_post.pug

@@ -9,19 +9,30 @@ if theme.aside.card_recent_post.enable
       - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
         - let link = article.link || article.path
         - let title = article.title || _p('no_title')
-        - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
-        - let post_cover = article.cover
-        .aside-list-item(class=no_cover)
-          if post_cover && theme.cover.aside_enable
+        - let hasRecentPostCover = article.recent_post_cover !== undefined
+        - let cover = hasRecentPostCover ? article.recent_post_cover : article.cover
+        - let coverType = hasRecentPostCover ? article.recent_post_cover_type : article.cover_type
+        - let coverMime = hasRecentPostCover ? article.recent_post_cover_mime : article.cover_mime
+        - let recentPostVideoParameters = article.recent_post_video_parameters || {}
+        - let coverVideoParameters = article.cover_video_parameters || {}
+        - let autoplay = hasRecentPostCover ? recentPostVideoParameters.autoplay : (recentPostVideoParameters.autoplay ?? coverVideoParameters.autoplay)
+        - let loop = hasRecentPostCover ? recentPostVideoParameters.loop : (recentPostVideoParameters.loop ?? coverVideoParameters.loop)
+        - let poster = hasRecentPostCover ? recentPostVideoParameters.poster : (recentPostVideoParameters.poster ?? coverVideoParameters.poster)
+        - let noCoverClass = cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
+        .aside-list-item(class=noCoverClass)
+          if cover && theme.cover.aside_enable
             a.thumbnail(href=url_for(link) title=title)
-              if article.cover_type === 'img'
-                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+              if coverType === 'video'
+                video(autoplay=autoplay loop=loop muted playsinline poster=poster ? url_for(poster) : undefined)
+                  source(src=url_for(cover) type=coverMime || undefined)
+              else if coverType === 'img'
+                img(src=url_for(cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
               else
-                div(style=`background: ${post_cover}`)
+                div(style=`background: ${cover}`)
           .content
             a.title(href=url_for(link) title=title)= title
             if theme.aside.card_recent_post.sort === 'updated'
               time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
             else
               time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
-      - })
+      - })

scripts/common/default_config.js

@@ -563,6 +563,11 @@ module.exports = {
     bg_dark: '#1f1f1f'
   },
   instantpage: false,
+  LCP_Optimization: {
+    enable: false,
+    main_page: 3,
+    articles_sort_page: 8,
+  },
   lazyload: {
     enable: false,
     native: false,

scripts/filters/random_cover.js

@@ -6,6 +6,7 @@
 
 hexo.extend.generator.register('post', locals => {
   const imgTestReg = /\.(png|jpe?g|gif|svg|webp|avif)(\?.*)?$/i
+  const videoTestReg = /\.(mp4|webm)(\?.*)?$/i
   const { post_asset_folder: postAssetFolder } = hexo.config
   const { cover: { default_cover: defaultCover } } = hexo.theme.config
 
@@ -40,32 +41,103 @@ hexo.extend.generator.register('post', locals => {
 
   const coverGenerator = createCoverGenerator()
 
+  const normalizeVideoParams = (data, paramsKey) => {
+    let params = data[paramsKey]
+    if (!params || typeof params !== 'object') params = {}
+
+    let poster = params.poster
+    if (typeof poster === 'string') poster = poster.trim()
+    if (poster === '') poster = undefined
+
+    if (params.autoplay !== undefined && params.autoplay !== null) params.autoplay = params.autoplay === true
+    if (params.loop !== undefined && params.loop !== null) params.loop = params.loop === true
+
+    if (postAssetFolder && poster && poster.indexOf('/') === -1 && imgTestReg.test(poster)) {
+      poster = `${data.path}${poster}`
+    }
+
+    params.poster = poster
+    data[paramsKey] = params
+  }
+
+  const handleVideo = data => {
+    normalizeVideoParams(data, 'cover_video_parameters')
+    normalizeVideoParams(data, 'pagination_video_parameters')
+    normalizeVideoParams(data, 'article_sort_video_parameters')
+    normalizeVideoParams(data, 'recent_post_video_parameters')
+    normalizeVideoParams(data, 'related_post_video_parameters')
+    return data
+  }
+
   const handleImg = data => {
-    let { cover: coverVal, top_img: topImg, pagination_cover: paginationCover } = data
+    data = handleVideo(data)
+    let { cover: coverVal, top_img: topImg, pagination_cover: paginationCover, recent_post_cover: recentPostCover, article_sort_cover: articleSortCover, related_post_cover: relatedPostCover } = data
 
-    // Add path to top_img and cover if post_asset_folder is enabled
     if (postAssetFolder) {
       if (topImg && topImg.indexOf('/') === -1 && imgTestReg.test(topImg)) {
         data.top_img = `${data.path}${topImg}`
       }
-      if (coverVal && coverVal.indexOf('/') === -1 && imgTestReg.test(coverVal)) {
+      if (coverVal && coverVal.indexOf('/') === -1 && (imgTestReg.test(coverVal) || videoTestReg.test(coverVal))) {
         data.cover = `${data.path}${coverVal}`
       }
-      if (paginationCover && paginationCover.indexOf('/') === -1 && imgTestReg.test(paginationCover)) {
+      if (paginationCover && paginationCover.indexOf('/') === -1 && (imgTestReg.test(paginationCover) || videoTestReg.test(paginationCover))) {
         data.pagination_cover = `${data.path}${paginationCover}`
       }
+      if (recentPostCover && recentPostCover.indexOf('/') === -1 && (imgTestReg.test(recentPostCover) || videoTestReg.test(recentPostCover))) {
+        data.recent_post_cover = `${data.path}${recentPostCover}`
+      }
+      if (articleSortCover && articleSortCover.indexOf('/') === -1 && (imgTestReg.test(articleSortCover) || videoTestReg.test(articleSortCover))) {
+        data.article_sort_cover = `${data.path}${articleSortCover}`
+      }
+      if (relatedPostCover && relatedPostCover.indexOf('/') === -1 && (imgTestReg.test(relatedPostCover) || videoTestReg.test(relatedPostCover))) {
+        data.related_post_cover = `${data.path}${relatedPostCover}`
+      }
+    }
+
+    if (paginationCover && videoTestReg.test(paginationCover)) {
+      data.pagination_cover_type = 'video'
+      data.pagination_cover_mime = /\.webm(\?.*)?$/i.test(paginationCover) ? 'video/webm' : 'video/mp4'
+    } else if (paginationCover && (paginationCover.indexOf('//') !== -1 || imgTestReg.test(paginationCover))) {
+      data.pagination_cover_type = 'img'
+    }
+
+    if (articleSortCover !== undefined && articleSortCover !== null && articleSortCover !== false) {
+      if (articleSortCover && videoTestReg.test(articleSortCover)) {
+        data.article_sort_cover_type = 'video'
+        data.article_sort_cover_mime = /\.webm(\?.*)?$/i.test(articleSortCover) ? 'video/webm' : 'video/mp4'
+      } else if (articleSortCover && (articleSortCover.indexOf('//') !== -1 || imgTestReg.test(articleSortCover))) {
+        data.article_sort_cover_type = 'img'
+      }
+    }
+
+    if (recentPostCover !== undefined && recentPostCover !== null && recentPostCover !== false) {
+      if (recentPostCover && videoTestReg.test(recentPostCover)) {
+        data.recent_post_cover_type = 'video'
+        data.recent_post_cover_mime = /\.webm(\?.*)?$/i.test(recentPostCover) ? 'video/webm' : 'video/mp4'
+      } else if (recentPostCover && (recentPostCover.indexOf('//') !== -1 || imgTestReg.test(recentPostCover))) {
+        data.recent_post_cover_type = 'img'
+      }
+    }
+
+    if (relatedPostCover && videoTestReg.test(relatedPostCover)) {
+      data.related_post_cover_type = 'video'
+      data.related_post_cover_mime = /\.webm(\?.*)?$/i.test(relatedPostCover) ? 'video/webm' : 'video/mp4'
+    } else if (relatedPostCover && (relatedPostCover.indexOf('//') !== -1 || imgTestReg.test(relatedPostCover))) {
+      data.related_post_cover_type = 'img'
     }
 
     if (coverVal === false) return data
 
-    // If cover is not set, use random cover
     if (!coverVal) {
       const randomCover = coverGenerator.next().value
       data.cover = randomCover
       coverVal = randomCover
     }
 
-    if (coverVal && (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal))) {
+    if (coverVal && videoTestReg.test(coverVal)) {
+      data.cover_type = 'video'
+      data.cover_mime = /\.webm(\?.*)?$/i.test(coverVal) ? 'video/webm' : 'video/mp4'
+    } else if (coverVal && (coverVal.indexOf('//') !== -1 || imgTestReg.test(coverVal))) {
       data.cover_type = 'img'
     }
 

scripts/helpers/related_post.js

@@ -29,6 +29,12 @@ hexo.extend.helper.register('related_posts', function (currentPost) {
           path: post.path,
           cover: post.cover,
           cover_type: post.cover_type,
+          cover_mime: post.cover_mime,
+          cover_video_parameters: post.cover_video_parameters,
+          related_post_cover: post.related_post_cover,
+          related_post_cover_type: post.related_post_cover_type,
+          related_post_cover_mime: post.related_post_cover_mime,
+          related_post_video_parameters: post.related_post_video_parameters,
           weight: 1,
           updated: post.updated,
           created: post.date,
@@ -62,14 +68,30 @@ hexo.extend.helper.register('related_posts', function (currentPost) {
   result += '<div class="relatedPosts-list">'
 
   for (let i = 0; i < Math.min(relatedPostsList.length, limitNum); i++) {
-    let { cover, title, path, cover_type, created, updated, postDesc } = relatedPostsList[i]
+    let { title, path, cover: baseCover, cover_type: baseCoverType, cover_mime: baseCoverMime, cover_video_parameters: coverVideoParameters, related_post_cover: relatedPostCover, related_post_cover_type: relatedPostCoverType, related_post_cover_mime: relatedPostCoverMime, related_post_video_parameters: relatedPostVideoParameters, created, updated, postDesc } = relatedPostsList[i]
     const { escape_html, url_for, date } = this
+
+    const hasRelatedPostCover = relatedPostCover !== undefined
+    let cover = hasRelatedPostCover ? relatedPostCover : baseCover
+    const coverType = hasRelatedPostCover ? relatedPostCoverType : baseCoverType
+    const coverMime = hasRelatedPostCover ? relatedPostCoverMime : baseCoverMime
+
+    coverVideoParameters = coverVideoParameters || {}
+    const relatedVideoParameters = relatedPostVideoParameters || {}
+    const autoplay = hasRelatedPostCover ? relatedVideoParameters.autoplay : (relatedVideoParameters.autoplay ?? coverVideoParameters.autoplay)
+    const loop = hasRelatedPostCover ? relatedVideoParameters.loop : (relatedVideoParameters.loop ?? coverVideoParameters.loop)
+    const poster = hasRelatedPostCover ? relatedVideoParameters.poster : (relatedVideoParameters.poster ?? coverVideoParameters.poster)
+
     cover = cover || 'var(--default-bg-color)'
     title = escape_html(title)
     const className = postDesc ? 'pagination-related' : 'pagination-related no-desc'
     result += `<a class="${className}" href="${url_for(path)}" title="${title}">`
-    if (cover_type === 'img') {
-      result += `<img class="cover" src="${url_for(cover)}" alt="cover">`
+    if (coverType === 'img') {
+      result += `<img class="cover" src="${url_for(cover)}" onerror="this.onerror=null;this.src='${url_for(config.error_img.post_page)}'" alt="cover">`
+    } else if (coverType === 'video') {
+      result += `<video class="cover"${autoplay === true ? ' autoplay' : ''}${loop === true ? ' loop' : ''} muted playsinline${poster ? ` poster="${url_for(poster)}"` : ''}>`
+      result += `<source src="${url_for(cover)}"${coverMime ? ` type="${coverMime}"` : ''}>`
+      result += `</video>`
     } else {
       result += `<div class="cover" style="background: ${cover}"></div>`
     }