mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
feat: 不蒜子可配置 CDN closed #1132
feat: gallery 標簽外掛增加圖片懶加載，增加 lazyload rowHeight 和 limit 屬性配置 feat: 可設置固定導航欄 closed #1150 fix: 修復開啟懶加載後，再使用 flink_url 的方式引入友鏈數據，友鏈頭像有可能不顯示的 bug closed #1146 fix: 修復閲讀模式下，代碼塊的背景顏色仍顯示彩色背景的 bug (自定義代碼塊) closed #1139 improvement: 搜索結果換行時不會拆分單詞顯示 improvement: 優化搜索結果顯示滾動條位置 improvement: css/js 優化
This commit is contained in:
Jerry
parent
0f915f47ef
commit
9a3b41912a
@ -13,9 +13,10 @@ menu:
|
||||
# Link: /link/ || fas fa-link
|
||||
# About: /about/ || fas fa-heart
|
||||
|
||||
nav_info:
|
||||
nav:
|
||||
logo: # image
|
||||
display_title: true # true or false
|
||||
display_title: true
|
||||
fixed: false # fixed navigation bar
|
||||
|
||||
# Code Blocks (代碼相關)
|
||||
# --------------------------------------
|
||||
|
||||
@ -117,5 +117,6 @@ Snackbar:
|
||||
night_to_day: Light Mode Activated Manually
|
||||
|
||||
loading: Loading...
|
||||
load_more: Load More
|
||||
|
||||
error404: Page not found
|
||||
|
||||
@ -117,5 +117,6 @@ Snackbar:
|
||||
night_to_day: Light Mode Activated Manually
|
||||
|
||||
loading: Loading...
|
||||
load_more: Load More
|
||||
|
||||
error404: Page not found
|
||||
|
||||
@ -118,5 +118,6 @@ Snackbar:
|
||||
night_to_day: 你已切换为浅色模式
|
||||
|
||||
loading: 加载中...
|
||||
load_more: 加载更多
|
||||
|
||||
error404: 页面没有找到
|
||||
|
||||
@ -118,5 +118,6 @@ Snackbar:
|
||||
night_to_day: 你已切換為淺色模式
|
||||
|
||||
loading: 載入中...
|
||||
load_more: 載入更多
|
||||
|
||||
error404: 頁面沒有找到
|
||||
|
||||
@ -66,4 +66,4 @@ div
|
||||
!= partial("includes/third-party/pjax", {}, { cache: true })
|
||||
|
||||
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
|
||||
script(async data-pjax src='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
|
||||
script(async data-pjax src= theme.asset.busuanzi || '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js')
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
meta(charset='UTF-8')
|
||||
meta(http-equiv="X-UA-Compatible" content="IE=edge")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
|
||||
title= tabTitle
|
||||
meta(name="author" content=pageAuthor)
|
||||
meta(name="copyright" content=pageCopyright)
|
||||
|
||||
@ -15,5 +15,5 @@ if theme.microsoft_clarity
|
||||
if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
|
||||
link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
|
||||
|
||||
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
|
||||
if !theme.asset.busuanzi && (theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv)
|
||||
link(rel="preconnect" href="//busuanzi.ibruce.info")
|
||||
@ -1,21 +1,22 @@
|
||||
nav#nav
|
||||
- const isFixedClass = theme.nav.fixed ? 'fixed' : ''
|
||||
nav#nav(class=isFixedClass)
|
||||
span#blog-info
|
||||
a(href=url_for('/') title=config.title)
|
||||
if theme.nav_info.logo
|
||||
img.site-icon(src=url_for(theme.nav_info.logo))
|
||||
if theme.nav_info.display_title
|
||||
if theme.nav.logo
|
||||
img.site-icon(src=url_for(theme.nav.logo))
|
||||
if theme.nav.display_title
|
||||
span.site-name=config.title
|
||||
|
||||
#menus
|
||||
if (theme.algolia_search.enable || theme.local_search.enable)
|
||||
#search-button
|
||||
a.site-page.social-icon.search
|
||||
a.site-page.social-icon.search(href="javascript:void(0);")
|
||||
i.fas.fa-search.fa-fw
|
||||
span=' '+_p('search.title')
|
||||
!=partial('includes/header/menu_item', {}, {cache: true})
|
||||
|
||||
#toggle-menu
|
||||
a.site-page
|
||||
a.site-page(href="javascript:void(0);")
|
||||
i.fas.fa-bars.fa-fw
|
||||
|
||||
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
}
|
||||
|
||||
document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
|
||||
window.lazyLoadInstance && window.lazyLoadInstance.update()
|
||||
})
|
||||
})()
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hexo-theme-butterfly",
|
||||
"version": "4.6.0-b3",
|
||||
"version": "4.6.0-b4",
|
||||
"description": "A Simple and Card UI Design theme for Hexo",
|
||||
"main": "package.json",
|
||||
"scripts": {
|
||||
|
||||
24
plugins.yml
24
plugins.yml
@ -1,11 +1,11 @@
|
||||
algolia_search_v4:
|
||||
name: algoliasearch
|
||||
file: dist/algoliasearch-lite.umd.js
|
||||
version: 4.14.2
|
||||
version: 4.14.3
|
||||
instantsearch_v4:
|
||||
name: instantsearch.js
|
||||
file: dist/instantsearch.production.min.js
|
||||
version: 4.49.0
|
||||
version: 4.49.4
|
||||
pjax:
|
||||
name: pjax
|
||||
file: pjax.min.js
|
||||
@ -37,17 +37,17 @@ disqusjs_css:
|
||||
twikoo:
|
||||
name: twikoo
|
||||
file: dist/twikoo.all.min.js
|
||||
version: 1.6.7
|
||||
version: 1.6.8
|
||||
waline_js:
|
||||
name: '@waline/client'
|
||||
file: dist/waline.js
|
||||
other_name: waline
|
||||
version: 2.13.0
|
||||
version: 2.14.6
|
||||
waline_css:
|
||||
name: '@waline/client'
|
||||
file: dist/waline.css
|
||||
other_name: waline
|
||||
version: 2.13.0
|
||||
version: 2.14.6
|
||||
sharejs:
|
||||
name: butterfly-extsrc
|
||||
file: sharejs/dist/js/social-share.min.js
|
||||
@ -64,16 +64,16 @@ katex:
|
||||
name: katex
|
||||
file: dist/katex.min.css
|
||||
other_name: KaTeX
|
||||
version: 0.16.3
|
||||
version: 0.16.4
|
||||
katex_copytex:
|
||||
name: katex
|
||||
file: dist/contrib/copy-tex.min.js
|
||||
other_name: KaTeX
|
||||
version: 0.16.3
|
||||
version: 0.16.4
|
||||
mermaid:
|
||||
name: mermaid
|
||||
file: dist/mermaid.min.js
|
||||
version: 9.1.7
|
||||
version: 9.3.0
|
||||
canvas_ribbon:
|
||||
name: butterfly-extsrc
|
||||
file: dist/canvas-ribbon.min.js
|
||||
@ -131,7 +131,7 @@ fancybox_v4:
|
||||
medium_zoom:
|
||||
name: medium-zoom
|
||||
file: dist/medium-zoom.min.js
|
||||
version: 1.0.6
|
||||
version: 1.0.8
|
||||
snackbar_css:
|
||||
name: node-snackbar
|
||||
file: dist/snackbar.min.css
|
||||
@ -144,7 +144,7 @@ fontawesomeV6:
|
||||
name: '@fortawesome/fontawesome-free'
|
||||
file: css/all.min.css
|
||||
other_name: font-awesome
|
||||
version: 6.2.0
|
||||
version: 6.2.1
|
||||
flickr_justified_gallery_js:
|
||||
name: flickr-justified-gallery
|
||||
file: dist/fjGallery.min.js
|
||||
@ -183,11 +183,11 @@ prismjs_autoloader:
|
||||
artalk_js:
|
||||
name: artalk
|
||||
file: dist/Artalk.js
|
||||
version: 2.4.3
|
||||
version: 2.4.4
|
||||
artalk_css:
|
||||
name: artalk
|
||||
file: dist/Artalk.css
|
||||
version: 2.4.3
|
||||
version: 2.4.4
|
||||
pace_js:
|
||||
name: pace-js
|
||||
other_name: pace
|
||||
|
||||
@ -12,7 +12,7 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
const themeConfig = hexo.theme.config
|
||||
const { CDN } = themeConfig
|
||||
|
||||
const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir,'/plugins.yml'), engine: 'yaml'})
|
||||
const thirdPartySrc = hexo.render.renderSync({ path: path.join(hexo.theme_dir, '/plugins.yml'), engine: 'yaml' })
|
||||
const internalSrc = {
|
||||
main: {
|
||||
name: 'hexo-theme-butterfly',
|
||||
@ -46,7 +46,7 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
}
|
||||
|
||||
const createCDNLink = (data, type, cond = '') => {
|
||||
Object.keys(data).map(key => {
|
||||
Object.keys(data).forEach(key => {
|
||||
let { name, version, file, other_name } = data[key]
|
||||
|
||||
const min_file = minFile(file)
|
||||
@ -65,6 +65,7 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
min_cdnjs_file,
|
||||
cdnjs_name
|
||||
}
|
||||
|
||||
const cdnSource = {
|
||||
local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
|
||||
jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
|
||||
@ -72,11 +73,11 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
|
||||
custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
|
||||
}
|
||||
|
||||
|
||||
data[key] = cdnSource[type]
|
||||
})
|
||||
|
||||
if (cond === 'internal') data['main_css'] = 'css/index.css'
|
||||
if (cond === 'internal') data.main_css = 'css/index.css'
|
||||
return data
|
||||
}
|
||||
|
||||
@ -89,6 +90,6 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
return obj
|
||||
}
|
||||
|
||||
themeConfig.asset = Object.assign(createCDNLink(internalSrc,CDN.internal_provider,'internal'),
|
||||
createCDNLink(thirdPartySrc,CDN.third_party_provider), deleteNullValue(CDN.option))
|
||||
themeConfig.asset = Object.assign(createCDNLink(internalSrc, CDN.internal_provider, 'internal'),
|
||||
createCDNLink(thirdPartySrc, CDN.third_party_provider), deleteNullValue(CDN.option))
|
||||
})
|
||||
|
||||
@ -11,4 +11,4 @@ hexo.extend.filter.register('before_generate', () => {
|
||||
}
|
||||
const newArray = use.map(item => item.toLowerCase().replace(/\b[a-z]/g, s => s.toUpperCase()))
|
||||
themeConfig.comments.use = newArray
|
||||
})
|
||||
})
|
||||
|
||||
@ -24,7 +24,7 @@ hexo.extend.filter.register('before_post_render', function (data) {
|
||||
const num = Math.floor(Math.random() * theme.cover.default_cover.length)
|
||||
return theme.cover.default_cover[num]
|
||||
}
|
||||
|
||||
|
||||
if (coverVal === false) return data
|
||||
|
||||
// If cover is not set, use random cover
|
||||
@ -42,4 +42,4 @@ hexo.extend.filter.register('before_post_render', function (data) {
|
||||
}
|
||||
|
||||
return data
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
hexo.extend.helper.register('findArchiveLength', function (func) {
|
||||
const allPostsLength = this.site.posts.length;
|
||||
if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false ) return allPostsLength
|
||||
const allPostsLength = this.site.posts.length
|
||||
if (hexo.config.archive_generator && hexo.config.archive_generator.enable === false) return allPostsLength
|
||||
const { yearly, monthly, daily } = hexo.config.archive_generator
|
||||
const { year, month, day } = this.page
|
||||
if (yearly === false || !year) return allPostsLength
|
||||
|
||||
const posts = this.site.posts.sort('date')
|
||||
|
||||
const compareFunc = (type,y1,m1,d1,y2,m2,d2) => {
|
||||
const compareFunc = (type, y1, m1, d1, y2, m2, d2) => {
|
||||
if (type === 'year') {
|
||||
return y1 === y2
|
||||
} else if (type === 'month') {
|
||||
@ -18,15 +18,15 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
|
||||
}
|
||||
|
||||
const generateDateObj = (type) => {
|
||||
let dateObj = []
|
||||
const dateObj = []
|
||||
let length = 0
|
||||
|
||||
posts.forEach(post => {
|
||||
let date = post.date.clone()
|
||||
const date = post.date.clone()
|
||||
const year = date.year()
|
||||
const month = date.month() + 1
|
||||
const day = date.date()
|
||||
let lastData = dateObj[length - 1]
|
||||
const lastData = dateObj[length - 1]
|
||||
|
||||
if (!lastData || !compareFunc(type, lastData.year, lastData.month, lastData.day, year, month, day)) {
|
||||
const name = type === 'year' ? year : type === 'month' ? `${year}-${month}` : `${year}-${month}-${day}`
|
||||
@ -40,12 +40,12 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
|
||||
} else {
|
||||
lastData.count++
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return dateObj
|
||||
}
|
||||
|
||||
const data = func('createArchiveObj', ()=> {
|
||||
const data = func('createArchiveObj', () => {
|
||||
const yearObj = yearly ? generateDateObj('year') : []
|
||||
const monthObj = monthly ? generateDateObj('month') : []
|
||||
const dayObj = daily ? generateDateObj('day') : []
|
||||
@ -55,4 +55,4 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
|
||||
|
||||
const name = month ? day ? `${year}-${month}-${day}` : `${year}-${month}` : year
|
||||
return data.find(item => item.name === name).count
|
||||
})
|
||||
})
|
||||
|
||||
@ -9,8 +9,8 @@ hexo.extend.helper.register('inject_head_js', function () {
|
||||
const { darkmode, aside } = this.theme
|
||||
|
||||
const { theme_color } = hexo.theme.config
|
||||
const themeColorLight = theme_color && theme_color.enable && theme_color.meta_theme_color_light || '#ffffff'
|
||||
const themeColorDark = theme_color && theme_color.enable && theme_color.meta_theme_color_dark || '#0d0d0d'
|
||||
const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
|
||||
const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
|
||||
|
||||
const localStore = `
|
||||
win.saveToLocal = {
|
||||
|
||||
@ -74,8 +74,8 @@ hexo.extend.helper.register('injectHtml', function (data) {
|
||||
hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
|
||||
if (page.year) {
|
||||
const dateStr = page.month ? `${page.year}-${page.month}` : `${page.year}`
|
||||
const date_format = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
|
||||
return date(dateStr, date_format)
|
||||
const dateFormat = page.month ? hexo.theme.config.aside.card_archives.format : 'YYYY'
|
||||
return date(dateStr, dateFormat)
|
||||
}
|
||||
|
||||
const defaultTitle = this._p('page.archives')
|
||||
@ -102,4 +102,4 @@ hexo.extend.helper.register('isImgOrUrl', function (path) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/**
|
||||
* Butterfly
|
||||
* galleryGroup and allery
|
||||
* galleryGroup and gallery
|
||||
* {% galleryGroup [name] [descr] [url] [img] %}
|
||||
* {% gallery [lazyload],[rowHeight],[limit] %}
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
@ -8,13 +10,38 @@
|
||||
const urlFor = require('hexo-util').url_for.bind(hexo)
|
||||
|
||||
function gallery (args, content) {
|
||||
return `<div class="fj-gallery">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
|
||||
</div>`
|
||||
const { data, languages } = hexo.theme.i18n
|
||||
args = args.join(' ').split(',')
|
||||
const rowHeight = args[1] || 220
|
||||
const limit = args[2] || 10
|
||||
const lazyload = args[0] === 'true'
|
||||
const regex = /!\[(.*?)\]\((.*?)\s*(?:["'](.*?)["']?)?\s*\)/g
|
||||
const lazyloadClass = lazyload ? 'lazyload' : ''
|
||||
let m
|
||||
const arr = []
|
||||
while ((m = regex.exec(content)) !== null) {
|
||||
if (m.index === regex.lastIndex) {
|
||||
regex.lastIndex++
|
||||
}
|
||||
|
||||
arr.push({
|
||||
url: m[2],
|
||||
alt: m[1],
|
||||
title: m[3]
|
||||
})
|
||||
}
|
||||
|
||||
return `<div class="gallery">
|
||||
<div class="fj-gallery ${lazyloadClass}" data-rowHeight="${rowHeight}" data-limit="${limit}">
|
||||
<span class="gallery-data">${JSON.stringify(arr)}</span>
|
||||
</div>
|
||||
<button class="gallery-load-more"><span>${data[languages[0]].load_more}</span><i class="fa-solid fa-arrow-down"></i></button>
|
||||
</div>`
|
||||
}
|
||||
|
||||
function galleryGroup (args) {
|
||||
const name = args[0]
|
||||
const desrc = args[1]
|
||||
const descr = args[1]
|
||||
const url = urlFor(args[2])
|
||||
const img = urlFor(args[3])
|
||||
|
||||
@ -23,7 +50,7 @@ function galleryGroup (args) {
|
||||
<img class="gallery-group-img no-lightbox" src='${img}' alt="Group Image Gallery">
|
||||
<figcaption>
|
||||
<div class="gallery-group-name">${name}</div>
|
||||
<p>${desrc}</p>
|
||||
<p>${descr}</p>
|
||||
<a href='${url}'></a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -137,6 +137,10 @@
|
||||
box-shadow: 0 5px 6px -5px alpha($grey, .6)
|
||||
transition: transform .2s ease-in-out, opacity .2s ease-in-out
|
||||
|
||||
&.fixed
|
||||
top: 0
|
||||
transition: all .5s
|
||||
|
||||
#blog-info
|
||||
color: var(--font-color)
|
||||
|
||||
@ -155,7 +159,7 @@
|
||||
color: $light-blue
|
||||
|
||||
&.nav-visible
|
||||
#nav
|
||||
#nav:not(.fixed)
|
||||
transition: all .5s
|
||||
transform: translate3d(0, 100%, 0)
|
||||
|
||||
@ -261,6 +265,9 @@
|
||||
&.show
|
||||
opacity: 1
|
||||
|
||||
&.fixed
|
||||
position: fixed
|
||||
|
||||
#blog-info
|
||||
flex: 1
|
||||
color: var(--light-grey)
|
||||
|
||||
@ -106,7 +106,7 @@ if hexo-config('readmode')
|
||||
color: var(--font-color) !important
|
||||
|
||||
.hljs
|
||||
background: var(-highlight-bg) !important
|
||||
background: var(--highlight-bg) !important
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
.algolia-hit-item-content
|
||||
margin: 0 0 8px
|
||||
word-break: break-all
|
||||
word-break: break-word
|
||||
|
||||
.ais-Pagination
|
||||
margin: 20px 0 0
|
||||
@ -69,6 +69,8 @@
|
||||
#algolia-hits
|
||||
> div
|
||||
overflow-y: scroll
|
||||
margin: 0 -20px
|
||||
padding: 0 22px
|
||||
|
||||
+minWidth768()
|
||||
max-height: calc(80vh - 240px)
|
||||
|
||||
@ -51,15 +51,17 @@
|
||||
color: $search-color
|
||||
|
||||
.search-result
|
||||
margin: 0 8px 8px 0
|
||||
word-break: break-all
|
||||
margin: 0 0 8px
|
||||
word-break: break-word
|
||||
|
||||
.search-keyword
|
||||
color: $search-keyword-highlight
|
||||
font-weight: bold
|
||||
|
||||
.search-result-list
|
||||
overflow-y: auto
|
||||
overflow-y: overlay
|
||||
margin: 0 -20px
|
||||
padding: 0 22px
|
||||
max-height: calc(80vh - 130px)
|
||||
|
||||
+maxWidth768()
|
||||
|
||||
@ -94,9 +94,46 @@
|
||||
overflow: auto
|
||||
padding: 0 0 16px
|
||||
|
||||
.fj-gallery
|
||||
.gallery
|
||||
margin: 0 0 16px
|
||||
opacity: 0
|
||||
text-align: center
|
||||
|
||||
.img-alt
|
||||
display: none
|
||||
.fj-gallery
|
||||
opacity: 0
|
||||
|
||||
.img-alt
|
||||
display: none
|
||||
|
||||
&.lazyload
|
||||
+ button
|
||||
display: inline-block
|
||||
|
||||
.gallery-data
|
||||
display: none
|
||||
|
||||
button
|
||||
display: none
|
||||
margin-top: 25px
|
||||
padding: 10px
|
||||
width: 9em
|
||||
border-radius: 5px
|
||||
background: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
font-weight: bold
|
||||
font-size: 1.1em
|
||||
transition: all .3s
|
||||
|
||||
& > *
|
||||
transition: all .4s
|
||||
|
||||
i
|
||||
width: 0
|
||||
opacity: 0
|
||||
|
||||
&:hover
|
||||
background: var(--btn-hover-color)
|
||||
|
||||
i
|
||||
margin-left: 2px
|
||||
width: 20px
|
||||
opacity: 1
|
||||
|
||||
@ -232,14 +232,42 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
* justified-gallery 圖庫排版
|
||||
*/
|
||||
const runJustifiedGallery = function (ele) {
|
||||
ele.forEach(item => {
|
||||
const $imgList = item.querySelectorAll('img')
|
||||
|
||||
$imgList.forEach(i => {
|
||||
const dataLazySrc = i.getAttribute('data-lazy-src')
|
||||
if (dataLazySrc) i.src = dataLazySrc
|
||||
btf.wrap(i, 'div', { class: 'fj-gallery-item' })
|
||||
const htmlStr = arr => {
|
||||
let str = ''
|
||||
const replaceDq = str => str.replace(/"/g, '"') // replace double quotes to "
|
||||
arr.forEach(i => {
|
||||
const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ''
|
||||
const title = i.title ? `title="${replaceDq(i.title)}"` : ''
|
||||
str += `<div class="fj-gallery-item"><img src="${i.url}" ${alt + title}"></div>`
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
const lazyloadFn = (i, arr) => {
|
||||
const loadItem = i.getAttribute('data-limit')
|
||||
const arrLength = arr.length
|
||||
if (arrLength > loadItem) i.insertAdjacentHTML('beforeend', htmlStr(arr.splice(0, loadItem)))
|
||||
else {
|
||||
i.insertAdjacentHTML('beforeend', htmlStr(arr))
|
||||
i.classList.remove('lazyload')
|
||||
}
|
||||
return arrLength > loadItem ? loadItem : arrLength
|
||||
}
|
||||
|
||||
ele.forEach(item => {
|
||||
const arr = JSON.parse(item.querySelector('.gallery-data').textContent)
|
||||
if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
|
||||
else {
|
||||
lazyloadFn(item, arr)
|
||||
const limit = item.getAttribute('data-limit')
|
||||
const clickBtnFn = () => {
|
||||
const lastItemLength = lazyloadFn(item, arr)
|
||||
fjGallery(item, 'appendImages', item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`))
|
||||
btf.loadLightbox(item.querySelectorAll('img'))
|
||||
lastItemLength < limit && item.nextElementSibling.removeEventListener('click', clickBtnFn)
|
||||
}
|
||||
item.nextElementSibling.addEventListener('click', clickBtnFn)
|
||||
}
|
||||
})
|
||||
|
||||
if (window.fjGallery) {
|
||||
@ -258,13 +286,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
* rightside scroll percent
|
||||
*/
|
||||
const rightsideScrollPercent = currentTop => {
|
||||
const perNum = btf.getScrollPercent(currentTop,document.body)
|
||||
const perNum = btf.getScrollPercent(currentTop, document.body)
|
||||
const $goUp = document.getElementById('go-up')
|
||||
if ( perNum < 95 ) {
|
||||
if (perNum < 95) {
|
||||
$goUp.classList.add('show-percent')
|
||||
$goUp.querySelector('.scroll-percent').textContent = perNum
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
$goUp.classList.remove('show-percent')
|
||||
}
|
||||
}
|
||||
@ -297,41 +324,40 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const isShowPercent = GLOBAL_CONFIG.percent.rightside
|
||||
|
||||
const scrollTask = btf.throttle(() => {
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
const isDown = scrollDirection(currentTop)
|
||||
if (currentTop > 56) {
|
||||
if (isDown) {
|
||||
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
|
||||
if (isChatBtnShow && isChatShow === true) {
|
||||
chatBtnHide()
|
||||
isChatShow = false
|
||||
}
|
||||
} else {
|
||||
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
|
||||
if (isChatBtnHide && isChatShow === false) {
|
||||
chatBtnShow()
|
||||
isChatShow = true
|
||||
}
|
||||
}
|
||||
$header.classList.add('nav-fixed')
|
||||
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
|
||||
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
const isDown = scrollDirection(currentTop)
|
||||
if (currentTop > 56) {
|
||||
if (isDown) {
|
||||
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
|
||||
if (isChatBtnShow && isChatShow === true) {
|
||||
chatBtnHide()
|
||||
isChatShow = false
|
||||
}
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$header.classList.remove('nav-fixed', 'nav-visible')
|
||||
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
|
||||
if (isChatBtnHide && isChatShow === false) {
|
||||
chatBtnShow()
|
||||
isChatShow = true
|
||||
}
|
||||
$rightside.style.cssText = "opacity: ''; transform: ''"
|
||||
}
|
||||
|
||||
isShowPercent && rightsideScrollPercent(currentTop)
|
||||
|
||||
if (document.body.scrollHeight <= innerHeight) {
|
||||
$header.classList.add('nav-fixed')
|
||||
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
|
||||
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
|
||||
}
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$header.classList.remove('nav-fixed', 'nav-visible')
|
||||
}
|
||||
$rightside.style.cssText = "opacity: ''; transform: ''"
|
||||
}
|
||||
|
||||
isShowPercent && rightsideScrollPercent(currentTop)
|
||||
|
||||
if (document.body.scrollHeight <= innerHeight) {
|
||||
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
|
||||
}
|
||||
}, 200)
|
||||
|
||||
}, 200)
|
||||
|
||||
window.scrollCollect = scrollTask
|
||||
|
||||
window.addEventListener('scroll', scrollCollect)
|
||||
@ -444,14 +470,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
|
||||
// main of scroll
|
||||
window.tocScrollFn = btf.throttle(()=>{
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
if (isToc && GLOBAL_CONFIG.percent.toc) {
|
||||
$tocPercentage.textContent = btf.getScrollPercent(currentTop,$article)
|
||||
}
|
||||
findHeadPosition(currentTop)
|
||||
}, 100)
|
||||
|
||||
window.tocScrollFn = btf.throttle(() => {
|
||||
const currentTop = window.scrollY || document.documentElement.scrollTop
|
||||
if (isToc && GLOBAL_CONFIG.percent.toc) {
|
||||
$tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
|
||||
}
|
||||
findHeadPosition(currentTop)
|
||||
}, 100)
|
||||
|
||||
window.addEventListener('scroll', tocScrollFn)
|
||||
}
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ window.addEventListener('load', () => {
|
||||
post = '...'
|
||||
}
|
||||
|
||||
let matchContent = pre + content.substring(start, end) + post
|
||||
const matchContent = pre + content.substring(start, end) + post
|
||||
return matchContent
|
||||
}
|
||||
|
||||
@ -68,10 +68,11 @@ window.addEventListener('load', () => {
|
||||
|
||||
const search = instantsearch({
|
||||
indexName: algolia.indexName,
|
||||
/* global algoliasearch */
|
||||
searchClient: algoliasearch(algolia.appId, algolia.apiKey),
|
||||
searchFunction(helper) {
|
||||
searchFunction (helper) {
|
||||
helper.state.query && helper.search()
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const configure = instantsearch.widgets.configure({
|
||||
@ -89,16 +90,16 @@ window.addEventListener('load', () => {
|
||||
const hits = instantsearch.widgets.hits({
|
||||
container: '#algolia-hits',
|
||||
templates: {
|
||||
item(data) {
|
||||
item (data) {
|
||||
const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
|
||||
const result = data._highlightResult
|
||||
const content = result.contentStripTruncate
|
||||
? cutContent(result.contentStripTruncate.value)
|
||||
: result.contentStrip
|
||||
? cutContent(result.contentStrip.value)
|
||||
: result.content
|
||||
? cutContent(result.content.value)
|
||||
: ''
|
||||
? cutContent(result.contentStripTruncate.value)
|
||||
: result.contentStrip
|
||||
? cutContent(result.contentStrip.value)
|
||||
: result.content
|
||||
? cutContent(result.content.value)
|
||||
: ''
|
||||
return `
|
||||
<a href="${link}" class="algolia-hit-item-link">
|
||||
${result.title.value || 'no-title'}
|
||||
@ -130,7 +131,7 @@ window.addEventListener('load', () => {
|
||||
})
|
||||
|
||||
const powerBy = instantsearch.widgets.poweredBy({
|
||||
container: '#algolia-info > .algolia-poweredBy',
|
||||
container: '#algolia-info > .algolia-poweredBy'
|
||||
})
|
||||
|
||||
const pagination = instantsearch.widgets.pagination({
|
||||
@ -144,8 +145,7 @@ window.addEventListener('load', () => {
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
search.addWidgets([configure,searchBox,hits,stats,powerBy,pagination]) // add the widgets to the instantsearch instance
|
||||
search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
|
||||
|
||||
search.start()
|
||||
|
||||
|
||||
@ -56,7 +56,7 @@ window.addEventListener('load', () => {
|
||||
const res = await response.text()
|
||||
const t = await new window.DOMParser().parseFromString(res, 'text/xml')
|
||||
const a = await t
|
||||
data = [...a.querySelectorAll('entry')].map(item =>{
|
||||
data = [...a.querySelectorAll('entry')].map(item => {
|
||||
return {
|
||||
title: item.querySelector('title').textContent,
|
||||
content: item.querySelector('content') && item.querySelector('content').textContent,
|
||||
@ -154,7 +154,7 @@ window.addEventListener('load', () => {
|
||||
// highlight all keywords
|
||||
keywords.forEach(keyword => {
|
||||
let regexStr = keyword
|
||||
const specialRegex = new RegExp("[^\\w\\s]+") // match special characters
|
||||
const specialRegex = /[^\w\s]+/ // match special characters
|
||||
if (keyword.length === 1 && specialRegex.test(keyword)) {
|
||||
regexStr = `\\${keyword}`
|
||||
}
|
||||
|
||||
@ -62,10 +62,10 @@ const btf = {
|
||||
const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar
|
||||
const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark
|
||||
Snackbar.show({
|
||||
text: text,
|
||||
text,
|
||||
backgroundColor: bg,
|
||||
showAction: showAction,
|
||||
duration: duration,
|
||||
showAction,
|
||||
duration,
|
||||
pos: position,
|
||||
customClass: 'snackbar-css'
|
||||
})
|
||||
@ -88,7 +88,7 @@ const btf = {
|
||||
const minuteCount = dateDiff / minute
|
||||
|
||||
if (monthCount > 12) {
|
||||
result = datePost.toISOString().slice(0,10)
|
||||
result = datePost.toISOString().slice(0, 10)
|
||||
} else if (monthCount >= 1) {
|
||||
result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
|
||||
} else if (dayCount >= 1) {
|
||||
@ -186,12 +186,12 @@ const btf = {
|
||||
* @param {*} options object key: value
|
||||
*/
|
||||
wrap: (selector, eleType, options) => {
|
||||
const creatEle = document.createElement(eleType)
|
||||
const createEle = document.createElement(eleType)
|
||||
for (const [key, value] of Object.entries(options)) {
|
||||
creatEle.setAttribute(key, value)
|
||||
createEle.setAttribute(key, value)
|
||||
}
|
||||
selector.parentNode.insertBefore(creatEle, selector)
|
||||
creatEle.appendChild(selector)
|
||||
selector.parentNode.insertBefore(createEle, selector)
|
||||
createEle.appendChild(selector)
|
||||
},
|
||||
|
||||
unwrap: el => {
|
||||
@ -255,7 +255,7 @@ const btf = {
|
||||
if (!btf.isHidden(i)) {
|
||||
fjGallery(i, {
|
||||
itemSelector: '.fj-gallery-item',
|
||||
rowHeight: 220,
|
||||
rowHeight: i.getAttribute('data-rowHeight'),
|
||||
gutter: 4,
|
||||
onJustify: function () {
|
||||
this.$container.style.opacity = '1'
|
||||
@ -271,12 +271,12 @@ const btf = {
|
||||
const title = GLOBAL_CONFIG_SITE.title
|
||||
window.history.replaceState({
|
||||
url: location.href,
|
||||
title: title
|
||||
title
|
||||
}, title, anchor)
|
||||
}
|
||||
},
|
||||
|
||||
getScrollPercent: (currentTop,ele) => {
|
||||
getScrollPercent: (currentTop, ele) => {
|
||||
const docHeight = ele.clientHeight
|
||||
const winHeight = document.documentElement.clientHeight
|
||||
const headerHeight = ele.offsetTop
|
||||
|
||||
Loading…
Reference in New Issue
Block a user