biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 20:30:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

🔍 搜索功能改進：

Browse Source 
- 新增本地搜索分頁配置 (enablePagination, hitsPerPage)
- 重構 Algolia 搜索邏輯，支援多索引和更好的錯誤處理
- 優化搜索 UI 樣式，包括分頁按鈕和響應式設計
- 改進搜索結果顯示，新增編號和更好的高亮處理

📦 依賴項更新：
- 更新 plugins.yml 中的多個插件版本 (abcjs, algolia, aplayer 等)
- 更新 package.json 版本號為 5.5.0

🎨 UI/UX 優化：
- 改進側邊欄和目錄的動畫效果
- 優化樣式佈局，調整寬度百分比
- 新增說說頁面的分頁導航組件
- 改進右側邊欄按鈕樣式

🐛 錯誤處理和代碼優化：
- 修復 Umami Analytics 的錯誤處理和數據驗證
- 改進懶加載圖片的正則表達式，避免匹配腳本標籤
- 移除未使用的變數和改進代碼結構
- 新增說說內容的 Markdown 渲染支援

🔧 其他改進：
- 更新翻譯功能，移除箭頭函數語法以提升相容性
This commit is contained in:
Jerry
2025-09-09 15:40:08 +08:00
Unverified
parent ec1a226774
commit 67c95cee0c
33 changed files with 1479 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
source/css/_layout/aside.styl
View File

@@ -181,6 +181,11 @@
.card-category-list
&.child
padding: 0 0 0 16px
overflow: hidden
max-height: 0
opacity: 0
visibility: hidden
transition: max-height .3s ease, opacity .3s ease
> .parent
> a
@@ -189,7 +194,9 @@
transform: rotate(-90deg)
& + .child
display: block
max-height: 1000px
opacity: 1
visibility: visible
.card-category-list
&-name
@@ -208,7 +215,9 @@
if hexo-config('aside.card_categories.expand') == false
> .child
display: none
max-height: 0
opacity: 0
visibility: hidden
.card-webinfo
.webinfo

4
source/css/_layout/rightside.styl
View File

@@ -38,9 +38,13 @@
font-size: 16px
line-height: w
addBorderRadius(5)
@extend .btn-effects
&:hover
background-color: var(--btn-hover-color)
i
vertical-align: baseline
#mobile-toc-button
display: none

23
source/css/_layout/sidebar.styl
View File

@@ -52,7 +52,10 @@
&:hover
background: var(--text-bg-hover)
box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
color: var(--white)
transition: all .2s ease
transform: translateX(3px)
i:first-child
width: 15%
@@ -70,9 +73,25 @@
transform: rotate(90deg)
& + .menus_item_child
display: none
overflow: hidden
max-height: 0
opacity: 0
transform: scaleY(0)
transform-origin: top
.menus_item_child
margin: 0
padding-left: 25px
list-style: none
max-height: 0
list-style: none
opacity: 0
transition: transform .3s ease, opacity .3s ease, max-height .3s ease
transform: scaleY(0)
transform-origin: top
will-change: transform, opacity, max-height
// 當父元素沒有 .hide 類時，顯示子目錄
.site-page.group:not(.hide) + .menus_item_child
max-height: 1000px
opacity: 1
transform: scaleY(1)

2
source/css/_page/common.styl
View File

@@ -18,7 +18,7 @@
padding: 20px 5px
+minWidth2000()
max-width: 70%
max-width: 60%
& > div:first-child:not(.nc)
@extend .cardHover

107
source/css/_page/shuoshuo.styl
View File

@@ -76,3 +76,110 @@
&.no-comment
display: none
.shuoshuo-navigation
display: flex
justify-content: center
align-items: center
margin-top: 20px
padding: 20px 0
button
display: flex
justify-content: center
align-items: center
width: 2.7em
height: 2.7em
background-color: var(--btn-bg)
color: var(--btn-color)
font-size: .9em
line-height: 2.5em
transition: all .2s ease-in-out
addBorderRadius(6)
&:not(:disabled)
@extend .btn-effects
&:hover:not(:disabled)
background-color: var(--btn-hover-color)
&:disabled
background: #f5f5f5
color: #ccc
opacity: .5
cursor: not-allowed
.shuoshuo-page-info
margin: 0 15px
color: #858585
white-space: nowrap
font-size: .9em
.shuoshuo-page-input
margin-right: 12px
padding: 0 15px
height: 2.7em
border: 1px solid var(--btn-bg)
background: var(--card-bg)
color: #858585
text-align: center
font-size: .9em
transition: all .2s ease-in-out
addBorderRadius(6)
&:focus
outline: none
border-width: 2px
&::placeholder
color: transparent
/* 隱藏 number 輸入框的上下箭頭 */
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button
margin: 0
-webkit-appearance: none
/* Firefox */
-moz-appearance: textfield
/* 當作為頁碼按鈕時的樣式 */
&.shuoshuo-page-num
min-width: 40px
width: 40px
border: none
background: $light-blue
color: var(--white)
font-weight: 500
cursor: text
&:focus
border: 1px solid $light-blue
background: var(--white)
color: #333
/* 超出範圍時的紅色樣式 */
&.invalid
border-color: #ff4757
background-color: #ffeaea
color: #ff4757
animation: shake .5s ease-in-out
/* 震動動畫 */
@keyframes shake
0%,
100%
transform: translateX(0)
10%,
30%,
50%,
70%,
90%
transform: translateX(-2px)
20%,
40%,
60%,
80%
transform: translateX(2px)

86
source/css/_search/algolia.styl
View File

@@ -1,93 +1,13 @@
#algolia-search
.search-dialog
.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-SearchBox-loadingIndicator
position: absolute
top: 18px
left: 67px
.ais-Hits-list
margin: 0
padding: 0
@extend .list-beauty
a
color: var(--search-a-color)
&:hover
color: $search-color
mark
background: transparent
color: $search-keyword-highlight
font-weight: bold
.algolia-hits-item-title
font-weight: 600
.algolia-hit-item-content
margin: 0 0 8px
word-break: break-word
.ais-Pagination
margin: 15px 0 0
padding: 0
text-align: center
.ais-Pagination-list
margin: 0
padding: 0
list-style: none
.ais-Pagination-item
display: inline
margin: 0 4px
padding: 0
.ais-Pagination-link
display: inline-block
min-width: 24px
height: 24px
text-align: center
line-height: 24px
addBorderRadius()
.ais-Pagination-item--selected
a
background: $theme-paginator-color
color: #eee
cursor: default
.ais-Pagination-item--disabled
visibility: hidden
#algolia-hits
> div
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 220px)
+maxWidth768()
max-height: none
height: calc(var(--search-height) - 235px)
+maxWidth768()
min-height: calc(var(--search-height) - 245px)
#algolia-info
div
display: inline
.algolia-poweredBy
float: right
vertical-align: text-top
padding-top: 2px
svg
height: 1.1em

193
source/css/_search/index.styl
View File

@@ -20,22 +20,173 @@
border-radius: 0
.search-nav
margin: 0 0 14px
display: flex
justify-content: space-between
align-items: center
margin-bottom: 14px
color: $search-color
font-size: 1.4em
line-height: 1
.search-dialog-title
margin-right: 10px
margin-right: 4px
#loading-status
&[hidden]
display: none !important
.search-close-button
float: right
flex: 1
color: $grey
transition: color .2s ease-in-out
text-align: right
transition: all .2s ease
&:hover
color: $search-color
.local-search-input,
#algolia-search-input
margin: 0 auto
max-width: 100%
width: 100%
input,
.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)
-webkit-appearance: none
&::placeholder
color: var(--text-color)
.search-result-list,
.ais-Hits-list
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 220px)
.local-search-hit-item,
.ais-Hits-item
display: flex
align-items: flex-start
margin: 3px 0
line-height: 1.8
transition: all .2s ease-in-out
&:hover
transform: translateY(-1px)
&:not([value])::before
display: none
&[value]::before
display: inline-flex
flex-shrink: 0
justify-content: center
align-items: center
margin-right: 6px
min-width: 24px
color: $search-color
content: attr(value) '.'
font-weight: bold
font-style: italic
font-size: .9em
&::marker
content: none
a
flex: 1
color: var(--search-a-color)
&:hover
color: $search-color
.search-result-title,
.algolia-hits-item-title
font-weight: 600
.search-result,
.algolia-hit-item-content
margin: 0 0 8px
word-break: break-all
font-size: .9em
.ais-Pagination
margin: 15px 0 0
padding: 0
text-align: center
.ais-Pagination-list
display: flex
flex-wrap: wrap
justify-content: center
align-items: center
margin: 0
padding: 0
list-style: none
gap: 6px
.ais-Pagination-item
display: flex
padding: 0
&:not(.ais-Pagination-item--selected):not(.ais-Pagination-item--ellipsis):not(.ais-Pagination-item--disabled)
.ais-Pagination-link:hover
background: var(--btn-hover-color)
transform: translateY(-1px)
.ais-Pagination-link
display: inline-flex
justify-content: center
align-items: center
padding: 4px 8px
min-width: 28px
height: 28px
border-radius: 6px
background: var(--btn-bg)
color: var(--btn-color)
transition: all .2s ease
&.ais-Pagination-link--disabled
opacity: .3
cursor: not-allowed
i
font-size: 12px
.ais-Pagination-item--selected
.ais-Pagination-link
background: $theme-paginator-color
font-weight: 600
cursor: default
.ais-Pagination-item--ellipsis
.ais-Pagination-link
padding: 4px 2px
border: none
background: transparent
color: var(--text-color)
cursor: default
&:hover
background: transparent
transform: none
.ais-Pagination-item--disabled
.ais-Pagination-link
opacity: .4
+maxWidth768()
.ais-Pagination-list
gap: 4px
hr
margin: 15px auto
@extend .custom-hr
@@ -50,6 +201,38 @@
display: none
background: rgba($dark-black, .6)
.search-result-stats,
.ais-Stats-text
margin: 15px 0 0
color: var(--text-color)
text-align: center
font-size: .9em
.search-keyword
background: transparent
color: $search-keyword-highlight
font-weight: 600
.search-loading
display: flex
justify-content: center
align-items: center
padding: 20px
color: var(--text-color)
&::before
width: 16px
height: 16px
border: 2px solid var(--text-color)
border-top-color: transparent
border-radius: 50%
content: ''
animation: spin 1s linear infinite
@keyframes spin
to
transform: rotate(360deg)
if hexo-config('search.use') == 'algolia_search'
@require 'algolia'
else if hexo-config('search.use') == 'local_search'

65
source/css/_search/local-search.styl
View File

@@ -1,57 +1,18 @@
#local-search
.search-dialog
.local-search-box
margin: 0 auto
max-width: 100%
width: 100%
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)
-webkit-appearance: none
.search-wrap
display: none
.local-search-hit-item
margin-left: 24px
padding-left: 3px
line-height: 1.8
&::marker
color: $search-color
font-weight: bold
font-style: italic
a
color: var(--search-a-color)
&:hover
color: $search-color
.search-result-title
font-weight: 600
.search-result
margin: 0 0 8px
word-break: break-all
font-size: .9em
.search-result-list
overflow-y: overlay
margin: 0 -20px
padding: 0 22px
max-height: calc(80vh - 180px)
+maxWidth768()
max-height: calc(var(--search-height) - 190px) !important
if hexo-config('search.local_search.pagination.enable')
min-height: calc(var(--search-height) - 255px) !important
else
max-height: calc(var(--search-height) - 200px) !important
.search-keyword
background: transparent
color: $search-keyword-highlight
font-weight: 600
#local-search-stats
.search-result-stats
text-align: left
.search-keyword
font-weight: 600
#loading-database ~ *
visibility: hidden