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

_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

languages/default.yml

@@ -81,19 +81,17 @@ aside:
     day: days ago
 
 date_suffix:
-  one_hour: Just
+  just: Just
-  hours: hours ago
+  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

languages/en.yml

@@ -81,19 +81,17 @@ aside:
     day: days ago
 
 date_suffix:
-  one_hour: Just
+  just: Just
-  hours: hours ago
+  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

languages/zh-CN.yml

@@ -83,19 +83,17 @@ aside:
     day: 天前
 
 date_suffix:
-  one_hour: 刚刚
+  just: 刚刚
-  hours: 小时前
+  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: 你已切换为深色模式

languages/zh-TW.yml

@@ -83,19 +83,17 @@ aside:
     day: 天前
 
 date_suffix:
-  one_hour: 剛剛
+  just: 剛剛
-  hours: 小時前
+  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: 你已切換為深色模式

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

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})

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)
+  - let contentType = is_post() ? 'article' : 'website'
-  meta(property="og:title" content=pageTitle)
+  - let metaImage = full_url_for(page.cover || theme.avatar.img)
-  meta(property="og:url" content=urlNoIndex())
+  - let fb_appId = theme.facebook_comments.app_id || ''
-  meta(property="og:site_name" content=config.title)
+  - let fb_admins = theme.facebook_comments.user_id || ''
-  meta(property="og:description" content!=pageDescription)
+
-  meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
+  != open_graph({type: contentType, image: metaImage, fb_admins: fb_admins, fb_app_id: fb_appId})
-  meta(property="article:published_time" content=date_xml(page.date))
+
-  meta(property="article:modified_time" content=date_xml(page.updated))
+else
-  meta(name="twitter:card" content="summary")
+  meta(name="description" content=page_description())
+

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: {
+    relativeDate: {
-      message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
+      homepage: !{theme.post_meta.page.date_format === 'relative'},
-      message_next: '!{_p("Snackbar.bookmark.message_next")}'
+      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},
+    lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
-    fancybox: !{theme.fancybox},
     Snackbar: !{Snackbar},
     justifiedGallery: {
       js: '!{theme.CDN.justifiedGallery_js}',

layout/includes/head/noscript.pug

@@ -6,4 +6,9 @@ noscript.
     .justified-gallery img {
       opacity: 1
     }
+
+    #recent-posts time,
+    #post-meta time {
+      display: inline !important
+    }
   </style>

layout/includes/header/index.pug

@@ -1,32 +1,51 @@
-if is_home()
+if page.top_img !== false
-  - var top_img = theme.index_img || theme.default_top_img
+  if is_post()
-else if is_post()
     - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
-else if is_archive()
+  else if is_page()
-  - var top_img = theme.archive_img || theme.default_top_img
+    - var top_img = page.top_img || theme.default_top_img
-else if is_tag()
+  else if is_tag()
-  - var top_img = theme.tag_img || theme.default_top_img
+    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
-else if is_category()
+    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
-  - var top_img = theme.category_img || theme.default_top_img
+  else if is_category()
-else
+    - 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
+  if theme.douban
+    - var doubanExist = false
     if is_current('/movies/', [strict])
-    - var top_img = theme.douban.movies_img || theme.default_top_img
+      - 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 || theme.default_top_img
+      - 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 || theme.default_top_img
+      - var top_img = theme.douban.games_img !== false ? theme.douban.games_img || theme.default_top_img : false
+      - doubanExist = true
 
-- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
+  if top_img !== false
-- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url(${url_for(top_img)})` : `background: ${top_img}`
-- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+    - var bg_img = top_img ? imgSource : ''
-- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+    - 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 = 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()
+  if top_img !== false
+    if is_post()
+      include ./post-info.pug
+    else if is_home() 
       #site-info
         h1#site_title=site_title
         #site_subtitle
@@ -36,8 +55,6 @@ header#page-header(class=isHomeClass style=bg_img)
             !=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

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 footerBg = theme.footer_bg
-      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+      if (footerBg)
-      footer#footer(style=footer_bg data-type=is_bg)
+        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

layout/includes/loading/loading-js.pug

@@ -1,6 +1,13 @@
 script.
-  var endLoading = function () {
+  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()})

layout/includes/mixins/post-ui.pug

@@ -57,9 +57,12 @@ mixin postUI(posts)
                   span.article-meta__link #[='•']
 
         //- Display the article introduction on homepage
-        if theme.index_post_content.method == 1
+        case theme.index_post_content.method
+          when false
+            - break
+          when 1
             .content!= article.description
-        else if theme.index_post_content.method == 2
+          when 2
             if article.description
               .content!= article.description
             else
@@ -67,7 +70,7 @@ mixin postUI(posts)
               - let expert = content.substring(0, theme.index_post_content.length) 
               - content.length > theme.index_post_content.length ? expert += ' ...' : ''
               .content!= expert
-        else
+          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 += ' ...' : ''

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) {

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 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)]

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 theme.douban && theme.douban.meta && doubanExist
-        if (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
         meta(name="referrer" content="no-referrer")
-      #article-container!= page.content
+      #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})

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

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/",

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
+      &.no-cover
-    .thumbnail
+        min-height: 4.4em
-      border-radius: 0 !important
-
-    .no-aside-cover
-      title
-        height: auto
 
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list

source/css/_layout/head.styl

@@ -102,6 +102,19 @@
       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
@@ -113,6 +126,7 @@
       bottom: 1.1rem
       padding: 0 1.1rem
 
+#post-info
   #post-title
     margin-bottom: .4rem
     font-size: 2.15em
@@ -163,6 +177,27 @@
         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
+      #post-meta,
+      #post-meta a
+        color: #78818a
+
 // css hack
 // all browser in ios and safari in all apple device
 _::-webkit-full-page-media,
@@ -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)

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

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

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],
+    #web_bg[data-type=color]
-    #footer[data-type=color]
       background: darken(#121212, 2)
 
-    #web_bg[data-type=photo]:before,
+    #web_bg[data-type=photo]:before
-    #footer[data-type=photo]:before
       position: absolute
       width: 100%
       height: 100%
       background-color: alpha($dark-black, .7)
       content: ''
 
-    #page-header
+    #footer
-      background-color: #121212
+      &:before
+        background-color: alpha($dark-black, .7)
 
     #article-container
       code
@@ -67,8 +66,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         background-color: alpha($dark-black, .7)
         content: ''
 
-      & > #nav
+      & > #nav.fixed,
-        &.fixed
+      &.no-top-img #nav
         background: alpha(#121212, .8)
         box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
 

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
 

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
+    if (GLOBAL_CONFIG.lightbox === 'fancybox') {
-    const isFancybox = GLOBAL_CONFIG.fancybox
-    if (isFancybox) {
       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 = $article.height()
-      const docHeight = $dom.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.find('.progress-num').text(percentage)
-      $('#sidebar .sidebar-toc__progress-bar').animate({
+      $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')
+        $tocLink.removeClass('active')
-        $('.toc-child').hide()
+        $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()
   }
 

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
+      const monthCount = dateDiff / month
-        result = GLOBAL_CONFIG.date_suffix.one_hour
+      const dayCount = dateDiff / day
-      } else if (dateDiff < 3600000 * 24) { // 1 hour < x < 24 hours
+      const hourCount = dateDiff / hour
-        result = Math.floor(dateDiff / 3600000) + ' ' + GLOBAL_CONFIG.date_suffix.hours
+      const minuteCount = dateDiff / minute
-      } else if (dayDiff >= 1 || dayDiff < 365) { // 1 day < x < 365 days
+
-        result = dayDiff + ' ' + GLOBAL_CONFIG.date_suffix.day
+      if (monthCount > 12) {
-      } else { // > 365 days
+        result = datePost.toLocaleDateString().replace(/\//g, '-')
-        result = d.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
   },