diff --git a/README.md b/README.md index 0707089..e093184 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t ## Installation -Stable branch: +Stable branch [recommend]: ``` git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly diff --git a/README_CN.md b/README_CN.md index 1ab85d3..c22aee7 100644 --- a/README_CN.md +++ b/README_CN.md @@ -14,7 +14,7 @@ JerryC: https://jerryc.me/ ## 安裝 -在你的博客根目錄裡 +在你的博客根目錄裡安裝穩定版【推薦】 ``` git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly diff --git a/_config.yml b/_config.yml index 3587be5..7649e8b 100644 --- a/_config.yml +++ b/_config.yml @@ -266,7 +266,6 @@ valine: guest_info: nick,mail,link #valine comment header info recordIP: false # Record reviewer IP serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) - mathjax: false bg: /img/comment_bg.png # valine background count: true # top_img顯示評論數 @@ -509,6 +508,9 @@ subtitle: fontawesome_v5: enable: false +# 加載動畫 Loading Animation +preloader: false + #### 側邊欄 #### #------------------------------------- # 側邊欄顯示設置 @@ -516,7 +518,9 @@ aside: enable: true mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容 position: right # left or right - card_author: true + card_author: + enable: true + description: card_announcement: enable: true content: This is my Blog @@ -529,6 +533,7 @@ aside: card_tags: enable: true limit: 40 # if set 0 will show all + color: false card_archives: enable: true type: monthly # yearly or monthly diff --git a/languages/default.yml b/languages/default.yml index 565d6e4..a8ff80b 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -105,3 +105,4 @@ Snackbar: night_to_day: Light Mode Activated Manually error_title: Page not found +loading: Loading... diff --git a/languages/en.yml b/languages/en.yml index 565d6e4..a8ff80b 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -105,3 +105,4 @@ Snackbar: night_to_day: Light Mode Activated Manually error_title: Page not found +loading: Loading... diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 8298f12..21ce127 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -107,3 +107,4 @@ Snackbar: night_to_day: 你已切换为浅色模式 error_title: 页面没有找到 +loading: 加载中... \ No newline at end of file diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index dbdad40..95cb5d3 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -9,7 +9,7 @@ footer: copy: success: 複製成功 error: 複製錯誤 - noSupport: 瀏覽器不支持 + noSupport: 瀏覽器不支援 page: articles: 文章總覽 @@ -29,23 +29,23 @@ post: comments: 評論數 copyright: author: 文章作者 - link: 文章鏈接 + link: 文章連結 copyright_notice: 版權聲明 - copyright_content: '本博客所有文章除特別聲明外，均採用 + copyright_content: '本部落格所有文章除特別聲明外，均採用 %s 許可協議。轉載請註明來自 %s！' recommend: 相關推薦 -search: 搜索 +search: 搜尋 algolia_search: - input_placeholder: 搜索文章 + input_placeholder: 搜尋文章 hits_empty: "找不到您查詢的內容:${query}" hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒" local_search: - label: 本地搜索 - input_placeholder: 搜索文章 + label: 本地搜尋 + input_placeholder: 搜尋文章 hits_empty: "找不到您查詢的內容:${query}" - powered: "提供支持" + powered: "提供支援" by: 由 pagination: @@ -67,35 +67,35 @@ aside: card_webinfo: headline: 網站資訊 article_name: 文章數目 - runtime_name: 已運行時間 + runtime_name: 已執行時間 site_wordcount: 本站總字數 site_uv_name: 本站訪客數 site_pv_name: 本站總訪問量 - more_button: 查看更多 + more_button: 檢視更多 donate: 打賞 share: 分享 bookmark: - title: 添加書籤 + title: 新增書籤 rightside: readmode_title: 閱讀模式 - font_plus_title: 放大字體 - font_minus_title: 縮小字體 + font_plus_title: 放大字型 + font_minus_title: 縮小字型 translate_title: 簡繁轉換 night_mode_title: 夜間模式 back_to_top: 回到頂部 toc: 目錄 scroll_to_comment: 直達評論 - setting: 設置 + setting: 設定 runtime_unit: 天 copy_copyright: author: 作者 - link: 鏈接 + link: 連結 source: 來源 - info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。 + info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。 Snackbar: bookmark: @@ -107,5 +107,5 @@ Snackbar: night_to_day: 你已切換為淺色模式 error_title: 頁面沒有找到 - +loading: 載入中... diff --git a/layout/404.pug b/layout/404.pug index b41dbd4..b6c2d8c 100644 --- a/layout/404.pug +++ b/layout/404.pug @@ -6,6 +6,9 @@ html(lang=config.language data-theme=theme.display_mode) head include includes/head.pug body + if theme.preloader + !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache}) + if theme.fireworks && theme.fireworks.enable canvas.fireworks diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 54537dd..57ec278 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -69,3 +69,6 @@ if is_home() include ./head/subtitle.pug !=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + +if theme.preloader + !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/layout/includes/comments/valine.pug b/layout/includes/comments/valine.pug index 3c756da..8d42a0e 100644 --- a/layout/includes/comments/valine.pug +++ b/layout/includes/comments/valine.pug @@ -17,6 +17,5 @@ script. pageSize: '#{theme.valine.pageSize}', lang: '#{theme.valine.lang}', recordIP: #{theme.valine.recordIP}, - serverURLs: '#{theme.valine.serverURLs}', - mathjax: #{theme.valine.mathjax} + serverURLs: '#{theme.valine.serverURLs}' }); diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 57cdd92..59c9463 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -12,7 +12,8 @@ - var pageDescription = page_description() - var pageKeywords -- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') +- if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') : ([]).join(',') || page.keywords +- else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') - else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords - var pageAuthor = config.email ? config.author + ',' + config.email : config.author - var pageCopyright = config.copyright || config.author diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index cbd9ff9..134b02f 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -5,6 +5,9 @@ html(lang=config.language data-theme=theme.display_mode) head include ./head.pug body + if theme.preloader + !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache}) + if theme.fireworks && theme.fireworks.enable canvas.fireworks diff --git a/layout/includes/loading/loading-js.pug b/layout/includes/loading/loading-js.pug new file mode 100644 index 0000000..93054c5 --- /dev/null +++ b/layout/includes/loading/loading-js.pug @@ -0,0 +1,6 @@ +script. + var endLoading = function () { + document.body.style.overflow = 'auto'; + document.getElementById('loading-box').classList.add("loaded") + } + window.addEventListener('load',endLoading) \ No newline at end of file diff --git a/layout/includes/loading/loading.pug b/layout/includes/loading/loading.pug new file mode 100644 index 0000000..2e4b65f --- /dev/null +++ b/layout/includes/loading/loading.pug @@ -0,0 +1,9 @@ +#loading-box + .loading-left-bg + .loading-right-bg + .spinner-box + .configure-border-1 + .configure-core + .configure-border-2 + .configure-core + .loading-word= _p('loading') diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index c138153..3a6b91f 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -3,7 +3,7 @@ .card-info-avatar.is-center img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar") .author-info__name= config.author - .author-info__description= config.description + .author-info__description= theme.aside.card_author.description || config.description .card-info-data if site.posts.length diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug index 0032471..4330b63 100644 --- a/layout/includes/widget/card_tags.pug +++ b/layout/includes/widget/card_tags.pug @@ -4,6 +4,9 @@ if site.tags.length .item-headline i.fa.fa-tags(aria-hidden="true") span= _p('aside.card_tags') - + - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 - .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'}) + if theme.aside.card_tags.color + .card-tag-cloud!=cloudTags(site.tags,16,22,tagLimit) + else + .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'}) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index ae4c986..f37e6c5 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,7 +1,7 @@ if theme.aside.enable if page.aside !== false #aside_content.aside_content - if theme.aside.card_author + if theme.aside.card_author.enable !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) if theme.aside.card_announcement.enable !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) diff --git a/layout/page-tags.pug b/layout/page-tags.pug deleted file mode 100644 index 47c569b..0000000 --- a/layout/page-tags.pug +++ /dev/null @@ -1,14 +0,0 @@ -.tag-cloud - .tag-cloud__title= _p('page.tag') - | - - span.tag-cloud__amount= site.tags.length - .tag-cloud-tags - - 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 - a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name - -}) - if page.comments !== false - include includes/comments/index.pug - - diff --git a/layout/page.pug b/layout/page.pug index 19411b1..d01ef3d 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -2,7 +2,14 @@ extends includes/layout.pug block content if page.type === 'tags' - include page-tags.pug + .tag-cloud + .tag-cloud__title= _p('page.tag') + | - + span.tag-cloud__amount= site.tags.length + .tag-cloud-tags + !=cloudTags(site.tags,15,30,0) + if page.comments !== false + include includes/comments/index.pug else if page.type === 'link' include flink.pug else if page.type === 'categories' diff --git a/package.json b/package.json index 4fdd627..90f8d11 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,18 @@ { "name": "hexo-theme-butterfly", "version": "2.2.5", - "description": "A Hexo Theme: Butterfly" + "private": true, + "engines": { + "node": ">=8.10.0" + }, + "description": "A Simple and Card UI Design theme for Hexo", + "keywords": [ + "hexo", + "theme", + "butterfly", + "Card UI Design" + ], + "repository": "https://github.com/jerryc127/hexo-theme-butterfly.git", + "author": "Jerry ", + "license": "MIT" } \ No newline at end of file diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js index 41e30f4..02b935a 100644 --- a/scripts/helpers/page.js +++ b/scripts/helpers/page.js @@ -3,6 +3,7 @@ * @example * page_description() * injectHtml(data) + * cloudTags(source, minfontsize, maxfontsize, limit) */ 'use strict' @@ -11,7 +12,7 @@ const { stripHTML } = require('hexo-util') hexo.extend.helper.register('page_description', function () { const { config, page } = this - let description = page.description || page.excerpt || page.content || page.title || config.description + let description = page.description || page.content || page.title || config.description if (description) { description = stripHTML(description).substring(0, 200) @@ -29,3 +30,15 @@ hexo.extend.helper.register('injectHtml', function (data) { } return result }) + +hexo.extend.helper.register('cloudTags', function (source, minfontsize, maxfontsize, limit) { + const env = this + let result = '' + const tagLimit = limit === 0 ? source.length : limit + source.sort('name').limit(tagLimit).forEach(function (tags) { + var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px' + 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 += `${tags.name}` + }) + return result +}) diff --git a/scripts/tags/hide.js b/scripts/tags/hide.js index 41d7ec9..7dd89c0 100644 --- a/scripts/tags/hide.js +++ b/scripts/tags/hide.js @@ -8,29 +8,64 @@ * {% hideBlock display,bg,color %} * content * {% endhideBlock %} + * hideToggle + * {% hideToggle display,bg,color %} + * content + * {% endhideToggle %} */ 'use strict' function hideInline (args) { args = args.join(' ').split(',') - const content = args[0].trim() - const display = args[1] || 'Click' - const bg = args[2] === '' || typeof args[2] === 'undefined' ? '' : `background-color:${args[2]}` - const color = args[3] || '#fff' - return `${display} - ${content}` + var content = args[0] + var display = args[1] || 'Click' + var bg = args[2] || false + var color = args[3] || false + var group = 'style="' + + if (bg) group += `background-color: ${bg};` + if (color) group += `color: ${color}` + group += '"' + + return `${display} + ${content}` } function hideBlock (args, content) { args = args.join(' ').split(',') - const display = args[0] || 'Click' - const bg = args[1] === '' || typeof args[2] === 'undefined' ? '' : `background-color:${args[2]}` - const color = args[2] || '#fff' + var display = args[0] || 'Click' + var bg = args[1] || false + var color = args[2] || false + var group = 'style="' - return `
${display} + if (bg) group += `background-color: ${bg};` + if (color) group += `color: ${color}` + group += '"' + + return `
${display} ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
` } +function hideToggle (args, content) { + args = args.join(' ').split(',') + var display = args[0] + var bg = args[1] || false + var color = args[2] || false + var group = 'style="' + var border = '' + + if (bg) { + border = `style="border: 1px solid ${bg}"` + group += `background-color: ${bg};` + } + if (color) group += `color: ${color}` + group += '"' + + return `
${display}
+
${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
` +} + hexo.extend.tag.register('hideInline', hideInline) hexo.extend.tag.register('hideBlock', hideBlock, { ends: true }) +hexo.extend.tag.register('hideToggle', hideToggle, { ends: true }) diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 3903e0e..ff3b105 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -209,34 +209,6 @@ img:not([src]) width: 100% height: 100% -// tag-hide -.hide-inline, -.hide-block - & > .hide-button - position: relative - z-index: 1 - display: inline-block - padding: 0 1rem - background: $tag-hide-bg - text-align: center - cursor: pointer - - &:hover - text-decoration: none !important - - & > .hide-content - display: none - -.hide-inline - & > .hide-button - margin: 0 .3rem - - & > .hide-content - margin: 0 .3rem - -.hide-block - margin: 0 0 .8rem - .comment_headling margin-bottom: 10px font-weight: 700 diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 12c81df..b6dba71 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -271,6 +271,3 @@ blockquote background: darken($highlight-background, 5) color: $highlight-foreground font-size: 14px - -.highlight-close - height: 0 !important \ No newline at end of file diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index c1e368b..411a5b1 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -91,7 +91,8 @@ .card-tag-cloud a - word-break: keep-all + display: inline-block + padding: 0 .1rem &:hover color: $light-blue !important diff --git a/source/css/_layout/loadding.styl b/source/css/_layout/loadding.styl new file mode 100644 index 0000000..6b4aa1d --- /dev/null +++ b/source/css/_layout/loadding.styl @@ -0,0 +1,94 @@ +if hexo-config('preloader') + loading-bg() + position: fixed + z-index: 1000 + width: 50% + height: 100% + background-color: $preloader-bg + transition: all .5s + + #loading-box + .loading-left-bg + loading-bg() + + .loading-right-bg + loading-bg() + right: 0 + + .spinner-box + position: fixed + z-index: 1001 + display: flex + justify-content: center + align-items: center + width: 100% + height: 100vh + + .configure-border-1 + position: absolute + padding: 3px + width: 115px + height: 115px + background: #ffab91 + animation: configure-clockwise 3s ease-in-out 0s infinite alternate + + .configure-border-2 + left: -115px + padding: 3px + width: 115px + height: 115px + background: rgb(63, 249, 220) + transform: rotate(45deg) + animation: configure-xclockwise 3s ease-in-out 0s infinite alternate + + .loading-word + position: absolute + color: $white + font-size: .8rem + + .configure-core + width: 100% + height: 100% + background-color: $preloader-bg + + &.loaded + .loading-left-bg + transform: translate(-100%, 0) + + .loading-right-bg + transform: translate(100%, 0) + + .spinner-box + display: none + + @keyframes configure-clockwise + 0% + transform: rotate(0) + + 25% + transform: rotate(90deg) + + 50% + transform: rotate(180deg) + + 75% + transform: rotate(270deg) + + 100% + transform: rotate(360deg) + + @keyframes configure-xclockwise + 0% + transform: rotate(45deg) + + 25% + transform: rotate(-45deg) + + 50% + transform: rotate(-135deg) + + 75% + transform: rotate(-225deg) + + 100% + transform: rotate(-315deg) diff --git a/source/css/_layout/page.styl b/source/css/_layout/page.styl index 1ef3e48..56d8de0 100644 --- a/source/css/_layout/page.styl +++ b/source/css/_layout/page.styl @@ -270,7 +270,7 @@ -webkit-box-orient: vertical &:hover - color: $light-blue + color: $light-blue !important transform: translateX(20px) &__img @@ -381,7 +381,7 @@ & > div:first-child:not(.recent-posts) width: 100% !important -//ie10-ios11使用 +// ie10-ios11使用 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) .recent-post-info .content diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 4d0bd0c..480cde2 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -39,25 +39,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .article-title color: alpha(#FFFFFF, .8) !important - #page-header - &.fixed - background: alpha(#121212, .8) - box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0) + // 頭部 + #nav + &:before + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + background-color: alpha($dark-black, .7) + content: '' - .toggle-menu, - #site-name, + & > #page-header a - color: alpha(#FFFFFF, .8) + color: alpha(#FFFFFF, .8) !important - .menus_item_child - background-color: lighten(#121212, 5) !important - - li - &:hover - background: lighten(#121212, 20) + &.fixed + background: alpha(#121212, .8) + box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0) + .toggle-menu, + #site-name, a - color: alpha(#FFFFFF, .6) + color: alpha(#FFFFFF, .8) + + .menus_item_child + background-color: lighten(#121212, 5) !important + + li + &:hover + background: lighten(#121212, 20) !important + + a + color: alpha(#FFFFFF, .8) + + #site_subtitle + & > span + color: alpha(#FFFFFF, .6) // 代碼框 #article-container pre, @@ -109,6 +127,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .post-copyright-info color: alpha(#FFFFFF, .6) + &:after + background: #121212 + // 音樂播放器 .aplayer filter: brightness(.7) @@ -120,11 +141,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' & > i, & > a, & > div - background-color: lighten(#121212, 5) !important - color: alpha(#FFFFFF, .6) !important + background-color: lighten(#121212, 5) + color: alpha(#FFFFFF, .6) &:hover - background: lighten(#121212, 20) !important + background: lighten(#121212, 20) // 打賞按鈕 .post-reward @@ -164,23 +185,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' color: alpha(#FFFFFF, .6) !important .button--animated:before - background: lighten(#121212, 20) !important + background: lighten(#121212, 20) - // 頭部 - #nav - &:before - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - background-color: alpha($dark-black, .7) - content: '' - - #nav span, - #nav i, - #page-header a, - #page-header .toggle-menu, #post-meta, #post-meta a, #footer-wrap, @@ -217,11 +223,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' color: alpha(#FFFFFF, .8) !important // 時間軸界面 - .article-sort-item__title - color: alpha(#FFFFFF, .6) + .article-sort + &-item__title + color: alpha(#FFFFFF, .6) - &:hover - color: #49b1f5 + &-item:before, + &-title:before + background: #121212 // 手機 MENU,TOC #mobile-sidebar @@ -247,6 +255,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' filter: brightness(.7) color: #4c4948 + // hide-tags + .hide-button + filter: brightness(.7) + // 第三方 // 插件 hexo-blog-encrypt #hexo-blog-encrypt @@ -257,6 +269,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' input background-color: #121212 + .mermaid + filter: brightness(.7) + if hexo-config('gitalk') && hexo-config('gitalk.enable') #gitalk-container .gt-header-textarea, @@ -326,5 +341,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' blockquote color: alpha(#FFFFFF, .6) - .mermaid - filter: brightness(.7) + if hexo-config('preloader') + #loading-box + .loading-left-bg, + .loading-right-bg, + .configure-core + background-color: darken(#121212, 2) + + .loading-word + color: alpha(#FFFFFF, .6) diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index fd62e8c..c22519f 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -1,7 +1,9 @@ if hexo-config('readmode') && hexo-config('readmode.enable') [data-theme='light'] + $light-redmode-bg = #fff + .read-mode - background: #fff + background: $light-redmode-bg #nav.post-bg a @@ -17,12 +19,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable') blockquote border-left: .2rem solid #ddd - background-color: transparent + background-color: $light-redmode-bg ol, li &:before - background: transparent + background: $light-redmode-bg color: #4c4948 ul @@ -32,27 +34,40 @@ if hexo-config('readmode') && hexo-config('readmode.enable') hr border: 2px dashed #d6dbdf - background: transparent + background: $light-redmode-bg &:before color: darken(#d6dbdf, 10) + .hide-toggle + border: 1px solid darken(#d6dbdf, 10) !important + .hide-button - background: darken(#d6dbdf, 10) !important + background: $light-redmode-bg !important + color: #4c4948 !important + + .hide-inline, + .hide-block + & >.hide-button + border: 1px solid darken(#d6dbdf, 10) + + & > .button--animated:before + background: $light-redmode-bg .note border: 2px solid #eee - background-color: transparent + background-color: $light-redmode-bg - #mobile-sidebar-menus, - #rightside i, + #rightside i:not(.fa-cog), #rightside a, #rightside #rightside_config - background: darken(#d6dbdf, 10) !important + background: darken(#d6dbdf, 20) !important [data-theme='dark'] + $dark-readmode-bg = #0d0d0d + .read-mode - background: #0d0d0d + background: $dark-readmode-bg #article-container code @@ -60,12 +75,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable') blockquote border-left: .2rem solid rgba(255, 255, 255, .6) - background-color: transparent + background-color: $dark-readmode-bg ol, li &:before - background: transparent + background: $dark-readmode-bg color: rgba(255, 255, 255, .6) ul @@ -73,15 +88,28 @@ if hexo-config('readmode') && hexo-config('readmode.enable') &:before border: .15rem solid rgba(255, 255, 255, .6) + .hide-toggle + border: 1px solid rgba(255, 255, 255, .6) !important + + .hide-button + background: $dark-readmode-bg !important + filter: none + color: rgba(255, 255, 255, .6) !important + + .hide-inline, + .hide-block + & >.hide-button + border: 1px solid rgba(255, 255, 255, .6) + + & > .button--animated:before + background: $dark-readmode-bg !important + .note border: 2px solid rgba(255, 255, 255, .6) filter: none - background-color: transparent + background-color: $dark-readmode-bg color: rgba(255, 255, 255, .6) - .hide-button - background: #1f1f1f !important - .read-mode #body-wrap padding-left: 0 !important diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 6dab083..5531882 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -45,6 +45,10 @@ &:hover color: $search-color + em + color: $search-keyword-highlight + font-weight: bold + .ais-pagination.pagination margin: .8rem 0 0 padding: 0 diff --git a/source/css/_layout/gallery.styl b/source/css/_tags/gallery.styl similarity index 94% rename from source/css/_layout/gallery.styl rename to source/css/_tags/gallery.styl index 6c3b6f5..2325b49 100644 --- a/source/css/_layout/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -9,6 +9,9 @@ figure.gallery-group background: $dark-black -webkit-transform: translate3d(0, 0, 0) + @media screen and (max-width: 600px) + width: calc(100% - .4rem) + &:hover img opacity: .4 @@ -105,8 +108,4 @@ figure.gallery-group .fancybox width: auto - text-align: inherit - -@media screen and (max-width: 600px) - figure.gallery-group - width: calc(100% - .4rem) \ No newline at end of file + text-align: inherit \ No newline at end of file diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl new file mode 100644 index 0000000..a012749 --- /dev/null +++ b/source/css/_tags/hide.styl @@ -0,0 +1,53 @@ +// tag-hide +.hide-inline, +.hide-block + & > a.hide-button + position: relative + z-index: 1 + display: inline-block + padding: 0 1rem + background: $tag-hide-bg + color: $white !important + text-align: center + cursor: pointer + + &:hover + text-decoration: none !important + + &.open + display: none + + & > .hide-content + display: none + +.hide-inline + & > .hide-button + margin: 0 .3rem + + & > .hide-content + margin: 0 .3rem + +.hide-block + margin: 0 0 .8rem + +.hide-toggle + margin-bottom: 1rem + border: 1px solid $tag-hide-toggle-bg + + & > .hide-button + padding: .3rem .5rem + background: $tag-hide-toggle-bg + color: $font-color + cursor: pointer + + & > i + font-size: 1.2em + transition: all .3s + + &.open + i + transform: rotate(90deg) + + & > .hide-content + display: none + margin: 1.5rem 1.2rem diff --git a/source/css/_layout/note.styl b/source/css/_tags/note.styl similarity index 100% rename from source/css/_layout/note.styl rename to source/css/_tags/note.styl diff --git a/source/css/index.styl b/source/css/index.styl index a7df530..2333ce6 100644 --- a/source/css/index.styl +++ b/source/css/index.styl @@ -5,6 +5,7 @@ @import '_global' @import '_highlight/highlight' @import '_layout/*' +@import '_tags/*' @import '_mode/*' // search diff --git a/source/css/var.styl b/source/css/var.styl index 49fb7d4..f35bda7 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -84,8 +84,9 @@ $search-keyword-highlight = #F47466 $gallery-color = #fff // tag-hide $tag-hide-bg = $theme-color - - +$tag-hide-toggle-bg = #f0f0f0 +//preloader +$preloader-bg = #37474f // Note colors // -------------------------------------------------- diff --git a/source/js/main.js b/source/js/main.js index 7ce6704..03fdbfd 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -247,121 +247,128 @@ $(function () { /** * 代碼 + * 只適用於Hexo默認的代碼渲染 */ - const isHighlightCopy = GLOBAL_CONFIG.highlightCopy - const isHighlightLang = GLOBAL_CONFIG.highlightLang - const isHighlightShrink = GLOBAL_CONFIG.highlightShrink const $figureHighlight = $('figure.highlight') - if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') { - $figureHighlight.wrap('
').before('
') - } - /** + if ($figureHighlight.length) { + const isHighlightCopy = GLOBAL_CONFIG.highlightCopy + const isHighlightLang = GLOBAL_CONFIG.highlightLang + const isHighlightShrink = GLOBAL_CONFIG.highlightShrink + + if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') { + $figureHighlight.wrap('
').before('
') + } + + /** * 代碼收縮 */ - const $highlightTools = $('.highlight-tools') - if (isHighlightShrink === 'true') { - $highlightTools.append('') - } else if (isHighlightShrink === 'false') { - $highlightTools.append('') - } - - $(document).on('click', '.highlight-tools >.code-expand', function () { - var $table = $(this).parent().next() - if ($(this).hasClass('code-closed')) { - $table.css('display', 'block') - $(this).removeClass('code-closed') - } else { - $table.css('display', 'none') - $(this).addClass('code-closed') + const $highlightTools = $('.highlight-tools') + if (isHighlightShrink === 'true') { + $highlightTools.append('') + } else if (isHighlightShrink === 'false') { + $highlightTools.append('') } - }) - /** + $(document).on('click', '.highlight-tools >.code-expand', function () { + var $table = $(this).parent().next() + if ($(this).hasClass('code-closed')) { + $table.css('display', 'block') + $(this).removeClass('code-closed') + } else { + $table.css('display', 'none') + $(this).addClass('code-closed') + } + }) + + /** * 代碼語言 */ - if (isHighlightLang) { - var langNameIndex, langName - $figureHighlight.each(function () { - langNameIndex = langName = $(this).attr('class').split(' ')[1] - if (langNameIndex === 'plain') langName = 'Code' - $(this).prev().append('
' + langName + '
') - }) - } - /** + if (isHighlightLang) { + var langNameIndex, langName + $figureHighlight.each(function () { + langNameIndex = langName = $(this).attr('class').split(' ')[1] + if (langNameIndex === 'plain') langName = 'Code' + $(this).prev().append('
' + langName + '
') + }) + } + /** * 代碼copy * copy function */ - if (isHighlightCopy) { - $highlightTools.append('
') - var copy = function (text, ctx) { - if (document.queryCommandSupported && document.queryCommandSupported('copy')) { - try { - document.execCommand('copy') // Security exception may be thrown by some browsers. - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.success) - } else { - $(ctx).prev('.copy-notice') - .text(GLOBAL_CONFIG.copy.success) - .animate({ - opacity: 1, - right: 30 - }, 450, function () { - setTimeout(function () { - $(ctx).prev('.copy-notice').animate({ - opacity: 0, - right: 0 - }, 650) - }, 400) - }) + if (isHighlightCopy) { + $highlightTools.append('
') + var copy = function (text, ctx) { + if (document.queryCommandSupported && document.queryCommandSupported('copy')) { + try { + document.execCommand('copy') // Security exception may be thrown by some browsers. + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + $(ctx).prev('.copy-notice') + .text(GLOBAL_CONFIG.copy.success) + .animate({ + opacity: 1, + right: 30 + }, 450, function () { + setTimeout(function () { + $(ctx).prev('.copy-notice').animate({ + opacity: 0, + right: 0 + }, 650) + }, 400) + }) + } + } catch (ex) { + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + $(ctx).prev('.copy-notice') + .text(GLOBAL_CONFIG.copy.error) + .animate({ + opacity: 1, + right: 30 + }, 650, function () { + setTimeout(function () { + $(ctx).prev('.copy-notice').animate({ + opacity: 0, + right: 0 + }, 650) + }, 400) + }) + return false + } } - } catch (ex) { - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.success) - } else { - $(ctx).prev('.copy-notice') - .text(GLOBAL_CONFIG.copy.error) - .animate({ - opacity: 1, - right: 30 - }, 650, function () { - setTimeout(function () { - $(ctx).prev('.copy-notice').animate({ - opacity: 0, - right: 0 - }, 650) - }, 400) - }) - return false - } - } - } else { - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.noSupport) } else { - $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.noSupport) + } else { + $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) + } } } - } - // click events - $(document).on('click', '.highlight-tools>.fa-clipboard', function () { - var selection = window.getSelection() - var range = document.createRange() - range.selectNodeContents($(this).parent().next().find('.code pre')[0]) - selection.removeAllRanges() - selection.addRange(range) - var text = selection.toString() - copy(text, this) - selection.removeAllRanges() - }) + // click events + $(document).on('click', '.highlight-tools>.fa-clipboard', function () { + var selection = window.getSelection() + var range = document.createRange() + range.selectNodeContents($(this).parent().next().find('.code pre')[0]) + selection.removeAllRanges() + selection.addRange(range) + var text = selection.toString() + copy(text, this) + selection.removeAllRanges() + }) + } } /** * justified-gallery 圖庫排版 */ var $justifiedGallery = $('.justified-gallery') + var isJustifiedGallery = false if ($justifiedGallery.length) { + isJustifiedGallery = true var $imgList = $justifiedGallery.find('img') $imgList.unwrap() if ($imgList.length) { @@ -372,11 +379,19 @@ $(function () { } $('head').append('') loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () { - $justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({ - rowHeight: 220, - margins: 4 - }) + initJustifiedGallery($justifiedGallery) }) + + var initJustifiedGallery = function (selector) { + selector.each(function (i, o) { + if ($(this).is(':visible')) { + $(this).justifiedGallery({ + rowHeight: 220, + margins: 4 + }) + } + }) + } } /** @@ -708,6 +723,9 @@ $(function () { interval = setInterval(showDateTime, 10000) } + /** + * 百度推送 + */ if (GLOBAL_CONFIG.baiduPush) { (function () { var bp = document.createElement('script') @@ -726,17 +744,24 @@ $(function () { * tag-hide */ var $hideInline = $('.hide-button') - $hideInline.on('click', function (e) { - e.preventDefault() - $(this).hide() - var $hideContent = $(this).next('.hide-content') - $hideContent.show() - $hideContent.find('.justified-gallery').justifiedGallery({ - rowHeight: 220, - margins: 4 + if ($hideInline.length) { + $hideInline.on('click', function (e) { + e.preventDefault() + var $this = $(this) + var $hideContent = $(this).next('.hide-content') + $this.toggleClass('open') + $hideContent.toggle() + if ($this.hasClass('open')) { + if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) { + initJustifiedGallery($hideContent.find('.justified-gallery')) + } + } }) - }) + } + /** + * PhotoFigcaption + */ function addPhotoFigcaption () { var images = $('#article-container img') images.each(function (i, o) {