perf: optimize img src url generation

XPoet · Nov 29, 2023 · 5a09946 · 5a09946
1 parent 0834663
commit 5a09946
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 26 deletions.
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -57,7 +57,7 @@ const web_master = bi_author || hexo_author
                                href="<%= item.link_url %>"
                                target="_blank"
                             >
-                                <img src="<%= item.img_url %>">
+                                <img src="<%- url_for(item.img_url) %>">
                             </a>
                         <% } %>
                     <% }) %>

diff --git a/layout/_partial/templates/friends-link.ejs b/layout/_partial/templates/friends-link.ejs
@@ -10,7 +10,7 @@
                 <a class="a-wrap border-box" href="<%= f?.link %>">
                     <div class="avatar border-box flex-center">
                         <i class="icon fas fa-eye-slash"></i>
-                        <img src="<%= f?.avatar %>"
+                        <img src="<%- url_for(f?.avatar) %>"
                              onerror="this.style.display='none'"
                         >
                     </div>

diff --git a/layout/_partial/templates/photo-album.ejs b/layout/_partial/templates/photo-album.ejs
@@ -1,6 +1,6 @@
 <div class="photo-album-box border-box">
     <% for (const img of theme?.photos) { %>
-        <img class="photo border-box" src="<%= img?.url %>"
+        <img class="photo border-box" src="<%- url_for(img?.url) %>"
              title="<%= img.name %>"
              onerror="this.style.display='none'"
         >

diff --git a/layout/article-content.ejs b/layout/article-content.ejs
@@ -12,7 +12,7 @@ const post_avatar = page?.avatar || theme?.base_info?.avatar
                     <div class="cover-article-title">
                         <%= page.title %>
                     </div>
-                    <img class="post-cover" src="<%= page.post_cover || page?.home_cover %>"
+                    <img class="post-cover" src="<%- url_for(page.post_cover || page?.home_cover) %>"
                          onerror="this.style.display='none'"
                     >
                 </div>
@@ -100,7 +100,7 @@ const post_avatar = page?.avatar || theme?.base_info?.avatar
                             <div class="article-prev">
                                 <a class="prev"
                                    rel="prev"
-                                   href="<%= url_for(page.prev.path) %>"
+                                   href="<%- url_for(page.prev.path) %>"
                                    title="<%= page.prev.title %>"
                                 >
                                     <span class="left arrow-icon flex-center">
@@ -117,7 +117,7 @@ const post_avatar = page?.avatar || theme?.base_info?.avatar
                             <div class="article-next">
                                 <a class="next"
                                    rel="next"
-                                   href="<%= url_for(page.next.path) %>"
+                                   href="<%- url_for(page.next.path) %>"
                                    title="<%= page.next.title %>"
                                 >
                                     <span class="title flex-center">

diff --git a/layout/home-content.ejs b/layout/home-content.ejs
@@ -21,7 +21,7 @@
                                 <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                             </div>
                         <% } %>
-                        <img class="home-cover" src="<%= post.home_cover %>"
+                        <img class="home-cover" src="<%- url_for(post.home_cover) %>"
                              onerror="this.style.display='none'"
                         >
                     </div>

diff --git a/scripts/filters/image-handle.js b/scripts/filters/image-handle.js
@@ -10,35 +10,43 @@ const isAddRootPath = (root, src) => {
   }
 }
 
+const regExpImg = /<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim
+
+hexo.extend.filter.register(
+  'before_post_render',
+  function (data) {
+    const theme = hexo.theme.config
+    data.content = data.content.replace(regExpImg, function (match, attrBegin, src, attrEnd) {
+      if (!src) return match
+      return `<img ${attrBegin} src="${isAddRootPath(theme.root, src)}" ${attrEnd}>`
+    })
+  },
+  1
+)
+
 hexo.extend.filter.register(
   'after_post_render',
   function (data) {
     const theme = hexo.theme.config
 
-    data.content = data.content.replace(
-      /<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
-      function (match, attrBegin, src, attrEnd) {
-        if (!src) return match
-        // image lazy load
-        if (theme?.lazyload?.enable === true) {
-          let hasAlt = false
-          if (attrBegin.includes('alt="')) {
-            hasAlt = true
-          }
-          return `<img ${attrBegin}
+    data.content = data.content.replace(regExpImg, function (match, attrBegin, src, attrEnd) {
+      if (!src) return match
+      // image lazy load
+      if (theme?.lazyload?.enable === true) {
+        let hasAlt = false
+        if (attrBegin.includes('alt="')) {
+          hasAlt = true
+        }
+        return `<img ${attrBegin}
                        lazyload
                        ${hasAlt ? '' : 'alt="image"'}
-                       data-src="${isAddRootPath(theme.root, src)}"
+                       data-src="${src}"
                        ${attrEnd}
                  >`
-        } else {
-          return `<img ${attrBegin}
-                       src="${isAddRootPath(theme.root, src)}"
-                       ${attrEnd}
-                 >`
-        }
+      } else {
+        return `<img ${attrBegin} src="${src}" ${attrEnd}>`
       }
-    )
+    })
   },
   1
 )