feat: 可設置首頁文章不顯示內容/description

feat: 主頁文章時間和文章頁文章時間可以配置顯示日期還是相對時間 feat: top_img 可配置 [留空（默認色）/顏色/漸變色/圖片鏈接/ false（不顯示top_img）] feat: footer可配置背景 [留空/false(默認色)/顏色/漸變色/圖片鏈接/true(跟top_img一樣)] improvement: preloader 在 pjax 下每個頁面都會加載 improvement: 修改判斷，避免用户設置2個lightbox 而導致報錯（只能設置一個） improvement: 精確時間顯示（剛剛/幾分鐘前/幾小時前/幾天前/幾個月前） improvement: 刪除不必要的語言文件和css chore: update hexo-renderer-stylus to 2.0.1
2026-04-08 12:07:06 +08:00 · 2020-09-05 17:01:21 +08:00
parent 8603db0545
commit 25b0c733dc
27 changed files with 361 additions and 275 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -144,11 +144,13 @@ error_404:
 post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
+    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: false # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
+    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字
@@ -164,6 +166,7 @@ wordcount:
 # 1: description
 # 2: both (if the description exists, it will show description, or show the auto_excerpt)
 # 3: auto_excerpt (default)
+# false: do not show the article introduction
 index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -81,19 +81,17 @@ aside:
    day: days ago

 date_suffix:
-  one_hour: Just
-  hours: hours ago
+  just: Just
+  min: minutes ago
+  hour: hours ago
  day: days ago
+  month: months ago

 donate: Donate
 share: Share
-bookmark:
-  title: Bookmark

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase Font Size
-  font_minus_title: Decrease Font Size
  translate_title: Switch Between Traditional Chinese And Simplified Chinese
  night_mode_title: Switch Between Light And Dark Mode
  back_to_top: Back To Top
@@ -108,9 +106,6 @@ copy_copyright:
  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

 Snackbar:
-  bookmark:
-    message_prev: Press
-    message_next: to bookmark this page
  chs_to_cht: Traditional Chinese Activated Manually
  cht_to_chs: Simplified Chinese Activated Manually
  day_to_night: Dark Mode Activated Manually
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -81,19 +81,17 @@ aside:
    day: days ago

 date_suffix:
-  one_hour: Just
-  hours: hours ago
+  just: Just
+  min: minutes ago
+  hour: hours ago
  day: days ago
+  month: months ago

 donate: Donate
 share: Share
-bookmark:
-  title: Bookmark

 rightside:
  readmode_title: Read Mode
-  font_plus_title: Increase Font Size
-  font_minus_title: Decrease Font Size
  translate_title: Switch Between Traditional Chinese And Simplified Chinese
  night_mode_title: Switch Between Light And Dark Mode
  back_to_top: Back To Top
@@ -108,9 +106,6 @@ copy_copyright:
  info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

 Snackbar:
-  bookmark:
-    message_prev: Press
-    message_next: to bookmark this page
  chs_to_cht: Traditional Chinese Activated Manually
  cht_to_chs: Simplified Chinese Activated Manually
  day_to_night: Dark Mode Activated Manually
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -83,19 +83,17 @@ aside:
    day: 天前

 date_suffix:
-  one_hour: 刚刚
-  hours: 小时前
+  just: 刚刚
+  min: 分钟前
+  hour: 小时前
  day: 天前
+  month: 个月前

 donate: 打赏
 share: 分享
-bookmark:
-  title: 添加书签

 rightside:
  readmode_title: 阅读模式
-  font_plus_title: 放大字体
-  font_minus_title: 缩小字体
  translate_title: 简繁转换
  night_mode_title: 浅色和深色模式转换
  back_to_top: 回到顶部
@@ -110,9 +108,6 @@ copy_copyright:
  info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 Snackbar:
-  bookmark:
-    message_prev: 按
-    message_next: 键将本页加入书签
  chs_to_cht: 你已切换为繁体
  cht_to_chs: 你已切换为简体
  day_to_night: 你已切换为深色模式
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -83,19 +83,17 @@ aside:
    day: 天前

 date_suffix:
-  one_hour: 剛剛
-  hours: 小時前
+  just: 剛剛
+  min: 分鐘前
+  hour: 小時前
  day: 天前
+  month: 個月前

 donate: 打賞
 share: 分享
-bookmark:
-  title: 新增書籤

 rightside:
  readmode_title: 閱讀模式
-  font_plus_title: 放大字型
-  font_minus_title: 縮小字型
  translate_title: 簡繁轉換
  night_mode_title: 淺色和深色模式轉換
  back_to_top: 回到頂部
@@ -110,9 +108,6 @@ copy_copyright:
  info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

 Snackbar:
-  bookmark:
-    message_prev: 按
-    message_next: 鍵將本頁加入書籤
  chs_to_cht: 你已切換為繁體
  cht_to_chs: 你已切換為簡體
  day_to_night: 你已切換為深色模式
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -33,7 +33,7 @@ div
    !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})

  .js-pjax
-    if is_home() && theme.subtitle.enable
+    if theme.subtitle.enable && is_home() && theme.index_img !== false
      include ./third-party/subtitle.pug

    include ./third-party/math/index.pug
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -10,7 +10,6 @@
 - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
 - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title

- var pageDescription = page_description()
 - var pageKeywords
 - if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') :  ([]).join(',') || page.keywords
 - else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
@@ -23,7 +22,6 @@ meta(charset='UTF-8')
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="viewport" content="width=device-width,initial-scale=1")
 title= tabTitle
-meta(name="description" content!=pageDescription)
 if pageKeywords
  meta(name="keywords" content=pageKeywords)
 meta(name="author" content=pageAuthor)
@@ -35,6 +33,9 @@ if theme.disable_baidu_transformation
  meta(http-equiv="Cache-Control" content="no-transform")
  meta(http-equiv="Cache-Control" content="no-siteapp")

+//- Open_Graph
+include ./head/Open_Graph.pug
+
 !=favicon_tag(theme.favicon || config.favicon)
 link(rel="canonical" href=urlNoIndex())

@@ -44,14 +45,6 @@ link(rel="canonical" href=urlNoIndex())
 //- 網站驗證
 !=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})

-//- Open_Graph
-include ./head/Open_Graph.pug
-
-if theme.facebook_comments.app_id
-  meta(property="fb:app_id" content=theme.facebook_comments.app_id )
-if theme.facebook_comments.user_id
-  meta(property="fb:admins" content=theme.facebook_comments.user_id)
-
 //- PWA
 if (theme.pwa && theme.pwa.enable)
  !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
--- a/layout/includes/head/Open_Graph.pug
+++ b/layout/includes/head/Open_Graph.pug
@@ -1,12 +1,11 @@
- var contentType = is_post() ? 'article' : 'website'
-
 if theme.Open_Graph_meta
-  meta(property="og:type" content=contentType)
-  meta(property="og:title" content=pageTitle)
-  meta(property="og:url" content=urlNoIndex())
-  meta(property="og:site_name" content=config.title)
-  meta(property="og:description" content!=pageDescription)
-  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
-  meta(property="article:published_time" content=date_xml(page.date))
-  meta(property="article:modified_time" content=date_xml(page.updated))
-  meta(name="twitter:card" content="summary")
+  - let contentType = is_post() ? 'article' : 'website'
+  - let metaImage = full_url_for(page.cover || theme.avatar.img)
+  - let fb_appId = theme.facebook_comments.app_id || ''
+  - let fb_admins = theme.facebook_comments.user_id || ''
+
+  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
+
+else
+  meta(name="description" content=page_description())
+
--- a/layout/includes/head/config.pug
+++ b/layout/includes/head/config.pug
@@ -61,10 +61,6 @@
  let Snackbar = 'undefined';
  if (theme.snackbar && theme.snackbar.enable) {
    Snackbar = JSON.stringify({
-      bookmark: {
-        message_prev: _p("Snackbar.bookmark.message_prev"),
-        message_next: _p("Snackbar.bookmark.message_next")
-      },
      chs_to_cht: _p("Snackbar.chs_to_cht"),
      cht_to_chs: _p("Snackbar.cht_to_chs"),
      day_to_night: _p("Snackbar.day_to_night"),
@@ -94,12 +90,6 @@
    })
  }

-  let date_suffix = JSON.stringify({
-    one_hour: _p("date_suffix.one_hour"),
-    hours: _p("date_suffix.hours"),
-    day: _p('date_suffix.day')
-  })
-
 script.
  var GLOBAL_CONFIG = { 
    root: '!{config.root}',
@@ -114,16 +104,21 @@ script.
      error: '!{_p("copy.error")}',
      noSupport: '!{_p("copy.noSupport")}'
    },
-    bookmark: {
-      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
-      message_next: '!{_p("Snackbar.bookmark.message_next")}'
+    relativeDate: {
+      homepage: !{theme.post_meta.page.date_format === 'relative'},
+      post: !{theme.post_meta.post.date_format === 'relative'}
    },
    runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
-    date_suffix: !{date_suffix},
+    date_suffix: {
+      just: '!{_p("date_suffix.just")}',
+      min: '!{_p("date_suffix.min")}',
+      hour: '!{_p("date_suffix.hour")}',
+      day: '!{_p("date_suffix.day")}',
+      month: '!{_p("date_suffix.month")}'
+    },
    copyright: !{copyright},
    ClickShowText: !{ClickShowText},
-    medium_zoom: !{theme.medium_zoom},
-    fancybox: !{theme.fancybox},
+    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
    Snackbar: !{Snackbar},
    justifiedGallery: {
      js: '!{theme.CDN.justifiedGallery_js}',
@@ -144,7 +139,7 @@ script.
        expiry: now.getTime() + expiryDay,
      }
      localStorage.setItem(key, JSON.stringify(item))
-      },
+    },

    get: function getWithExpiry(key) {
      const itemStr = localStorage.getItem(key)
--- a/layout/includes/head/noscript.pug
+++ b/layout/includes/head/noscript.pug
@@ -1,9 +1,14 @@
 noscript. 
  <style type="text/css">
-  #nav {
-    opacity: 1
-  }
-  .justified-gallery img {
-    opacity: 1
-  }
+    #nav {
+      opacity: 1
+    }
+    .justified-gallery img {
+      opacity: 1
+    }
+
+    #recent-posts time,
+    #post-meta time {
+      display: inline !important
+    }
  </style>
--- a/layout/includes/header/index.pug
+++ b/layout/includes/header/index.pug
@@ -1,43 +1,60 @@
-if is_home()
-  - var top_img = theme.index_img || theme.default_top_img
-else if is_post()
-  - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
-else if is_archive()
-  - var top_img = theme.archive_img || theme.default_top_img
-else if is_tag()
-  - var top_img = theme.tag_img || theme.default_top_img
-else if is_category()
-  - var top_img = theme.category_img || theme.default_top_img
+if page.top_img !== false
+  if is_post()
+    - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
+  else if is_page()
+    - var 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)
+  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)
+  else if is_home()
+    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
+  else if is_archive()
+    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
+  else
+    - var top_img = page.top_img || theme.default_top_img
+
+  if theme.douban
+    - var doubanExist = false
+    if is_current('/movies/', [strict])
+      - var top_img = theme.douban.movies_img !== false ? theme.douban.movies_img || theme.default_top_img : false
+      - doubanExist = true
+    else if is_current('/books/', [strict])
+      - var top_img = theme.douban.books_img !== false ? theme.douban.books_img || theme.default_top_img : false
+      - doubanExist = true
+    else if is_current('/games/', [strict])
+      - var top_img = theme.douban.games_img !== false ? theme.douban.games_img || theme.default_top_img : false
+      - doubanExist = true
+
+  if top_img !== false
+    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url(${url_for(top_img)})` : `background: ${top_img}`
+    - var bg_img = top_img ? imgSource : ''
+    - var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+    - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
+  else
+    - var isHomeClass = 'no-top-img'
 else
-  - var top_img = page.top_img || theme.default_top_img
-
-if theme.douban
-  if is_current('/movies/', [strict])
-    - var top_img = theme.douban.movies_img || theme.default_top_img
-  else if is_current('/books/', [strict])
-    - var top_img = theme.douban.books_img || theme.default_top_img
-  else if is_current('/games/', [strict])
-    - var top_img = theme.douban.games_img || theme.default_top_img
-
- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+  - var top_img = false
+  - var isHomeClass = 'no-top-img'

 header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
-  if is_home()
-    #site-info
-      h1#site_title=site_title
-      #site_subtitle
-        span#subtitle
-      if(theme.social)
-        #site_social_icons
-          !=fragment_cache('social', function(){return partial('includes/header/social')})
-    #scroll_down
-      i.fas.fa-angle-down.scroll-down-effects
-  else if is_post()
-    include ./post-info.pug 
-  else
-    #page_site-info
-      h1#site_title=site_title
+  if top_img !== false
+    if is_post()
+      include ./post-info.pug
+    else if is_home() 
+      #site-info
+        h1#site_title=site_title
+        #site_subtitle
+          span#subtitle
+        if(theme.social)
+          #site_social_icons
+            !=fragment_cache('social', function(){return partial('includes/header/social')})
+      #scroll_down
+        i.fas.fa-angle-down.scroll-down-effects
+    else
+      #page_site-info
+        h1#site_title=site_title
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@@ -33,9 +33,16 @@ html(lang=config.language data-theme=theme.display_mode)
          else
            block content
      
-      - var footer_bg = theme.footer_bg == false ? '' : bg_img
-      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
-      footer#footer(style=footer_bg data-type=is_bg)
+      - var footerBg = theme.footer_bg
+      if (footerBg)
+        if (footerBg === true)
+          - var footer_bg = bg_img
+        else
+          - var footer_bg = theme.footer_bg.indexOf('/') !== -1 ? `background-image: url(${url_for(footerBg)})` : `background: ${footerBg}`
+      else
+        - var footer_bg = ''
+
+      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache:theme.fragment_cache})

    include ./rightside.pug
--- a/layout/includes/loading/loading-js.pug
+++ b/layout/includes/loading/loading-js.pug
@@ -1,6 +1,13 @@
 script.
-  var endLoading = function () {
-    document.body.style.overflow = 'auto';
-    document.getElementById('loading-box').classList.add("loaded")
+  var preloader = {
+    endLoading: () => {
+      document.body.style.overflow = 'auto';
+      document.getElementById('loading-box').classList.add("loaded")
+    },
+    initLoading: () => {
+      document.body.style.overflow = '';
+      document.getElementById('loading-box').classList.remove("loaded")
+
+    }
  }
-  window.addEventListener('load',endLoading)
+  window.addEventListener('load',()=> {preloader.endLoading()})
--- a/layout/includes/mixins/post-ui.pug
+++ b/layout/includes/mixins/post-ui.pug
@@ -57,21 +57,24 @@ mixin postUI(posts)
                  span.article-meta__link #[='•']

        //- Display the article introduction on homepage
-        if theme.index_post_content.method == 1
-          .content!= article.description
-        else if theme.index_post_content.method == 2
-          if article.description
+        case theme.index_post_content.method
+          when false
+            - break
+          when 1
            .content!= article.description
-          else
+          when 2
+            if article.description
+              .content!= article.description
+            else
+              - const content = strip_html(article.content)
+              - let expert = content.substring(0, theme.index_post_content.length) 
+              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
+              .content!= expert
+          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length) 
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert
-        else
-          - const content = strip_html(article.content)
-          - let expert = content.substring(0, theme.index_post_content.length) 
-          - content.length > theme.index_post_content.length ? expert += ' ...' : ''
-          .content!= expert

    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -52,10 +52,14 @@ script.

    // prismjs
    typeof Prism === 'object' && Prism.highlightAll()
+
+    typeof preloader === 'object' && preloader.endLoading()
  })


  document.addEventListener('pjax:send', function () {
+    typeof preloader === 'object' && preloader.initLoading()
+    
    if (window.aplayers) {
      for (let i = 0; i < window.aplayers.length; i++) {
        if (!window.aplayers[i].options.fixed) {
--- a/layout/includes/widget/card_recent_post.pug
+++ b/layout/includes/widget/card_recent_post.pug
@@ -7,18 +7,18 @@
      - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
      - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
      - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
-        .aside-list-item
-          - let link = article.link || article.path
-          - let title = article.title || _p('no_title')
-          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
-          - let post_cover = article.cover
+        - 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
            a.thumbnail(href=url_for(link) title=title)
              if theme.lazyload.enable
                img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
              else
                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-          .content(class=no_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)]
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -25,10 +25,12 @@ block content
        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
  else
    #page
-      if theme.douban && theme.douban.meta
-        if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
-          meta(name="referrer" content="no-referrer")
-      #article-container!= page.content
+      if theme.douban && theme.douban.meta && doubanExist
+        meta(name="referrer" content="no-referrer")
+      #article-container
+        if top_img === false
+          h1.page-title= page.title
+        != page.content
      if page.comments !== false && theme.comments && theme.comments.use
        - var commentsJsLoad = true
        !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -2,6 +2,9 @@ extends includes/layout.pug

 block content
  article#post(class="")
+    if top_img === false
+      include includes/header/post-info.pug
+
    #article-container.post-content!=page.content
    include includes/post/post-copyright.pug
    .tag_share
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hexo-theme-butterfly",
-  "version": "3.1.0",
+  "version": "3.2.0-b1",
  "description": "A Simple and Card UI Design theme for Hexo",
  "main": "package.json",
  "scripts": {
@@ -23,7 +23,7 @@
    "email": "wong@jerryc.me"
  },
  "dependencies": {
-    "hexo-renderer-stylus": "^2.0.0",
+    "hexo-renderer-stylus": "^2.0.1",
    "hexo-renderer-pug": "^1.0.0"
  },
  "homepage": "https://demo.jerryc.me/",
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -150,6 +150,7 @@

        & > time,
        & > .name
+          display: block
          color: $theme-meta-color
          font-size: 85%

@@ -164,13 +165,8 @@
          &:hover
            color: $text-hover

-  .card-recent-post
-    .thumbnail
-      border-radius: 0 !important
-
-    .no-aside-cover
-      title
-        height: auto
+      &.no-cover
+        min-height: 4.4em

  .card-archives ul.card-archive-list,
  .card-categories ul.card-category-list
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -102,66 +102,101 @@
      background-color: alpha($dark-black, .5)
      content: ''

+  &.no-top-img
+    margin-bottom: .5rem
+    height: 60px
+    background: 0
+
+    #nav
+      background: rgba(255, 255, 255, .8)
+      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
+
+      a
+        color: var(--font-color)
+        text-shadow: none
+
+  #post-info
+    position: absolute
+    bottom: 1.5rem
+    padding: 0 8%
+    width: 100%
+    text-align: left
+
+    +maxWidth768()
+      bottom: 1.1rem
+      padding: 0 1.1rem
+
+#post-info
+  #post-title
+    margin-bottom: .4rem
+    font-size: 2.15em
+
+    +maxWidth768()
+      font-size: 1.72em
+
+    .posttitle
+      @extend .limit-more-line
+      color: var(--white)
+      line-height: 1.5
+      -webkit-line-clamp: 3
+
+  #post-meta
+    color: var(--light-grey)
+    font-size: 95%
+
+    +minWidth768()
+      > .meta-secondline
+        > span:first-child
+          display: none
+
+    +maxWidth768()
+      font-size: 90%
+
+      > .meta-firstline,
+      > .meta-secondline
+        display: inline
+
+    .post-meta
+      &-separator
+        margin: 0 .25rem
+
+      &-icon
+        margin-right: .2rem
+
+      &-label
+        if hexo-config('post_meta.post.label')
+          margin-right: .2rem
+        else
+          display: none
+
+    a
+      color: var(--light-grey)
+      transition: all .3s ease-out
+
+      &:hover
+        color: $text-hover
+        text-decoration: underline
+
+    if hexo-config('post_meta.post.date_format') == 'relative'
+      time
+        display: none
+
+// for not top_img
+#post
+  & > #post-info
+    margin-bottom: 1.5rem
+
+    .posttitle
+      padding-bottom: .2rem
+      border-bottom: 1px solid var(--light-grey)
+      color: var(--text-highlight-color)
+
+[data-theme='light']
+  #post
    #post-info
-      position: absolute
-      bottom: 1.5rem
-      padding: 0 8%
-      width: 100%
-      text-align: left
-
-      +maxWidth768()
-        bottom: 1.1rem
-        padding: 0 1.1rem
-
-      #post-title
-        margin-bottom: .4rem
-        font-size: 2.15em
-
-        +maxWidth768()
-          font-size: 1.72em
-
-        .posttitle
-          @extend .limit-more-line
-          color: var(--white)
-          line-height: 1.5
-          -webkit-line-clamp: 3
-
-      #post-meta
-        color: var(--light-grey)
-        font-size: 95%
-
-        +minWidth768()
-          > .meta-secondline
-            > span:first-child
-              display: none
-
-        +maxWidth768()
-          font-size: 90%
-
-          > .meta-firstline,
-          > .meta-secondline
-            display: inline
-
-        .post-meta
-          &-separator
-            margin: 0 .25rem
-
-          &-icon
-            margin-right: .2rem
-
-          &-label
-            if hexo-config('post_meta.post.label')
-              margin-right: .2rem
-            else
-              display: none
-
-        a
-          color: var(--light-grey)
-          transition: all .3s ease-out
-
-          &:hover
-            color: $text-hover
-            text-decoration: underline
+      #post-meta,
+      #post-meta a
+        color: #78818a

 // css hack
 // all browser in ios and safari in all apple device
@@ -210,7 +245,7 @@ _:future,

  &.fixed
    position: fixed
-    top: -62px
+    top: -60px
    z-index: 91
    background: rgba(255, 255, 255, .8)
    box-shadow: 0 5px 6px -5px alpha($grey, .6)
--- a/source/css/_layout/loading.styl
+++ b/source/css/_layout/loading.styl
@@ -5,7 +5,6 @@ if hexo-config('preloader')
    width: 50%
    height: 100%
    background-color: var(--preloader-bg)
-    transition: all .5s

  #loading-box
    .loading-left-bg
@@ -53,9 +52,11 @@ if hexo-config('preloader')

    &.loaded
      .loading-left-bg
+        transition: all .5s
        transform: translate(-100%, 0)

      .loading-right-bg
+        transition: all .5s
        transform: translate(100%, 0)

      .spinner-box
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -291,6 +291,9 @@ img
  iframe
    margin: 0 0 1rem

+  & > .page-title
+    margin-top: .4rem
+
  .post-outdate-notice
    position: relative
    margin: 0 0 1rem
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -29,20 +29,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    --sidebar-icon-color: alpha(#FFFFFF, .6)

    // 網站背景，footer背景
-    #web_bg[data-type=color],
-    #footer[data-type=color]
+    #web_bg[data-type=color]
      background: darken(#121212, 2)

-    #web_bg[data-type=photo]:before,
-    #footer[data-type=photo]:before
+    #web_bg[data-type=photo]:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

-    #page-header
-      background-color: #121212
+    #footer
+      &:before
+        background-color: alpha($dark-black, .7)

    #article-container
      code
@@ -67,10 +66,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
        background-color: alpha($dark-black, .7)
        content: ''

-      & > #nav
-        &.fixed
-          background: alpha(#121212, .8)
-          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+      & > #nav.fixed,
+      &.no-top-img #nav
+        background: alpha(#121212, .8)
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

    // 代碼框
    #article-container
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -107,6 +107,10 @@
        .fa-angle-right
          margin: 0 .2rem

+        if hexo-config('post_meta.page.date_format') == 'relative'
+          time
+            display: none
+
        a
          color: $theme-meta-color

--- a/source/js/main.js
+++ b/source/js/main.js
@@ -159,14 +159,18 @@ $(function () {
    })

    const mql = window.matchMedia('(max-width: 1024px)')
-    mql.addListener((ev) => {
+    const $toggleSidebar = $('#toggle-sidebar')
+    const matchFn = (ev) => {
      if (ev.matches) {
        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
      } else {
-        if ($('#toggle-sidebar').hasClass('on')) openSidebar()
+        if ($toggleSidebar.hasClass('on')) openSidebar()
        if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
      }
-    })
+    }
+
+    mql.addListener(matchFn)
+    document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) })

    // toc元素點擊
    $sidebar.find('.toc-link').on('click', function (e) {
@@ -345,9 +349,7 @@ $(function () {
 * fancybox和 mediumZoom
 */
  const addLightBox = function () {
-    const isMediumZoom = GLOBAL_CONFIG.medium_zoom
-    const isFancybox = GLOBAL_CONFIG.fancybox
-    if (isFancybox) {
+    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
      const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
      images.each(function (i, o) {
        const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src')
@@ -363,7 +365,7 @@ $(function () {
        buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
        hash: false
      })
-    } else if (isMediumZoom) {
+    } else {
      const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
      zoom.on('open', function (event) {
        const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
@@ -425,14 +427,18 @@ $(function () {
 *  toc
 */
  const tocFn = function () {
-    $('.toc-child').hide()
+    const $sidebar = $('#sidebar')
+    const $tocChild = $sidebar.find('.toc-child')
+    const $tocLink = $sidebar.find('.toc-link')
+    const $article = $('#article-container')
+
+    $tocChild.hide()

    // main of scroll
    $(window).scroll(btf.throttle(function (event) {
      const currentTop = $(this).scrollTop()
      scrollPercent(currentTop)
      findHeadPosition(currentTop)
-      autoScrollToc(currentTop)
    }, 100))

    // expand toc-item
@@ -444,18 +450,17 @@ $(function () {
    }

    const scrollPercent = function (currentTop) {
-      const $dom = $('#article-container')
-      const docHeight = $dom.height()
+      const docHeight = $article.height()
      const winHeight = $(window).height()
-      const headerHeight = $dom.offset().top
+      const headerHeight = $article.offset().top
      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
      const scrollPercent = (currentTop - headerHeight) / (contentMath)
      const scrollPercentRounded = Math.round(scrollPercent * 100)
      const percentage = (scrollPercentRounded > 100) ? 100
        : (scrollPercentRounded <= 0) ? 0
          : scrollPercentRounded
-      $('#sidebar .progress-num').text(percentage)
-      $('#sidebar .sidebar-toc__progress-bar').animate({
+      $sidebar.find('.progress-num').text(percentage)
+      $sidebar.find('.sidebar-toc__progress-bar').animate({
        width: percentage + '%'
      }, 100)
    }
@@ -468,19 +473,32 @@ $(function () {
      }
    }

+    const autoScrollToc = function (currentTop, item) {
+      const activePosition = item.offset().top
+      const $tocContent = $sidebar.find('.sidebar-toc__content')
+      const sidebarScrollTop = $tocContent.scrollTop()
+      if (activePosition > (currentTop + $(window).height() - 100)) {
+        $tocContent.scrollTop(sidebarScrollTop + 100)
+      }
+      if (activePosition < currentTop + 100) {
+        $tocContent.scrollTop(sidebarScrollTop - 100)
+      }
+    }
+
    // find head position & add active class
    // DOM Hierarchy:
    // ol.toc > (li.toc-item, ...)
    // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
    const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5
+    const list = $article.find('h1,h2,h3,h4,h5,h6')
+
    const findHeadPosition = function (top) {
    // assume that we are not in the post page if no TOC link be found,
    // thus no need to update the status
-      if ($('.toc-link').length === 0) {
+      if ($tocLink.length === 0) {
        return false
      }

-      const list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
      let currentId = ''
      list.each(function () {
        const head = $(this)
@@ -491,18 +509,19 @@ $(function () {
      })

      if (currentId === '') {
-        $('.toc-link').removeClass('active')
-        $('.toc-child').hide()
+        $tocLink.removeClass('active')
+        $tocChild.hide()
      }

-      const currentActive = $('.toc-link.active')
+      const currentActive = $tocLink.filter('.active')
      if (currentId && currentActive.attr('href') !== currentId) {
        if (isAnchor) updateAnchor(currentId)

-        $('.toc-link').removeClass('active')
+        $tocLink.removeClass('active')

-        const _this = $('.toc-link[href="' + currentId + '"]')
+        const _this = $tocLink.filter('[href="' + currentId + '"]')
        _this.addClass('active')
+        autoScrollToc(top, _this)

        const parents = _this.parents('.toc-child')
        // Returned list is in reverse order of the DOM elements
@@ -518,19 +537,6 @@ $(function () {
          .find('.toc-child').hide()
      }
    }
-
-    const autoScrollToc = function (currentTop) {
-      if ($('.toc-link').hasClass('active')) {
-        const activePosition = $('.active').offset().top
-        const sidebarScrollTop = $('#sidebar .sidebar-toc__content').scrollTop()
-        if (activePosition > (currentTop + $(window).height() - 100)) {
-          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop + 100)
-        }
-        if (activePosition < currentTop + 100) {
-          $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrollTop - 100)
-        }
-      }
-    }
  }

  /**
@@ -766,6 +772,14 @@ $(function () {
    })
  }

+  const relativeDate = function (selector) {
+    selector.each((i, o) => {
+      const $this = $(o)
+      const timeVal = $this.attr('datetime')
+      $this.text(btf.diffDate(timeVal, true)).css('display', 'inline')
+    })
+  }
+
  const unRefreshFn = function () {
    $(window).on('resize', function () {
      if (window.innerWidth < 768) adjustMenu(0)
@@ -787,6 +801,12 @@ $(function () {
      toggleSidebar()
      GLOBAL_CONFIG_SITE.isSidebar && tocFn()
      GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
+      GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
+    } else {
+      GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time'))
+      GLOBAL_CONFIG.runtime && addRuntime()
+      addLastPushDate()
+      toggleCardCategory()
    }

    sidebarFn()
@@ -794,15 +814,12 @@ $(function () {
    GLOBAL_CONFIG.highlight && addHighlightTool()
    GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
    runJustifiedGallery()
-    addLightBox()
+    GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
    scrollFn()
-    GLOBAL_CONFIG.runtime && addRuntime()
-    addLastPushDate()
    addTableWrap()
    clickFnOfTagHide()
    tabsFn.clickFnOfTabs()
    tabsFn.backToTop()
-    toggleCardCategory()
    switchComments()
  }

--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -102,20 +102,33 @@ var btf = {
    const dateNow = new Date()
    const datePost = new Date(d)
    const dateDiff = dateNow.getTime() - datePost.getTime()
-    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
+    const minute = 1000 * 60
+    const hour = minute * 60
+    const day = hour * 24
+    const month = day * 30
+
    let result
    if (more) {
-      if (dateDiff <= 3600000) { // < 1 hour
-        result = GLOBAL_CONFIG.date_suffix.one_hour
-      } else if (dateDiff < 3600000 * 24) { // 1 hour < x < 24 hours
-        result = Math.floor(dateDiff / 3600000) + ' ' + GLOBAL_CONFIG.date_suffix.hours
-      } else if (dayDiff >= 1 || dayDiff < 365) { // 1 day < x < 365 days
-        result = dayDiff + ' ' + GLOBAL_CONFIG.date_suffix.day
-      } else { // > 365 days
-        result = d.toLocaleDateString().replace(/\//g, '-')
+      const monthCount = dateDiff / month
+      const dayCount = dateDiff / day
+      const hourCount = dateDiff / hour
+      const minuteCount = dateDiff / minute
+
+      if (monthCount > 12) {
+        result = datePost.toLocaleDateString().replace(/\//g, '-')
+      } else if (monthCount >= 1) {
+        result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
+      } else if (dayCount >= 1) {
+        result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
+      } else if (hourCount >= 1) {
+        result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
+      } else if (minuteCount >= 1) {
+        result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
+      } else {
+        result = GLOBAL_CONFIG.date_suffix.just
      }
    } else {
-      result = dayDiff
+      result = parseInt(dateDiff / day)
    }
    return result
  },