From f7c50586ce28d7a132ff63fa8a70b3497aaefeee Mon Sep 17 00:00:00 2001 From: Jerry Date: Fri, 29 Oct 2021 14:40:10 +0800 Subject: [PATCH] =?UTF-8?q?breaking=20changes:=20algolia=20=E5=8D=87?= =?UTF-8?q?=E7=B4=9A=E8=87=B3=20v4=20feat:=20=20=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=8A=A0=E6=95=B8=E6=93=9A=E5=BA=AB?= =?UTF-8?q?=E5=8A=A0=E8=BC=89=E4=B8=AD=E5=92=8C=E6=90=9C=E7=B4=A2=E4=B8=AD?= =?UTF-8?q?=20loading=20=E9=A1=AF=E7=A4=BA=20feat:=20=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=BE=8E=E5=8C=96=E5=BE=8C,=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=9A=84=E9=A1=AF=E7=A4=BA=E6=95=88=E6=9E=9C=20closed?= =?UTF-8?q?=20#693=20closed=20#686=20improvement:=20UI=20=E5=BE=AE?= =?UTF-8?q?=E8=AA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 8 +- languages/default.yml | 20 +-- languages/en.yml | 20 +-- languages/zh-CN.yml | 20 +-- languages/zh-TW.yml | 24 ++-- layout/includes/additional-js.pug | 5 +- layout/includes/head.pug | 5 +- layout/includes/head/config.pug | 8 +- layout/includes/header/nav.pug | 2 +- layout/includes/page/categories.pug | 6 +- layout/includes/page/default-page.pug | 2 - layout/includes/page/flink.pug | 3 - layout/includes/page/tags.pug | 3 - .../includes/third-party/search/algolia.pug | 21 +-- .../third-party/search/local-search.pug | 22 +++- layout/page.pug | 3 + package.json | 2 +- scripts/events/cdn.js | 8 +- scripts/events/init.js | 6 - scripts/events/stylus.js | 15 +++ source/css/_global/function.styl | 24 ++++ source/css/_highlight/highlight.styl | 8 +- source/css/_highlight/prismjs/index.styl | 2 +- source/css/_highlight/theme.styl | 8 +- source/css/_layout/aside.styl | 4 +- source/css/_layout/post.styl | 123 +++++------------- source/css/_layout/rightside.styl | 7 +- source/css/_page/categories.styl | 75 ++++------- source/css/_page/tags.styl | 4 + source/css/_search/algolia.styl | 47 +++---- source/css/_search/index.styl | 28 ++-- source/css/_search/local-search.styl | 3 + source/img/algolia.svg | 9 -- source/js/main.js | 6 +- source/js/search/algolia.js | 87 ++++++------- source/js/search/local-search.js | 16 ++- 36 files changed, 290 insertions(+), 364 deletions(-) create mode 100644 scripts/events/stylus.js delete mode 100644 source/img/algolia.svg diff --git a/_config.yml b/_config.yml index 2568732..cb4e7ea 100644 --- a/_config.yml +++ b/_config.yml @@ -845,8 +845,8 @@ CDN: # search local_search: algolia_js: - algolia_search: - algolia_search_css: + algolia_search_v4: + instantsearch_v4: # math mathjax: @@ -869,8 +869,8 @@ CDN: pangu: # photo - fancybox_css: - fancybox: + fancybox_css_v4: + fancybox_v4: medium_zoom: # snackbar diff --git a/languages/default.yml b/languages/default.yml index 2241abc..8cb0020 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -34,16 +34,18 @@ post: recommend: Related Articles edit: Edited on -search: Search -algolia_search: - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: '${hits} results found in ${time} ms' +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' -local_search: - label: Local search - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}" + local_search: + label: Local search + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" pagination: prev: Previous Post diff --git a/languages/en.yml b/languages/en.yml index 22a55db..dc31ed7 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -34,16 +34,18 @@ post: recommend: Related Articles edit: Edited on -search: Search -algolia_search: - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: '${hits} results found in ${time} ms' +search: + title: Search + load_data: Loading the Database + algolia_search: + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}." + hits_stats: '${hits} results found in ${time} ms' -local_search: - label: Local search - input_placeholder: Search for Posts - hits_empty: "We didn't find any results for the search: ${query}" + local_search: + label: Local search + input_placeholder: Search for Posts + hits_empty: "We didn't find any results for the search: ${query}" pagination: prev: Previous Post diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index a0539a8..f3460b1 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -35,16 +35,18 @@ post: recommend: 相关推荐 edit: 编辑 -search: 搜索 -algolia_search: - input_placeholder: 搜索文章 - hits_empty: '找不到您查询的内容：${query}' - hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' +search: + title: 搜索 + load_data: 数据库加载中 + algolia_search: + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' + hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' -local_search: - label: 本地搜索 - input_placeholder: 搜索文章 - hits_empty: '找不到您查询的内容：${query}' + local_search: + label: 本地搜索 + input_placeholder: 搜索文章 + hits_empty: '找不到您查询的内容：${query}' pagination: prev: 上一篇 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index cf25922..1019eb7 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -35,16 +35,18 @@ post: recommend: 相關推薦 edit: 編輯 -search: 搜尋 -algolia_search: - input_placeholder: 搜尋文章 - hits_empty: '找不到您查詢的內容：${query}' - hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' +search: + title: 搜尋 + load_data: 資料庫載入中 + algolia_search: + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' + hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' -local_search: - label: 本地搜尋 - input_placeholder: 搜尋文章 - hits_empty: '找不到您查詢的內容：${query}' + local_search: + label: 本地搜尋 + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容：${query}' pagination: prev: 上一篇 @@ -65,7 +67,7 @@ aside: headline: 網站資訊 article_name: 文章數目 runtime: - name: 已運行時間 + name: 已執行時間 unit: 天 last_push_date: name: 最後更新時間 @@ -80,7 +82,7 @@ aside: zero: 沒有評論 image: 圖片 link: 連結 - code: 代碼 + code: 程式碼 card_toc: 目錄 date_suffix: diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 56d0f29..79fc8b4 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -8,7 +8,7 @@ div if theme.medium_zoom script(src=url_for(theme.CDN.medium_zoom)) else if theme.fancybox - script(src=url_for(theme.CDN.fancybox)) + script(src=url_for(theme.CDN.fancybox_v4)) if theme.instantpage script(src=url_for(theme.CDN.instantpage), type='module') @@ -24,7 +24,8 @@ div //- search if theme.algolia_search.enable - script(src=url_for(theme.CDN.algolia_search)) + script(src=url_for(theme.CDN.algolia_search_v4)) + script(src=url_for(theme.CDN.instantsearch_v4)) script(src=url_for(theme.CDN.algolia_js)) else if theme.local_search.enable script(src=url_for(theme.CDN.local_search)) diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 37078d8..5263e35 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -52,11 +52,8 @@ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload= if (theme.snackbar && theme.snackbar.enable) link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'") -if theme.algolia_search.enable - link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'") - if theme.fancybox - link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css) media="print" onload="this.media='all'") + link(rel='stylesheet' href=url_for(theme.CDN.fancybox_css_v4) media="print" onload="this.media='all'") //- google_adsense !=partial('includes/head/google_adsense', {}, {cache: true}) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 1f1974c..5e15f0e 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -9,9 +9,9 @@ hits: theme.algolia_search.hits, // search languages languages: { - input_placeholder: _p("algolia_search.input_placeholder"), - hits_empty: _p("algolia_search.hits_empty"), - hits_stats: _p("algolia_search.hits_stats") + input_placeholder: _p("search.algolia_search.input_placeholder"), + hits_empty: _p("search.algolia_search.hits_empty"), + hits_stats: _p("search.algolia_search.hits_stats"), } }) } @@ -22,7 +22,7 @@ path: config.search.path, languages: { // search languages - hits_empty: _p("local_search.hits_empty") + hits_empty: _p("search.local_search.hits_empty"), } }) } diff --git a/layout/includes/header/nav.pug b/layout/includes/header/nav.pug index 2b4d3da..7b516e9 100644 --- a/layout/includes/header/nav.pug +++ b/layout/includes/header/nav.pug @@ -7,7 +7,7 @@ nav#nav #search-button a.site-page.social-icon.search i.fas.fa-search.fa-fw - span=' '+_p('search') + span=' '+_p('search.title') !=partial('includes/header/menu_item', {}, {cache: true}) #toggle-menu diff --git a/layout/includes/page/categories.pug b/layout/includes/page/categories.pug index dbdc980..79153c8 100644 --- a/layout/includes/page/categories.pug +++ b/layout/includes/page/categories.pug @@ -1,5 +1 @@ -.category-lists - .category-title.is-center= _p('page.category') - | - - span.category-amount= site.categories.length - div!= list_categories() \ No newline at end of file +.category-lists!= list_categories() \ No newline at end of file diff --git a/layout/includes/page/default-page.pug b/layout/includes/page/default-page.pug index 2d9cdda..e7057f7 100644 --- a/layout/includes/page/default-page.pug +++ b/layout/includes/page/default-page.pug @@ -1,4 +1,2 @@ #article-container - if top_img === false - h1.page-title= page.title != page.content \ No newline at end of file diff --git a/layout/includes/page/flink.pug b/layout/includes/page/flink.pug index c986f59..f6c1063 100644 --- a/layout/includes/page/flink.pug +++ b/layout/includes/page/flink.pug @@ -1,7 +1,4 @@ #article-container - if top_img === false - h1.page-title= page.title - .flink if site.data.link each i in site.data.link diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug index 4d57e43..8caac11 100644 --- a/layout/includes/page/tags.pug +++ b/layout/includes/page/tags.pug @@ -1,5 +1,2 @@ -.tag-cloud-title.is-center= _p('page.tag') - | - - span.tag-cloud-amount= site.tags.length .tag-cloud-list.is-center !=cloudTags({source: site.tags, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'}) \ No newline at end of file diff --git a/layout/includes/third-party/search/algolia.pug b/layout/includes/third-party/search/algolia.pug index 6d22886..e2d427e 100644 --- a/layout/includes/third-party/search/algolia.pug +++ b/layout/includes/third-party/search/algolia.pug @@ -1,13 +1,16 @@ #algolia-search .search-dialog - #algolia-search-title.search-dialog__title Algolia - #algolia-input-panel + nav.search-nav + span.search-dialog-title= 'Algolia' + button.search-close-button + i.fas.fa-times + + .search-wrap #algolia-search-input - hr - #algolia-search-results - #algolia-hits - #algolia-pagination - #algolia-stats - span.search-close-button - i.fas.fa-times + hr + #algolia-search-results + #algolia-hits + #algolia-pagination + #algolia-stats + #search-mask diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug index dec1569..4aa6ff3 100644 --- a/layout/includes/third-party/search/local-search.pug +++ b/layout/includes/third-party/search/local-search.pug @@ -1,12 +1,20 @@ #local-search .search-dialog - #local-search-title.search-dialog__title=_p("local_search.label") - #local-input-panel + nav.search-nav + span.search-dialog-title=_p("search.local_search.label") + span#loading-status + button.search-close-button + i.fas.fa-times + + #loading-database.is-center + i.fas.fa-spinner.fa-pulse + span= ' ' + _p("search.load_data") + + .search-wrap #local-search-input .local-search-box - input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input - hr - #local-search-results - span.search-close-button - i.fas.fa-times + input(placeholder=_p("search.local_search.input_placeholder") type="text").local-search-box--input + hr + #local-search-results + #search-mask \ No newline at end of file diff --git a/layout/page.pug b/layout/page.pug index 2fb8b7e..6c810ef 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -2,6 +2,9 @@ extends includes/layout.pug block content #page + if top_img === false + h1.page-title= page.title + case page.type when 'tags' include includes/page/tags.pug diff --git a/package.json b/package.json index ee1f528..1a32584 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b8", + "version": "4.0.0-b9", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/cdn.js b/scripts/events/cdn.js index 0f038c4..ea564b2 100644 --- a/scripts/events/cdn.js +++ b/scripts/events/cdn.js @@ -33,8 +33,8 @@ hexo.extend.filter.register('before_generate', () => { // search local_search: '/js/search/local-search.js', algolia_js: '/js/search/algolia.js', - algolia_search: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js', - algolia_search_css: 'https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css', + algolia_search_v4: 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js', + instantsearch_v4: 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js', // math mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js', @@ -57,8 +57,8 @@ hexo.extend.filter.register('before_generate', () => { pangu: 'https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js', // photo - fancybox_css: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css', - fancybox: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js', + fancybox_css_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css', + fancybox_v4: 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js', medium_zoom: 'https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js', // snackbar diff --git a/scripts/events/init.js b/scripts/events/init.js index 76f78ef..b270319 100644 --- a/scripts/events/init.js +++ b/scripts/events/init.js @@ -18,10 +18,4 @@ hexo.extend.filter.register('before_generate', () => { process.exit(-1) } } - - // let stylus to get the hexo highlight config - const themeConfig = hexo.theme.config - const hexoConfig = hexo.config - themeConfig.highlight_settings = hexoConfig.highlight - themeConfig.prismjs_settings = hexoConfig.prismjs }) diff --git a/scripts/events/stylus.js b/scripts/events/stylus.js new file mode 100644 index 0000000..4b95538 --- /dev/null +++ b/scripts/events/stylus.js @@ -0,0 +1,15 @@ +/** + * stylus + */ + +'use strict' + +hexo.extend.filter.register('stylus:renderer', function (style) { + const { highlight, prismjs } = hexo.config + style + .define('$highlight_enable', highlight && highlight.enable) + .define('$highlight_line_number', highlight && highlight.line_number) + .define('$prismjs_enable', prismjs && prismjs.enable) + .define('$prismjs_line_number', prismjs && prismjs.line_number) + // .import(this.source_dir.replace(/\\/g, '/') + '_data/css/*') +}) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 184b0e7..741b35f 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -50,6 +50,30 @@ transition: all .6s, filter 375ms ease-in .2s object-fit: cover +.list-beauty + list-style: none + + li + position: relative + padding 0.12em 0.4em 0.12em 1.4em + + &:hover + &:before + border-color: var(--pseudo-hover) + + &:before + position: absolute + top: .67em + left: 0 + width: w = .43em + height: h = w + border: .5 * w solid $light-blue + border-radius: w + background: transparent + content: '' + cursor: pointer + transition: all .3s ease-out + maxWidth600() @media screen and (max-width: 600px) {block} diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 4be7103..4271288 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -1,7 +1,5 @@ $highlight_theme = hexo-config('highlight_theme') -$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable') -$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable') -wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap') +wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap') @require 'theme' @@ -15,10 +13,10 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w --hlscrollbar-bg: $highlight-scrollbar --hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9)) -if $highlighEnable +if $highlight_enable @require 'highlight/index' -if $prismjsEnable +if $prismjs_enable @require 'prismjs/index' $code-block diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index f0be1d5..0593143 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -1,4 +1,4 @@ -if hexo-fonfig('prismjs_settings.line_number') +if $prismjs_line_number @require 'line-number' if $highlight_theme != false diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index 58fc330..63393db 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -13,7 +13,7 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac') } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = #969896 $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -39,7 +39,7 @@ if $highlight_theme == 'pale night' } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = #676E95 $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -65,7 +65,7 @@ if $highlight_theme == 'ocean' } $highlight-scrollbar = lighten($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = rgba(101, 115, 126, .8) $highlight-red = #FF5370 $highlight-orange = #F78C6C @@ -92,7 +92,7 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light') } $highlight-scrollbar = darken($highlight-background, 8) - if $highlighEnable + if $highlight_enable $highlight-comment = rgba(149, 165, 166, .8) $highlight-red = #E53935 $highlight-orange = #F76D47 diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 76b6e25..ba6e0ff 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -258,7 +258,8 @@ .toc-content clear: both - overflow-y: auto + overflow-y: scroll + overflow-y: overlay max-height: calc(100vh - 120px) +maxWidth900() @@ -288,6 +289,7 @@ .toc-link display: block + padding-right: 8px padding-left: 6px border-left: 3px solid transparent color: var(--toc-link-color) diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 482cbc2..a082f33 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,9 +1,9 @@ beautify() headStyle(fontsize) - padding-left: unit(fontsize + .4, 'px') + padding-left: unit(fontsize + 12, 'px') &:before - margin-left: unit((-(fontsize + 4)), 'px') + margin-left: unit((-(fontsize + 6)), 'px') font-size: unit(fontsize, 'px') &:hover @@ -50,93 +50,21 @@ beautify() ol, ul - margin-top: 8px - padding: 0 0 0 16px - list-style: none - counter-reset: li - - +maxWidth768() - padding: 0 0 0 8px - p - margin: 0 0 10px + margin: 0 0 8px - ol, - ul - padding-left: 12px + li + &::marker + color: $light-blue + font-weight: 600 + font-size: 1.05em - +maxWidth768() - padding-left: 4px + &:hover + &::marker + color: var(--pseudo-hover) - li - &:not(.tab) - position: relative - margin: 4px 0 - - &:hover - &:before - transform: rotate(360deg) - - &:before - position: absolute - top: 0 - left: 0 - background: $light-blue - color: $white - cursor: pointer - transition: all .3s ease-out - - ol - > li - &:not(.tab) - padding: .2em .2em .2em 1.8em - - &:before - margin-top: .65em - width: w = 1.45em - height: h = w - border-radius: .5 * w - content: counter(li) - counter-increment: li - text-align: center - font-size: .85em - line-height: h - - ul - > li:not(.tab) - padding: .2em .2em .2em 1.4em - - &:hover - &:before - border-color: var(--pseudo-hover) - - &:before - $w = .42em - top: .78em - width: w = $w - height: h = w - border: .5 * w solid $light-blue - border-radius: w - background: transparent - content: '' - line-height: h - -no-beautify() - ol, - ul - margin-top: 8px - - p - margin: 0 0 10px - - ol, - ul - padding-left: 10px - - li - position: relative - margin: 6px 0 - padding-left: 6px + ul > li + list-style-type: circle #article-container word-wrap: break-word @@ -152,7 +80,7 @@ no-beautify() display: block margin: 0 auto 20px max-width: 100% - transition: filter 375ms ease-in 0.2s + transition: filter 375ms ease-in .2s p margin: 0 0 16px @@ -174,15 +102,24 @@ no-beautify() font-family: Monaco, 'Ubuntu Mono', monospace line-height: 1em - if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site' - beautify() - else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post' - no-beautify() + ol, + ul + ol, + ul + padding-left: 20px - &.post-content + li + margin: 4px 0 + + p + margin: 0 0 8px + + if hexo-config('beautify.enable') + if hexo-config('beautify.field') == 'site' beautify() - else - no-beautify() + else if hexo-config('beautify.field') == 'post' + &.post-content + beautify() > :last-child margin-bottom: 0 !important diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 517f134..d9e338c 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -18,7 +18,7 @@ & > a display: block margin-bottom: 5px - width: w = 38px + width: w = 35px height: w border-radius: 5px background-color: var(--btn-bg) @@ -30,11 +30,6 @@ &:hover background-color: var(--btn-hover-color) - +maxWidth768() - width: w = 34px - height: w - line-height: w - #mobile-toc-button display: none diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index ab18108..8b80107 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -1,62 +1,37 @@ -#page - .category-lists - padding: 20px 0 30px +.category-lists + .category-title + font-size: 2.57em +maxWidth768() - padding: 0 + font-size: 2em - .category-title - font-size: 2.57em + .category-list + margin-bottom: 0 - +maxWidth768() - font-size: 2em + a + color: var(--font-color) - .category-list - a - color: var(--font-color) + &:hover + color: $text-hover - &:hover - color: $text-hover + .category-list-count + margin-left: 8px + color: $theme-meta-color - .category-list-count - margin-left: 8px - color: $theme-meta-color + &:before + content: '(' - &:before - content: '(' + &:after + content: ')' - &:after - content: ')' + ul + padding: 0 0 0 20px + @extend .list-beauty ul - margin-top: 8px - padding: 0 0 0 20px - list-style: none - counter-reset: li + padding-left: 4px - ul - padding-left: 4px - - li - position: relative - margin: 6px 0 - padding: .12em .4em .12em 1.4em - - &:before - position: absolute - left: 0 - cursor: pointer - transition: all .3s ease-out - $w = .43em - top: .7em - width: w = $w - height: h = w - border: .5 * w solid $light-blue - border-radius: w - background: transparent - content: '' - // line-height: h - - &:hover - &:before - border-color: var(--pseudo-hover) + li + position: relative + margin: 6px 0 + padding: .12em .4em .12em 1.4em diff --git a/source/css/_page/tags.styl b/source/css/_page/tags.styl index ee3e932..bce33ae 100644 --- a/source/css/_page/tags.styl +++ b/source/css/_page/tags.styl @@ -17,3 +17,7 @@ +maxWidth768() font-size: 2em + +h1.page-title + & + .tag-cloud-list + text-align: left diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index b96ae92..c90c0a0 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -1,69 +1,52 @@ #algolia-search .search-dialog - .ais-search-box - margin: 0 auto - max-width: 100% - width: 100% - + .ais-SearchBox input padding: 5px 14px + width: 100% outline: none border: 2px solid $search-color border-radius: 40px background: var(--search-bg) color: var(--search-input-color) - .ais-hits--item.algolia-hit-item - position: relative + .ais-Hits-list padding-left: 24px - - &:hover - &:before - border-color: var(--pseudo-hover) - - &:before - $w = .5em - position: absolute - top: .53em - left: 0 - width: w = $w - height: h = w - border: 3px solid $search-color - border-radius: w - background: transparent - content: '' - line-height: h - transition: all .2s ease-in-out + @extend .list-beauty a - display: block color: var(--search-result-title) - cursor: pointer &:hover color: $search-color - em + mark + background: transparent color: $search-keyword-highlight font-weight: bold - .ais-pagination.pagination + .ais-Pagination margin: 16px 0 0 padding: 0 text-align: center - .ais-pagination--item + .ais-Pagination-list + padding: 0 + list-style: none + + .ais-Pagination-item + display: inline margin: 0 4px padding: 0 - a + .ais-Pagination-link display: inline-block min-width: 24px height: 24px text-align: center line-height: 24px - .ais-pagination--item.current + .ais-Pagination-item--selected a background: $theme-paginator-color color: #eee diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 9a58862..cac6278 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -22,25 +22,23 @@ hr margin: 20px auto - span.search-close-button - position: absolute - top: 16px - right: 20px - color: $grey - font-size: 1.4em - line-height: 1 - cursor: pointer - transition: color .2s ease-in-out - - &:hover - color: $search-color - - &__title - padding: 0 0 14px + .search-nav + margin: 0 0 14px color: $search-color font-size: 1.4em line-height: 1 + .search-dialog-title + margin-right: 10px + + .search-close-button + float: right + color: $grey + transition: color .2s ease-in-out + + &:hover + color: $search-color + #search-mask position: fixed top: 0 diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index 455846c..f67d87a 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -15,6 +15,9 @@ color: var(--search-input-color) -webkit-appearance: none + .search-wrap + display: none + .local-search__hit-item position: relative padding-left: 24px diff --git a/source/img/algolia.svg b/source/img/algolia.svg deleted file mode 100644 index 4702423..0000000 --- a/source/img/algolia.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/source/js/main.js b/source/js/main.js index bd3f14f..e0625b4 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,5 +1,6 @@ document.addEventListener('DOMContentLoaded', function () { - let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen + let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex + let mobileSidebarOpen = false const adjustMenu = (init) => { if (init) { @@ -43,6 +44,7 @@ document.addEventListener('DOMContentLoaded', function () { $body.style.paddingRight = '' btf.fadeOut(document.getElementById('menu-mask'), 0.5) document.getElementById('sidebar-menus').classList.remove('open') + mobileSidebarOpen = false } } @@ -237,7 +239,7 @@ document.addEventListener('DOMContentLoaded', function () { }) if (window.fjGallery) { - btf.initJustifiedGallery(ele) + setTimeout(() => { btf.initJustifiedGallery(ele) }, 100) return } diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index d1de45f..83353a7 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -1,8 +1,10 @@ window.addEventListener('load', () => { const openSearch = () => { - document.body.style.cssText = 'width: 100%;overflow: hidden' + const bodyStyle = document.body.style + bodyStyle.width = '100%' + bodyStyle.overflow = 'hidden' document.querySelector('#algolia-search .search-dialog').style.display = 'block' - document.querySelector('#algolia-search .ais-search-box--input').focus() + document.querySelector('#algolia-search .ais-SearchBox-input').focus() btf.fadeIn(document.getElementById('search-mask'), 0.5) // shortcut: ESC document.addEventListener('keydown', function f (event) { @@ -14,7 +16,9 @@ window.addEventListener('load', () => { } const closeSearch = () => { - document.body.style.cssText = "width: '';overflow: ''" + const bodyStyle = document.body.style + bodyStyle.width = '' + bodyStyle.overflow = '' const $searchDialog = document.querySelector('#algolia-search .search-dialog') $searchDialog.style.animation = 'search_close .5s' setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500) @@ -40,41 +44,38 @@ window.addEventListener('load', () => { return console.error('Algolia setting is invalid!') } + const searchClient = window.algoliasearch(algolia.appId, algolia.apiKey) const search = instantsearch({ - appId: algolia.appId, - apiKey: algolia.apiKey, indexName: algolia.indexName, - searchParameters: { - hitsPerPage: algolia.hits.per_page || 10 - }, - searchFunction: function (helper) { - const searchInput = document.querySelector('#algolia-search-input input') - - if (searchInput.value) { - helper.search() - } - } + searchClient }) - search.addWidget( + search.addWidgets([ + instantsearch.widgets.configure({ + hitsPerPage: 5 + }) + ]) + + search.addWidgets([ instantsearch.widgets.searchBox({ container: '#algolia-search-input', - reset: false, - magnifier: false, - placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder + showReset: false, + showSubmit: false, + placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder, + showLoadingIndicator: true }) - ) - search.addWidget( + ]) + + search.addWidgets([ instantsearch.widgets.hits({ container: '#algolia-hits', templates: { item: function (data) { const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path) - return ( - '' + - data._highlightResult.title.value + - '' - ) + return ` + + ${data._highlightResult.title.value || 'no-title'} + ` }, empty: function (data) { return ( @@ -83,53 +84,39 @@ window.addEventListener('load', () => { '' ) } - }, - cssClasses: { - item: 'algolia-hit-item' } }) - ) + ]) - search.addWidget( + search.addWidgets([ instantsearch.widgets.stats({ container: '#algolia-stats', templates: { - body: function (data) { + text: function (data) { + const icon = '' const stats = GLOBAL_CONFIG.algolia.languages.hits_stats .replace(/\$\{hits}/, data.nbHits) .replace(/\$\{time}/, data.processingTimeMS) return ( - '
' + - stats + - '' + `
${stats}` ) } } }) - ) + ]) - search.addWidget( + search.addWidgets([ instantsearch.widgets.pagination({ container: '#algolia-pagination', - scrollTo: false, - showFirstLast: false, - labels: { + totalPages: 5, + templates: { first: '', last: '', previous: '', next: '' - }, - cssClasses: { - root: 'pagination', - item: 'pagination-item', - link: 'page-number', - active: 'current', - disabled: 'disabled-item' } }) - ) + ]) search.start() window.pjax && search.on('render', () => { diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 8da8a73..d1df43d 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -59,22 +59,31 @@ window.addEventListener('load', () => { } }) } + if (response.ok) { + const $loadDataItem = document.getElementById('loading-database') + $loadDataItem.nextElementSibling.style.display = 'block' + $loadDataItem.remove() + } + const $input = document.querySelector('#local-search-input input') const $resultContent = document.getElementById('local-search-results') + const $loadingStatus = document.getElementById('loading-status') $input.addEventListener('input', function () { - let str = '
' const keywords = this.value.trim().toLowerCase().split(/[\s]+/) + if (keywords[0] !== '') $loadingStatus.innerHTML = '' + $resultContent.innerHTML = '' + let str = '
' if (this.value.trim().length <= 0) return let count = 0 // perform local searching datas.forEach(function (data) { let isMatch = true if (!data.title || data.title.trim() === '') { - data.title = 'Untitled' + data.title = '' } let dataTitle = data.title.trim().toLowerCase() - const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() + const dataContent = data.content ? data.content.trim().replace(/<[^>]+>/g, '').toLowerCase() : '' const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url let indexTitle = -1 let indexContent = -1 @@ -146,6 +155,7 @@ window.addEventListener('load', () => { } str += '
' $resultContent.innerHTML = str + if (keywords[0] !== '') $loadingStatus.innerHTML = '' window.pjax && window.pjax.refresh($resultContent) }) }