1. Feature: 可關閉圖片懶加載

2. Feature: 增加頁面排版，可選擇把右邊欄放在左邊
3. Feature: 增加 Note (Bootstrap Callout) (移植於next主題)
4. Feature: 手機上能夠查看TOC
5. Feature: 增加直達評論按鈕
6. Fix: 修復post頁在寬度1024px下的顯示bug
7. Fix: 修復代碼框部分語言沒有顯示正確的代碼語言
8. Fix: 修復設置裏把Disqus註釋掉無法運行的bug

README.md

@@ -12,10 +12,10 @@
 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```
 
-如果想要安装比较新的dev分支，可以
+如果想要安裝比較新的dev分支，可以
 
 ```
-git clone -b div https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
 ```
 
 ## 应用主题
@@ -29,8 +29,7 @@ theme: Butterfly
 
 ## 文档
 
-可查看[这里](https://jerryc.me/posts/21cfbf15)
+可查看或[这里](https://docs.jerryc.me/)或[这里](https://jerryc.me/posts/21cfbf15)
-
 
 
 ## 截图

_config.yml

@@ -121,14 +121,11 @@ cdn:
   css:
     fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
     # fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css
-    googlefont: https://fonts.googleapis.com/css?family=Titillium+Web
     fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
   js:
     jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
     fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
     js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
-    lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
-
 
 # Post info settings
 # ---------------
@@ -241,7 +238,7 @@ valine:
   verify: false # valine verify code (true/false)
   pageSize: 10 # comment list page size
   avatar: monsterid # gravatar style https://valine.js.org/#/avatar
-  lang: en # i18n: zh-cn/en/tw
+  lang: en # i18n: zh-cn/en
   placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
   guest_info: nick,mail,link #valine comment header inf
 
@@ -276,10 +273,6 @@ google_site_verification:
 # See: https://www.bing.com/webmaster/
 bing_site_verification:
 
-# Yandex Webmaster tools verification setting
-# See: https://webmaster.yandex.ru/
-#yandex_site_verification:
-
 # Baidu Webmaster tools verification setting
 # See: https://ziyuan.baidu.com/site/
 baidu_site_verification:
@@ -333,7 +326,7 @@ related_post:
 # canvas_ribbon
 # See: https://github.com/hustcc/ribbon.js
 canvas_ribbon:
-  enable: false
+  enable: true
   size: 150
   alpha: 0.6
   zIndex: -1
@@ -341,7 +334,7 @@ canvas_ribbon:
 
 
 canvas_ribbon_piao:
-  enable: true
+  enable: false
 
 
 # 避免重複網址分散seo
@@ -357,19 +350,35 @@ Open_Graph_meta: true
 readmode:
   enable: true
 
+#全局字體
 font:
   enable: false
   font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
   code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
 
+#網站名字字體
+#左上角網站名字 主頁居中網站名字
+blog_title_font:
+  #字體鏈接
+  font_link: https://fonts.googleapis.com/css?family=Titillium+Web
+  font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+#水平分隔綫
+hr:
+  enable: false
+  #fontawesome上圖標的Unicode
+  icon: '\f21c'
+  icon-top: -20px
+
 # 主頁subtitle
 subtitle: 
   enable: true
   sub1: 今日事,今日畢
-  sub2: Never put off till tomorrow what you can do today
+  sub2: Never put off till tomorrow what you can do today  #如果有符號 ' ，記得前面加上 \ 
 
 #側邊欄顯示設置
 aside:
+  position: right # left or right
   card_author: true
   card_announcement: true
   card_recent_post: true
@@ -383,13 +392,13 @@ aside:
 translate:
   enable: true
   # 默認按鈕顯示文字
-  default: 簡
+  default: 繁
   #网站默认语言，1: 繁體中文, 2: 简体中文
-  defaultEncoding: 1
+  defaultEncoding: 2
   #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
   translateDelay: 0
   #博客网址
-  cookieDomain: "https://jerryc.me/"
+  cookieDomain: "https://xxx/"
   #當文字是簡體時，按鈕顯示的文字
   msgToTraditionalChinese: "繁"
   #當文字是繁體時，按鈕顯示的文字
@@ -403,3 +412,27 @@ fireworks:
 #百度推送
 baidu_push:
   enable: false
+
+#https://instant.page/
+#prefetch預加載
+instantpage:
+  enable: true
+
+note:
+  # Note tag style values:
+  #  - simple    bs-callout old alert style. Default.
+  #  - modern    bs-callout new (v2-v3) alert style.
+  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
+  #  - disabled  disable all CSS styles import of note tag.
+  style: simple
+  icons: true
+  border_radius: 3
+  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
+  # Offset also applied to label tag variables. This option can work with disabled note tag.
+  light_bg_offset: 0
+
+
+#圖片懶加載
+lazyload:
+  enable: true
+  script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js

languages/default.yml

@@ -19,6 +19,7 @@ page:
 
 sticky: Sticky
 no_title: No title
+archives: Archives
 read_more: Read more
 
 post:
@@ -50,7 +51,6 @@ pagination:
   next: Next Post
 
 comment: Comment
-relatedPosts_headline: Recommend
 
 aside:
   articles: Articles

languages/en.yml

@@ -19,6 +19,7 @@ page:
 
 sticky: Sticky
 no_title: No title
+archives: Archives
 read_more: Read more
 
 post:
@@ -50,7 +51,6 @@ pagination:
   next: Next Post
 
 comment: Comment
-relatedPosts_headline: Recommend
 
 aside:
   articles: Articles

languages/zh-CN.yml

@@ -19,6 +19,7 @@ page:
 
 sticky: 置顶
 no_title: 无题
+archives: 时间轴
 read_more: 阅读更多
 
 post:
@@ -51,7 +52,6 @@ pagination:
   next: 下一篇
 
 comment: 评论
-relatedPosts_headline: 相关推荐
 
 aside:
   articles: 文章

languages/zh-TW.yml

@@ -21,14 +21,11 @@ sticky: 置頂
 no_title: 無題
 archives: 時間軸
 read_more: 閲讀更多
-created_date: 發表於
-update_date: 更新於
 
 post:
   created: 發表於
   updated: 更新於
   wordcount: 字數總計
-  commentcount: 評論數
   min2read: "閲讀時長: %s 分鐘"
   page_pv: 閲讀量
   copyright:
@@ -56,7 +53,6 @@ pagination:
   next: 下一篇
 
 comment: 評論
-relatedPosts_headline: 相關推薦
 
 aside:
   articles: 文章

layout/flink.pug

@@ -6,7 +6,10 @@
         each item in i.link_list
           li.md-links-item
             a(href=item.link  title=item.name target="_blank")
-              img.lozad(data-src=item.avatar alt=item.name onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+              if theme.lazyload.enable
+                img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+              else
+                img(src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
               div(class="md-links-title")= item.name 
                 <br/>
               div(class="md-links-des")=item.descr

layout/includes/additional-js.pug

@@ -88,4 +88,11 @@ if is_home()
 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
   script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
 
+if theme.instantpage.enable
   script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+
+if theme.lazyload.enable
+  script(src=url_for(theme.lazyload.script))
+  script. 
+    const observer = lozad(); // lazy loads elements with default selector as '.lozad'
+    observer.observe();

layout/includes/aside.pug

@@ -1,132 +1,21 @@
 if theme.aside.card_author
-  .card_widget.card-author
+  include widget/card_author.pug
-    .card-content
-      .post_data
-        .data-item.text-center
-          img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
-          p.author-info__name.text-center= config.author
-          p.author-info__description.text-center= config.description
-
-      .post_data.data_config
-        if site.posts.length
-          .data-item.text-center
-            .data_link
-              a(href=url_for(config.archive_dir) + '/')
-                p.headline= _p('aside.articles') 
-                p.length_num= site.posts.length
-
-        if site.tags.length
-          .data-item.text-center       
-            .data_link
-              a(href=url_for(config.tag_dir) + '/' )
-                p.headline= _p('aside.tags')
-                p.length_num= site.tags.length
-
-        if site.categories.length
-          .data-item.text-center      
-            .data_link
-              a(href=url_for(config.category_dir) + '/')
-                p.headline= _p('aside.categories') 
-                p.length_num= site.categories.length
-
-      .post_data.text-center
-        a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )=  _p('aside.card_bookmark') || 'Follow Me'
-        
-    
-    
-      if(theme.social)
-        .post_data.data_config
-          #aside-social-icons 
-            each url, icon in theme.social
-              a.social-icon.data-item(href=url target="_blank")
-                i(class=icon)
 
 if theme.aside.card_announcement
-  .card_widget.card-announcement
+  include widget/card_announcement.pug
-    .card-content
-      .item_headline
-        i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
-        span= _p('aside.card_announcement')
-      .announcement_content= theme.announcement.content
 
 if theme.aside.card_recent_post
-  .card_widget.card-recent-post
+  include widget/card_recent_post.pug
-    .card-content
-      .item_headline
-        i.fa.fa-history(aria-hidden="true")
-        span= _p('aside.card_recent_post')
-      .aside_recent_item
-        - site.posts.sort('date', -1).limit(5).each(function(article){
-          .aside_recent_post
-            - var link = article.link || article.path
-              a(href=url_for(link))
-                - var post_cover = article.cover
-                - var default_post_cover = theme.default_cover
-                .aside_post_cover
-                  if (post_cover)
-                    img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-                  else
-                    img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
-                div#aside_title
-                  .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
-                  if (theme.post_meta.date_type)
-                    - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
-                    time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
-      
-        - })
   
 if theme.aside.card_categories   
-  .card_widget.card-categories
+  include widget/card_categories.pug
-    .card-content
-      .item_headline
-        i.fa.fa-folder-open(aria-hidden="true")
-        span= _p('aside.card_categories')
-      ul.aside_category_item
-        - site.categories.sort('name').each(function(category){
-          li.aside_category_list
-            a.aside_category_list_link(href='/' + `${category.path}`)
-              span.aside_category_list_name= category.name
-              span.aside_category_list_length= category.length
-        - })
 
 if theme.aside.card_tags
-  .card_widget.card-tags
+  include widget/card_tags.pug
-    .card-content
-      .item_headline
-        i.fa.fa-tags(aria-hidden="true")
-        span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
 
 if theme.aside.card_archives
-  .card_widget.card-archives
+  include widget/card_archives.pug
-    .card-content
-      .item_headline
-        i.fa.fa-archive(aria-hidden="true")
-        span= _p('aside.card_archives')
-      div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
 
 if theme.aside.card_webinfo
-  .card_widget.card-webinfo
+  include widget/card_webinfo.pug
-    .card-content
-      .item_headline
-          i.fa.fa-line-chart(aria-hidden="true")
-          span= _p('aside.card_webinfo.headline')
-      .webinfo
-        .webinfo_item
-          .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
-          .webinfo_article_count= site.posts.length      
-        if theme.runtimeshow.enable
-          .webinfo_item
-            .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
-            #webinfo_runtime_count.webinfo_runtime_count
-            script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)       
-        
-        if theme.busuanzi.site_uv 
-          .webinfo_item       
-            .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
-            .webinfo_site_uv_count#busuanzi_value_site_uv
-        if theme.busuanzi.site_pv
-          .webinfo_item
-            .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
-            .webinfo_site_pv_count#busuanzi_value_site_pv
   

layout/includes/comments/disqus.pug

@@ -1,4 +1,4 @@
-if theme.disqus.enable
+if theme.disqus && theme.disqus.enable
   #disqus_thread
   script.
     var unused = null;
@@ -11,5 +11,3 @@ if theme.disqus.enable
     s.src = "https://" + '!{theme.disqus.shortname}' +".disqus.com/embed.js";
     s.setAttribute('data-timestamp', '' + +new Date());
     (d.head || d.body).appendChild(s);
-  if theme.disqus.count
-    script#dsq-count-scr(src="https://" + theme.disqus.shortname + ".disqus.com/count.js" async)

layout/includes/comments/gitalk.pug

@@ -1,13 +1,13 @@
-if theme.gitment && theme.gitment.enable
+if theme.gitalk && theme.gitalk.enable
-  #gitment-container
+  #gitalk-container
   script.
-    var gitment = new Gitment({
+    var gitalk = new Gitalk({
+      clientID: '!{theme.gitalk.client_id}',
+      clientSecret: '!{theme.gitalk.client_secret}',
+      repo: '!{theme.gitalk.repo}',
+      owner: '!{theme.gitalk.owner}',
+      admin: '!{theme.gitalk.admin}',
       id: md5(decodeURI(location.pathname)),
-      owner: '!{theme.gitment.owner}',
+      language: '!{lang}'
-      repo: '!{theme.gitment.repo}',
-      oauth: {
-        client_id: '!{theme.gitment.client_id}',
-        client_secret: '!{theme.gitment.client_secret}'
-      }
     })
-    gitment.render('gitment-container')
+    gitalk.render('gitalk-container')

layout/includes/comments/gitment.pug

@@ -2,6 +2,7 @@ if theme.gitment && theme.gitment.enable
   #gitment-container
   script.
     var gitment = new Gitment({
+      id: md5(decodeURI(location.pathname)),
       owner: '!{theme.gitment.owner}',
       repo: '!{theme.gitment.repo}',
       oauth: {

layout/includes/comments/index.pug

@@ -1,40 +1,35 @@
-if theme.disqus.enable
+if theme.disqus && theme.disqus.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      =" "
+      span= ' ' + _p('comment')
-      span= _p('comment')
     include ./disqus.pug
 else if theme.laibili && theme.laibili.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      =" "
+      span= ' ' + _p('comment')
-      span= _p('comment')
     include ./laibili.pug
 else if theme.gitment && theme.gitment.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      =" "
+      span= ' ' +  _p('comment')
-      span= _p('comment')
     include ./gitment.pug
 else if theme.gitalk && theme.gitalk.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      =" "
+      span= ' ' +  _p('comment')
-      span= _p('comment')
     include ./gitalk.pug
 else if theme.valine && theme.valine.enable
   hr
   #post-comment
     .comment_headling
       i.fa.fa-comments.fa-fw(aria-hidden="true")
-      =" "
+      span= ' ' +  _p('comment')
-      span= _p('comment')
     include ./valine.pug

layout/includes/comments/valine.pug

@@ -1,6 +1,5 @@
 if theme.valine && theme.valine.enable
   #vcomment.vcomment
-  script(src='https://cdn1.lncld.net/static/js/3.0.4/av-min.js')
   script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
   script.
     var notify = '#{ theme.valine.notify }' == true ? true : false;
@@ -11,50 +10,7 @@ if theme.valine && theme.valine.enable
     });
     guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
 
-    var localeName = 'tw',
+    window.valine = new Valine({
-    localeMode = {
-        head: {
-            nick: '暱稱(必填)',
-            mail: '郵箱(必填,可以收到回復提醒)',
-            link: '網址(選填)',
-        },
-        tips: {
-            comments: '評論',
-            sofa: '快來做第一個評論的人吧~',
-            busy: '還在提交中，請稍候...',
-            again: '這麼簡單也能錯，也是沒誰了.'
-        },
-        ctrl: {
-            reply: '回覆',
-            ok: '好的',
-            sure: '確認',
-            cancel: '取消',
-            confirm: '確認',
-            continue: '繼續',
-            more: '查看更多...',
-            try: '再試試?',
-            preview: '預覽',
-            emoji: '表情'
-        },
-        error: {
-            99: '初始化失敗，請檢查init中的`el`元素.',
-            100: '初始化失敗，請檢查你的AppId和AppKey.',
-            401: '未經授權的操作，請檢查你的AppId和AppKey.',
-            403: '訪問被api域名白名單拒絕，請檢查你的安全域名設置.',
-        },
-        timeago: {
-            seconds: '秒前',
-            minutes: '分鐘前',
-            hours: '小時前',
-            days: '天前',
-            now: '剛剛'
-        }
-    };
-
-    window.valine = new Valine();
-    valine.installLocale(localeName,localeMode);
-
-    valine.init({
       el:'#vcomment',
       notify:notify,
       verify:verify,

layout/includes/head.pug

@@ -1,5 +1,7 @@
 - var without_index = url.replace('index.html', '')
 - var without_html = without_index.replace('.html', '')
+- var photo_check = page.cover || theme.avatar
+- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
 
 meta(http-equiv="x-dns-prefetch-control" content="on")
 if theme.canonical
@@ -9,7 +11,7 @@ if theme.twitter_meta
   meta(name="twitter:card" content="summary_large_image")
   meta(name="twitter:title" content=pageTitle_no_include_blog_name)
   meta(name="twitter:description" content=pageDescription)
-  meta(name="twitter:image" content= page.cover|| theme.avatar)
+  meta(name="twitter:image" content=photo_link)
 
 if theme.Open_Graph_meta
   if is_post()
@@ -21,7 +23,7 @@ if theme.Open_Graph_meta
   meta(property="og:url" content=without_html)
   meta(property="og:site_name" content=config.title)
   meta(property="og:description" content=pageDescription)
-  meta(property="og:image" content= page.cover|| theme.avatar)
+  meta(property="og:image" content=photo_link)
 
 if theme.disable_baidu_transformation
   meta(http-equiv="Cache-Control" content="no-transform")
@@ -108,6 +110,9 @@ if theme.qihu_site_verification
 - var preload_img = page.top_img || theme.top_img || config.top_img
 
 if (is_archive() && preload_archive_img) 
-  link(rel="preload" href=preload_img  as="image" )
+  link(rel="preload" href=url_for(preload_archive_img)  as="image" )
 else if (!is_post() && preload_img)
-  link(rel="preload" href=preload_img  as="image" )
+  link(rel="preload" href=url_for(preload_img)  as="image" )
+
+if theme.blog_title_font.font_link
+  link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))

layout/includes/header.pug

@@ -8,6 +8,11 @@
     .menu-icon-third
     
   span.pull-right.menus
+    .mobile_author_icon
+      img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+      .mobile_author-info__description= config.description
+    hr
+    .menus_item
       each value, label in theme.menu
         a.site-page(href=value.split('||')[0])
           i.fa-fw(class=value.split('||')[1])

layout/includes/layout.pug

@@ -7,12 +7,15 @@
 - if (is_year()) pageTitle += ': ' + page.year
 - var pageTitle_saved  //- 暫時存儲pageTitle
 - var pageTitle_no_include_blog_name //- 存儲pageTitle， 不帶 " | "，meta用
+- var home_subtitle_true //有subtitle
 //- home時顯示config.title (JerryC)，其他顯示 pageTitle。meta用
 - is_home() ? pageTitle_no_include_blog_name = config.title : pageTitle_no_include_blog_name = pageTitle
 //- 暫時存儲pageTitle
 - pageTitle ? pageTitle_saved = pageTitle + ' | ' + config.title : pageTitle_saved = config.title
+//- 是否有 config.subtitle 是各自显示
+- config.subtitle ? home_subtitle_true = ' - ' + config.subtitle : home_subtitle_true = ''
 //- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
-- is_home() ? pageTitle = config.title + ' - ' + config.subtitle : pageTitle = pageTitle_saved
+- is_home() ? pageTitle = config.title + home_subtitle_true : pageTitle = pageTitle_saved
 
 - var pageDescription = page.description || page.title || config.description || ''
 - var pageKeywords = (config.keywords || []).join(',')
@@ -63,14 +66,12 @@ html(lang=config.language)
             div!= body
           else
             block content
-    //- - var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img || true
-    //- - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
-    //- - var footer_bg_class= bg_img ? 'footer-bg' : ''
-    //- footer(style=bg_img class=footer_bg_class)
     footer
       include ./footer.pug
     i.fa.fa-arrow-up#go-up(aria-hidden="true")
     include ./rightside.pug
+    if (is_post())
+      include ./post-bottom.pug
     each item in theme.cdn.js
       if item !== undefined
         script(src=url_for(item))

layout/includes/pagination.pug

@@ -14,43 +14,49 @@ else
     if(page.prev)
       if(page.next)
         .prev-post.pull-left
-          - var pagination_cover = page.prev.cover || theme.default_cover
+          - var pagination_cover = page.prev.cover || random_cover()
           a(href=url_for(page.prev.path))
+            if theme.lazyload.enable
               img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+            else
+              img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+
             .label=_p('pagination.prev')
             .prev_info
-              //- i.fa.fa-chevron-left   
               span=page.prev.title
       else
         .prev-post.pull-full
-          - var pagination_cover = page.prev.cover || theme.default_cover
+          - var pagination_cover = page.prev.cover || random_cover()
           a(href=url_for(page.prev.path))
+            if theme.lazyload.enable
               img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            else
+              img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             .label=_p('pagination.prev')
             .prev_info
-              //- i.fa.fa-chevron-left   
               span=page.prev.title
           
-          
-
     if(page.next)
       if(page.prev)
         .next-post.pull-right
-          - var pagination_cover = page.next.cover || theme.default_cover
+          - var pagination_cover = page.next.cover || random_cover()
           a(href=url_for(page.next.path))
+            if theme.lazyload.enable
               img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            else
+              img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
             .label=_p('pagination.next')
             .next_info
               span=page.next.title 
-              //- i.fa.fa-chevron-right
       else
         .next-post.pull-full
-          - var pagination_cover = page.next.cover || theme.default_cover
+          - var pagination_cover = page.next.cover || random_cover()
           a(href=url_for(page.next.path))
+            if theme.lazyload.enable
               img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            else
+              img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
             .label=_p('pagination.next')
             .next_info
               span=page.next.title      
-              //- i.fa.fa-chevron-right
-      
 

layout/includes/post-bottom.pug

@@ -0,0 +1,8 @@
+#post_bottom
+  #post_bottom_items
+    a#to_comment(href="#post-comment")
+      i.scroll_to_comment.fa.fa-comments
+    i#mobile_toc.fa.fa-list
+    #toc_mobile
+      .toc_mobile_headline= _p('sidebar.catalog')
+      !=toc(page.content,{"class":"toc_mobile_items"})

layout/includes/recent-posts.pug

@@ -3,23 +3,34 @@ each article , index in page.posts.data
     - var link = article.link || article.path
       if index%2 == 0
         .post_cover.is_left
-          a(href=url_for(link))
+          a(href=url_for(link) title=article.title || _p('no_title'))
             - var post_cover = article.cover
-            - var default_post_cover = theme.default_cover
+            - var default_post_cover = random_cover()
             if (post_cover)
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
               else
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            else
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              else
+                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
       else
         .post_cover.is_right
-          a(href=url_for(link))
+          a(href=url_for(link) title=article.title || _p('no_title'))
             - var post_cover = article.cover
-            - var default_post_cover = theme.default_cover
+            - var default_post_cover = random_cover()
             if (post_cover)
-              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
               else
-              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)            
-
+            else
+              if theme.lazyload.enable
+                img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+              else
+                img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
     .recent-post-info   
       a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title')
       if (article.top)

layout/includes/related-posts.pug

@@ -1,6 +0,0 @@
-.relatedPosts
-  .relatedPosts_headline
-    i.fa.fa-thumbs-up(aria-hidden="true")
-    span=' ' + _p('relatedPosts_headline')
-  .relatedPosts_list!= related_posts(page,site.posts)
-  .clear_both

layout/includes/reward.pug

@@ -6,60 +6,6 @@
       ul.reward-all
         each item in theme.reward.QR_code
           li.reward-item
-            img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
+            img.lozad.post-qr-code__img(src=(item.itemlist||item).img)
             .post-qr-code__desc=(item.itemlist||item).text
 
-
-
-//- donate-share样式1
-//- .post-reward-share
-//-   .post-reward
-//-     a.reward-buttom
-//-       i.fa.fa-qrcode
-//-       = ' ' + _p('donate')
-//-     .reward-main
-//-       ul.reward-all
-//-         each item in theme.QR_code
-//-           li.reward-item
-//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
-//-             .post-qr-code__desc=(item.itemlist||item).text
-  
-//-   .post-share
-//-     include share/index.pug
-//-     a.share-buttom
-//-       i.fa.fa-share-alt
-//-       = ' ' + _p('share')
-
-//- donate-share样式1
-//- #social
-//-   .social-main
-//-     span.social-donate
-//-       a#social-donate
-//-         i.fa.fa-qrcode
-//-         = _p('donate')
-
-
-//-     .circle
-//-       .circle-empty
-//-         span
-//-       span.circle_item
-//-         a(style="cursor:pointer")
-
-//-     .social-sharebutton
-//-       span.share-s
-//-         a(href="javascript:void(0)" id="share-s" title=_p('share'))
-//-           i.fa.fa-share-alt
-//-           = _p('share')
-//-       include share/index.pug
-
-
-//- if (theme.QR_code)
-//-   if (theme.QR_code.length > 0)
-//-     .post-qr-code
-//-         each item in theme.QR_code
-//-           .post-qr-code-item
-//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
-//-             .post-qr-code__desc=(item.itemlist||item).text
-
-
-

layout/includes/widget/card_announcement.pug

@@ -0,0 +1,6 @@
+.card_widget.card-announcement
+  .card-content
+    .item_headline
+      i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+      span= _p('aside.card_announcement')
+    .announcement_content= theme.announcement.content

layout/includes/widget/card_archives.pug

@@ -0,0 +1,6 @@
+.card_widget.card-archives
+  .card-content
+    .item_headline
+      i.fa.fa-archive(aria-hidden="true")
+      span= _p('aside.card_archives')
+    div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})

layout/includes/widget/card_author.pug

@@ -0,0 +1,41 @@
+.card_widget.card-author
+  .card-content
+    .post_data
+      .data-item.text-center
+        img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+        p.author-info__name.text-center= config.author
+        p.author-info__description.text-center= config.description
+
+    .post_data.data_config
+      if site.posts.length
+        .data-item.text-center
+          .data_link
+            a(href=url_for(config.archive_dir) + '/')
+              p.headline= _p('aside.articles') 
+              p.length_num= site.posts.length
+
+      if site.tags.length
+        .data-item.text-center       
+          .data_link
+            a(href=url_for(config.tag_dir) + '/' )
+              p.headline= _p('aside.tags')
+              p.length_num= site.tags.length
+
+      if site.categories.length
+        .data-item.text-center      
+          .data_link
+            a(href=url_for(config.category_dir) + '/')
+              p.headline= _p('aside.categories') 
+              p.length_num= site.categories.length
+
+    .post_data.text-center
+      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )=  _p('aside.card_bookmark') || 'Follow Me'
+      
+  
+  
+    if(theme.social)
+      .post_data.data_config
+        #aside-social-icons 
+          each url, icon in theme.social
+            a.social-icon.data-item(href=url target="_blank")
+              i(class=icon)

layout/includes/widget/card_categories.pug

@@ -0,0 +1,23 @@
+if site.categories.length
+  .card_widget.card-categories
+      .card-content
+        .item_headline
+          i.fa.fa-folder-open(aria-hidden="true")
+          span= _p('aside.card_categories')
+        ul.aside_category_item        
+          mixin displayCategories(parent = undefined) 
+            - site.categories.find({ parent }).sort("name").each(function(category) {
+                - var childCount = site.categories.find({ parent: category._id }).count();              
+                li.aside_category_list
+                  a.aside_category_list_link(href=url_for(category.path))
+                    span.aside_category_list_name= category.name
+                    span.aside_category_list_length= category.length
+                  
+                if childCount > 0
+                  ul.aside_category_item.child
+                    +displayCategories(category._id)
+            - })
+
+          +displayCategories()
+
+  

layout/includes/widget/card_recent_post.pug

@@ -0,0 +1,30 @@
+.card_widget.card-recent-post
+  .card-content
+    .item_headline
+      i.fa.fa-history(aria-hidden="true")
+      span= _p('aside.card_recent_post')
+    .aside_recent_item
+      - site.posts.sort('date', -1).limit(5).each(function(article){
+        .aside_recent_post
+          - var link = article.link || article.path
+            a(href=url_for(link))
+              - var post_cover = article.cover
+              - var default_post_cover = random_cover()
+              .aside_post_cover
+                if (post_cover)
+                  if theme.lazyload.enable
+                    img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  else
+                    img.aside_post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                else
+                  if theme.lazyload.enable
+                    img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                  else
+                    img.aside_post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              div#aside_title
+                .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+                if (theme.post_meta.date_type)
+                  - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
+                  time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
+    
+      - })

layout/includes/widget/card_tags.pug

@@ -0,0 +1,7 @@
+if site.tags.length
+  .card_widget.card-tags
+    .card-content
+      .item_headline
+        i.fa.fa-tags(aria-hidden="true")
+        span= _p('aside.card_tags')
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})

layout/includes/widget/card_webinfo.pug

@@ -0,0 +1,24 @@
+.card_widget.card-webinfo
+  .card-content
+    .item_headline
+        i.fa.fa-line-chart(aria-hidden="true")
+        span= _p('aside.card_webinfo.headline')
+    .webinfo
+      .webinfo_item
+        .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
+        .webinfo_article_count= site.posts.length      
+      if theme.runtimeshow.enable
+        .webinfo_item
+          .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
+          #webinfo_runtime_count.webinfo_runtime_count
+          script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)       
+      
+      if theme.busuanzi.site_uv 
+        .webinfo_item       
+          .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .webinfo_site_uv_count#busuanzi_value_site_uv
+      if theme.busuanzi.site_pv
+        .webinfo_item
+          .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .webinfo_site_pv_count#busuanzi_value_site_pv
+

layout/page.pug

@@ -6,7 +6,7 @@ block content
       .tag-cloud__title= _p('page.tag')
         |  - 
         span.tag-cloud__amount= site.tags.length
-      .tag-cloud-tags!= tagcloud({min_font: 20, max_font: 43, amount: 200, color: true, start_color: '#A4D8FA', end_color: '#0790E8'})
+      .tag-cloud-tags!= tags(site.tags)
       if page.comments !== false
         include includes/comments/index.pug
     #aside_content.aside_content

layout/post.pug

@@ -71,6 +71,6 @@ block content
   include includes/pagination.pug
   
   if theme.related_post && theme.related_post.enable
-    include includes/related-posts.pug
+    != related_posts(page,site.posts)
   if page.comments !== false
     include includes/comments/index.pug

scripts/note.js

@@ -0,0 +1,15 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ */
+
+'use strict';
+
+function postNote(args, content) {
+  return `<div class="note ${args.join(' ')}">
+            ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+          </div>`;
+}
+
+hexo.extend.tag.register('note', postNote, {ends: true});
+hexo.extend.tag.register('subnote', postNote, {ends: true});

scripts/post-lazyload.js

@@ -0,0 +1,20 @@
+'use strict';
+let cheerio;
+hexo.extend.filter.register('after_post_render', data => {
+  var theme = hexo.theme.config;
+  if (!theme.lazyload.enable) return;
+
+  if (!cheerio) cheerio = require('cheerio');
+
+  const $ = cheerio.load(data.content, {decodeEntities: false});
+  const images = $('img');
+  if (!images.length) return;
+
+  images.each((i, o) => {
+    let src = $(o).attr('src');
+    $(o).attr('data-src', src).removeAttr('src');
+    $(o).addClass('lozad');
+  });
+
+  data.content = $.html();
+}, 0);

scripts/random_cover.js

@@ -0,0 +1,13 @@
+hexo.extend.helper.register('random_cover', function () {
+  var cover;
+  var num;
+  if (!Array.isArray(hexo.theme.config.default_cover)) {
+    cover = hexo.theme.config.default_cover
+    return cover
+  } else {
+    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
+    cover = hexo.theme.config.default_cover[num];
+    return cover
+  }
+
+})

scripts/related_post.js

@@ -23,16 +23,39 @@ hexo.extend.helper.register('related_posts', function(currentPost, allPosts){
   if (relatedPosts.length == 0) { return '' };
   var result = "";
   var limit_num = hexo.theme.config.related_post.limit || 6
+  var lang = hexo.theme.config.rootConfig.language;
+  var headline_lang;
+  if (lang === 'zh-CN') {
+    headline_lang = '相关推荐';
+  } else if ( lang === 'zh-TW') {
+    headline_lang = '相關推薦';
+  } else {
+    headline_lang = 'Recommend';
+  }
+    
   relatedPosts = relatedPosts.sort(compare('weight'));
+  var lazy_src = hexo.theme.config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src'
+  var lazy_class = hexo.theme.config.lazyload.enable ? lazy_class  = 'lozad' : lazy_class  = ''
+
+  if (relatedPosts.length > 0) {
+    result += '<div class="relatedPosts">'
+    result += '<div class="relatedPosts_headline"><i class="fa fa-fw fa-thumbs-up" aria-hidden="true"></i><span>' + ' ' + headline_lang + '</span></div>'
+    result += '<div class="relatedPosts_list">'
+  
   for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
  
-    var cover = relatedPosts[i].cover|| hexo.theme.config.default_cover|| data.butterfly.default_cover 
+    var cover = relatedPosts[i].cover || random_cover()
-    result += '<div class="relatedPosts_item"><a href="/' + relatedPosts[i].path + '" title="' + relatedPosts[i].title +'">';
+
-    result += '<img class="relatedPosts_cover lozad" data-src="' + cover + '">';
+    result += '<div class="relatedPosts_item"><a href="' + hexo.theme.config.rootConfig.root + relatedPosts[i].path + '" title="' + relatedPosts[i].title + '">';
+    result += '<img class="relatedPosts_cover '+ lazy_class + '"' + lazy_src + '="' + cover + '">';
     result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
     result += '</a></div>'
-  };  // console.log(relatedPosts);
+    };
+    
+    result += '</div><div class="clear_both"></div></div>'
   return result;
+
+}
 });
 hexo.extend.helper.register('echo', function(path){
 return path;
@@ -62,3 +85,15 @@ function compare (attr) {
   }
 }
 
+function random_cover() {
+  var post_cover;
+  var num;
+  if (!Array.isArray(hexo.theme.config.default_cover)) {
+    post_cover = hexo.theme.config.default_cover
+    return post_cover
+  } else {
+    num = Math.floor(Math.random() * (hexo.theme.config.default_cover.length));
+    post_cover = hexo.theme.config.default_cover[num];
+    return post_cover
+  }
+}

scripts/tags.js

@@ -0,0 +1,16 @@
+hexo.extend.helper.register('tags', function (site_tags) {
+  var result = "";
+  site_tags.sort('path').each(function (tags) {    
+  var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
+  var color =
+    "rgb(" +
+    Math.floor(Math.random() * 201) +
+    ", " +
+    Math.floor(Math.random() * 201) +
+    ", " +
+    Math.floor(Math.random() * 201) +
+    ")"; // 0,0,0 -> 200,200,200
+    result += '<a href="' + hexo.theme.config.rootConfig.root + tags.path + '" style="font-size:' + fontSize + ';color:' + color + '">' + tags.name + '</a>'
+  })
+  return result;
+})

scripts/url_check.js

@@ -0,0 +1,8 @@
+hexo.extend.helper.register('url_check', function (p) {
+  
+    let src = p ;
+    let reg = /^https?/ig;
+    return reg.test(src)
+    
+  
+})

source/css/_global/index.styl

@@ -62,7 +62,6 @@ h6
   position: fixed
   right: $go-up-right
   bottom: $go-up-bottom
-  z-index: 100
   font-size: $sidebar-icon-size
   opacity: 0
   cursor: pointer
@@ -85,11 +84,11 @@ hr
 
   &:before
     position: absolute
-    top: -10px
+    top: $hr-icon-top
     left: 5%
     z-index: 1
     color: $light-blue
-    content: "\f0c4"
+    content: $hr-icon
     font: normal normal normal 14px / 1 FontAwesome
     font-size: 20px
     transition: all 1s ease-in-out
@@ -149,6 +148,8 @@ table
 
 // valine 
 #vcomment
+  font-size: inherit
+  
   input 
     font-size: 0.65rem
 
@@ -166,9 +167,6 @@ table
   .info
     display: none
   
-  .vcomment
-    margin-top: 20px
-  
   .vimg
     border: 0
 
@@ -207,15 +205,14 @@ table
 #site-name,
 #aside_content .author-info__name,
 #aside_content .author-info__description
-  font-family: 'Titillium Web',Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+  font-family: $site-name-font
 
 
 
 #rightside 
   right: -38px
-  z-index: 100
   position: fixed
-  bottom: 50px
+  bottom: 30px
   padding-bottom: 32px
   opacity: 0
   transition: all .2s
@@ -349,6 +346,11 @@ table
   display: block !important
 
 .fireworks
-  position: fixed;
+  position: fixed
-  z-index: -1;
+  z-index: -1
-  pointer-events: none;
+  pointer-events: none
+
+
+// 去掉加載黑框
+img[src=""],img:not([src])
+  opacity: 0

source/css/_highlight/highlight.styl

@@ -2,19 +2,19 @@
 @require "theme"
 @require "diff"
 
-languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown"
+// languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown"
 wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
 
-loopForLanguages()
+// loopForLanguages()
-  for lang in languages
+//   for lang in languages
-    .article-container
+//     .article-container
-      figure.highlight
+//       figure.highlight
-        &{"." + lang}
+//         &{"." + lang}
-          table
+//           table
-            &:before
+//             &:before
-              content: lang
+//               content: lang
 
-loopForLanguages()
+// loopForLanguages()
 
 // Placeholder: $code-block
 $code-block
@@ -110,7 +110,7 @@ blockquote
         padding: 0 0.7rem
         width: 5rem
         color: $highlight-foreground
-        content: "Code"
+        content: attr(data-content)
         font-weight: bold
         font-size: 0.8rem
         line-height: 1.4rem

source/css/_layout/aside.styl

@@ -12,7 +12,6 @@
     transition: all .3s
     background: #fff
     margin-top: 20px
-    margin-left: 15px
     overflow: hidden
 
     &:hover
@@ -224,6 +223,13 @@
     margin-bottom: -3px
     margin-block-start: 0.2rem
   
+  .aside_category_item.child
+    margin-bottom: -3px
+    margin-block-start: 0rem
+
+    .aside_category_list
+      margin-left: -50px
+
   .aside_category_list,.archive-list-item
     margin-left: -40px
     padding: 0.2rem 1rem
@@ -235,6 +241,18 @@
       text-decoration: none
       color: #4c4948
   
+  .aside_category_list_name,.archive-list-link
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    flex: auto
+
+  .aside_category_list_link,.archive-list-item
+    display: flex
+  
+
+
+
   .aside_category_list_length,.archive-list-count
     float: right 
   
@@ -267,14 +285,11 @@
 
 
 @keyframes announ_animation{
-
   0%,to{
     color: #4c4948
-
 }
   50%{
     color: #FF0000
-
     }
     }
 
@@ -287,6 +302,14 @@
     width: 100% !important
   
   .card_widget
-    margin-left: 0 !important
+    margin-left: 0 
+    margin-right: 0 
 
 
+@media screen and (min-width: 900px) 
+  #aside_content    
+    .card_widget
+        if hexo-config("aside.position") == "right"
+          margin-left: 15px
+        else 
+          margin-right: 15px

source/css/_layout/head.styl

@@ -103,9 +103,35 @@
         -webkit-transform: rotate(-45deg) translate(4px, -4px)
         transform: rotate(-45deg) translate(4px, -4px)
   
+  .menus  
+    .mobile_author_icon
+      display: none
+      padding: 3rem 1.5rem 0
+      text-align: center
   
+      img
+        height: 120px
+        width: 120px
+        display: inline-block
+        vertical-align: top
+        border-radius: 70px
+        -webkit-transition: all .3s
+        -moz-transition: all .3s
+        -o-transition: all .3s
+        -ms-transition: all .3s
+        transition: all .3s
 
+    hr         
+      margin: 1rem auto
+      display: none
     
+    &.menu_open
+      display: block
+      animation: menu_open .3s
+
+    &.menu_close
+      animation: menu_close .3s
+      display: block
 
 
   a
@@ -122,6 +148,7 @@
     text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
     font-size: 0.7rem
     cursor: pointer
+    margin-left: 1rem
 
     &::after
       position: absolute
@@ -191,30 +218,47 @@
       display: block
 
     .menus
-      position: absolute
+      position: fixed
-      top: 3rem
+      top: 0
-      right: 0.8rem
+      right: 0
-      display: none
+      width: 100%
-      width: 8rem
+      height 101vh
-      background: alpha($white, 0.9)
+      background: $white
       cursor: pointer
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
+      z-index: -1
+      overflow: auto
+      display: none
 
       a
-        display: block !important
+        display: inline-block !important
         opacity: 1 !important
-        margin-left: 0
+        // margin-left: 0
-        padding-top: 0.3rem
+        // padding-top: 0.3rem
-        padding-bottom: 0.3rem
+        // padding-bottom: 0.3rem
-        padding-left: 0.6rem
+        // padding-left: 0.6rem
+        margin: 0
+        padding: .5rem 1rem
         color: $font-black
         text-shadow: none
         font-size: 0.8rem
         z-index: 0
 
+
         &:hover
           color: $light-blue
       
+      .mobile_author_icon
+        display: block
+     
+      .menus_item 
+          padding: 0 .5rem
+          margin-bottom: 4rem
+          text-align: center 
+              
+      hr
+        display: block 
+
     .search 
       right: 0.5rem
 
@@ -225,7 +269,3 @@
       .search
         display: inline-block;
         opacity: 1;
-
-
-#page-header .site-page
-  margin-left: 1rem

source/css/_layout/nightshift.styl

@@ -108,7 +108,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
         background: rgb(27, 38, 59) 
 
     .post-cards,.md-links-item
-        // background: #2d3035
         a
             color: #99a9bf
 
@@ -200,6 +199,22 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
     &::-webkit-scrollbar-thumb
       background: lighten(#2d3035,5)
 
+    .more
+      background-color: #616a6b
+
+    #post_bottom
+      background: #2d3035
+      box-shadow: 0 -5px 6px -5px rgba(133,133,133,0)
+
+      i
+        color: #99a9bf !important
+      
+      #toc_mobile
+        background: #2d3035
+
+        a
+          color: #99a9bf !important
+
   @media screen and (max-width: 768px)
     .night-mode
       color: #99a9bf 
@@ -207,14 +222,13 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
 
       #page-header
         .menus
-          a
-            color: #99a9bf 
           background: #2d3035
-        &.fixed
+        a
+          color: #99a9bf !important        
         .menu-icon-first,
         .menu-icon-second,
         .menu-icon-third
-            background-color: #99a9bf;
+          background-color: #99a9bf !important
 
 
   @media screen and (min-width: 768px)

source/css/_layout/note.styl

@@ -0,0 +1,256 @@
+.note 
+  $note-icons = hexo-config('note.icons')
+  $note-style = hexo-config('note.style')
+  margin: 10px 0
+  padding: 15px
+  position: relative
+
+  if ($note-style == 'simple') 
+    border: 1px solid $light-grey
+    border-left-width: 5px
+  
+
+  if ($note-style == 'modern') 
+    background-color: $whitesmoke
+    border: 1px solid transparent
+  
+
+  if ($note-style == 'flat') 
+    background-color: lighten($light-grey, 65%)
+    border: initial
+    border-left: 5px solid $light-grey
+  
+
+  if (hexo-config('note.border_radius') is a 'unit') 
+    border-radius: unit(hexo-config('note.border_radius'), px)
+  
+
+  h2, h3, h4, h5, h6 
+    if ($note-icons) 
+      margin-top: 3px
+    else 
+      margin-top: 0
+    
+
+    border-bottom: initial
+    margin-bottom: 0
+    padding-top: 0 !important
+  
+
+  p, ul, ol, table, pre, blockquote, img 
+    &:first-child 
+      margin-top: 0
+
+    &:last-child 
+      margin-bottom: 0
+    
+
+  if ($note-icons) 
+    &:not(.no-icon) 
+      padding-left: 45px
+
+      &::before 
+        font-family: 'FontAwesome'
+        font-size: larger
+        left: 15px
+        position: absolute
+        top: 13px
+      
+  &.default 
+    if ($note-style == 'flat') 
+      background-color: $note-default-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-default-bg
+      border-color: $note-modern-default-border
+      color: $note-modern-default-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-default-text
+          color: $note-modern-default-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-default-hover
+            color: $note-modern-default-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-default-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-default-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-default-icon
+
+          if ($note-style != 'modern') 
+            color: $note-default-text
+
+  &.primary 
+    if ($note-style == 'flat') 
+      background-color: $note-primary-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-primary-bg
+      border-color: $note-modern-primary-border
+      color: $note-modern-primary-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-primary-text
+          color: $note-modern-primary-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-primary-hover
+            color: $note-modern-primary-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-primary-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-primary-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-primary-icon
+
+          if ($note-style != 'modern') 
+            color: $note-primary-text
+          
+  &.info 
+    if ($note-style == 'flat') 
+      background-color: $note-info-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-info-bg
+      border-color: $note-modern-info-border
+      color: $note-modern-info-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-info-text
+          color: $note-modern-info-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-info-hover
+            color: $note-modern-info-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-info-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-info-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-info-icon
+
+          if ($note-style != 'modern') 
+            color: $note-info-text
+          
+  &.success 
+    if ($note-style == 'flat') 
+      background-color: $note-success-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-success-bg
+      border-color: $note-modern-success-border
+      color: $note-modern-success-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-success-text
+          color: $note-modern-success-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-success-hover
+            color: $note-modern-success-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-success-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-success-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-success-icon
+
+          if ($note-style != 'modern') 
+            color: $note-success-text
+          
+  &.warning 
+    if ($note-style == 'flat') 
+      background-color: $note-warning-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-warning-bg
+      border-color: $note-modern-warning-border
+      color: $note-modern-warning-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-warning-text
+          color: $note-modern-warning-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-warning-hover
+            color: $note-modern-warning-hover
+          
+    if ($note-style != 'modern') 
+      border-left-color: $note-warning-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-warning-text
+      
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-warning-icon
+
+          if ($note-style != 'modern') 
+            color: $note-warning-text
+          
+  &.danger 
+    if ($note-style == 'flat') 
+      background-color: $note-danger-bg
+    
+
+    if ($note-style == 'modern') 
+      background-color: $note-modern-danger-bg
+      border-color: $note-modern-danger-border
+      color: $note-modern-danger-text
+
+      a, span.exturl 
+        &:not(.btn) 
+          border-bottom: 1px solid $note-modern-danger-text
+          color: $note-modern-danger-text
+
+          &:hover 
+            border-bottom: 1px solid $note-modern-danger-hover
+            color: $note-modern-danger-hover
+          
+
+    if ($note-style != 'modern') 
+      border-left-color: $note-danger-border
+
+      h2, h3, h4, h5, h6 
+        color: $note-danger-text
+
+    if ($note-icons) 
+      &:not(.no-icon) 
+        &::before 
+          content: $note-danger-icon
+
+          if ($note-style != 'modern') 
+            color: $note-danger-text

source/css/_layout/pagination.styl

@@ -25,7 +25,6 @@
   img.prev_cover, img.next_cover
     position: absolute
     padding: 0
-    z-index: 50
     top: 0
     left: 0
     width: 100%

source/css/_layout/post.styl

@@ -249,7 +249,7 @@ img
 
 
 
-@media screen and (max-width: 900px)
+@media screen and (max-width: 1024px)
   .layout 
     margin: 0 15px
     width: auto

source/css/_layout/post_bottom.styl

@@ -0,0 +1,57 @@
+#post_bottom
+  position: fixed
+  bottom: -50px
+  background: alpha($white, 0.8)
+  width: 100%
+  border: none
+  box-shadow: 0 -5px 6px -5px alpha($grey, 0.6)
+  display: none
+  transition: all .2s
+  cursor: pointer
+
+  &.toc_mobile_show
+    bottom: 0
+
+  #to_comment,#mobile_toc
+    width: 50%
+    text-align: center
+    font-size: 18px
+    padding: 7px 0
+    display: inline-block
+    color: $light-black
+
+  a
+    text-decoration: none
+    color: $light-black
+
+  #toc_mobile 
+    box-shadow: 0 0 4px alpha($grey, 0.6)
+    background: $white
+    width: 50%
+    height: 70%
+    position: fixed
+    bottom: 65px
+    right: 10px
+    overflow: scroll
+    padding: 15px 10px
+    font-size: 15px
+    border-radius: 10px
+    display: none
+
+    ol,li
+      list-style: none
+      padding: 0 0 0 5px
+      margin: 0
+    
+    a
+      &:hover
+        color: $light-blue
+
+  .toc_mobile_headline 
+      text-align: center
+      font-size: 18px
+      font-weight: bold
+
+@media screen and (max-width:768px)
+  #post_bottom
+    display: block

source/css/_layout/z-other.styl

@@ -1,12 +1,10 @@
 #recent-posts
+  width: 75%
+
   .recent-post-item 
     padding: 0
     box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
     border-radius: 8px
-    -webkit-transition: all 0.3s
-    -moz-transition: all 0.3s
-    -o-transition: all 0.3s
-    -ms-transition: all 0.3s
     transition: all 0.3s
     background: #fff
     margin-top: 20px
@@ -34,9 +32,6 @@
     height: 280px
     overflow: hidden
 
-    
-    
-
   img.post_bg
     border: 0
     transition: all .6s
@@ -130,8 +125,6 @@ a.article-meta__categories
   align-items: flex-start
   padding: 0 15px
 
-#recent-posts
-    width: 75%
 
 #page,.category-content,.flink
   padding: 40px 44px 44px
@@ -155,13 +148,19 @@ a.article-meta__categories
   #site-title
     font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 
+@media screen and (min-width: 900px) 
+  if hexo-config("aside.position") == "left"
+    #recent-posts
+      order: 2
+    
+    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+      order: 2
+
+
 @media screen and (max-width: 900px) 
   #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
       width: 100% !important
 
-    // .recent-post-info 
-    //   padding: 40px 30px 20px
-
 
 @media screen and (max-width:768px) 
   .recent-post-item
@@ -209,14 +208,6 @@ a.article-meta__categories
   
   #aside_content
     display: none !important
-    // .card_widget
-    //   box-shadow: none
-    //   border-radius: 0
-    //   border-top: 1px dashed #a4d8fa
-
-    //   &:hover
-    //     box-shadow: none
-
 
   .category-lists
     padding: 0
@@ -277,17 +268,14 @@ footer
   position: absolute
   color: #fff
 
+.is_hidden
+  overflow: hidden
 @keyframes pulse{
 
   0%,to{
-    // -ms-filter:"alpha(opacity=40)"
-    // filter:alpha(opacity=40)
     opacity:.4
     top:0}
   50%{
-    // -ms-filter:none
-    // -webkit-filter:none
-    // filter:none
     opacity:1
     top:-16px}
     }
@@ -350,3 +338,24 @@ footer
   80%{transform:scale(.98)}
   100%{transform:scale(1)}}
 
+
+
+@keyframes menu_open{
+  0% {
+    transform: scale(0)
+  }
+  100% {
+    transform: scale(1)
+  }  
+  }
+
+@keyframes menu_close{
+0% {
+  transform: scale(1)
+  display: block
+}
+100% {
+  transform: scale(0)
+  display: none
+}
+}

source/css/var.styl

@@ -9,7 +9,10 @@ $theme-hr-color = #A4D8FA
 $theme-read-mode-bg-color = #FAF9DE
 $font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
 $code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
-
+$site-name-font = "Titillium Web", Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+//hr icon
+$hr-icon = '\f0c4'
+$hr-icon-top = -10px
 
 if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -25,12 +28,22 @@ if hexo-config("font") && hexo-config("font.enable")
   $font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
   $code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
 
+if hexo-config("blog_title_font.font-family")
+  $site-name-font = convert(hexo-config("blog_title_font.font-family")) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
+
+
+if hexo-config("hr") && hexo-config("hr.enable")
+  $hr-icon = hexo-config("hr.icon") || '\f0c4'
+  $hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
+
+
 // Global Variables
 $font-size = 14px
 $font-color = #1F2D3D
 $rem = 20px
 $font-family = $font-family
 $code-font = $code-font
+$site-name-font = $site-name-font
 $text-line-height = 2
 $sm = 768px
 $bg = 1024px
@@ -67,6 +80,7 @@ $light-grey = #EEEEEE
 $grey = $theme-meta-color
 $pale-yellow = $theme-read-mode-bg-color
 $white = #FFFFFF
+$whitesmoke   = #f5f5f5;
 $dark-white = #F9F9F9
 $font-black = #4C4948
 $selection = $theme-text-selection-color
@@ -90,3 +104,74 @@ $img-border-padding = 4px
 // sidebar
 $sidebar-width = 300px
 $sidebar-background = #f6f8fa
+
+// Note colors
+// --------------------------------------------------
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0);
+
+// Default
+$note-default-border        = #777;
+$note-default-bg            = lighten(spin($note-default-border, 0), 94% + $lbg);
+$note-default-text          = $note-default-border;
+$note-default-icon          = "\f0a9";
+
+$note-modern-default-border = #e1e1e1;
+$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
+$note-modern-default-text   = #666;
+$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%);
+
+// Primary
+$note-primary-border        = #6f42c1;
+$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + $lbg);
+$note-primary-text          = $note-primary-border;
+$note-primary-icon          = "\f055";
+
+$note-modern-primary-border = #e1c2ff;
+$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
+$note-modern-primary-text   = #6f42c1;
+$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%);
+
+// Info
+$note-info-border           = #428bca;
+$note-info-bg               = lighten(spin($note-info-border, -10), 91% + $lbg);
+$note-info-text             = $note-info-border;
+$note-info-icon             = "\f05a";
+
+$note-modern-info-border    = #b3e5ef;
+$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
+$note-modern-info-text      = #31708f;
+$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%);
+
+// Success
+$note-success-border        = #5cb85c;
+$note-success-bg            = lighten(spin($note-success-border, 10), 90% + $lbg);
+$note-success-text          = $note-success-border;
+$note-success-icon          = "\f058";
+
+$note-modern-success-border = #d0e6be;
+$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
+$note-modern-success-text   = #3c763d;
+$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%);
+
+// Warning
+$note-warning-border        = #f0ad4e;
+$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + $lbg);
+$note-warning-text          = $note-warning-border;
+$note-warning-icon          = "\f06a";
+
+$note-modern-warning-border = #fae4cd;
+$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
+$note-modern-warning-text   = #8a6d3b;
+$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%);
+
+// Danger
+$note-danger-border         = #d9534f;
+$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + $lbg);
+$note-danger-text           = $note-danger-border;
+$note-danger-icon           = "\f056";
+
+$note-modern-danger-border  = #ebcdd2;
+$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
+$note-modern-danger-text    = #a94442;
+$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%);
+

source/js/main.js

@@ -94,37 +94,6 @@ $(function () {
   });
 
 
-  //--------------------------------------------------------------------------------------------------------
-  // tags 隨機大小 顔色
-  var list = document.querySelectorAll(".tag-cloud .tag-cloud-tags a");
-
-  if ($(window).width() > 768) {
-    Array.prototype.forEach.call(list, (item, index) => {
-      item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"; //15 ~ 35
-      item.style.color =
-        "rgb(" +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ")"; // 0,0,0 -> 200,200,200
-    });
-  } else {
-    Array.prototype.forEach.call(list, (item, index) => {
-      item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"; //15 ~ 28
-      item.style.color =
-        "rgb(" +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ", " +
-        Math.floor(Math.random() * 201) +
-        ")"; // 0,0,0 -> 200,200,200
-    });
-  }
-
-
   //--------------------------------------------------------------------------------------------------------
   // bookmark
   $.fancyConfirm = function (opts) {
@@ -242,25 +211,28 @@ $(function () {
   }
   //---------------------------------------------------------------------------------------------------
   //fancybox
-  var imgList = $(".recent-post-info  img");
+  var imgList = $(".recent-post-info  img").not('.no-fancybox');
   if (imgList.length === 0) {
-    imgList = $("#post-content img");
+    imgList = $("#post-content img").not('.no-fancybox');
   }
+
   for (var i = 0; i < imgList.length; i++) {
+    var lazyload_src = imgList[i].src ? imgList[i].src : imgList.eq(i).attr("data-src")
+    
     var $a = $(
       '<a href="' +
-      imgList[i].src +
+      lazyload_src +
         '" data-fancybox="group" data-caption="' +
         imgList[i].alt +
         '" class="fancybox"></a>'
-    );
+    )
-    var alt = imgList[i].alt;
-    var $wrap = $(imgList[i]).wrap($a);
-    if (alt) {
-      $wrap.after('<div class="img-alt">' + alt + "</div>");
-    }
-  }
 
+    var alt = imgList[i].alt
+    var $wrap = $(imgList[i]).wrap($a)
+    if (alt) {
+      $wrap.after('<div class="img-alt">' + alt + '</div>')
+    }
+  }
   $().fancybox({
     selector: "[data-fancybox]",
     loop: true,
@@ -292,50 +264,84 @@ $(function () {
 
   });
 
-  //--------------------------------------------------------------------------------------------------------
-  //lazy懶加載
-  //把img的src删除，添加data-src,用于lozad.js
-  var $img = $("#post img");
-  $img.addClass("lozad");
-  $img.each(function () {
-    var src_link = $(this).attr("src");
-    $(this).attr("data-src", src_link);
-    $(this).removeAttr("src");
-  })
-
-  const observer = lozad(); // lazy loads elements with default selector as '.lozad'
-  observer.observe();
-
   //---------------------------------------------------------------------------------------------------------
   /** head点击*/
   $('.toggle-menu').on('click', function () {
-    if (!$('.menus').is(':visible')) {
+
+    if ($(".toggle-menu").hasClass("open")) {
       $(".toggle-menu").removeClass("open").addClass("close");
-      $('.menus').slideDown(300)
+      $("#page-header #site-name,#page-header .search").css({ 'color': '#3b3a3a', 'text-shadow': 'none' })
+      $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' });
+      $('body').addClass("is_hidden");
+      $('.menus').addClass("menu_open");
+      fixbg_menu();
     } else {
       $(".toggle-menu").removeClass("close").addClass("open");
-      $('.menus').slideUp(200)
+      $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
+      $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
+      $('body').removeClass("is_hidden");
+      $('.menus').removeClass("menu_open").addClass('menu_close');
+      setTimeout(function () {
+        $('.menus').removeClass("menu_close")
+        
+      }, 300)
     }
   })
 
-  $(document).on('click touchstart', function (e) {
+  function fixbg_menu() {
-    var flag = $('.menus')[0].contains(e.target) || $('.toggle-menu')[0].contains(e.target)
+    const fixScroll = (scrollEl) => {
-    if (!flag && $('.toggle-menu').is(':visible')) {
+      let startY
-      $(".toggle-menu").removeClass("close").addClass("open");
+      scrollEl.addEventListener('touchstart', function (event) {
-      $('.menus').slideUp(200)
+        // 如果多於1根手指點擊屏幕,則不處理
+        if (event.targetTouches.length > 1) {
+          return
         }
+        // 儲存手指的初始位置
+        startY = event.targetTouches[0].clientY
+      }, false)
+      scrollEl.addEventListener('touchmove', function (event) {
+        if (event.targetTouches.length > 1) {
+          return
+        }
+        // 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
+        const y = event.targetTouches[0].clientY - startY
+        // 如果到頂時繼續向下拉
+        if (scrollEl.scrollTop <= 0 && y > 0) {
+          // 重置滾動距離為最小值
+          scrollEl.scrollTop = 0
+          // 阻止滾動
+          event.preventDefault()
+        }
+        // 如果到底時繼續上滑  
+        const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
+        if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
+          scrollEl.scrollTop = maxScrollTop
+          event.preventDefault()
+        }
+      }, {
+          passive: false
         })
+    }
+    const scrollEl = document.querySelector(".menus");
+    fixScroll(scrollEl)
+  }
+
   
 
   $(window).on('resize', function (e) {
     if (!$('.toggle-menu').is(':visible')) {
-      if (!$('.menus').is(':visible')) {
+      if ($(".toggle-menu").hasClass("close")) {
-        $(".toggle-menu").removeClass("open").addClass("close");
+        $(".toggle-menu").removeClass("close").addClass("open");
-        $('.menus').slideDown(300)
+        $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' });
+        $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' });
+        $('body').removeClass("is_hidden");
+        $('.menus').removeClass("menu_open");
       }
     }
   } )   
 
+ 
+
   //---------------------------------------------------------------------------------------------------------
   /** scroll 滚动 toc*/
   var initTop = 0
@@ -351,11 +357,20 @@ $(function () {
       findHeadPosition(currentTop)
     }
     var isUp = scrollDirection(currentTop)
+
+    if ($(".toggle-menu").hasClass("open")) {
       if (currentTop > 56) {
+        
         if (isUp) {
           $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+          $('#post_bottom').removeClass('toc_mobile_show')
+          $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
+
         } else {
           $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+          $('#post_bottom').addClass('toc_mobile_show')
+          $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log()
+
         }
         $('#page-header').addClass('fixed')
         if ($('#go-up').css('opacity') === '0') {
@@ -381,6 +396,8 @@ $(function () {
       } else {
         if (currentTop === 0) {
           $('#page-header').removeClass('fixed').removeClass('visible')
+          $('#post_bottom').removeClass('toc_mobile_show')
+
         }
 
         $('#go-up').animate({}, function () {
@@ -398,6 +415,17 @@ $(function () {
         })
 
       }
+    }
+
+    if ( $(window).width() <= 768 &&  $('#post_bottom').hasClass('toc_mobile_show') ){
+      $('#rightside,#go-up').css('bottom', '80px')
+      $('#rightside,#go-up').css('bottom', '70px')
+  
+    } else {
+      $('#rightside,#go-up').css('bottom', '30px')
+      $('#rightside,#go-up').css('bottom', '20px')
+    }
+
   }, 50, 100))
 
   // go up smooth scroll
@@ -406,9 +434,9 @@ $(function () {
   })
 
   // head scroll
-  $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) {
+  // $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) {
-    scrollToHead('#' + $(this).attr('id'))
+  //   scrollToHead('#' + $(this).attr('id'))
-  })
+  // })
 
   // head scroll
   $('.toc-link').on('click', function (e) {
@@ -501,6 +529,17 @@ $(function () {
         // Hide their respective list of subsections
         .find('.toc-child').hide()
     }
+
+    if ($('.toc-link').hasClass('active')) {
+      var active_position = $(".active").offset().top;
+      var sidebar_scrolltop = $("#sidebar").scrollTop();
+      if (active_position > (top + $(window).height() - 50)) {
+        $("#sidebar").scrollTop(sidebar_scrolltop + 100);
+      } else if (active_position < top + 50) {
+        $("#sidebar").scrollTop(sidebar_scrolltop - 100);
+      }
+    }
+
   }
 
   //代碼框雙擊全屏
@@ -538,4 +577,27 @@ $(function () {
     var font_size_record = parseFloat($('body').css('font-size'))
     $('body').css('font-size', font_size_record - 1)
   });
+
+
+  $('#mobile_toc').on('click', function () {
+    $("#toc_mobile").toggleClass('is_visible')
+  })
+ 
+  //代碼框語言識別
+  $('figure').each(function () {   
+    var lang_name_index;
+    var lang_name;
+    lang_name_index = lang_name = $(this).attr('class').split(' ')[1];
+    if (lang_name_index == 'js')
+      lang_name = 'javascript'
+    if (lang_name_index == 'md')
+      lang_name = 'markdown'
+    if (lang_name_index == 'plain')
+      lang_name = 'code' 
+    if (lang_name_index == 'py')
+      lang_name = 'python'
+        
+    $('figure.' + lang_name_index + ' table').attr('data-content', lang_name);
+  })
+
 });