fix: 修復 pagination UI 顯示異常的 bug

fix: 修復 footer_img 配置不生效的 bug
improvement: 優化 背景url 的判斷
feat: 背景圖片配置不再需要添加 url()

_config.yml

@@ -90,8 +90,7 @@ category_per_img:
 footer_img: false
 
 # Website Background
-# Can set it to color or image
-# The formal of image: url(http://xxxxxx.com/xxx.jpg)
+# Can set it to color or image url
 background:
 
 cover:

layout/includes/header/index.pug

@@ -1,43 +1,41 @@
+-
+  const returnTopImg = img => img !== false ? img || theme.default_top_img : false
+  const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+  var top_img = false
+  let headerClassName = 'not-top-img'
+  var bg_img = ''
+
 if !theme.disable_top_img && page.top_img !== false
   if is_post()
-    - var top_img = page.top_img || page.cover || theme.default_top_img
+    - top_img = page.top_img || page.cover || theme.default_top_img
   else if is_page()
-    - var top_img = page.top_img || theme.default_top_img
+    - top_img = page.top_img || theme.default_top_img
   else if is_tag()
-    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
-    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
+    - top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
+    - top_img = top_img || returnTopImg(theme.tag_img)
   else if is_category()
-    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
-    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
+    - top_img = theme.category_per_img && theme.category_per_img[page.category]
+    - top_img = top_img || returnTopImg(theme.category_img)
   else if is_home()
-    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
+    - top_img = returnTopImg(theme.index_img)
   else if is_archive()
-    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
+    - top_img = returnTopImg(theme.archive_img)
   else
-    - var top_img = page.top_img || theme.default_top_img
+    - top_img = page.top_img || theme.default_top_img
 
   if top_img !== false
-    - var imgSource = top_img && isImgOrUrl(top_img) ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
-    - var bg_img = top_img ? imgSource : ''
-    - var site_title = page.title || page.tag || page.category || config.title
-    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
-    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
-  else
-    - var isHomeClass = 'not-top-img'
-else
-  - var top_img = false
-  - var isHomeClass = 'not-top-img'
-
-- const isFixedClass = theme.nav.fixed ? ' fixed' : ''
+    - bg_img = getBgPath(top_img)
+    - headerClassName = is_home() ? 'full_page' : 'not-home-page'
+    - headerClassName = is_post() ? 'post-bg' : headerClassName
 
-header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
+header#page-header(class=`${headerClassName+isFixedClass}` style=bg_img)
   !=partial('includes/header/nav', {}, {cache: true})
   if top_img !== false
     if is_post()
       include ./post-info.pug
     else if is_home()
       #site-info
-        h1#site-title=site_title
+        h1#site-title=config.title
         if theme.subtitle.enable
           - var loadSubJs = true
           #site-subtitle
@@ -49,4 +47,4 @@ header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
         i.fas.fa-angle-down.scroll-down-effects
     else
       #page-site-info
-        h1#site-title=site_title
+        h1#site-title=page.title || page.tag || page.category

layout/includes/layout.pug

@@ -13,7 +13,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
-      #web_bg
+      #web_bg(style=getBgPath(theme.background))
       
     !=partial('includes/sidebar', {}, {cache: true})
 
@@ -28,15 +28,8 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
           if theme.aside.enable && page.aside !== false
             include widget/index.pug
 
-      - var footerBg = theme.footer_img
-      if (footerBg)
-        if (footerBg === true)
-          - var footer_bg = bg_img
-        else
-          - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
-      else
-        - var footer_bg = ''
-
+      - const footerBg = theme.footer_img
+      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
       footer#footer(style=footer_bg)
         !=partial('includes/footer', {}, {cache: true})
 

scripts/helpers/page.js

@@ -87,7 +87,18 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
   return loop(menu) || defaultTitle
 })
 
-hexo.extend.helper.register('isImgOrUrl', function (path) {
-  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
-  return path.includes('//') || imgTestReg.test(path)
+hexo.extend.helper.register('getBgPath', function (path) {
+  if (!path) return ''
+
+  const absoluteUrlPattern = /^(?:[a-z][a-z\d+.-]*:)?\/\//i
+  const relativeUrlPattern = /^(\.\/|\.\.\/|\/|[^/]+\/).*$/
+  const colorPattern = /^(#|rgb|rgba|hsl|hsla|linear-gradient|radial-gradient)/i
+
+  if (colorPattern.test(path)) {
+    return `background-color: ${path};`
+  } else if (absoluteUrlPattern.test(path) || relativeUrlPattern.test(path)) {
+    return `background-image: url(${path});`
+  } else {
+    return `background: ${path};`
+  }
 })

source/css/_global/index.styl

@@ -75,13 +75,12 @@ body
 input::placeholder
   color: var(--font-color)
 
-if $web-bg
+if hexo-config('background')
   #web_bg
     position: fixed
     z-index: -999
     width: 100%
     height: 100%
-    background: $web-bg
     background-attachment: local
     background-position: center
     background-size: cover

source/css/_layout/pagination.styl

@@ -38,6 +38,7 @@
   .next-post
     @extend .postImgHover
     position: relative
+    display: block
     overflow: hidden
     width: 50%
     height: 150px

source/css/var.styl

@@ -34,7 +34,6 @@ $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.gl
 $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
 $font-color = #1F2D3D
 $text-line-height = 2
-$web-bg = hexo-config('background') && unquote(hexo-config('background'))
 $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
 $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
 // Global color & SVG