refactor: Perfect code with BEM rules

FAQ.md

@@ -19,7 +19,7 @@
 使用 Stun 主题运行后，浏览器里显示**类似**如下信息：
 
 `
-n/layout.pug block content include ./_mixins/post-timeline.pug include ./_mixins/post-header.pug div.content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/pagination.pug else include ./_components/recent-posts.pug
+n/layout.pug block content include ./_mixins/timeline.pug include ./_mixins/post-header.pug div.content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/paginator.pug else include ./_components/recent-posts.pug
 `
 
 原因是没有安装依赖 `pug`。

layout/_layout.pug

@@ -36,12 +36,15 @@ html(lang=config.language)
             div#content.content(class=`${is_home() ? 'content-home' : ''}`)
               block content
 
+            if (is_archive() && theme.post_list.paginate.archives) || is_category() || is_tag()
+              include ./_partials/widgets/paginator.pug
+
             if page.comments
               include ./_partials/widgets/comments.pug
 
           if theme.sidebar.enable
-            aside#sidebar.sidebar
-              div.sidebar-inner
+            div#sidebar-wrap.sidebar-wrap
+              aside#sidebar.sidebar
                 include ./_partials/sidebar/sidebar.pug
 
           div.clearfix

layout/_mixins/gallery.pug

 mixin gallery(post)
-  div.gallery(itemscope itemtype='http://schema.org/ImageGallery')
+  div.gallery
     each photo in post.photos
-      img(src=url_for(photo) itemprop='contentUrl').gallery__img
+      img(src=url_for(photo)).gallery__img

layout/_mixins/menu-item.pug

@@ -7,19 +7,18 @@ mixin menuItem(menu, className)
         var menuIcon = (item[1] + '').trim();
         var hasSubMenu = menuPath.toLowerCase() === 'javascript:;';
         var aTagAttr = {};
-        if (hasSubMenu) {
-          aTagAttr.onclick = 'return false;';
-        }
+        if (hasSubMenu) aTagAttr.onclick = 'return false;';
 
       div(class=`header-nav-${className || ''}menu-item`)
         a(
           href=hasSubMenu ? 'javascript:;' : menuPath
-          class=`header-nav-${className || ''}menu-item__a`
+          class=`header-nav-${className || ''}menu-item__link`
         )&attributes(aTagAttr)
           if !theme.menu_settings.text_only && !!menuIcon
-            i(class=menuIcon)
+            span(class=`header-nav-${className || ''}menu-item__icon`)
+              i(class=menuIcon)
           if !theme.menu_settings.icon_only
-            != __(`menu.${name}`)
+            span(class=`header-nav-${className || ''}menu-item__text`)= __(`menu.${name}`)
         if hasSubMenu
           div.header-nav-submenu
             +menuItem(theme.submenu[name], 'sub')

layout/_mixins/post-header.pug

@@ -5,14 +5,14 @@ mixin postHeader(post)
     if post.top
       include ../_partials/widgets/sticky-top.pug
 
-    h1.post-header-title
+    h1.post-title
       if post.link
-        a(href=url_for(post.link) target="_blank" rel="noopener" )
+        a.post-title__link(href=url_for(post.link) target="_blank" rel="noopener" )
           = post.title || post.link
       else if is_post()
         = post.title || __('post.untitled')
       else
-        a(href=url_for(post.path))
+        a.post-title__link(href=url_for(post.path))
           = post.title || __('post.untitled')
 
     if !post.link

layout/_mixins/post-timeline.pug → layout/_mixins/timeline.pug

-mixin postTimeline(posts)
-  section.post-timeline
+mixin timeline(posts)
+  section.timeline
     - var year, tmpYear;
     - var sortPosts = [];
     //- Sort posts by date in descending order.
@@ -29,23 +29,24 @@ mixin postTimeline(posts)
         - tmpYear = full_date(post.date, 'YYYY')
       if tmpYear !== year
         - year = tmpYear
-        time.post-timeline-item.year= year
+        time.timeline-item.timeline-item--year= year
 
-      article.post-timeline-item
+      article.timeline-item
         if post.date
-          time.post-timeline-item__time= full_date(post.date, 'MM-DD')
-          h2.post-timeline-item-title
+          time.timeline-item__time= full_date(post.date, 'MM-DD')
+          h2.timeline-item__title
             if post.link
               a(
-                class="post-timeline-item-title__a"
+                class="timeline-item__link"
                 href=url_for(post.link)
                 target="_blank"
                 rel="noopener"
               )= post.title || post.link
             else
               a(
-                class="post-timeline-item-title__a"
+                class="timeline-item__link"
                 href=url_for(post.path)
               )= post.title || __('post.untitled')
+
         if post.top
           include ../_partials/widgets/sticky-top.pug

layout/_partials/analytics/busuanzi.pug

@@ -13,9 +13,6 @@ div.busuanzi
         span.busuanzi-siteuv__info= __('footer.site_uv')
       span.busuanzi-siteuv__value#busuanzi_value_site_uv
 
-  if theme.busuanzi.site_uv.enable && theme.busuanzi.site_pv.enable
-    span.separator= '|'
-
   if theme.busuanzi.site_pv.enable
     span.busuanzi-sitepv
       - if (isBszIconOnly) iconElemAttr['data-popover'] = __('popover.site_pv');

layout/_partials/footer/footer.pug

@@ -3,45 +3,45 @@
   var nowYear = new Date().getFullYear();
   var startYear = footer.copyright.since || nowYear;
   var endYear = footer.copyright.end || nowYear;
-  var fCopyright = footer.copyright.enable
-  var fBeian = footer.beian.enable
+  var footerCopyright = footer.copyright.enable
+  var footerBeian = footer.beian.enable
 
-if fCopyright || fBeian
+if footerCopyright || footerBeian
   div
-    if fCopyright
-      span!= `Copyright © ${startYear}` + ((startYear != endYear) ? `~${endYear}` : '')
+    if footerCopyright
+      span= `Copyright © ${startYear}` + ((startYear !== endYear) ? `~${endYear}` : '')
       if footer.icon.enable
-        span(class=`${footer.icon.name} footer-icon`)
+        span(class="footer__icon")
+          i(class=footer.icon.name)
       else
-        span= ' '
-      span= footer.copyright.text || config.author + '.'
-    if fCopyright && fBeian
-      span= ' | '
-    if fBeian
-      span!= footer.beian.icp
+        span.footer__devider
+      span= footer.copyright.text || config.author
+    if footerCopyright && footerBeian
+      span.footer__devider= '|'
+    if footerBeian
+      span= footer.beian.icp
 
 -
-  var fPowered = footer.powered.enable
-  var fTheme = footer.theme.enable
+  var footerPowered = footer.powered.enable
+  var footerTheme = footer.theme.enable
 
-if fPowered || fTheme
+if footerPowered || footerTheme
   div
-    if fPowered
+    if footerPowered
       span
         != _p('footer.powered', link_to(HEXO_URL, 'Hexo', { external: true }))
       if footer.powered.version
-        span= ' v' + hexo_env('version') + '.'
-    if fPowered && fTheme
-      span.separator= '|'
-    if fTheme
+        span= ' v' + hexo_env('version')
+    if footerPowered && footerTheme
+      span.footer__devider= '|'
+    if footerTheme
       span= __('footer.theme') + ' - '
         != link_to(STUN_URL, 'Stun', { external: true })
       if footer.theme.version
-        span= ' v' + stun_env('version') + '.'
+        span= ' v' + stun_env('version')
 
 if theme.busuanzi.enable
   include ../analytics/busuanzi.pug
 
 if footer.custom.enable
-  div
-    span!= footer.custom.text
+  div!= footer.custom.text

layout/_partials/header/header.pug

@@ -2,33 +2,36 @@ include ../../_mixins/menu-item.pug
 
 nav.header-nav(class=`${isNoHeader ? 'header-nav--sticky' : 'header-nav--fixed'}`)
   div.header-nav-inner
-    div.header-nav-btn(class=theme.icon.menu_btn)
+    div.header-nav-menubtn
+      i(class=theme.icon.menu_btn)
     div.header-nav-menu
       +menuItem(theme.menu)
 
     if theme.algolia_search.enable || theme.local_search.enable
       div.header-nav-search
         if !theme.menu_settings.text_only
-          i(class=theme.icon.search)
+          span.header-nav-search__icon
+            i(class=theme.icon.search)
         if !theme.menu_settings.icon_only
-          span!= __('nav.search')
+          span.header-nav-search__text= __('nav.search')
 
     if theme.night_mode.enable
       div.header-nav-mode
         include ../widgets/night-mode.pug
 
 if !isNoHeader
-  div.header-info(
+  div.header-banner(
     style=`${
       (theme.header.bg_image.enable && page.top_image)
         ? 'background: url(' + page.top_image + ') no-repeat center/cover;'
         : ''
     }`
   )
-    div.header-info-inner
-      div.header-info-title= config.title
-      div.header-info-subtitle= config.subtitle
+    div.header-banner-info
+      div.header-banner-info__title= config.title
+      div.header-banner-info__subtitle= config.subtitle
 
     if theme.header.scroll_down_icon.enable
-      div.header-info-arrow
-        i.header-info-arrow__icon(class=theme.header.scroll_down_icon.name)
+      div.header-banner-arrow
+        div.header-banner-arrow__icon
+          i(class=theme.header.scroll_down_icon.name)

layout/_partials/mode/mode.pug

-div.mode
-  div.mode-track
-    span.mode-track-moon
-    span.mode-track-sun
-  div.mode-thumb

layout/_partials/post/post-list.pug

-section.post-list
+section.postlist
   include ../../_mixins/post-header.pug
   include ../../_mixins/gallery.pug
 
   - var postLists = theme.post_list.paginate.home ? page.posts : site.posts;
   - postLists.each(function (post) {
-    article.post(class=`${post.link ? 'post-link-title' : ''}`)
+    article.postlist-item.post
       +postHeader(post)
 
       div.post-body
@@ -19,16 +19,17 @@ section.post-list
           - var content = strip_html(post.content);
           - var excerpt = content.substring(0, theme.auto_excerpt.length);
           - content.length > theme.auto_excerpt.length ? excerpt += '......' : '';
-          div!= excerpt
+          div.post-excerpt= excerpt
         else if post.excerpt
-          div.post-body-excerpt!= post.excerpt
+          div.post-excerpt= post.excerpt
         else
           - isExcerpt = false;
-          div.post-body-excerpt!= post.content
+          div.post-excerpt= post.content
 
         if !post.link && isExcerpt
-          div.post-body-more
-            a.post-body-more__a(href=url_for(post.path))
-              span= __('post.read_more')
-              span(class=`post-body-more__icon ${theme.icon.read_more_btn}`)
+          div.post-readmore
+            a.post-readmore__link(href=url_for(post.path))
+              span.post-readmore__text= __('post.read_more')
+              span.post-readmore__icon
+                i(class=theme.icon.read_more_btn)
   - })

layout/_partials/sidebar/sidebar.pug

@@ -9,9 +9,9 @@ section.sidebar-toc(class=`${isShowToc ? '' : 'hide'}`)
   if page.content
     - var tocMaxDepth = page.toc_max_depth || theme.toc.max_depth || 6;
     - var tocMinDepth = page.toc_min_depth || theme.toc.min_depth || 1;
-    div!= toc(page.content, {list_number: theme.toc.list_number, min_depth: tocMinDepth, max_depth: tocMaxDepth})
+    != toc(page.content, {list_number: theme.toc.list_number, min_depth: tocMinDepth, max_depth: tocMaxDepth})
 
-<!-- ov = overview -->
+// ov = overview
 section.sidebar-ov(class=`${isShowToc ? 'hide' : ''}`)
   if theme.author.enable
     div.sidebar-ov-author
@@ -23,77 +23,81 @@ section.sidebar-ov(class=`${isShowToc ? 'hide' : ''}`)
             alt="avatar"
           )
       if theme.author.motto
-        p.sidebar-ov-author__p= theme.author.motto
+        p.sidebar-ov-author__text= theme.author.motto
 
   if theme.social_setting.enable
     div.sidebar-ov-social
       for value, name in (theme.social || {})
         if name && value
-          - var item = value.split('||');
-          - var socialPath = (item[0] + '').trim();
-          - var socialIcon = (item[1] + '').trim();
+          -
+            var item = value.split('||');
+            var socialPath = (item[0] + '').trim();
+            var socialIcon = (item[1] + '').trim();
+            var isSocialIconOnly = theme.social_setting.icon_only;
+            var elemAttr = {};
+
+            if (isSocialIconOnly) {
+              elemAttr['data-popover'] = __(`social.${name}`);
+              elemAttr['data-popover-pos'] = 'up';
+            }
           a(
-            class="sidebar-ov-social__item"
+            class="sidebar-ov-social-item"
             href=socialPath
             target="_blank"
             rel="noopener"
-            data-popover=__(`social.${name}`)
-            data-popover-pos=`${theme.social_setting.icon_only ? 'up' : 'none'}`
-          )
+          )&attributes(elemAttr)
             if socialIcon && socialIcon.match('origin:')
-              span.sidebar-ov-social__item--logo
-                != socialIcon.split('origin:')[1]
+              span.sidebar-ov-social-item__icon
+                = socialIcon.split('origin:')[1]
             else
-              i.sidebar-ov-social__item--icon(class=socialIcon)
-
+              span.sidebar-ov-social-item__icon
+                i(class=socialIcon)
             if !theme.social_setting.icon_only
-              span= name
+              span.sidebar-ov-social-item__text= name
 
   if theme.feed.enable
     div.sidebar-ov-feed
-      - var feedEmail = theme.feed.email;
-      if feedEmail
+      if theme.feed.email
         span.sidebar-ov-feed-email
           a(
-            class="sidebar-ov-feed-email__a"
-            href=feedEmail
+            class="sidebar-ov-feed-email__link"
+            href=theme.feed.email
             target="_blank"
             rel="noopener"
           )
-            i.sidebar-ov-feed-email__a--icon(class=theme.icon.feed_email)
-            span= "Email "
-            span= __('sidebar.subscribe')
+            span.sidebar-ov-feed-email__icon
+              i(class=theme.icon.feed_email)
+            span= `Email ${__('sidebar.subscribe')}`
 
-      - var feedRSS = theme.feed.rss;
-      if feedRSS
+      if theme.feed.rss
         span.sidebar-ov-feed-rss
           a(
-            class="sidebar-ov-feed-rss__a"
-            href=url_for(feedRSS)
+            class="sidebar-ov-feed-rss__link"
+            href=url_for(theme.feed.rss)
             target="_blank"
             rel="noopener"
           )
-            i.sidebar-ov-feed-rss__a--icon(class=theme.icon.feed_rss)
-            span= "RSS "
-            span= __('sidebar.subscribe')
+            span.sidebar-ov-feed-rss__icon
+              i(class=theme.icon.feed_rss)
+            span= `RSS ${__('sidebar.subscribe')}`
 
   if theme.menu && (theme.menu.archives || theme.menu.categories || theme.menu.tags)
     div.sidebar-ov-state
       if theme.menu.archives
         - var menuArchives = (theme.menu.archives.split('||')[0] + '').trim();
-        a.sidebar-ov-state__a.posts(href=menuArchives)
-          div.sidebar-ov-state__a--count= site.posts.length
-          div.sidebar-ov-state__a--name= __('sidebar.archives')
+        a.sidebar-ov-state-item.sidebar-ov-state-item--posts(href=menuArchives)
+          div.sidebar-ov-state-item__count= site.posts.length
+          div.sidebar-ov-state-item__name= __('sidebar.archives')
       if theme.menu.categories
         - var menuCategories = (theme.menu.categories.split('||')[0] + '').trim();
-        a.sidebar-ov-state__a.categories(href=menuCategories)
-          div.sidebar-ov-state__a--count= site.categories.length
-          div.sidebar-ov-state__a--name= __('sidebar.categories')
+        a.sidebar-ov-state-item.sidebar-ov-state-item--categories(href=menuCategories)
+          div.sidebar-ov-state-item__count= site.categories.length
+          div.sidebar-ov-state-item__name= __('sidebar.categories')
       if theme.menu.tags
         - var menuTags = (theme.menu.tags.split('||')[0] + '').trim();
-        a.sidebar-ov-state__a.tags(href=menuTags)
-          div.sidebar-ov-state__a--count= site.tags.length
-          div.sidebar-ov-state__a--name= __('sidebar.tags')
+        a.sidebar-ov-state-item.sidebar-ov-state-item--tags(href=menuTags)
+          div.sidebar-ov-state-item__count= site.tags.length
+          div.sidebar-ov-state-item__name= __('sidebar.tags')
 
   if theme.creative_commons.enable && theme.creative_commons.sidebar
     div.sidebar-ov-cc
@@ -109,6 +113,6 @@ section.sidebar-ov(class=`${isShowToc ? 'hide' : ''}`)
 if theme.reading_progress.enable && is_post()
   div.sidebar-reading
     div.sidebar-reading-info
-      span= __('sidebar.read_info') + ' '
-      span.sidebar-reading-info-num= '0'
+      span.sidebar-reading-info__text= __('sidebar.read_info') + ' '
+      span.sidebar-reading-info__num= '0'
     div.sidebar-reading-line

layout/_partials/widgets/back2top.pug

 div#back2top.back2top
-  i.back2top-icon(class=theme.back2top.icon.name)
+  span.back2top__icon
+    i(class=theme.back2top.icon.name)

layout/_partials/widgets/copyright.pug

-div.post-copyright
-  div.post-copyright-author
-    span.post-copyright-author-name
-      != __('post.copyright.author') + ': '
-    span.post-copyright-author-value
+div(class=`${is_post() ? 'post-copyright' : ''}`).copyright
+  div.copyright-author
+    span.copyright-author__name
+      = __('post.copyright.author') + ': '
+    span.copyright-author__value
       if config.url && config.author
         a(href=config.url)= config.author
-  div.post-copyright-link
-    span.post-copyright-link-name
-      != __('post.copyright.link') + ': '
-    span.post-copyright-link-value
+  div.copyright-link
+    span.copyright-link__name
+      = __('post.copyright.link') + ': '
+    span.copyright-link__value
       if config.url
         a(href=page.permalink)= page.permalink
-  div.post-copyright-notice
-    span.post-copyright-notice-name
-      != __('post.copyright.license_title') + ': '
-    span.post-copyright-notice-value
+  div.copyright-notice
+    span.copyright-notice__name
+      = __('post.copyright.license_title') + ': '
+    span.copyright-notice__value
       != _p('post.copyright.license_content', ccUrl, ccLicense.toUpperCase())

layout/_partials/widgets/loading-bar.pug

 div#loading-bar.loading-bar
-  div.progress
+  div.loading-bar__progress

layout/_partials/widgets/pagination.pug → layout/_partials/widgets/paginator.pug

-nav.paginator
+nav(class=`${is_post() ? 'post-paginator' : ''}`).paginator
   if !is_post()
     - var prevText = `<i class="${theme.icon.paginator_prev}"></i>`;
     - var nextText = `<i class="${theme.icon.paginator_next}"></i>`;
     div.paginator-inner
       != paginator({ prev_text: prevText, next_text: nextText, mid_size: 1, escape: false })
   else
-    div.paginator-post
-      if page.prev
-        div.paginator-post-prev
-          a(href=url_for(page.prev.path))
+    if page.prev
+      div.paginator-prev
+        a.paginator-prev__link(href=url_for(page.prev.path))
+          span.paginator-prev__icon
             i(class=theme.icon.paginator_prev)
-            span= page.prev.title || __('post.untitled')
-      if page.next
-        div.paginator-post-next
-          a(href=url_for(page.next.path))
-            span= page.next.title || __('post.untitled')
+          span.paginator-prev__text= page.prev.title || __('post.untitled')
+    if page.next
+      div.paginator-next
+        a.paginator-next__link(href=url_for(page.next.path))
+          span.paginator-prev__text= page.next.title || __('post.untitled')
+          span.paginator-next__icon
             i(class=theme.icon.paginator_next)

layout/_partials/widgets/reward.pug

-div.reward
-  div.reward-button!= __('reward.btn_text')
-  div.reward-qr
-    span.reward-qr-alipay
-      img.reward-qr-alipay__img(src=theme.reward.alipay)
-      div.reward-qr-alipay-text!= __('reward.alipay')
-    span.reward-qr-wechat
-      img.reward-qr-wechat__img(src=theme.reward.wechat)
-      div.reward-qr-wechat-text!= __('reward.wechat')
+div(class=`${is_post() ? 'post-reward' : ''}`).reward
+  div.reward-button= __('reward.btn_text')
+  div.reward-qrcode
+    span.reward-qrcode-alipay
+      img.reward-qrcode-alipay__img(src=theme.reward.alipay)
+      div.reward-qrcode-alipay__text= __('reward.alipay')
+    span.reward-qrcode-wechat
+      img.reward-qrcode-wechat__img(src=theme.reward.wechat)
+      div.reward-qrcode-wechat__text= __('reward.wechat')

layout/_partials/widgets/sticky-top.pug

-div.sticky-top(data-popover=__('post.sticky') data-popover-pos="up")
-  i.sticky-top__i(class=theme.stick_top.icon)
+div.sticky-top(
+  data-popover=__('post.sticky')
+  data-popover-pos="up"
+)
+  span.sticky-top__icon
+    i(class=theme.stick_top.icon)

layout/_third-party/pjax.pug

@@ -57,23 +57,23 @@ script.
       var MAX_LOADING_WIDTH = 95;
 
       $('.loading-bar').addClass('loading');
-      $('.loading-bar .progress').css('width', loadingBarWidth + '%');
+      $('.loading-bar__progress').css('width', loadingBarWidth + '%');
       clearInterval(loadingTimer);
       loadingTimer = setInterval(function () {
         loadingBarWidth += 3;
         if (loadingBarWidth > MAX_LOADING_WIDTH) {
           loadingBarWidth = MAX_LOADING_WIDTH;
         }
-        $('.loading-bar .progress').css('width', loadingBarWidth + '%');
+        $('.loading-bar__progress').css('width', loadingBarWidth + '%');
       }, 500);
     }, false);
 
     window.addEventListener('pjax:complete', function () {
       clearInterval(loadingTimer);
-      $('.loading-bar .progress').css('width', '100%');
+      $('.loading-bar__progress').css('width', '100%');
       $('.loading-bar').removeClass('loading');
       setTimeout(function () {
-        $('.loading-bar .progress').css('width', '0');
+        $('.loading-bar__progress').css('width', '0');
       }, 400);
       $('link[rel=prefetch], script[data-pjax-rm]').each(function () {
         $(this).remove();

layout/archive.pug

 extends ./_layout.pug
-include ./_mixins/post-timeline.pug
+include ./_mixins/timeline.pug
 
 block content
   div.archive
     div.archive-total
       = site.posts.length === 0 ? __('page.posts-empty') : _p('page.posts-total', site.posts.length)
 
-    +postTimeline(theme.post_list.paginate.archives ? page.posts.data : site.posts.data)
-
-  if theme.post_list.paginate.archives
-    include ./_partials/widgets/pagination.pug
+    +timeline(theme.post_list.paginate.archives ? page.posts.data : site.posts.data)

layout/category.pug

 extends ./_layout.pug
-include ./_mixins/post-timeline.pug
+include ./_mixins/timeline.pug
 
 block content
-  div.single-category
-    div.single-category-name
-      span= __('page.categories') + ' -- '
-      span= page.category
+  div.categorypage
+    div.categorypage-title
+      span.categorypage-title__text= `${__('page.categories')} -- `
+      span.categorypage-title__name= page.category
 
-    +postTimeline(page.posts.data)
-
-    include ./_partials/widgets/pagination.pug
+    +timeline(page.posts.data)

layout/index.pug

@@ -4,4 +4,4 @@ block content
   include ./_partials/post/post-list.pug
 
   if theme.post_list.paginate.home
-    include ./_partials/widgets/pagination.pug
+    include ./_partials/widgets/paginator.pug

layout/page.pug

@@ -19,7 +19,7 @@ block content
         span= site.categories.length
       != list_categories()
   else
-    div.custom-page
+    div.custompage
       if page.photos && page.photos.length
         +gallery(page)
       != page.content

layout/post.pug

 extends ./_layout.pug
 
 block content
+  // Just used to judge whether it is an article page
   div#is-post
   div.post
     include ./_mixins/post-header.pug
@@ -15,8 +16,8 @@ block content
 
     footer.post-footer
       if theme.post_widget.end_text.enable
-        div.post-end
-          p= __('post.end')
+        div.post-ending.ending
+          div.ending__text= __('post.end')
 
       if (page.copyright !== false) && (theme.creative_commons.enable && theme.creative_commons.post)
         include ./_partials/widgets/copyright.pug
@@ -26,8 +27,9 @@ block content
           div.post-tags
             each tag in page.tags.data
               span.post-tags-item
-                i.post-tags-item__i(class=theme.icon.post_tags)
-                a.post-tags-item__a(href=tag.permalink)= tag.name
+                span.post-tags-item__icon
+                  i(class=theme.icon.post_tags)
+                a.post-tags-item__link(href=tag.permalink)= tag.name
 
       if theme.post_widget.share.enable
         include ./_partials/widgets/share.pug
@@ -35,4 +37,4 @@ block content
       if (page.reward !== false) && theme.reward.enable
         include ./_partials/widgets/reward.pug
 
-      include ./_partials/widgets/pagination.pug
+      include ./_partials/widgets/paginator.pug

layout/tag.pug

 extends ./_layout.pug
-include ./_mixins/post-timeline.pug
+include ./_mixins/timeline.pug
 
 block content
-  div.single-tag
-    div.single-tag-name
-      span= __('page.tags') + ' -- '
-      span= page.tag
+  div.tagpage
+    div.tagpage-title
+      span.tagpage-title__text= `${__('page.tags')} -- `
+      span.tagpage-title__name= page.tag
 
-    +postTimeline(page.posts.data)
-
-  include ./_partials/widgets/pagination.pug
+    +timeline(page.posts.data)

scripts/filters/external-link.js

@@ -33,9 +33,9 @@ hexo.extend.filter.register('after_post_render', function (data) {
       };
 
       return (
-        '<span class="external-link">' +
-          `<a ${attrBegin} href="${href}" ${attrEnd}>${html}</a>` +
-          `<i class="${theme.external_link.icon.name}"></i>` +
+        '<span class="exturl">' +
+          `<a class="exturl__link" ${attrBegin} href="${href}" ${attrEnd}>${html}</a>` +
+          `<span class="exturl__icon"><i class="${theme.external_link.icon.name}"></i></span>` +
         '</span>'
       );
     }

source/css/_common/components/analytics/busuanzi.styl

@@ -7,4 +7,9 @@
       margin: 0 2px;
     }
   }
+
+  & > span:nth-child(2)::before {
+    content: '|';
+    margin: 0 10px;
+  }
 }

source/css/_common/components/footer/index.styl

 .footer {
   if (hexo-config('footer.icon.enable')) {
-    &-icon {
-      margin: 0 .3rem;
+    &__icon {
+      display: inline-block;
+      margin: 0 .4rem;
       font-size: 1em;
       color: convert(hexo-config('footer.icon.color') || '#f00');
 
@@ -55,18 +56,18 @@
         background-color: alpha(#000, hexo-config('footer.mask.opacity'));
       }
     }
+  }
 
-    a {
-      color: $footer-link-color;
-      transition: color .2s ease;
+  a {
+    color: $footer-link-color;
+    transition: color .2s ease;
 
-      &:hover {
-        color: $footer-link-hover-color;
-      }
+    &:hover {
+      color: $footer-link-hover-color;
     }
+  }
 
-    .separator {
-      margin: 0 .5rem;
-    }
+  &__devider {
+    margin: 0 10px;
   }
 }

source/css/_common/components/header/index.styl

@@ -68,13 +68,9 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
       padding-bottom: 0 !important;
       width: 100%;
       height: 100%;
-
-      i {
-        margin-right: .3rem;
-      }
     }
 
-    &-btn {
+    &-menubtn {
       display: none;
       padding: 0 .5rem;
       line-height: header-nav-height;
@@ -93,18 +89,23 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
 
     &-menu-item,
     &-submenu-item {
-      &__a {
+      &__link {
         display: block;
         color: $header-text-color;
       }
+
+      &__icon,
+      &__text {
+        margin: 0 3px;
+      }
     }
 
-    &-menu-item__a {
+    &-menu-item__link {
       padding: 0 .5rem;
       menuItemHover(#f4f5f5, #999);
     }
 
-    &-submenu-item__a {
+    &-submenu-item__link {
       padding: .75rem .5rem;
       menuItemHover(#f4f5f5, #999);
     }
@@ -175,17 +176,17 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
 
         &:hover {
           color: $header-menu-hover-color;
+        }
 
-          i,
-          span {
-            color: $header-menu-hover-color;
-          }
+        &__icon,
+        &__text {
+          margin: 0 3px;
         }
       }
     }
   }
 
-  &-info {
+  &-banner {
     position: relative;
     width: 100%;
     height: 100%;
@@ -208,7 +209,7 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
       }
     }
 
-    &-inner {
+    &-info {
       position: absolute;
       top: 50%;
       left: 0;
@@ -217,20 +218,20 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
       width: 100%;
       text-align: center;
       transform: translateY(-50%);
-    }
 
-    &-title {
-      margin-bottom: 2rem;
-      font-size: 4rem;
-      font-weight: $font-weight-bolder;
-      line-height: 1;
-      color: $header-text-color;
-    }
+      &__title {
+        margin-bottom: 2rem;
+        font-size: 4rem;
+        font-weight: $font-weight-bolder;
+        line-height: 1;
+        color: $header-text-color;
+      }
 
-    &-subtitle {
-      font-size: 1.2rem;
-      font-weight: $font-weight-normal;
-      color: $header-text-color;
+      &__subtitle {
+        font-size: 1.2rem;
+        font-weight: $font-weight-normal;
+        color: $header-text-color;
+      }
     }
 
     if (hexo-config('header.scroll_down_icon.enable')) {
@@ -262,8 +263,11 @@ if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.heigh
         }
 
         &__icon {
+          width: 100%;
+          height: 100%;
           font-size: 2rem;
           font-weight: $font-weight-bolder;
+          line-height: 1;
           text-align: center;
           color: #fff;
         }

source/css/_common/components/pages/index.styl

 @import './page.styl';
+@import './timeline.styl';

source/css/_common/components/pages/page.styl

@@ -39,10 +39,6 @@
   }
 }
 
-.custom-page {
-  width: 100%;
-}
-
 .tagcloud,
 .category {
   width: 100%;
@@ -83,7 +79,7 @@
       }
     }
 
-    a {
+    &-link {
       font-size: 1em;
       color: $category-link-color;
       transition: color .2s ease;
@@ -109,17 +105,18 @@
   }
 }
 
-.single {
-  &-category,
-  &-tag {
-    &-name {
-      font-size: $font-size-base + 10px;
-      text-align: center;
-      cursor: default;
+.categorypage,
+.tagpage {
+  &-title {
+    font-size: $font-size-base + 10px;
+    text-align: center;
 
-      & > span:last-child {
-        color: $blue-light;
-      }
+    &__name {
+      color: $blue-light;
     }
   }
 }
+
+.custompage {
+  width: 100%;
+}

source/css/_common/components/post/post-timeline.styl → source/css/_common/components/pages/timeline.styl

-.post-timeline {
+.timeline {
   position: relative;
 
   &::before {
@@ -41,7 +41,7 @@
       margin-bottom: 0;
     }
 
-    &.year {
+    &--year {
       font-weight: 700;
     }
 
@@ -58,12 +58,7 @@
       transform: translateY(3%);
     }
 
-    .sticky-top {
-      width: 2em;
-      height: 2em;
-    }
-
-    &-title {
+    &__title {
       display: inline-block;
       margin: 0;
       width: 'calc(100% - %s)' % (time-width + time-margin + sticky-top-width);
@@ -72,13 +67,8 @@
       vertical-align: middle;
     }
 
-    &-title__a {
+    &__link {
       color: var(--color-gray-900);
-      transition: color .2s ease;
-    }
-
-    &-title__a:hover {
-      color: #49b1f5;
     }
   }
 }

source/css/_common/components/post/index.styl

-@import './post-timeline.styl';
 @import './post-list.styl';
 @import './post.styl';

source/css/_common/components/post/post-list.styl

 // Only in homepage.
-// -----------------------------------------
-.post-list {
-  .post {
+
+.postlist {
+  &-item {
     margin: 0 0 1.5rem;
     width: 100%;
     layout-card();
+  }
+}
 
-    &-body {
-      &-more {
-        margin-top: 1.5rem;
-        text-align: center;
-
-        &__a {
-          display: inline-block;
-          border-radius: 5px;
-          padding: 0 .6em;
-          color: #f5f6f7;
-          background-color: $home-readmore-bg-color;
-          transition: background-color .2s ease;
-          cursor: pointer;
+.post {
+  &-readmore {
+    margin-top: 1.5rem;
+    text-align: center;
 
-          &:hover {
-            color: #f5f6f7;
-            background-color: $home-readmore-bg-hover-color;
-          }
-        }
+    &__link {
+      display: inline-block;
+      border-radius: 5px;
+      padding: 0 .6em;
+      color: var(--color-gray-200);
+      background-color: $home-readmore-bg-color;
+      transition: background-color .2s ease;
+      cursor: pointer;
 
-        &__icon {
-          margin-left: .3rem;
-        }
+      &:hover {
+        color: var(--color-gray-200);
+        background-color: $home-readmore-bg-hover-color;
       }
     }
-  }
-}
-
-.post-link-title {
-  .post-header {
-    margin: 0 0 .5rem;
-  }
 
-  .post-body {
-    &-excerpt {
-      margin: 0;
+    &__icon {
+      margin-left: .3rem;
     }
   }
 }

source/css/_common/components/post/post.styl

 .post {
   &-header {
     position: relative;
-    margin: 0 0 1rem;
+    margin-bottom: 1rem;
     font-size: 1em;
     text-align: center;
+  }
 
-    &-title {
-      margin: 0;
-      color: var(--color-gray-950);
-      cursor: auto;
+  &-title {
+    margin: 0;
+    color: var(--color-gray-950);
+    cursor: auto;
+
+    &__link {
+      position: relative;
+      color: var(--color-gray-800);
+      break-word();
+
+      &::before {
+        content: '';
+        visibility: hidden;
+        position: absolute;
+        right: 0;
+        bottom: -4px;
+        left: 0;
+        height: 2px;
+        background-color: var(--color-gray-800);
+        transition: transform .2s ease-in-out;
+        transform: scaleX(0);
+      }
 
-      a {
-        position: relative;
+      &:hover {
         color: var(--color-gray-800);
-        break-word();
 
         &::before {
-          content: '';
-          visibility: hidden;
-          position: absolute;
-          right: 0;
-          bottom: -4px;
-          left: 0;
-          height: 2px;
-          background-color: var(--color-gray-800);
-          transition: transform .2s ease-in-out;
-          transform: scaleX(0);
-        }
-
-        &:hover {
-          color: var(--color-gray-800);
-
-          &::before {
-            visibility: visible;
-            transform: scaleX(1);
-          }
+          visibility: visible;
+          transform: scaleX(1);
         }
       }
     }
@@ -87,20 +87,20 @@
   }
 
   if (hexo-config('post_widget.end_text.enable')) {
-    &-end {
-      padding: 1rem 0 0;
-      text-align: center;
-      color: var(--color-gray-400);
+    &-ending {
+      margin-bottom: 1rem;
+    }
+  }
 
-      if (hexo-config('post_widget.end_text.horizon_line')) {
-        border-top: 1px dashed var(--color-gray-300);
-      }
+  if (hexo-config('creative_commons.post')) {
+    &-copyright {
+      margin-bottom: 1rem;
     }
   }
 
   if (hexo-config('post_widget.tags')) {
     &-tags {
-      margin: 0 0 1rem;
+      margin-bottom: 1rem;
 
       &-item {
         margin: 0 .5rem;
@@ -109,18 +109,28 @@
           cursor: pointer;
         }
 
-        &:hover i,
-        &:hover a {
-          color: $orange-dark;
-        }
-
-        &__i,
-        &__a {
+        &__icon,
+        &__link {
           margin: .1rem;
           color: $post-tags-icon-color;
-          transition: color .2s ease;
+          transition: color .2s;
+
+          ^[-1]:hover & {
+            color: $orange-dark;
+          }
         }
       }
     }
   }
+
+  if (hexo-config('reward.enable')) {
+    &-reward {
+      margin-bottom: 1rem;
+    }
+  }
+
+  &-paginator {
+    border-top: 1px solid var(--color-gray-250);
+    padding-top: 1rem;
+  }
 }

source/css/_common/components/sidebar/index.styl

 if (hexo-config('sidebar.enable')) {
   .sidebar {
+    layout-card();
+    padding: 1rem;
     width: convert(hexo-config('sidebar.width') || '$sidebar-width');
+    font-size: $font-size-sidebar;
 
-    if (hexo-config('sidebar.enable')) {
-      float: convert(hexo-config('sidebar.position'));
+    &--sticky {
+      position: fixed;
+      top: convert(hexo-config('sidebar.offsetTop') || '30px');
+      z-index: $z-index0;
+      transform: translateZ(0);
     }
 
     .hide {
       display: none;
     }
 
-    &-inner {
-      layout-card();
-      padding: 1rem;
+    &-wrap {
       width: convert(hexo-config('sidebar.width') || '$sidebar-width');
-      font-size: $font-size-sidebar;
 
-      &.sticky {
-        position: fixed;
-        top: convert(hexo-config('sidebar.offsetTop') || '30px');
-        z-index: $z-index0;
-        transform: translateZ(0);
+      if (hexo-config('sidebar.enable')) {
+        float: convert(hexo-config('sidebar.position'));
       }
     }
 
@@ -157,7 +157,7 @@ if (hexo-config('sidebar.enable')) {
             }
           }
 
-          &__p {
+          &__text {
             margin: .5rem 0 0;
             font-weight: $font-weight-bold;
           }
@@ -169,7 +169,7 @@ if (hexo-config('sidebar.enable')) {
           padding: .5rem 0;
           text-align: center;
 
-          &__item {
+          &-item {
             display: inline-block;
             margin: .2rem;
             text-align: center;
@@ -185,18 +185,16 @@ if (hexo-config('sidebar.enable')) {
               border-radius: 50%;
               width: 1.5rem;
               height: 1.5rem;
+              line-height: 1.5rem;
               transition: background-color .2s ease;
-
-              &--icon {
-                font-size: 1.2em;
-              }
             } else {
               border-radius: 3px;
               padding: 0 .4rem;
               transition: color .2s ease, background-color .2s ease;
 
-              span {
-                margin-left: .2rem;
+              &__icon,
+              &__text {
+                margin: 0 3px;
               }
             }
           }
@@ -217,16 +215,16 @@ if (hexo-config('sidebar.enable')) {
             display: inline-block;
             width: 50%;
 
-            &__a {
+            &__link {
               transition: color .2s ease;
+            }
 
-              &--icon {
-                margin-right: .2rem;
-              }
+            &__icon {
+              margin-right: .2rem;
             }
           }
 
-          &-email__a {
+          &-email__link {
             color: $sidebar-feed-email-color;
 
             &:hover {
@@ -234,7 +232,7 @@ if (hexo-config('sidebar.enable')) {
             }
           }
 
-          &-rss__a {
+          &-rss__link {
             color: $sidebar-feed-rss-color;
 
             &:hover {
@@ -248,7 +246,7 @@ if (hexo-config('sidebar.enable')) {
         padding: .5rem 0;
         text-align: center;
 
-        &__a {
+        &-item {
           display: inline-block;
           width: 33.3%;
           line-height: 1.5em;
@@ -258,7 +256,7 @@ if (hexo-config('sidebar.enable')) {
             border-right: 1px dashed var(--color-gray-300);
           }
 
-          &.posts {
+          &--posts {
             color: $sidebar-state-post-color;
 
             &:hover {
@@ -266,7 +264,7 @@ if (hexo-config('sidebar.enable')) {
             }
           }
 
-          &.categories {
+          &--categories {
             color: var(--color-gray-700);
 
             &:hover {
@@ -274,7 +272,7 @@ if (hexo-config('sidebar.enable')) {
             }
           }
 
-          &.tags {
+          &--tags {
             color: $sidebar-state-tag-color;
 
             &:hover {
@@ -282,7 +280,7 @@ if (hexo-config('sidebar.enable')) {
             }
           }
 
-          &--count {
+          &__count {
             font-weight: $font-weight-bold;
             color: var(--color-gray-950);
           }

source/css/_common/components/widgets/back2top.styl

@@ -6,16 +6,18 @@
   transform: translateX(100%);
   cursor: pointer;
 
-  &.show {
+  &--show {
     transform: translateX(-100%);
   }
 
-  &.hide {
+  &--hide {
     transform: translateX(100%);
   }
 
-  &-icon {
+  &__icon {
+    display: block;
     font-size: 1.2rem;
+    line-height: 1;
     color: convert(hexo-config('back2top.icon.color') || '#666');
     transition: color .2s ease;
     transform: rotate(convert(hexo-config('back2top.icon.rotate') || '0'));

source/css/_common/components/widgets/copyright.styl

-.post-copyright {
+.copyright {
   position: relative;
-  margin: 0 0 1rem;
   border: 1px solid var(--color-gray-250);
   padding: .8rem 1rem;
   width: 100%;
@@ -13,12 +12,12 @@
   &-author,
   &-link,
   &-notice {
-    &-name {
+    &__name {
       font-weight: $font-weight-bold;
       break-word();
     }
 
-    &-value {
+    &__value {
       color: var(--color-gray-800);
       break-all();
     }

source/css/_common/components/widgets/ending.styl

+.ending {
+  padding: 1rem 0 0;
+  text-align: center;
+  color: var(--color-gray-400);
+
+  if (hexo-config('post_widget.end_text.horizon_line')) {
+    border-top: 1px dashed var(--color-gray-300);
+  }
+}

source/css/_common/components/widgets/font-icon.styl

 if (hexo-config('external_link.icon.enable')) {
-  .external-link {
-    i {
+  .exturl {
+    &__icon {
       margin: 0 .1em 0 .3em;
       font-size: .8em;
       color: convert(hexo-config('external_link.icon.color') || '#aaa');
     }
 
-    a {
+    &__link {
       break-word();
     }
   }
 
-  .footer-inner {
-    .external-link i {
+  .footer {
+    .exturl__icon {
       color: #fff;
     }
   }

source/css/_common/components/widgets/gallery-image.styl

-// Gallery in post / page.
 .gallery {
   &__img {
     margin-bottom: convert(hexo-config('gallery_waterfall.gap_y') || '10px');
-    width: convert(hexo-config('gallery_waterfall.col_width') || '220px');
+
+    if (hexo-config('gallery_waterfall.enable')) {
+      width: convert(hexo-config('gallery_waterfall.col_width') || '220px');
+    }
   }
 }

source/css/_common/components/widgets/index.styl

+@import './ending.styl' if (hexo-config('post_widget.end_text.enable'));
 @import './copyright.styl' if (hexo-config('creative_commons.post'));
 @import './reward.styl' if (hexo-config('reward.enable'));
 @import './back2top.styl' if (hexo-config('back2top.enable'));
 @import './fancybox.styl' if (hexo-config('fancybox'));
 @import './zoom-image.styl' if (hexo-config('zoom_image.enable'));
-@import './gallery-image.styl' if (hexo-config('gallery_waterfall.enable'));
 @import './lazyload.styl' if (hexo-config('lazyload.enable'));
 @import './loading-bar.styl' if (hexo-config('pjax.enable'));
 @import './night-mode.styl' if (hexo-config('night_mode.enable'));
 @import './share.styl' if (hexo-config('post_widget.share.enable'));
+@import './gallery-image.styl';
 @import './font-icon.styl';
 @import './comments.styl';
 @import './copy-button.styl';
 @import './sticky-top.styl';
-@import './pagination.styl';
+@import './paginator.styl';

source/css/_common/components/widgets/loading-bar.styl

@@ -6,7 +6,7 @@
   opacity: 0;
   transition: opacity .4s linear;
 
-  .progress {
+  &__progress {
     position: fixed;
     top: 0;
     left: 0;
@@ -19,9 +19,9 @@
   &.loading {
     opacity: 1;
     transition: none;
+  }
 
-    .progress {
-      transition: width .4s ease;
-    }
+  &.loading &__progress {
+    transition: width .4s ease;
   }
 }

source/css/_common/components/widgets/night-mode.styl

@@ -10,18 +10,14 @@
   track-height = 24px;
 
   &--focus {
-    .mode {
-      &-thumb {
-        box-shadow: 0 0 2px 3px #0099e0;
-      }
+    .mode-thumb {
+      box-shadow: 0 0 2px 3px #0099e0;
     }
   }
 
   &--checked {
-    .mode {
-      &-thumb {
-        transform: translateX(track-width - track-height);
-      }
+    .mode-thumb {
+      transform: translateX(track-width - track-height);
     }
   }
 

source/css/_common/components/widgets/pagination.styl → source/css/_common/components/widgets/paginator.styl

 .paginator {
-  margin-top: 1.5em;
-  border-radius: 5px;
+  margin-top: 1rem;
   text-align: center;
 
   &-inner {
+    border-radius: 5px;
     padding: .8em 0;
     background-color: var(--color-gray-150);
   }
@@ -57,41 +57,34 @@
     margin-left: .2em;
   }
 
-  // Pagination of post.
-  // ----------------------------------------
-  &-post {
-    border-top: 1px solid var(--color-gray-250);
-    padding-top: 1.5rem;
+  &-prev,
+  &-next {
+    width: 100%;
 
-    &-prev,
-    &-next {
-      width: 100%;
+    &__link {
+      break-word();
+      color: $pagination-arrow-color;
+      transition: color .2s ease;
 
-      a {
-        color: $pagination-arrow-color;
-        break-word();
-        transition: color .2s ease;
-
-        &:hover {
-          color: $pagination-arrow-hover-color;
-        }
+      &:hover {
+        color: $pagination-arrow-hover-color;
       }
     }
+  }
 
-    &-prev {
-      text-align: left;
+  &-prev {
+    text-align: left;
 
-      i {
-        margin-right: .3rem;
-      }
+    &__icon {
+      margin-right: .3rem;
     }
+  }
 
-    &-next {
-      text-align: right;
+  &-next {
+    text-align: right;
 
-      i {
-        margin-left: .3rem;
-      }
+    &__icon {
+      margin-left: .3rem;
     }
   }
 }

source/css/_common/components/widgets/reward.styl

@@ -16,7 +16,7 @@
     }
   }
 
-  &-qr {
+  &-qrcode {
     display: none;
 
     &-alipay,
@@ -29,19 +29,19 @@
         height: 200px;
       }
 
-      &-text {
+      &__text {
         margin: .5rem 0;
       }
     }
 
     &-alipay {
-      &-text {
+      &__text {
         color: $reward-alipay-color;
       }
     }
 
     &-wechat {
-      &-text {
+      &__text {
         color: $reward-wechat-color;
       }
     }

source/css/_common/components/widgets/sticky-top.styl

 .sticky-top {
   position: absolute;
   top: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
+  width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
   text-align: center;
 
   if (hexo-config('stick_top.position') == 'left') {
@@ -14,10 +14,12 @@
 
   stick-top-rotate = convert(hexo-config('stick_top.rotate' || '0deg'));
 
-  &__i {
-    font-size: .7rem;
+  &__icon {
+    display: block;
+    width: 100%;
+    height: 100%;
     color: convert(hexo-config('stick_top.color' || '#999'));
-    transform: scale(1.2) rotate(stick-top-rotate);
+    transform: rotate(stick-top-rotate);
   }
 }
 

source/css/_common/outline/macro.styl

@@ -95,14 +95,6 @@ if (hexo-config('body.bg_image.enable')) {
   width: 100%;
   layout-card();
 
-  a {
-    transition: color .2s;
-
-    &:hover {
-      color: $orange-dark;
-    }
-  }
-
   img {
     border: 1px solid var(--color-gray-300);
     border-radius: 3px;

source/css/_common/responsive.styl

@@ -43,14 +43,16 @@
       height: 17rem;
     }
 
-    &-info {
-      &-title {
-        margin-bottom: 1rem;
+    &-banner {
+      &-info {
+        &__title {
+          margin-bottom: 1rem;
+        }
       }
     }
 
     &-nav {
-      &-btn {
+      &-menubtn {
         display: block;
         float: left;
       }
@@ -70,7 +72,7 @@
           overflow: hidden;
           margin: 0;
 
-          &__a {
+          &__link {
             padding-right: 1.5rem;
             padding-left: 1.5rem;
             text-align: left;
@@ -85,7 +87,7 @@
         width: 100%;
 
         &-item {
-          &__a {
+          &__link {
             padding-right: 1rem;
             padding-left: 3rem;
             text-align: left;
@@ -100,7 +102,7 @@
   }
 
   if (hexo-config('sidebar.enable')) {
-    .sidebar {
+    .sidebar-wrap {
       display: none;
     }
   }
@@ -121,14 +123,16 @@
       }
     }
 
-    &-info {
-      &-title {
-        margin-bottom: 1rem;
-        font-size: 3rem;
-      }
+    &-banner {
+      &-info {
+        &__title {
+          margin-bottom: 1rem;
+          font-size: 3rem;
+        }
 
-      &-subtitle {
-        font-size: .9rem;
+        &__subtitle {
+          font-size: .9rem;
+        }
       }
     }
   }
@@ -170,22 +174,22 @@
       }
 
       if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
-        &-search {
-          span {
-            display: none;
-          }
+        &-search__text {
+          display: none;
         }
       }
     }
 
-    &-info {
-      &-title {
-        margin-bottom: .5rem;
-        font-size: 2rem;
-      }
+    &-banner {
+      &-info {
+        &__title {
+          margin-bottom: .5rem;
+          font-size: 2rem;
+        }
 
-      &-subtitle {
-        font-size: $font-size-base;
+        &__subtitle {
+          font-size: $font-size-base;
+        }
       }
 
       &-arrow {
@@ -212,7 +216,7 @@
     }
   }
 
-  .post-timeline {
+  .timeline {
     &-item {
       padding-left: 1rem;
     }

source/js/header.js

 $(document).ready(function () {
-  var $menuBtn = $('.header-nav-btn');
+  var $menuBtn = $('.header-nav-menubtn');
   var $menu = $('.header-nav-menu');
   var $menuItem = $('.header-nav-menu-item');
   var $submenu = $('.header-nav-submenu');
@@ -57,7 +57,7 @@ $(document).ready(function () {
   });
 
   Stun.utils.pjaxReloadHeader = function () {
-    $menuBtn = $('.header-nav-btn');
+    $menuBtn = $('.header-nav-menubtn');
     $menu = $('.header-nav-menu');
     $menuItem = $('.header-nav-menu-item');
     $submenu = $('.header-nav-submenu');
@@ -195,7 +195,7 @@ $(document).ready(function () {
 
   Stun.utils.pjaxReloadScrollIcon = function () {
     if (CONFIG.header && CONFIG.header.scrollDownIcon) {
-      $('.header-info-arrow').on('click', function (e) {
+      $('.header-banner-arrow').on('click', function (e) {
         e.stopPropagation();
         $('#container').velocity('scroll', {
           offset: $('#header').outerHeight()

source/js/scroll.js

@@ -76,13 +76,13 @@ $(document).ready(function () {
 
     if (scrollTop !== 0) {
       if (!isBack2topShow) {
-        $back2top.addClass('show');
-        $back2top.removeClass('hide');
+        $back2top.addClass('back2top--show');
+        $back2top.removeClass('back2top--hide');
         isBack2topShow = true;
       }
     } else {
-      $back2top.addClass('hide');
-      $back2top.removeClass('show');
+      $back2top.addClass('back2top--hide');
+      $back2top.removeClass('back2top--show');
       isBack2topShow = false;
     }
   }

source/js/sidebar.js

@@ -102,15 +102,15 @@ $(document).ready(function () {
 
   // Sticky the sidebar when it arrived the top.
   function sidebarSticky () {
-    var $sidebar = $('.sidebar-inner');
+    var $sidebar = $('#sidebar');
     var targetY = document
       .getElementById('content-wrap')
       .getBoundingClientRect().top;
 
     if (targetY < sidebarToTop) {
-      $sidebar.addClass('sticky');
+      $sidebar.addClass('sidebar--sticky');
     } else {
-      $sidebar.removeClass('sticky');
+      $sidebar.removeClass('sidebar--sticky');
     }
   }
 
@@ -133,8 +133,8 @@ $(document).ready(function () {
       isEnablePostEnd = true;
     }
     if (isEnablePostEnd) {
-      postEndTop = $('.post-end').offset().top;
-      postEndHeight = $('.post-end').outerHeight();
+      postEndTop = $('.post-ending').offset().top;
+      postEndHeight = $('.post-ending').outerHeight();
       postReadingHeight = postEndTop - postTop + postEndHeight;
     } else {
       postEndTop = $('.post-footer').offset().top;
@@ -149,7 +149,7 @@ $(document).ready(function () {
         parseInt($post[0].getBoundingClientRect().top * -1) + windowHeight;
     }
 
-    var percentNum = Number($('.sidebar-reading-info-num').text());
+    var percentNum = Number($('.sidebar-reading-info__num').text());
     postReadingHeight = parseInt(Math.abs(postReadingHeight));
     percent = parseInt((postScrollTop / postReadingHeight) * 100);
     percent = percent > 100 ? 100 : percent < 0 ? 0 : percent;
@@ -161,7 +161,7 @@ $(document).ready(function () {
     ) {
       return;
     }
-    $('.sidebar-reading-info-num').text(percent);
+    $('.sidebar-reading-info__num').text(percent);
     $('.sidebar-reading-line').css(
       'transform',
       'translateX(' + (percent - 100) + '%)'

source/js/stun-boot.js

@@ -34,7 +34,7 @@ $(document).ready(function () {
       this.showImageToWaterfall();
     }
     if (CONFIG.external_link) {
-      var CONTAINER = '.archive, .post-header-title';
+      var CONTAINER = '.archive, .post-title';
       this.addIconToExternalLink(CONTAINER);
     }
     if (CONFIG.fancybox) {

source/js/utils.js

@@ -323,9 +323,7 @@ Stun.utils = Stun.$u = {
             }
           }
           $imgWrap = $img
-            .wrap(
-              `<a class="fancybox" href="${imgSrc}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`
-            )
+            .wrap(`<a class="fancybox" href="${imgSrc}"></a>`)
             .parent('a');
           if ($img.is('.gallery img')) {
             $imgWrap.attr('data-fancybox', 'gallery');
@@ -380,13 +378,18 @@ Stun.utils = Stun.$u = {
       return;
     }
 
-    var $wrapper = $('<span class="external-link"></span>');
-    var $icon = $(`<i class="${CONFIG.external_link.icon.name}"></i>`);
+    var $wrapper = $('<span class="exturl"></span>');
+    var $icon = $(
+      '<span class="exturl__icon">' +
+        `<i class="${CONFIG.external_link.icon.name}"></i>` +
+        '</span>'
+    );
 
     $(container)
       .find('a[target="_blank"]')
+      .addClass('exturl__link')
       .wrap($wrapper)
-      .parent('.external-link')
+      .parent('.exturl')
       .append($icon);
   },
   // Switch to the prev / next post by shortcuts.
@@ -408,7 +411,7 @@ Stun.utils = Stun.$u = {
   // Show / Hide the reward QR.
   registerShowReward: function () {
     $('.reward-button').on('click', function () {
-      var $container = $('.reward-qr');
+      var $container = $('.reward-qrcode');
       if ($container.is(':visible')) {
         $container.css('display', 'none');
       } else {