From 83dc0559c0344eaef02f9eb641fcfc3a8cb660be Mon Sep 17 00:00:00 2001 From: Jerry Date: Sun, 8 Sep 2019 16:17:07 +0800 Subject: [PATCH] =?UTF-8?q?1.=20Feature:=20=E5=8F=AF=E8=A8=AD=E7=BD=AE?= =?UTF-8?q?=E5=86=85=E8=81=94=E4=BB=A3=E7=A0=81=E5=9D=97=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=20#26=202.=20Feature:=20=E5=8F=AF=E8=A8=AD=E7=BD=AE=E5=A4=9C?= =?UTF-8?q?=E9=96=93=E6=A8=A1=E5=BC=8F=E4=BD=9C=E7=88=B2=E9=BB=98=E8=AA=8D?= =?UTF-8?q?=E6=A8=A3=E5=BC=8F=203.=20Feature:=20=E5=8F=AF=E8=A8=AD?= =?UTF-8?q?=E7=BD=AE=E6=98=AF=E5=90=A6=E9=A1=AF=E7=A4=BAcode=20language?= =?UTF-8?q?=E5=90=8D=E7=A8=B1=204.=20Feature:=20=E5=8F=AF=E8=A8=AD?= =?UTF-8?q?=E7=BD=AE=E6=98=AF=E5=90=A6=E5=B1=95=E9=96=8B=E6=88=96=E9=97=9C?= =?UTF-8?q?=E9=96=89=E4=BB=A3=E7=A2=BC=E6=A1=86=205.=20Feature:=20?= =?UTF-8?q?=E5=8F=AF=E8=A8=AD=E7=BD=AE=E8=83=8C=E6=99=AF=E5=9C=96=E7=89=87?= =?UTF-8?q?/=E9=A1=94=E8=89=B2=206.=20Feature:=20=E5=8F=AF=E8=A8=AD?= =?UTF-8?q?=E7=BD=AE=E6=98=AF=E5=90=A6=E9=A1=AF=E7=A4=BAfooter=E8=83=8C?= =?UTF-8?q?=E6=99=AF=207.=20Feature:=20=E5=A2=9E=E5=8A=A0=20canvas-nest.js?= =?UTF-8?q?=208.=20Feature:=20=E9=A0=AD=E5=83=8F=E5=8F=AF=E8=A8=AD?= =?UTF-8?q?=E7=BD=AE=E6=95=88=E6=9E=9C(=E8=BD=89=E5=9C=88=E5=9C=88)=209.?= =?UTF-8?q?=20Feature:=20menu=E5=8F=AF=E8=A8=AD=E7=BD=AE=E5=88=86=E7=B5=84?= =?UTF-8?q?=209.=20Fix:=20=E5=84=AA=E5=8C=96=E6=89=93=E8=B3=9E=E5=92=8C?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=89=93=E9=96=8B=E7=89=B9=E6=95=88=2010.=20?= =?UTF-8?q?Fix:=20=E5=84=AA=E5=8C=96sidebar=E7=9A=84=E6=89=93=E9=96=8B?= =?UTF-8?q?=E7=89=B9=E6=95=88=EF=BC=8C=E9=81=BF=E5=85=8D=E8=88=87=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E9=A0=81=E7=89=B9=E6=95=88=E4=B8=8D=E5=90=8C=E6=AD=A5?= =?UTF-8?q?=2011.=20Fix:=20=E9=81=A9=E9=85=8D**hexo-blog-encrypt**?= =?UTF-8?q?=EF=BC=8C=E7=8F=BE=E5=9C=A8=E5=8F=AF=E4=BB=A5=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?toc=2012.=20Fix:=20=E4=BF=AE=E5=BE=A9=E8=A8=AD=E7=BD=AE?= =?UTF-8?q?=E4=B8=8D=E9=A1=AF=E7=A4=BA=E8=A9=95=E8=AB=96=E6=99=82=EF=BC=8C?= =?UTF-8?q?=E7=9B=B4=E9=81=94=E8=A9=95=E8=AB=96=E6=8C=89=E9=88=95=E6=B2=92?= =?UTF-8?q?=E6=9C=89=E6=B6=88=E5=A4=B1=E7=9A=84bug=2013.=20Fix:=20?= =?UTF-8?q?=E4=BF=AE=E5=BE=A9post=E9=A0=81=E5=BA=95=E6=AC=84=EF=BC=8C?= =?UTF-8?q?=E7=95=B6=E6=B2=92=E6=9C=89=E9=A1=AF=E7=A4=BA=E8=A9=95=E8=AB=96?= =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E9=A1=AF=E7=A4=BATOC=EF=BC=8C=E8=A9=95?= =?UTF-8?q?=E8=AB=96=E5=92=8Ctoc=E9=83=BD=E4=B8=8D=E9=A1=AF=E7=A4=BA=20?= =?UTF-8?q?=E9=80=99=E4=B8=89=E7=A8=AE=E7=8B=80=E6=85=8B=E4=B8=8B=E6=8C=89?= =?UTF-8?q?=E9=88=95=E7=9A=84bug=2014.=20Fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E4=BB=A3=E7=A2=BC=E6=A1=86=E5=B7=A6=E5=8F=B3=E6=BB=91=E5=8B=95?= =?UTF-8?q?=E6=99=82=EF=BC=8C=E4=BB=A3=E7=A2=BC=E5=90=8D=E5=AD=97=E8=B7=9F?= =?UTF-8?q?=E8=91=97=E6=BB=91=E5=8B=95=E7=9A=84bug=2015.=20Fix:=20?= =?UTF-8?q?=E5=85=B6=E4=BB=96page=E9=A0=81=E6=A8=99=E9=A1=8C=E7=9A=84?= =?UTF-8?q?=E5=AD=97=E9=AB=94=E9=A1=AF=E7=A4=BA=2016.=20Fix:=20=E4=BF=AE?= =?UTF-8?q?=E5=BE=A9=E7=95=B6=E8=A8=AD=E7=BD=AE=E9=96=8B=E5=95=93canvas=5F?= =?UTF-8?q?ribbons=EF=BC=8C=E9=80=B2=E5=85=A5=E7=B6=B2=E7=AB=99=E6=9C=83?= =?UTF-8?q?=E5=85=88=E9=A1=AF=E7=A4=BAcanvas=5Fribbons=E7=9A=84bug=2017.?= =?UTF-8?q?=20Fix:=20=E5=AE=8C=E5=96=84=E5=A4=9C=E9=96=93=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=B8=8B=EF=BC=8C=E5=AD=97=E9=AB=94=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?=E5=95=8F=E9=A1=8C=2018.=20Fix:=20=E4=BF=AE=E5=BE=A9=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E6=A1=86=20=E8=A4=87=E8=A3=BD=20=E5=92=8C=20=E4=BB=A3?= =?UTF-8?q?=E7=A2=BC=E5=90=8D=20z-index=20bug=20#25=2019.=20Fix:=20?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=98=85=E8=AF=BB=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 209 ++++++++++++------- layout/includes/additional-js.pug | 3 + layout/includes/config.pug | 2 + layout/includes/footer.pug | 2 +- layout/includes/header.pug | 26 ++- layout/includes/layout.pug | 10 +- layout/includes/nav.pug | 6 +- layout/includes/post-bottom.pug | 23 +- layout/includes/rightside.pug | 5 +- layout/includes/sidebar.pug | 8 +- layout/includes/third-party/canvas-nest.pug | 1 + layout/includes/widget/card_author.pug | 2 +- package.json | 4 +- source/css/_global/index.styl | 122 ++++++----- source/css/_highlight/highlight.styl | 27 +-- source/css/_layout/aside.styl | 3 - source/css/_layout/footer.styl | 16 ++ source/css/_layout/head.styl | 104 ++++++++-- source/css/_layout/nightshift.styl | 34 ++- source/css/_layout/post.styl | 27 ++- source/css/_layout/post_bottom.styl | 15 +- source/css/_layout/readmode.styl | 25 ++- source/css/_layout/relatedposts.styl | 35 ++-- source/css/_layout/reward.styl | 1 + source/css/_layout/sidebar.styl | 3 +- source/css/_layout/z-other.styl | 166 +++++++-------- source/css/var.styl | 5 +- source/js/main.js | 219 ++++++++++++-------- source/js/nightshift.js | 4 + source/js/search/algolia.js | 2 +- source/js/search/local-search.js | 2 +- source/js/third-party/canvas-nest.js | 11 + 32 files changed, 722 insertions(+), 400 deletions(-) create mode 100644 layout/includes/third-party/canvas-nest.pug create mode 100644 source/js/third-party/canvas-nest.js diff --git a/_config.yml b/_config.yml index 78da736..79a6e51 100644 --- a/_config.yml +++ b/_config.yml @@ -3,13 +3,15 @@ # --------------- # theme_color: # enable: true -# main: "#7A7FF1" -# paginator: "#7A7FF1" +# main: "#49B1F5" +# paginator: "#00c4b6" # button_hover: "#FF7242" -# text_selection: "#69c46d" -# link_color: "#858585" +# text_selection: "#00c4b6" +# link_color: "#99a9bf" +# meta_color: '#858585' # hr_color: "#A4D8FA" # read-mode-bg_color: '#FAF9DE' +# inline-code-color: '#F47466' # Main menu navigation # format: xxx: /xxx/||icon @@ -45,11 +47,13 @@ favicon: /img/favicon.ico # Highlight theme # --------------- highlight_theme: light -highlight_copy: true +highlight_copy: false #代碼複製按鈕 +highlight_lang: true #代碼語言顯示 +highlight_shrink: false #代碼框不展開，需點擊 '>' 打開 code_word_wrap: false -# Nav settings +# social settings # formal: # icon: link # --------------- @@ -57,6 +61,7 @@ social: fa fa-github: https://github.com/jerryc127 fa fa-rss: /atom.xml +#### search #### # Algolia search # --------------- algolia_search: @@ -69,7 +74,6 @@ algolia_search: hits_empty: "We didn't find any results for the search: ${query}" # if there are no result hits_stats: "${hits} results found in ${time} ms" - # Local search # Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索 # --------------- @@ -95,8 +99,7 @@ katex: hide_scrollbar: true - -# Analysis +#### Analysis #### # --------------- # baidu_analytics: @@ -151,7 +154,6 @@ lodding_bg: flink: /img/friend_404.gif post_page: /img/404.jpg - post_meta: date_type: both # or created or updated 文章日期是创建日或者更新日或都显示 categories: true # or false 是否显示分类 @@ -174,13 +176,14 @@ post_copyright: license: CC BY-NC-SA 4.0 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ +# 自動節選 auto_excerpt: enable: true length: 150 -# Share System -# --------------- +#### Share System #### +# ----------------------------------------- addThis: enable: false pubid: @@ -201,8 +204,8 @@ addtoany: - email - copy_link -# Comments System -# --------------- +#### Comments System #### +# ------------------------------------ disqus: enable: false shortname: @@ -242,8 +245,8 @@ valine: placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints ) guest_info: nick,mail,link #valine comment header inf -# Footer Settings -# --------------- +##### Footer Settings #### +# ------------------------------------ since: 2018 footer_custom_text: @@ -256,15 +259,8 @@ ICP: url: text: -# busuanzi count for PV / UV in site -busuanzi: - site_uv: true - site_pv: true - page_pv: true - - - +#### 站長驗證 #### # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ google_site_verification: @@ -281,6 +277,8 @@ baidu_site_verification: # see http://zhanzhang.so.com/ qihu_site_verification: + +# 友情鏈接界面設置 Flink: headline: 友情鏈接 info_headline: 我的Blog資料 @@ -290,25 +288,7 @@ Flink: info: Blog 簡介： 今日事,今日畢 comment: 如果需要交換友鏈,請留言 - - -runtimeshow: - enable: true - start_date: 6/7/2018 00:00:00 - - -nightshift: - enable: true - - -activate_power_mode: - enable: false - - - -announcement: - content: 感謝訪問本站，若喜歡請收藏 ^_^ - +# 打賞按鈕 reward: enable: true QR_code: @@ -319,64 +299,101 @@ reward: img: /img/alipay.jpg text: 支付寶 +# 推薦文章 related_post: enable: true limit: 6 # 顯示推薦文章數目 -# canvas_ribbon +#### 美化/效果 #### +#-------------------------------- + +# 設置網站背景 +# 可設置圖片 或者 顔色 +# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg) +# 顔色 background: '#49B202' +# 留空 顯示白色 +background: + +# footer是否顯示圖片背景(與top_img一致) +footer_bg: false + + +# canvas_ribbon 禁止彩帶背景 # See: https://github.com/hustcc/ribbon.js canvas_ribbon: - enable: true + enable: false size: 150 alpha: 0.6 zIndex: -1 click_to_change: false - +# 動態彩帶 canvas_ribbon_piao: enable: false +# canvas_nest +# https://github.com/hustcc/canvas-nest.js +canvas_nest: + enable: false + color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) + opacity: 0.7 # the opacity of line (0~1), default: 0.5. + zIndex: -1 # z-index property of the background, default: -1. + count: 99 # the number of lines, default: 99. + script: https://cdn.jsdelivr.net/gh/jerryc127/CDN/js/canvas-nest.js # or /js/third-party/canvas-nest.js -# 避免重複網址分散seo -canonical: true +# 打字效果 +activate_power_mode: + enable: false -# 禁止百度轉碼 -disable_baidu_transformation: true +# 鼠標點擊效果 +fireworks: + enable: false -twitter_meta: true -Open_Graph_meta: true +# 頭像會一直轉圈 +avatar_effect: false -#閲讀模式 -readmode: - enable: true +# 網站顯示模式 +# day 默認模式 +# night 黑暗模式（不建議） +display_mode: day -#全局字體 +# 美化post頁顯示 +post_beautify: + enable: false + title-prefix-icon: '\f0c1' + title-prefix-icon-color: "#F47466" + +# 全局字體 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 +# 網站名字字體 +# 左上角網站名字 主頁居中網站名字 +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: '\f21c' #fontawesome上圖標的Unicode icon-top: -20px # 主頁subtitle +# 打字效果 subtitle: enable: true sub1: 今日事,今日畢 sub2: Never put off till tomorrow what you can do today #如果有符號 ' ，記得前面加上 \ -#側邊欄顯示設置 + + + +#### 側邊欄 #### +#------------------------------------- +# 側邊欄顯示設置 aside: position: right # left or right card_author: true @@ -387,8 +404,28 @@ aside: card_archives: true card_webinfo: true +# 網站公告 +announcement: + content: 感謝訪問本站，若喜歡請收藏 ^_^ -## chinese traditional to Simplified +# busuanzi count for PV / UV in site +# 訪問人數 +busuanzi: + site_uv: true + site_pv: true + page_pv: true + +# 網頁開通時間 +# 格式: 月/日/年 時間 +# 也可以寫成 年/月/日 時間 +runtimeshow: + enable: true + start_date: 6/7/2018 00:00:00 + + +#### 右下角按鈕 #### +#---------------------------------------------- +# 簡繁轉換 translate: enable: true # 默認按鈕顯示文字 @@ -404,20 +441,29 @@ translate: #當文字是繁體時，按鈕顯示的文字 msgToSimplifiedChinese: "简" +# 夜間模式 +nightshift: + enable: true -# 鼠標點擊效果 -fireworks: - enable: false +#閲讀模式 +readmode: + enable: true + + +#### other #### +#------------------------------------------------ #百度推送 baidu_push: enable: false -#https://instant.page/ -#prefetch預加載 +# https://instant.page/ +# prefetch預加載 instantpage: enable: true +# Note (Bootstrap Callout) +# https://muse.theme-next.org/docs/tag-plugins/note note: # Note tag style values: # - simple bs-callout old alert style. Default. @@ -431,14 +477,21 @@ note: # 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 -# 美化post頁顯示 -post_beautify: - enable: false - title-prefix-icon: '\f0c1' - title-prefix-icon-color: "#F47466" \ No newline at end of file +# 避免重複網址分散seo +canonical: true + +# 禁止百度轉碼 +disable_baidu_transformation: true + +# twitter分享自動帶上樣式 +# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png +twitter_meta: true + +# facebook QQ 等 分享自動帶上樣式 +# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png +Open_Graph_meta: true diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 00153b0..49253be 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -22,6 +22,9 @@ if (theme.canvas_ribbon && theme.canvas_ribbon.enable) if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable) include ./third-party/canvas-ribbon-piao.pug +if (theme.canvas_nest && theme.canvas_nest.enable) + include ./third-party/canvas-nest.pug + if theme.baidu_push && theme.baidu_push.enable script(src=url_for('js/baidupush.js')) diff --git a/layout/includes/config.pug b/layout/includes/config.pug index 0be593f..c32460c 100644 --- a/layout/includes/config.pug +++ b/layout/includes/config.pug @@ -49,6 +49,8 @@ script. localSearch: !{localSearch}, translate: !{translate}, highlight_copy: '!{theme.highlight_copy}', + highlight_lang: '!{theme.highlight_lang}', + highlight_shrink: '!{theme.highlight_shrink}', copy: { success: '!{_p("copy.success")}', error: '!{_p("copy.error")}', diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug index 61c4854..f9fefba 100644 --- a/layout/includes/footer.pug +++ b/layout/includes/footer.pug @@ -1,4 +1,4 @@ -#footer.layout +#footer - var now = new Date() - var nowYear = now.getFullYear() if theme.since && theme.since != nowYear diff --git a/layout/includes/header.pug b/layout/includes/header.pug index 2c53deb..b49db42 100644 --- a/layout/includes/header.pug +++ b/layout/includes/header.pug @@ -11,7 +11,7 @@ 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}'`) + img.lozad.avatar_img(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) .mobile_post_data if site.posts.length .mobile_data_item.text-center @@ -35,11 +35,27 @@ .length_num= site.categories.length hr - .menus_item + .menus_items each value, label in theme.menu - a.site-page(href=value.split('||')[0]) - i.fa-fw(class=value.split('||')[1]) - span=' '+label + if !Array.isArray(value) + .menus_item + a.site-page(href=value.split('||')[0]) + i.fa-fw(class=value.split('||')[1]) + span=' '+label + else + .menus_item + a.site-page + i.fa-fw(class=label.split('||')[1] aria-hidden="true") + span=' '+label.split('||')[0] + i.fa.fa-chevron-down.menus-expand(aria-hidden="true") + ul.menus_item_child + each i in value + li + a.site-page(href=i.split('||')[1]) + i.fa-fw(class=i.split('||')[2]) + span=' '+i.split('||')[0] + + script. document.body.addEventListener('touchstart', function(){ }); span.pull-right diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 3d3ded0..53c45d2 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -22,6 +22,8 @@ - if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') - var pageAuthor = config.email ? config.author + ',' + config.email : config.author - var pageCopyright = config.copyright || config.author +- var body_class = theme.display_mode == 'night' ? 'night-mode' : '' + doctype html html(lang=config.language) @@ -44,9 +46,11 @@ html(lang=config.language) link(rel='stylesheet', href=item) include ./head.pug include ./config.pug - body + body(class=body_class) if theme.fireworks && theme.fireworks.enable canvas.fireworks + if theme.background + #web_bg if (is_post() && page.toc != false && theme.toc.enable) i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true") include ./sidebar.pug @@ -66,7 +70,9 @@ html(lang=config.language) div!= body else block content - footer + + - var footer_bg = theme.footer_bg == false ? '' : bg_img + footer(style=footer_bg) include ./footer.pug i.fa.fa-arrow-up#go-up(aria-hidden="true") include ./rightside.pug diff --git a/layout/includes/nav.pug b/layout/includes/nav.pug index 42215eb..4738f48 100644 --- a/layout/includes/nav.pug +++ b/layout/includes/nav.pug @@ -7,7 +7,8 @@ else if is_home() - nav#nav.full_page(style=bg_img) + nav#nav.full_page + .nav_bg(style=bg_img) include ./header.pug #site-info #site-title @@ -25,7 +26,8 @@ if is_home() i.fa.fa-angle-down.scroll-down-effects else - nav#nav.bg_local(style=bg_img) + nav#nav.not_index_bg + .nav_bg(style=bg_img) include ./header.pug #page_site-info #site-title diff --git a/layout/includes/post-bottom.pug b/layout/includes/post-bottom.pug index dd4047d..240b5b3 100644 --- a/layout/includes/post-bottom.pug +++ b/layout/includes/post-bottom.pug @@ -1,8 +1,17 @@ -#post_bottom +- var no_comment_show = page.comments !== false ? '' : 'no_comment_show' +- var no_toc_show = (is_post() && page.toc != false && theme.toc.enable) ? '' : 'no_toc_show' +#post_bottom(class= no_comment_show + ' ' + no_toc_show) #post_bottom_items - a#mobile_to_comment(href="#post-comment") - i.mobile_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"}) + if page.comments !== false + a#mobile_to_comment(href="#post-comment") + i.mobile_scroll_to_comment.fa.fa-comments + + if (is_post() && page.toc != false && theme.toc.enable) + i#mobile_toc.fa.fa-list + #toc_mobile + .toc_mobile_headline= _p('sidebar.catalog') + if (page.encrypt == true) + .toc-div-class(style="display:none")!=toc(page.origin,{"class":"toc_mobile_items"}) + else + !=toc(page.content,{"class":"toc_mobile_items"}) + diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 264cbf1..c750e09 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -1,5 +1,5 @@ section#rightside.rightside - if is_post() + if is_post() && page.comments !== false a#to_comment(href="#post-comment") i.scroll_to_comment.fa.fa-comments if theme.readmode.enable && is_post() @@ -9,4 +9,5 @@ section#rightside.rightside if theme.translate && theme.translate.enable a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title'))= theme.translate.default if theme.nightshift.enable - i#nightshift.fa.fa-moon-o.nightshift(title=_p('rightside.night_mode_title')) + - var display_mode = theme.display_mode == 'night'? 'fa fa-sun-o' : 'fa fa-moon-o' + i#nightshift.nightshift(class=display_mode title=_p('rightside.night_mode_title')) diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index 2e49cc2..58b61a9 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -16,5 +16,9 @@ span.progress-notice= _p('sidebar.have_read') span.progress-num 0 span.progress-percentage % - div.sidebar-toc__progress-bar - div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) \ No newline at end of file + div.sidebar-toc__progress-bar + if (page.encrypt == true) + div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) + else + div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) + \ No newline at end of file diff --git a/layout/includes/third-party/canvas-nest.pug b/layout/includes/third-party/canvas-nest.pug new file mode 100644 index 0000000..0410c9e --- /dev/null +++ b/layout/includes/third-party/canvas-nest.pug @@ -0,0 +1 @@ +script(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count src=url_for(theme.canvas_nest.script)) \ No newline at end of file diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index b31fff2..0e4ee3e 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -2,7 +2,7 @@ .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}'`) + img.lozad.avatar_img(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 diff --git a/package.json b/package.json index b4fb22c..b0b6523 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "hexo-theme-butterfly", - "version": "1.1.0", + "name": "hexo-theme-melody", + "version": "1.1.5", "description": "A Hexo Theme: Butterfly" } \ No newline at end of file diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 096ab8a..9cb98c8 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -23,6 +23,19 @@ body *::-webkit-scrollbar-track background-color: transparent + +#web_bg + background: $web-bg + height: 100% + width: 100% + background-size: cover + position: fixed + z-index: -999 + background-attachment: local + background-repeat: no-repeat + background-position: center + + h1, h2, h3, @@ -208,7 +221,8 @@ table font-size: 98% font-family: $code-font -#site-title, #site-sub-title, +.full_page #site-title, +.full_page #site-sub-title, #site-name, #aside_content .author-info__name, #aside_content .author-info__description @@ -284,70 +298,67 @@ table // bookmark 樣式 -.fc-container .fancybox-bg { - background: #eee; -} +.fc-container .fancybox-bg + background: #eee -.fancybox-is-open.fc-container .fancybox-bg { - opacity: 0.95; -} -.fc-content { - margin: 20px; - max-width: 550px; - padding: 50px; - box-shadow: 10px 10px 60px -25px; - border-radius: 4px; -} +.fancybox-is-open.fc-container .fancybox-bg + opacity: 0.95 -.fc-content h3 { - margin-top: 0; - font-size: 1.6em; - letter-spacing: normal; -} -.fc-content p { - color: #666; - line-height: 1.5; -} +.fc-content + margin: 20px + max-width: 550px + padding: 50px + box-shadow: 10px 10px 60px -25px + border-radius: 4px + + +.fc-content h3 + margin-top: 0 + font-size: 1.6em + letter-spacing: normal + + +.fc-content p + color: #666 + line-height: 1.5 + + +.fc-content p:last-child + margin-bottom: 0 -.fc-content p:last-child { - margin-bottom: 0; -} /* Custom animation */ .fancybox-fx-material.fancybox-slide--previous, -.fancybox-fx-material.fancybox-slide--next { - transform: translateY(-60px) scale(1.1); - opacity: 0; -} +.fancybox-fx-material.fancybox-slide--next + transform: translateY(-60px) scale(1.1) + opacity: 0 + + +.fancybox-fx-material.fancybox-slide--current + opacity: 1 + transform: translateY(0) scale(1) -.fancybox-fx-material.fancybox-slide--current { - opacity: 1; - transform: translateY(0) scale(1); -} .bookmark-ok - background: #FF6666; - border-width: 0; - color: #fff; - text-decoration: none; - padding: 7px 20px; - line-height: 1.5; - border-radius: 20px; - text-transform: uppercase; - font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 80%; - font-weight: 700; - margin: 5px 5px 5px 0; - display: inline-block; - cursor: pointer; - outline: none; - transition: all .2s ease-in-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + background: #FF6666 + border-width: 0 + color: #fff + text-decoration: none + padding: 7px 20px + line-height: 1.5 + border-radius: 20px + text-transform: uppercase + font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif + font-size: 80% + font-weight: 700 + margin: 5px 5px 5px 0 + display: inline-block + cursor: pointer + outline: none + transition: all .2s ease-in-out + user-select: none .tright text-align: right @@ -358,6 +369,9 @@ table .is_invisible display: none !important +.is_hidden + overflow: hidden + .fireworks position: fixed z-index: -1 diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index b77b297..6e07ddc 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -2,21 +2,8 @@ @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" wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap") -// loopForLanguages() -// for lang in languages -// .article-container -// figure.highlight -// &{"." + lang} -// table -// &:before -// content: lang - -// loopForLanguages() - -// Placeholder: $code-block $code-block overflow: auto margin: 1rem 0 @@ -102,18 +89,8 @@ blockquote width: auto border: none - &:before - position: absolute - z-index: 1 - display: inline-block - margin-top: -1.4rem - padding: 0 0.7rem - width: 5rem - color: $highlight-foreground - content: attr(data-content) - font-weight: bold - font-size: 0.8rem - line-height: 1.4rem + if hexo-config('highlight_shrink') == true + display: none &:after position: absolute diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 68dbdf9..4a140b9 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -258,9 +258,6 @@ .card-archives margin-bottom: 20px - - .card-announcement-animation - animation: announ_animation 1.5s infinite .card-webinfo .webinfo diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 79dab39..012ae13 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -4,11 +4,27 @@ footer background-attachment: local background-position: bottom background-size: cover + position: relative + + if hexo-config('footer_bg') != false + &:before + position: absolute + bottom: 0 + left: 0 + display: block + content: '' + width: 100% + height: 100% + opacity: 0.5 + background-color: #394245 + background-image: linear-gradient(234deg, #394245 0%, #000 100%) + #footer padding: 1.2rem 1rem 1rem color: $light-grey text-align: center + position: relative a color: $light-grey diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index ca46d65..04c3b78 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -1,18 +1,21 @@ #nav position: relative margin-bottom: 1rem - background-color: $light-blue - background-position: center - background-size: cover - &.full_page - background-attachment: local height: 100vh - &.bg_local + .nav_bg + width: 100% + height: 100% + background-color: $light-blue + background-position: center + background-size: cover background-attachment: local + &.not_index_bg + height: 20rem + #site-social-icons margin: 0 auto @@ -49,6 +52,11 @@ #site-sub-title font-size: 0.8rem +#page_site-info + position: absolute + top: 10rem + width: 100% + .scroll-down position: absolute bottom: 0 @@ -58,6 +66,10 @@ font-size: 30px text-align: center + .scroll-down-effects + position: absolute + color: #fff + #page-header position: absolute @@ -152,6 +164,20 @@ // letter-spacing: .5px text-transform: uppercase color:#4c4948 + + .menus-expand + position: absolute + width: 30px !important + height: 30px + right: 0 + padding: 6px + display: none + transform: rotate(0deg) + transition: all .3s + + &.menus-closed + transform: rotate(180deg) !important + transition: all .3s hr margin: 1rem auto @@ -166,13 +192,10 @@ .site-page position: relative - margin-left: 0.6rem padding-bottom: 0.3rem 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 bottom: 0 @@ -225,13 +248,58 @@ font-weight: bold cursor: pointer -@media screen and (min-width: $sm) +@media screen and (min-width: $sm) #site-title font-size: 2rem #site-sub-title font-size: 1.2rem + #page-header + .menus_item + display: inline-block + padding: 0 0.5rem + + &:hover,&:focus + .menus_item_child + display: block + + .menus_item_child + position: absolute + background-color: alpha($white, 0.8) + padding: 8px 10px + width: fit-content + border-radius: 5px + box-shadow: 0 5px 20px -4px rgba(0,0,0,.5) + display: none + opacity: 1 + animation: sub_menus .3s .1s ease both + + &:before + content: "" + position: absolute + top: -20px + left: 50% + margin-left: -10px + border-width: 10px + border-style: solid + border-color: transparent transparent alpha($white, 0.8) + + .menus_item_child li + list-style: none + text-align: center + + a + color: #3b3a3a; + text-shadow: none; + + &.fixed.visible + .menus_item_child + background-color: #ffffff + + &:before + border-color: transparent transparent #ffffff + @media screen and (max-width: $sm) #page-header padding: 10px 0.8rem @@ -255,7 +323,7 @@ .mobile_post_data display: flex - .menus_item + .menus_items a display: block !important opacity: 1 !important @@ -278,11 +346,18 @@ &:hover color: $light-blue + + .menus-expand + display: inline-block + + .menus_item_child + list-style: none + margin: 0 .mobile_author_icon display: block - .menus_item + .menus_items padding: 0 .5rem margin-bottom: 5rem @@ -298,4 +373,7 @@ &.fixed.open-sidebar .search display: inline-block - opacity: 1 \ No newline at end of file + opacity: 1 + + + diff --git a/source/css/_layout/nightshift.styl b/source/css/_layout/nightshift.styl index 4aa7de2..e796d82 100644 --- a/source/css/_layout/nightshift.styl +++ b/source/css/_layout/nightshift.styl @@ -1,8 +1,5 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .night-mode - footer - background: #2d3035 - #sidebar background: #2d3035 !important box-shadow: -0.25rem 0 0.25rem #2d3035 !important @@ -183,7 +180,8 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") background:#2d3035 #nav, - #top-container + #top-container, + footer &::before content: "" position: absolute @@ -202,10 +200,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") #site-info .blogtitle, span.subtitle, + #site-title, #post-info .posttitle, #post-info #post-meta, #site-social-icons i, - #top-container a + #top-container a, + #footer, + #footer a, + #page-header a color: rgba(238,238,238,.6) //打賞 分享 @@ -234,6 +236,16 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") a color: #99a9bf !important + #web_bg + background-color: #2d3032 + + #hbe-security + label + color: #99a9bf !important + input + background-color: #616a6b + + @media screen and (max-width: 768px) .night-mode color: #99a9bf @@ -264,6 +276,18 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .recent-post-item background: #2d3035 !important + #page-header + .menus_item_child + background-color: #2d3035 !important + + &:before + border-color: transparent transparent #2d3035 !important + + li + a + color: #99a9bf + + diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 6a6f87c..dbc2d2f 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -285,6 +285,31 @@ img &:hover color: darken($highlight-aqua, 20%) +.code_lang + position: absolute + font-weight: bold; + font-size: 0.8rem; + line-height: 1.4rem; + color: $highlight-foreground + left: 30px + z-index: 1 + cursor: pointer + +.code-expand + position: absolute + top: 0 + color: $highlight-foreground + padding: 7px 10px + z-index: 1 + cursor: pointer + transition: all .3s + transform: rotate(0deg) + +.code-closed + transform: rotate(-90deg) !important + transition: all .3s + + .copy-notice position: absolute top: 0 @@ -351,8 +376,6 @@ img @media screen and (min-width: $md) .layout width: $content-large-width - - .katex-wrap overflow: auto diff --git a/source/css/_layout/post_bottom.styl b/source/css/_layout/post_bottom.styl index fea6de0..2df28b7 100644 --- a/source/css/_layout/post_bottom.styl +++ b/source/css/_layout/post_bottom.styl @@ -8,6 +8,7 @@ display: none transition: all .2s cursor: pointer + z-index: 100 &.toc_mobile_show bottom: 0 @@ -30,7 +31,7 @@ width: 50% height: 70% position: fixed - bottom: 65px + bottom: 60px right: 10px overflow: scroll padding: 15px 10px @@ -51,6 +52,18 @@ text-align: center font-size: 18px font-weight: bold + + &.no_comment_show + #mobile_toc + width: 100% + padding: 16px 0 + + #toc_mobile + right: 25% + + &.no_toc_show + #mobile_to_comment + width: 100% @media screen and (max-width:768px) #post_bottom diff --git a/source/css/_layout/readmode.styl b/source/css/_layout/readmode.styl index 036593c..6516988 100644 --- a/source/css/_layout/readmode.styl +++ b/source/css/_layout/readmode.styl @@ -35,7 +35,7 @@ if hexo-config("readmode") && hexo-config("readmode.enable") #page-header &.fixed - background: none + background: alpha(darken($pale-yellow,5),0.5) box-shadow: none &.open-sidebar @@ -99,6 +99,29 @@ if hexo-config("readmode") && hexo-config("readmode.enable") .copy-notice background: darken($pale-yellow,10) + .toc_mobile_show + background: alpha(darken($pale-yellow,5),0.5) !important + box-shadow: none !important + + #post_bottom_items + #mobile_to_comment + display: none + #mobile_toc + width: 100% + padding: 16px 0 + #toc_mobile + right: 25% + background: darken($pale-yellow,5) + + + @media screen and (min-width: 768px) + .read-mode + .menus_item_child + background-color: darken($pale-yellow,5) !important + + &:before + border-color: transparent transparent darken($pale-yellow,5) !important + diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 515df37..3ac59c4 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -21,10 +21,6 @@ .relatedPosts_cover border: 0 - -webkit-transition: all 0.6s - -moz-transition: all 0.6s - -o-transition: all 0.6s - -ms-transition: all 0.6s transition: all 0.6s display: block width: 100% @@ -35,21 +31,21 @@ object-fit: cover .relatedPosts_title - color: #fff - position: absolute - left: 0 - right: 0 - top: 45% - height: 60px - padding: 0 30px - display: -webkit-box - -webkit-line-clamp: 2 - -webkit-box-orient: vertical - overflow: hidden - max-width: 100% - width: 100% - margin: 0 auto - text-align: center + color: #fff + position: absolute + left: 0 + right: 0 + top: 45% + height: 60px + padding: 0 30px + display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical + overflow: hidden + max-width: 100% + width: 100% + margin: 0 auto + text-align: center .relatedPosts_headline font-size: 20px @@ -60,7 +56,6 @@ clear: both - @media screen and (max-width:768px) .relatedPosts_item width: calc(100%/2 - 4px) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index 2d06673..3cc35a2 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -30,6 +30,7 @@ left: 0 transition: all 0.6s display: none + opacity: 1 .reward-all margin: 0 auto diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index d3502c5..df0a44f 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -10,8 +10,7 @@ background: $sidebar-background box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset opacity: 0.9 - transition: all 0.2s - + .sidebar-toc ol, li diff --git a/source/css/_layout/z-other.styl b/source/css/_layout/z-other.styl index febc6b5..631124f 100644 --- a/source/css/_layout/z-other.styl +++ b/source/css/_layout/z-other.styl @@ -96,10 +96,7 @@ a.article-meta__categories -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15) box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15) -#page_site-info - padding: 10rem 1rem 7rem - #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" @@ -115,7 +112,10 @@ a.article-meta__categories width: 100% !important -@media screen and (max-width:768px) +@media screen and (max-width:768px) + #web_bg + display: none + .recent-post-item height: auto !important border-radius: 8px @@ -154,8 +154,7 @@ a.article-meta__categories &:hover -webkit-box-shadow: none box-shadow: none - - + .layout_page padding: 0 !important @@ -164,8 +163,6 @@ a.article-meta__categories .category-lists padding: 0 - - .recent-post-info padding: 20px 10px !important @@ -174,11 +171,15 @@ a.article-meta__categories #recent-posts #pagination margin-bottom: 0 - #nav #site-social-icons - display: block + #nav + #site-social-icons + display: block - #page_site-info - padding: 7rem 1rem 5rem + &.not_index_bg + height: 14rem + + #page_site-info + top: 7rem #top-container height: 14rem @@ -195,11 +196,10 @@ a.article-meta__categories display: none !important - .layout_page, .layout_post, footer - animation: main 1s; + animation: main 1s #nav, #top-container @@ -208,82 +208,82 @@ footer #site-title animation: titlescale 1s -.search-dialog - transition: all .2s +canvas,#web_bg + animation: to_show 4s + +.card-announcement-animation + animation: announ_animation 1.5s infinite .scroll-down-effects - -webkit-animation: pulse 1.5s infinite - animation: pulse 1.5s infinite - // font-size: 28px - position: absolute - color: #fff + animation: scroll-down-effect 1.5s infinite -.is_hidden - overflow: hidden -@keyframes pulse{ +if hexo-config("avatar_effect") == true + .avatar_img + animation: avatar_turn_around 2s linear infinite - 0%,to{ - opacity:.4 - top:0} - 50%{ - opacity:1 - top:-16px} - } - -@keyframes header { - 0% { - opacity: 0; - transform: translateY(-50px) -} -100% { - opacity: 1; - transform: translateY(0) -} - -} +.reward-main + animation: donate_effcet .3s .1s ease both; -@keyframes main { - 0% { - opacity: 0; - transform: translateY(50px) -} -100% { - opacity: 1; - transform: translateY(0) -} -} - -@keyframes titlescale{ - - 0% { - // opacity:0; - transform: scale(0.7) -} - 100% { - // opacity:1; - transform: scale(1) -} +@keyframes scroll-down-effect + 0% + opacity: 0.4 + top: 0 + 50% + opacity: 1 + top: -16px + 100% + opacity: 0.4 + top: 0 -} +@keyframes header + 0% + opacity: 0 + transform: translateY(-50px) + 100% + opacity: 1 + transform: translateY(0) +@keyframes main + 0% + opacity: 0 + transform: translateY(50px) + 100% + opacity: 1 + transform: translateY(0) -.article-container .code_full_page - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-width: 100%; - z-index: 9999; - margin: 0; - animation: code_full_page 1s; +@keyframes titlescale + 0% + opacity: 0 + transform: scale(0.7) + 100% + opacity: 1 + transform: scale(1) -.code_body - overflow: hidden +@keyframes to_show + 0% + opacity: 0 + 100% + opacity: 1 + +@keyframes avatar_turn_around + from + transform: rotate(0deg) + to + transform: rotate(360deg) -@keyframes code_full_page{ - 0%{transform:scale(0)} - 50%{transform:scale(1)} - 80%{transform:scale(.98)} - 100%{transform:scale(1)}} +@keyframes sub_menus + 0% + opacity: 0 + transform: translateY(10px) + 100% + opacity: 1 + transform: translateY(0) + +@keyframes donate_effcet + 0% + opacity: 0 + transform: translateY(-20px) + 100% + opacity: 1 + transform: translateY(0) \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index acba1df..8974894 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -7,6 +7,7 @@ $theme-meta-color = #858585 $theme-link-color = #99a9bf $theme-hr-color = #A4D8FA $theme-read-mode-bg-color = #FAF9DE +$inline-code-color = #F47466 $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 @@ -25,6 +26,7 @@ if hexo-config("theme_color") && hexo-config("theme_color.enable") $theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585 $theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA $theme-read-mode-bg-color = convert(hexo-config("theme_color.read-mode-bg_color")) || #FAF9DE + $inline-code-color = convert(hexo-config("theme_color.inline-code-color")) || #F47466 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' @@ -60,6 +62,7 @@ $sidebar-icon-left = $sidebar-icon-top - 4px $sidebar-icon-size = 16px $go-up-bottom = $sidebar-icon-top $go-up-right = -($sidebar-icon-left) +$web-bg = convert(hexo-config("background")) // Global color & SVG $pale-blue = $theme-hr-color $light-blue = $theme-color @@ -94,7 +97,7 @@ $selection = $theme-text-selection-color // code $code-font-size = $font-size $code-font-family = $font-family -$code-foreground = $font-color +$code-foreground = $inline-code-color $code-background = rgba(27, 31, 35, 0.05) $line-height-code-block = 20px $blockquote-color = #6a737d diff --git a/source/js/main.js b/source/js/main.js index 78697ef..30ee2e8 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -9,11 +9,11 @@ $(function () { $('body').animate({ paddingLeft: 300 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(300px)' - }, 200) - }) + + $('#sidebar').animate({ + left: 0 + }, 200) + $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ 'transform': 'rotateZ(180deg)', @@ -45,11 +45,9 @@ $(function () { paddingLeft: 0 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(0px)' - }) - }) + $('#sidebar').animate({ + left: -300 + }, 200) $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ @@ -63,11 +61,11 @@ $(function () { $('body').animate({ paddingLeft: 300 }, 200) - $('#sidebar').animate({}, function () { - $('#sidebar').css({ - 'transform': 'translateX(300px)' - }) - }) + + $('#sidebar').animate({ + left: 0 + }, 200) + $('#toggle-sidebar').animate({}, function () { $('#toggle-sidebar').css({ 'transform': 'rotateZ(180deg)', @@ -81,13 +79,13 @@ $(function () { //----------------------------------------------------------------------------------------------------- // 首页fullpage添加 // 添加class - if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { } else { - $('.full_page').css('background-attachment', 'fixed'); + if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else { + $('.full_page .nav_bg').css('background-attachment', 'fixed'); $('#to_comment').css("display", "block") } //--------------------------------------------------------------------------------------------------------- - + $(".scroll-down").on("click", function () { scrollTo('#content-outer') @@ -152,10 +150,10 @@ $(function () { //------------------------------------------------------------------------------------------------------- //代码copy // Add copy icon + $('figure.highlight').wrap('
') var highlight_copy = GLOBAL_CONFIG.highlight_copy if (highlight_copy == 'true') { - $('figure.highlight').wrap('
') var $copyIcon = $('') var $notice = $('
') $('.code-area-wrap').prepend($copyIcon) @@ -210,6 +208,47 @@ $(function () { selection.removeAllRanges() }) } + + //代碼框語言識別 + var highlight_lang = GLOBAL_CONFIG.highlight_lang + if (highlight_lang == 'true') { + var $highlight_lang = $('
') + $('figure').before($highlight_lang) + var lang_name_index + var lang_name + $('figure').each(function () { + 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' + + $(this).siblings(".code_lang").text(lang_name) + + }) + } + //代碼收縮 + var highlight_shrink = GLOBAL_CONFIG.highlight_shrink + if (highlight_shrink == 'true') { + var $code_expand = $('') + } else { + var $code_expand = $('') + } + $('.code-area-wrap').prepend($code_expand) + $('.code-area-wrap .code-expand').on('click', function () { + if ($(this).hasClass('code-closed')) { + $(this).siblings('figure').find('table').show(); + $(this).removeClass('code-closed'); + } else { + $(this).siblings('figure').find('table').hide(); + $(this).addClass('code-closed'); + } + }) + //--------------------------------------------------------------------------------------------------- //fancybox var imgList = $(".recent-post-info img").not('.no-fancybox'); @@ -219,13 +258,13 @@ $(function () { 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 = $( '' + '" data-fancybox="group" data-caption="' + + imgList[i].alt + + '" class="fancybox">' ) var alt = imgList[i].alt @@ -273,8 +312,8 @@ $(function () { $('body').addClass("is_hidden"); $('.menus').animate({ right: 0 - }, 300 ) - $('.menu_mask,.menus').css("display","block") + }, 300) + $('.menu_mask,.menus').css("display", "block") } }) @@ -283,11 +322,14 @@ $(function () { $('body').removeClass("is_hidden"); $('.menus').animate({ right: -250 - }, 300,function () { - {$('.menus').css({ 'display': ''}) - } - }) - $('.menu_mask').css("display","") + }, 300, function () { + { + $('.menus').css({ + 'display': '' + }) + } + }) + $('.menu_mask').css("display", "") }) $(window).on('resize', function (e) { @@ -298,17 +340,19 @@ $(function () { $('.menus').animate({ right: -250 }, 300) - $('.menu_mask').css("display","") - } + $('.menu_mask').css("display", "") + } } - } ) + }) //--------------------------------------------------------------------------------------------------------- - /** scroll 滚动 toc*/ +/** scroll 滚动 toc*/ var initTop = 0 $('.toc-child').hide() + var is_post_bottom = ($('#post_bottom').hasClass('no_comment_show')) && ($('#post_bottom').hasClass('no_toc_show')) + // main of scroll $(window).scroll(throttle(function (event) { var currentTop = $(this).scrollTop() @@ -317,21 +361,27 @@ $(function () { scrollPercent(currentTop) // head position findHeadPosition(currentTop) + auto_scroll_toc(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() + if (!is_post_bottom) { + $('#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() + if (!is_post_bottom) { + $('#post_bottom').addClass('toc_mobile_show') + $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + } } $('#page-header').addClass('fixed') @@ -358,7 +408,9 @@ $(function () { } else { if (currentTop === 0) { $('#page-header').removeClass('fixed').removeClass('visible') - $('#post_bottom').removeClass('toc_mobile_show') + if (!is_post_bottom) { + $('#post_bottom').removeClass('toc_mobile_show') + } } @@ -379,13 +431,15 @@ $(function () { } } - if ( $(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show') ){ - $('#rightside').css('bottom', '110px') - $('#go-up').css('bottom', '70px') - - } else { - $('#rightside').css('bottom', '60px') - $('#go-up').css('bottom', '20px') + if (!is_post_bottom) { + if ($(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show')) { + $('#rightside').css('bottom', '110px') + $('#go-up').css('bottom', '70px') + + } else { + $('#rightside').css('bottom', '60px') + $('#go-up').css('bottom', '20px') + } } }, 50, 100)) @@ -492,31 +546,23 @@ $(function () { .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); - } - } } - //代碼框雙擊全屏 - $('figure').on('dblclick', function (e) { - if (e.target !== this) - return; - $(this).toggleClass('code_full_page'); - $('body').toggleClass('code_body'); - }); - + function auto_scroll_toc(currentTop) { + if ($('.toc-link').hasClass('active')) { + var active_position = $(".active").offset().top; + var sidebar_scrolltop = $("#sidebar").scrollTop(); + if (active_position > (currentTop + $(window).height() - 50)) { + $("#sidebar").scrollTop(sidebar_scrolltop + 100); + } else if (active_position < currentTop + 50) { + $("#sidebar").scrollTop(sidebar_scrolltop - 100); + } + } + } //閲讀模式 $("#readmode").click(function () { - - if (Cookies.get("night-mode") == "night") { $('body').toggleClass('night-mode'); $('body').toggleClass('read-mode'); @@ -528,10 +574,8 @@ $(function () { $('#font_plus,#font_minus,#to_comment').toggleClass('is_visible'); $('#to_comment').toggleClass('is_invisible'); } - }); - //閲讀模式下字體調整 $("#font_plus").click(function () { var font_size_record = parseFloat($('body').css('font-size')) @@ -551,26 +595,29 @@ $(function () { $('code').css('font-size', font_size_record - 1) }); - + // 手機顯示toc $('#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); - }) + // sub-menus 位置調整 + if ( $(window).width() > 768 ) { + $('.menus_item_child').each(function () { + var a_width= $(this).siblings('a').outerWidth(true); + var child_width = $(this).outerWidth(true); + $(this).css("margin-left", -(child_width/ 2 - a_width/ 2)) + }) + } + + // 手機端sub-menu 展開/收縮 + $('.menus-expand').on('click', function () { + if ($(this).hasClass('menus-closed')) { + $(this).parents('.menus_item').find('.menus_item_child').show(); + $(this).removeClass('menus-closed'); + } else { + $(this).parents('.menus_item').find('.menus_item_child').hide(); + $(this).addClass('menus-closed'); + } + }) + }); \ No newline at end of file diff --git a/source/js/nightshift.js b/source/js/nightshift.js index f198121..6191aa0 100644 --- a/source/js/nightshift.js +++ b/source/js/nightshift.js @@ -11,6 +11,10 @@ $(function () { } function changeReadModel() { + + if (Cookies.get("night-mode") == null) + return + if (Cookies.get("night-mode") == "night") { $("body").addClass("night-mode"); $("#nightshift").removeClass("fa-moon-o").addClass("fa-sun-o"); diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 7513dec..41f4da2 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -7,7 +7,7 @@ $(function () { $('.search-dialog').css({ 'display': 'block', 'animation': 'titlescale 0.5s' - }) + }),300 }) $('.ais-search-box--input').focus() diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index c5140bb..67362e3 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -7,7 +7,7 @@ $(function () { $('.search-dialog').css({ 'display': 'block', 'animation': 'titlescale 0.5s' - }) + }),300 }) $('#local-search-input input').focus() diff --git a/source/js/third-party/canvas-nest.js b/source/js/third-party/canvas-nest.js new file mode 100644 index 0000000..446ddf9 --- /dev/null +++ b/source/js/third-party/canvas-nest.js @@ -0,0 +1,11 @@ +!function(){ + var userAgentInfo = navigator.userAgent; + var Agents = ["iPad", "iPhone", "Android", + "SymbianOS", "Windows Phone", + "iPod", "webOS", "BlackBerry", "IEMobile"]; + for (var v = 0; v < Agents.length; v++) { + if (userAgentInfo.indexOf(Agents[v]) > 0) { + return; + } + } + function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}(); \ No newline at end of file