breaking changes: algolia 升級至 v4

feat:  本地搜索增加數據庫加載中和搜索中 loading 顯示
feat: 更改文章美化後,列表的顯示效果 closed #693 closed #686
improvement: UI 微調
pull/730/head
Jerry 3 years ago
parent 632cb37bc5
commit f7c50586ce

@ -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

@ -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'
local_search:
label: Local search
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
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}"
pagination:
prev: Previous Post

@ -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'
local_search:
label: Local search
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
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}"
pagination:
prev: Previous Post

@ -35,16 +35,18 @@ post:
recommend: 相关推荐
edit: 编辑
search: 搜索
algolia_search:
input_placeholder: 搜索文章
hits_empty: '找不到您查询的内容:${query}'
hits_stats: '找到 ${hits} 条结果,用时 ${time} 毫秒'
local_search:
label: 本地搜索
input_placeholder: 搜索文章
hits_empty: '找不到您查询的内容:${query}'
search:
title: 搜索
load_data: 数据库加载中
algolia_search:
input_placeholder: 搜索文章
hits_empty: '找不到您查询的内容:${query}'
hits_stats: '找到 ${hits} 条结果,用时 ${time} 毫秒'
local_search:
label: 本地搜索
input_placeholder: 搜索文章
hits_empty: '找不到您查询的内容:${query}'
pagination:
prev: 上一篇

@ -35,16 +35,18 @@ post:
recommend: 相關推薦
edit: 編輯
search: 搜尋
algolia_search:
input_placeholder: 搜尋文章
hits_empty: '找不到您查詢的內容:${query}'
hits_stats: '找到 ${hits} 條結果,用時 ${time} 毫秒'
local_search:
label: 本地搜尋
input_placeholder: 搜尋文章
hits_empty: '找不到您查詢的內容:${query}'
search:
title: 搜尋
load_data: 資料庫載入中
algolia_search:
input_placeholder: 搜尋文章
hits_empty: '找不到您查詢的內容:${query}'
hits_stats: '找到 ${hits} 條結果,用時 ${time} 毫秒'
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:

@ -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))

@ -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})

@ -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"),
}
})
}

@ -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

@ -1,5 +1 @@
.category-lists
.category-title.is-center= _p('page.category')
| -
span.category-amount= site.categories.length
div!= list_categories()
.category-lists!= list_categories()

@ -1,4 +1,2 @@
#article-container
if top_img === false
h1.page-title= page.title
!= page.content

@ -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

@ -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'})

@ -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

@ -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

@ -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

@ -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": {

@ -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

@ -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
})

@ -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/*')
})

@ -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}

@ -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

@ -1,4 +1,4 @@
if hexo-fonfig('prismjs_settings.line_number')
if $prismjs_line_number
@require 'line-number'
if $highlight_theme != false

@ -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

@ -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)

@ -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
ol,
ul
padding-left: 12px
+maxWidth768()
padding-left: 4px
li
&:not(.tab)
position: relative
margin: 4px 0
&:hover
&:before
transform: rotate(360deg)
margin: 0 0 8px
&: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
li
&::marker
color: $light-blue
font-weight: 600
font-size: 1.05em
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
&:hover
&::marker
color: var(--pseudo-hover)
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
li
margin: 4px 0
p
margin: 0 0 8px
&.post-content
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

@ -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

@ -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
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)
padding-left: 4px
li
position: relative
margin: 6px 0
padding: .12em .4em .12em 1.4em

@ -17,3 +17,7 @@
+maxWidth768()
font-size: 2em
h1.page-title
& + .tag-cloud-list
text-align: left

@ -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

@ -22,24 +22,22 @@
hr
margin: 20px auto
span.search-close-button
position: absolute
top: 16px
right: 20px
color: $grey
.search-nav
margin: 0 0 14px
color: $search-color
font-size: 1.4em
line-height: 1
cursor: pointer
transition: color .2s ease-in-out
&:hover
color: $search-color
.search-dialog-title
margin-right: 10px
&__title
padding: 0 0 14px
color: $search-color
font-size: 1.4em
line-height: 1
.search-close-button
float: right
color: $grey
transition: color .2s ease-in-out
&:hover
color: $search-color
#search-mask
position: fixed

@ -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

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362">
<linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)">
<stop offset="0" stop-color="#00aeff"/>
<stop offset="1" stop-color="#3369e7"/>
</linearGradient>
<path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/>
<path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/>
<path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.3 KiB

@ -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
}

@ -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 (
'<a href="' + link + '" class="algolia-hit-item-link">' +
data._highlightResult.title.value +
'</a>'
)
return `
<a href="${link}" class="algolia-hit-item-link">
${data._highlightResult.title.value || 'no-title'}
</a>`
},
empty: function (data) {
return (
@ -83,53 +84,39 @@ window.addEventListener('load', () => {
'</div>'
)
}
},
cssClasses: {
item: 'algolia-hit-item'
}
})
)
])
search.addWidget(
search.addWidgets([
instantsearch.widgets.stats({
container: '#algolia-stats',
templates: {
body: function (data) {
text: function (data) {
const icon = '<svg viewBox="0 0 1366 362" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="428.26" x2="434.14" y1="404.15" y2="409.85" gradientTransform="matrix(94.045 0 0 -94.072 -40382 38480)" gradientUnits="userSpaceOnUse"><stop stop-color="#00aeff" offset="0"/><stop stop-color="#3369e7" offset="1"/></linearGradient><path d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z" fill="url(#a)"/><path d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z" fill="#FFF"/><path d="m842.5 267.6c0 26.7-6.8 46.2-20.5 58.6s-34.6 18.6-62.8 18.6c-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1s-16.6-8.4-22.9-15-11.3-14.9-14.8-24.8-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5s21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2s16.5 11.4 27.9 11.4c6.2 0 12.1-0.9 17.6-2.6s9.9-3.7 13.4-6.1v-97.1c-2.8-0.6-14.5-3-25.8-3.3-14.2-0.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9-15.6 13.7-25.6 17.9-25.4 6.6-33.1 6.6c-7.7-0.1-23-2.3-32.9-6.6s-18.4-10.2-25.5-17.9-12.6-17-16.6-27.9-6-20.9-6-34.1 1.8-25.9 5.8-36.7 9.6-20 16.8-27.7 15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 0.1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8s-23 4.9-30.2 14.8-10.7 23.9-10.7 40.8c0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9s23-5 30.2-14.9c7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1 0.3-64.1-51.8-64.1-60.1l-0.1-184.8 39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3v-168.8l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7s-10.6-23.7-23.8-23.7-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8s15.9 7.7 21.1 13.4 8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8 0.3 13.6 0.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-0.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4s-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-0.7 27.1-1.9v-39.8c-2.2-0.6-5.3-1.3-9.4-1.9s-8.6-1-13.6-1c-4.3 0-8.7 0.3-13.1 1-4.4 0.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zm-772.2-140.9c12.9 0 23.8 1.6 32.6 4.8s15.9 7.7 21.1 13.4c5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8 0.3 13.6 0.8 4.7 0.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-0.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4s-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-0.7 27.1-1.9v-39.8c-2.2-0.6-5.3-1.3-9.4-1.9s-8.6-1-13.6-1c-4.3 0-8.7 0.3-13.1 1-4.4 0.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1 0.3-64.1-51.8-64.1-60.1l-0.1-184.8 39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z" fill="#182359"/></svg>'
const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS)
return (
'<hr>' +
stats +
'<span class="algolia-logo pull-right">' +
' <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
'</span>'
`<hr>${stats}<span class="algolia-logo pull-right">${icon}</span>`
)
}
}
})
)
])
search.addWidget(
search.addWidgets([
instantsearch.widgets.pagination({
container: '#algolia-pagination',
scrollTo: false,
showFirstLast: false,
labels: {
totalPages: 5,
templates: {
first: '<i class="fas fa-angle-double-left"></i>',
last: '<i class="fas fa-angle-double-right"></i>',
previous: '<i class="fas fa-angle-left"></i>',
next: '<i class="fas fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
item: 'pagination-item',
link: 'page-number',
active: 'current',
disabled: 'disabled-item'
}
})
)
])
search.start()
window.pjax && search.on('render', () => {

@ -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 = '<div class="search-result-list">'
const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
if (keywords[0] !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
$resultContent.innerHTML = ''
let str = '<div class="search-result-list">'
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 += '</div>'
$resultContent.innerHTML = str
if (keywords[0] !== '') $loadingStatus.innerHTML = ''
window.pjax && window.pjax.refresh($resultContent)
})
}

Loading…
Cancel
Save