-
+ `
})
diff --git a/scripts/helpers/findArchiveLength.js b/scripts/helpers/findArchiveLength.js
index 56e9bcb..152b15e 100644
--- a/scripts/helpers/findArchiveLength.js
+++ b/scripts/helpers/findArchiveLength.js
@@ -1,36 +1,36 @@
-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 { yearly, monthly, daily } = hexo.config.archive_generator
+hexo.extend.helper.register('getArchiveLength', function () {
+ const { archive_generator: archiveGenerator } = hexo.config
+ if (archiveGenerator && archiveGenerator.enable === false) return this.site.posts.length
+ const { yearly, monthly, daily } = archiveGenerator
const { year, month, day } = this.page
- if (yearly === false || !year) return allPostsLength
+ if (yearly === false || !year) return this.site.posts.length
const posts = this.site.posts.sort('date')
const compareFunc = (type, y1, m1, d1, y2, m2, d2) => {
- if (type === 'year') {
- return y1 === y2
- } else if (type === 'month') {
- return y1 === y2 && m1 === m2
- } else if (type === 'day') {
- return y1 === y2 && m1 === m2 && d1 === d2
+ switch (type) {
+ case 'year':
+ return y1 === y2
+ case 'month':
+ return y1 === y2 && m1 === m2
+ case 'day':
+ return y1 === y2 && m1 === m2 && d1 === d2
+ default:
+ return false
}
}
const generateDateObj = (type) => {
- const dateObj = []
- let length = 0
-
- posts.forEach(post => {
+ return posts.reduce((dateObj, post) => {
const date = post.date.clone()
const year = date.year()
const month = date.month() + 1
const day = date.date()
- const lastData = dateObj[length - 1]
+ const lastData = dateObj[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}`
- length = dateObj.push({
+ dateObj.push({
name,
year,
month,
@@ -40,19 +40,19 @@ hexo.extend.helper.register('findArchiveLength', function (func) {
} else {
lastData.count++
}
- })
- return dateObj
+ return dateObj
+ }, [])
}
- const data = func('createArchiveObj', () => {
- const yearObj = yearly ? generateDateObj('year') : []
- const monthObj = monthly ? generateDateObj('month') : []
- const dayObj = daily ? generateDateObj('day') : []
- const fullObj = [...yearObj, ...monthObj, ...dayObj]
- return fullObj
+ const data = this.fragment_cache('createArchiveObj', () => {
+ const dateObjs = []
+ if (yearly) dateObjs.push(...generateDateObj('year'))
+ if (monthly) dateObjs.push(...generateDateObj('month'))
+ if (daily) dateObjs.push(...generateDateObj('day'))
+ return dateObjs
})
- const name = month ? day ? `${year}-${month}-${day}` : `${year}-${month}` : year
+ const name = month ? (day ? `${year}-${month}-${day}` : `${year}-${month}`) : year
return data.find(item => item.name === name).count
})
diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js
index e4ad6fb..5871fd7 100644
--- a/scripts/helpers/inject_head_js.js
+++ b/scripts/helpers/inject_head_js.js
@@ -7,87 +7,99 @@
hexo.extend.helper.register('inject_head_js', function () {
const { darkmode, aside } = this.theme
- const start = darkmode.start ? darkmode.start : 6
- const end = darkmode.end ? darkmode.end : 18
+ const start = darkmode.start || 6
+ const end = darkmode.end || 18
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 localStore = `
- win.saveToLocal = {
- set: function setWithExpiry(key, value, ttl) {
- if (ttl === 0) return
- const now = new Date()
- const expiryDay = ttl * 86400000
- const item = {
- value: value,
- expiry: now.getTime() + expiryDay,
+ const createLocalStore = () => {
+ return `
+ win.saveToLocal = {
+ set: (key, value, ttl) => {
+ if (ttl === 0) return
+ const now = Date.now()
+ const expiry = now + ttl * 86400000
+ const item = {
+ value,
+ expiry
+ }
+ localStorage.setItem(key, JSON.stringify(item))
+ },
+
+ get: key => {
+ const itemStr = localStorage.getItem(key)
+
+ if (!itemStr) {
+ return undefined
+ }
+ const item = JSON.parse(itemStr)
+ const now = Date.now()
+
+ if (now > item.expiry) {
+ localStorage.removeItem(key)
+ return undefined
+ }
+ return item.value
}
- localStorage.setItem(key, JSON.stringify(item))
- },
-
- get: function getWithExpiry(key) {
- const itemStr = localStorage.getItem(key)
-
- if (!itemStr) {
- return undefined
- }
- const item = JSON.parse(itemStr)
- const now = new Date()
-
- if (now.getTime() > item.expiry) {
- localStorage.removeItem(key)
- return undefined
- }
- return item.value
}
- }
- `
+ `
+ }
// https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
- const getScript = `
- win.getScript = url => new Promise((resolve, reject) => {
- const script = document.createElement('script')
- script.src = url
- script.async = true
- script.onerror = reject
- script.onload = script.onreadystatechange = function() {
- const loadState = this.readyState
- if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
- script.onload = script.onreadystatechange = null
- resolve()
- }
- document.head.appendChild(script)
- })
- `
+ const createGetScript = () => {
+ return `
+ win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
+ const script = document.createElement('script')
+ script.src = url
+ script.async = true
+ script.onerror = reject
+ script.onload = script.onreadystatechange = function() {
+ const loadState = this.readyState
+ if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+ script.onload = script.onreadystatechange = null
+ resolve()
+ }
- const getCSS = `
- win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
- const link = document.createElement('link')
- link.rel = 'stylesheet'
- link.href = url
- if (id) link.id = id
- link.onerror = reject
- link.onload = link.onreadystatechange = function() {
- const loadState = this.readyState
- if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
- link.onload = link.onreadystatechange = null
- resolve()
- }
- document.head.appendChild(link)
- })
- `
+ Object.keys(attr).forEach(key => {
+ script.setAttribute(key, attr[key])
+ })
- let darkmodeJs = ''
- if (darkmode.enable) {
- darkmodeJs = `
- win.activateDarkMode = function () {
+ document.head.appendChild(script)
+ })
+ `
+ }
+
+ const createGetCSS = () => {
+ return `
+ win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
+ const link = document.createElement('link')
+ link.rel = 'stylesheet'
+ link.href = url
+ if (id) link.id = id
+ link.onerror = reject
+ link.onload = link.onreadystatechange = function() {
+ const loadState = this.readyState
+ if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+ link.onload = link.onreadystatechange = null
+ resolve()
+ }
+ document.head.appendChild(link)
+ })
+ `
+ }
+
+ const createDarkmodeJs = () => {
+ if (!darkmode.enable) return ''
+
+ let darkmodeJs = `
+ win.activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorDark}')
}
}
- win.activateLightMode = function () {
+ win.activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorLight}')
@@ -114,7 +126,7 @@ hexo.extend.helper.register('inject_head_js', function () {
const isNight = hour <= ${start} || hour >= ${end}
isNight ? activateDarkMode() : activateLightMode()
}
- window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
@@ -133,15 +145,18 @@ hexo.extend.helper.register('inject_head_js', function () {
`
} else {
darkmodeJs += `
- if (t === 'dark') activateDarkMode()
- else if (t === 'light') activateLightMode()
- `
+ if (t === 'dark') activateDarkMode()
+ else if (t === 'light') activateLightMode()
+ `
}
+
+ return darkmodeJs
}
- let asideStatus = ''
- if (aside.enable && aside.button) {
- asideStatus = `
+ const createAsideStatus = () => {
+ if (!aside.enable || !aside.button) return ''
+
+ return `
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
@@ -153,14 +168,16 @@ hexo.extend.helper.register('inject_head_js', function () {
`
}
- const detectApple = `
- const detectApple = () => {
- if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
- document.documentElement.classList.add('apple')
+ const createDetectApple = () => {
+ return `
+ const detectApple = () => {
+ if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
+ document.documentElement.classList.add('apple')
+ }
}
- }
- detectApple()
+ detectApple()
`
+ }
- return ``
+ return ``
})
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index 22622c3..6c773e3 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -1,10 +1,3 @@
-/**
- * Butterfly
- * @example
- * page_description()
- * cloudTags(source, minfontsize, maxfontsize, limit)
- */
-
'use strict'
const { stripHTML, escapeHTML, prettyUrls } = require('hexo-util')
@@ -60,12 +53,8 @@ hexo.extend.helper.register('md5', function (path) {
})
hexo.extend.helper.register('injectHtml', function (data) {
- let result = ''
if (!data) return ''
- for (let i = 0; i < data.length; i++) {
- result += data[i]
- }
- return result
+ return data.join('')
})
hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
@@ -95,8 +84,5 @@ hexo.extend.helper.register('findArchivesTitle', function (page, menu, date) {
hexo.extend.helper.register('isImgOrUrl', function (path) {
const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i
- if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
- return true
- }
- return false
+ return path.indexOf('//') !== -1 || imgTestReg.test(path)
})
diff --git a/scripts/helpers/series.js b/scripts/helpers/series.js
new file mode 100644
index 0000000..e1c9338
--- /dev/null
+++ b/scripts/helpers/series.js
@@ -0,0 +1,22 @@
+'use strict'
+
+hexo.extend.helper.register('groupPosts', function () {
+ const getGroupArray = array => {
+ const groups = {}
+ array.forEach(item => {
+ const Key = item.series
+ if (!Key) return
+ groups[Key] = groups[Key] || []
+ groups[Key].push(item)
+ })
+ return groups
+ }
+
+ const sortPosts = posts => {
+ const { orderBy = 'date', order = 1 } = this.theme.aside.card_post_series
+ if (orderBy === 'title') return posts.sort('title', order)
+ return posts.sort('date', order)
+ }
+
+ return getGroupArray(sortPosts(this.site.posts))
+})
diff --git a/scripts/tag/button.js b/scripts/tag/button.js
index 33a0e53..624cdd3 100644
--- a/scripts/tag/button.js
+++ b/scripts/tag/button.js
@@ -9,17 +9,9 @@
const urlFor = require('hexo-util').url_for.bind(hexo)
-function btn (args) {
+const btn = args => {
args = args.join(' ').split(',')
- let url = args[0] || ''
- let text = args[1] || ''
- let icon = args[2] || ''
- let option = args[3] || ''
-
- url = url.trim()
- text = text.trim()
- icon = icon.trim()
- option = option.trim()
+ const [url = '', text = '', icon = '', option = ''] = args.map(arg => arg.trim())
return `${icon.length ? `` : ''}${text.length ? `${text}` : ''}`
diff --git a/scripts/tag/gallery.js b/scripts/tag/gallery.js
index 632c514..f8bceb6 100644
--- a/scripts/tag/gallery.js
+++ b/scripts/tag/gallery.js
@@ -2,23 +2,25 @@
* Butterfly
* galleryGroup and gallery
* {% galleryGroup [name] [descr] [url] [img] %}
- * {% gallery [lazyload],[rowHeight],[limit] %}
- * {% gallery url,[url],[lazyload],[rowHeight],[limit] %}
+ *
+ * {% gallery [button],%}
+ * {% gallery url,[url],[button]%}
*/
'use strict'
const urlFor = require('hexo-util').url_for.bind(hexo)
-function gallery (args, content) {
- const { data, languages } = hexo.theme.i18n
+const gallery = (args, content) => {
args = args.join(' ').split(',')
- let rowHeight, limit, lazyload, type, dataStr
+ let button = false
+ let type = 'data'
+ let dataStr = ''
if (args[0] === 'url') {
- [type, dataStr, lazyload, rowHeight = 220, limit = 10] = args // url,[link],[lazyload],[rowHeight],[limit]
+ [type, dataStr, button] = args // url,[link],[lazyload]
} else {
- [lazyload, rowHeight = 220, limit = 10] = args // [lazyload],[rowHeight],[limit]
+ [button] = args // [lazyload]
const regex = /!\[(.*?)\]\(([^\s]*)\s*(?:["'](.*?)["']?)?\s*\)/g
let m
const arr = []
@@ -36,30 +38,24 @@ function gallery (args, content) {
dataStr = JSON.stringify(arr)
}
- type = type ? ' url' : ' data'
- const lazyloadClass = lazyload === 'true' ? 'lazyload' : ''
-
- return `
- ${ele.title} ` + }) + + return series.number ? `
-
- 
+ return `
+ 
`
diff --git a/scripts/tag/hide.js b/scripts/tag/hide.js
index ccf9365..a788172 100644
--- a/scripts/tag/hide.js
+++ b/scripts/tag/hide.js
@@ -16,51 +16,46 @@
'use strict'
-function hideInline (args) {
- args = args.join(' ').split(',')
- const content = args[0]
- const display = args[1] || 'Click'
- const bg = args[2] || false
- const color = args[3] || false
- let group = 'style="'
+const parseArgs = args => {
+ return args.join(' ').split(',')
+}
- if (bg) group += `background-color: ${bg};`
- if (color) group += `color: ${color}`
- group += '"'
+const generateStyle = (bg, color) => {
+ let style = 'style="'
+ if (bg) {
+ style += `background-color: ${bg};`
+ }
+ if (color) {
+ style += `color: ${color}`
+ }
+ style += '"'
+ return style
+}
+
+const hideInline = args => {
+ const [content, display = 'Click', bg = false, color = false] = parseArgs(args)
+ const group = generateStyle(bg, color)
return ``
}
-function hideBlock (args, content) {
- args = args.join(' ').split(',')
- const display = args[0] || 'Click'
- const bg = args[1] || false
- const color = args[2] || false
- let group = 'style="'
-
- if (bg) group += `background-color: ${bg};`
- if (color) group += `color: ${color}`
- group += '"'
+const hideBlock = (args, content) => {
+ const [display = 'Click', bg = false, color = false] = parseArgs(args)
+ const group = generateStyle(bg, color)
return ``
}
-function hideToggle (args, content) {
- args = args.join(' ').split(',')
- const display = args[0]
- const bg = args[1] || false
- const color = args[2] || false
- let group = 'style="'
+const hideToggle = (args, content) => {
+ const [display, bg = false, color = false] = parseArgs(args)
+ const group = generateStyle(bg, color)
let border = ''
if (bg) {
border = `style="border: 1px solid ${bg}"`
- group += `background-color: ${bg};`
}
- if (color) group += `color: ${color}`
- group += '"'
return ``
}
diff --git a/scripts/tag/inlineImg.js b/scripts/tag/inlineImg.js
index 9bcbfdb..753add0 100644
--- a/scripts/tag/inlineImg.js
+++ b/scripts/tag/inlineImg.js
@@ -1,17 +1,19 @@
/**
* inlineImg 圖片
- * {% inlineImg src height %}
+ * @param {Array} args 圖片名稱和高度
+ * @param {string} args[0] 圖片名稱
+ * @param {number} args[1] 圖片高度
+ * @returns {string} 圖片標籤
*/
'use strict'
const urlFor = require('hexo-util').url_for.bind(hexo)
-function inlineImg (args) {
- const img = args[0]
- const height = args[1] ? `style="height:${args[1]}"` : ''
-
- return `})
`
+const inlineImg = ([img, height = '']) => {
+ const heightStyle = height ? `style="height:${height}"` : ''
+ const src = urlFor(img)
+ return `
`
}
hexo.extend.tag.register('inlineImg', inlineImg, { ends: false })
diff --git a/scripts/tag/label.js b/scripts/tag/label.js
index 877c909..4c9e692 100644
--- a/scripts/tag/label.js
+++ b/scripts/tag/label.js
@@ -6,10 +6,8 @@
'use strict'
-function addLabel (args, content) {
- const text = args[0]
- const className = args[1] || 'default'
-
+const addLabel = args => {
+ const [text, className = 'default'] = args
return `${text} `
}
diff --git a/scripts/tag/mermaid.js b/scripts/tag/mermaid.js
index 237b7ee..ba25c0f 100644
--- a/scripts/tag/mermaid.js
+++ b/scripts/tag/mermaid.js
@@ -8,7 +8,7 @@
const { escapeHTML } = require('hexo-util')
-function mermaid (args, content) {
+const mermaid = (args, content) => {
return ``
diff --git a/scripts/tag/note.js b/scripts/tag/note.js
index aa19129..125bc61 100644
--- a/scripts/tag/note.js
+++ b/scripts/tag/note.js
@@ -6,10 +6,10 @@
'use strict'
-function postNote (args, content) {
+const postNote = (args, content) => {
const styleConfig = hexo.theme.config.note.style
- const lastArgs = args[args.length - 1]
- if (!(lastArgs === 'flat' || lastArgs === 'modern' || lastArgs === 'simple' || lastArgs === 'disabled')) {
+ const noteTag = ['flat', 'modern', 'simple', 'disabled']
+ if (!noteTag.includes(args[args.length - 1])) {
args.push(styleConfig)
}
diff --git a/scripts/tag/score.js b/scripts/tag/score.js
index 3157245..441247b 100644
--- a/scripts/tag/score.js
+++ b/scripts/tag/score.js
@@ -3,20 +3,20 @@
* {% score %}
*/
-'use strict';
+'use strict'
-function score(args, content) {
- function escapeHtmlTags(s) {
- let lookup = {
- '&': "&",
- '"': """,
- '\'': "'",
- '<': "<",
- '>': ">"
- };
- return s.replace(/[&"'<>]/g, c => lookup[c]);
+const score = (args, content) => {
+ const escapeHtmlTags = s => {
+ const lookup = {
+ '&': '&',
+ '"': '"',
+ '\'': ''',
+ '<': '<',
+ '>': '>'
}
- return ``
}
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index 5782812..9a4fa3c 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -134,7 +134,7 @@ if hexo-config('enter_transitions')
#footer
animation: bottom-top 1s
- #page-header
+ #page-header:not(.full_page)
animation: header-effect 1s
#site-title,
@@ -155,7 +155,7 @@ if hexo-config('enter_transitions')
&.open
for i in 1 2 3 4
> :nth-child({i})
- animation: sidebarItem (i / 5)s
+ animation: sidebarItem (i / 5s)
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
@@ -169,16 +169,16 @@ if hexo-config('avatar.effect') == true
@keyframes scroll-down-effect
0%
- top: 0
opacity: .4
+ transform: translate(0, 0)
50%
- top: -16px
opacity: 1
+ transform: translate(0, -16px)
100%
- top: 0
opacity: .4
+ transform: translate(0, 0)
@keyframes header-effect
0%
@@ -198,12 +198,12 @@ if hexo-config('avatar.effect') == true
@keyframes bottom-top
0%
- margin-top: 50px
opacity: 0
+ transform: translateY(50px)
100%
- margin-top: 0
opacity: 1
+ transform: translateY(0)
@keyframes titleScale
0%
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index 8bb57c7..22c87c2 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -49,6 +49,7 @@ body
if !hexo-config('copy.enable')
user-select: none
+ -webkit-user-select: none
// scrollbar - chrome/safari
*::-webkit-scrollbar
diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl
index d54798c..78c0812 100644
--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -13,6 +13,16 @@ wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_wor
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
+[data-theme='dark']
+ --hl-color: alpha(#FFFFFF, .7)
+ --hl-bg: lighten(#121212, 2)
+ --hltools-bg: lighten(#121212, 3)
+ --hltools-color: #90a4ae
+ --hlnumber-bg: lighten(#121212, 2)
+ --hlnumber-color: alpha(#FFFFFF, .4)
+ --hlscrollbar-bg: lighten(#121212, 5)
+ --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
+
if $highlight_enable
@require 'highlight/index'
@@ -77,6 +87,7 @@ $code-block
&.copy-true
user-select: all
+ -webkit-user-select: all
& > table,
& > pre
@@ -94,8 +105,13 @@ $code-block
color: var(--hltools-color)
font-size: $code-font-size
- &.closed ~ *
- display: none
+ &.closed
+ & ~ *
+ display: none
+
+ .expand
+ transition: all .3s
+ transform: rotate(-90deg) !important
.expand
position: absolute
@@ -106,10 +122,6 @@ $code-block
& + .code-lang
left: 1.7em
- &.closed
- transition: all .3s
- transform: rotate(-90deg) !important
-
.code-lang
position: absolute
left: 14px
@@ -117,6 +129,7 @@ $code-block
font-weight: bold
font-size: 1.15em
user-select: none
+ -webkit-user-select: none
.copy-notice
position: absolute
@@ -135,6 +148,7 @@ $code-block
.gutter
user-select: none
+ -webkit-user-select: none
.gist table
width: auto
diff --git a/source/css/_highlight/prismjs/line-number.styl b/source/css/_highlight/prismjs/line-number.styl
index 69f2787..e37215b 100644
--- a/source/css/_highlight/prismjs/line-number.styl
+++ b/source/css/_highlight/prismjs/line-number.styl
@@ -27,6 +27,7 @@
font-size: 100%
pointer-events: none
user-select: none
+ -webkit-user-select: none
& > span
display: block
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index 981bc12..f9c1bae 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -179,6 +179,13 @@
> .parent
> a
+ &.expand
+ i
+ transform: rotate(-90deg)
+
+ & + .child
+ display: block
+
.card-category-list
&-name
width: 70% !important
@@ -187,15 +194,12 @@
width: calc(100% - 70% - 20px)
text-align: right
- i
- float: right
- margin-right: -.5em
- padding: .5em
- transition: transform .3s
- transform: rotate(0)
-
- &.expand
- transform: rotate(-90deg)
+ i
+ float: right
+ margin-right: -.5em
+ padding: .5em
+ transition: transform .3s
+ transform: rotate(0)
if hexo-config('aside.card_categories.expand') == false
> .child
@@ -220,16 +224,19 @@
+maxWidth900()
position: fixed
- right: -100%
+ right: 55px
bottom: 30px
z-index: 100
max-width: $toc-mobile-maxWidth
max-height: calc(100% - 60px)
width: $toc-mobile-width
- opacity: 0
- transition: initial
+ transition: none
+ transform: scale(0)
transform-origin: right bottom
+ &.open
+ transform: scale(1)
+
.toc-percentage
float: right
margin-top: -9px
@@ -242,6 +249,7 @@
overflow-y: overlay
margin: 0 -24px
max-height: calc(100vh - 120px)
+ width: calc(100% + 48px)
+maxWidth900()
max-height: calc(100vh - 140px)
diff --git a/source/css/_layout/comments.styl b/source/css/_layout/comments.styl
index 838094a..f2feebd 100644
--- a/source/css/_layout/comments.styl
+++ b/source/css/_layout/comments.styl
@@ -2,13 +2,18 @@
.comment-head
margin-bottom: 20px
+ &:after
+ display: block
+ clear: both
+ content: ''
+
.comment-headline
display: inline-block
vertical-align: middle
font-weight: 700
font-size: 1.43em
- #comment-switch
+ .comment-switch
display: inline-block
if hexo-config('comments.text')
@@ -30,7 +35,7 @@
.second-comment
color: $comments-switch-second-text
- .switch-btn
+ #switch-btn
position: relative
display: inline-block
margin: -4px 8px 0
@@ -53,12 +58,24 @@
content: ''
transition: .4s
- &.move
- background-color: $comments-switch-second-text
-
- &:before
- transform: translateX(20px)
-
.comment-wrap
- > div:nth-child(2)
- display: none
\ No newline at end of file
+ > div
+ animation: tabshow .5s
+
+ &:nth-child(2)
+ display: none
+
+ &.move
+ #switch-btn
+ background-color: $comments-switch-second-text
+
+ &:before
+ transform: translateX(20px)
+
+ .comment-wrap
+ > div
+ &:first-child
+ display: none
+
+ &:last-child
+ display: block
\ No newline at end of file
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index 8870a52..3c5f4ce 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -51,7 +51,6 @@
#site_social_icons
display: none
margin: 0 auto
- width: 300px
text-align: center
+maxWidth768()
@@ -65,7 +64,7 @@
#scroll-down
position: absolute
- bottom: 0
+ bottom: 10px
width: 100%
cursor: pointer
@@ -73,7 +72,7 @@
position: relative
width: 100%
color: var(--light-grey)
- font-size: 30px
+ font-size: 20px
// page
&.not-home-page
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
index 2fa64a6..6ad1efc 100644
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -1,13 +1,12 @@
beautify()
headStyle(fontsize)
- padding-left: unit(fontsize + 12, 'px')
+ padding-left: unit(fontsize + 8, 'px')
&:before
- margin-left: unit((-(fontsize + 6)), 'px')
- font-size: unit(fontsize, 'px')
+ font-size: unit(fontsize - 2, 'px')
&:hover
- padding-left: unit(fontsize + 18, 'px')
+ padding-left: unit(fontsize + 12, 'px')
h1,
h2,
@@ -22,6 +21,7 @@ beautify()
top: calc(50% - 7px)
color: $title-prefix-icon-color
content: $title-prefix-icon
+ left: 0
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
@@ -73,6 +73,9 @@ beautify()
word-wrap: break-word
overflow-wrap: break-word
+ if hexo-config('text_align_justify')
+ text-align: justify
+
a
color: $theme-link-color
@@ -105,35 +108,15 @@ beautify()
font-family: Monaco, 'Ubuntu Mono', monospace
line-height: 1em
- if hexo-config('anchor.button.enable')
+ if hexo-config('anchor.click_to_scroll')
a.headerlink
- &:after
- @extend .fontawesomeIcon
- float: right
- color: var(--headline-presudo)
- content: $archor-button-icon
- font-size: .95em
- transition: all .3s
-
- &:hover
- &:after
- color: var(--pseudo-hover)
-
- if !hexo-config('anchor.button.always_show')
- a.headerlink
- &:after
- opacity: 0
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6
- &:hover
- a.headerlink
- &:after
- opacity: 1
+ position: absolute
+ top: 0
+ right: 0
+ left 0
+ bottom: 0
+ width 100%
+ height: 100%
ol,
ul
@@ -226,6 +209,9 @@ beautify()
color: $light-blue
font-weight: bold
+ i
+ margin-right: 3px
+
&-info
padding-left: 6px
diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl
index e570967..4043aa2 100644
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -15,6 +15,9 @@
color: var(--btn-color)
cursor: pointer
+ i
+ margin-right: 5px
+
&:hover
.reward-button
background: var(--btn-hover-color)
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 0c25205..7d2832c 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -6,6 +6,10 @@
opacity: 0
transition: all .5s
+ &.rightside-show
+ opacity: .8
+ transform: translate(-58px, 0)
+
#rightside-config-hide
height: 0
opacity: 0
diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl
index 2e38ee8..1a12606 100644
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@@ -13,7 +13,8 @@
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
- overflow-y: auto
+ overflow-y: scroll
+ padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
@@ -32,7 +33,7 @@
margin: 20px auto
.menus_items
- padding: 0 10px 40px
+ padding: 0 5px
.site-page
@extend .limit-one-line
@@ -53,7 +54,7 @@
& > i:last-child
position: absolute
top: .78em
- right: 18px
+ right: 13px
transition: transform .3s
&.hide
@@ -65,4 +66,5 @@
.menus_item_child
margin: 0
+ padding-left: 25px
list-style: none
\ No newline at end of file
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index 7a39ca5..2251ee8 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -28,15 +28,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
- --hl-color: alpha(#FFFFFF, .7)
- --hl-bg: lighten(#121212, 2)
- --hltools-bg: lighten(#121212, 3)
- --hltools-color: #90a4ae
- --hlnumber-bg: lighten(#121212, 2)
- --hlnumber-color: alpha(#FFFFFF, .4)
- --hlscrollbar-bg: lighten(#121212, 5)
- --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
- --scrollbar-color: lighten(#121212, 5)
+ --scrollbar-color: lighten(#121212, 25)
--timeline-bg: lighten(#121212, 5)
--zoom-bg: #121212
--mark-bg: alpha($dark-black, .6)
@@ -78,11 +70,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#post-comment
- #comment-switch
+ .comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important
- .switch-btn
+ #switch-btn
filter: brightness(.8)
// note
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index ecb865a..906b50f 100644
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -145,18 +145,7 @@ if hexo-config('readmode')
background: transparent
> .tab
- border-bottom: 0
-
- button
- border-top: none !important
- background: transparent
-
- &:hover
- background: none !important
-
- &.active
- button
- text-decoration: underline
+ border-top: none !important
> .tab-contents .tab-item-content.active
animation: none
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
index 9269f97..e81311a 100644
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -62,6 +62,11 @@
transition: all .2s ease-in-out
-webkit-line-clamp: 2
+ .sticky
+ margin-right: 10px
+ color: $sticky-color
+ transform: rotate(45deg)
+
+maxWidth768()
font-size: 1.43em
@@ -76,9 +81,6 @@
& > .post-meta-date
cursor: default
- .sticky
- color: $sticky-color
-
i
margin: 0 4px 0 0
diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl
index f5c5fa9..c8dfdfe 100644
--- a/source/css/_search/local-search.styl
+++ b/source/css/_search/local-search.styl
@@ -64,10 +64,6 @@
+maxWidth768()
max-height: calc(var(--search-height) - 220px) !important
- .no-result
- & + #local-search-stats-wrap
- display: none
-
.search-keyword
background: transparent
color: $search-keyword-highlight
diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl
index 6fe035f..2c0aa95 100644
--- a/source/css/_tags/gallery.styl
+++ b/source/css/_tags/gallery.styl
@@ -94,25 +94,20 @@
overflow: auto
padding: 0 0 16px
- .gallery
+ .gallery-container
margin: 0 0 16px
text-align: center
- .fj-gallery
- opacity: 0
+ img
+ display: initial
+ margin: 0
+ width: 100%
+ height: 100%
- .img-alt
- display: none
-
- &.lazyload
- + button
- display: inline-block
-
- .gallery-data
- display: none
+ .gallery-data
+ display: none
button
- display: none
margin-top: 25px
padding: 10px
width: 9em
@@ -123,17 +118,88 @@
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
+ .loading-container
+ display: inline-block
+ overflow: hidden
+ width: 154px
+ height: 154px
+
+ .loading-item
+ position: relative
+ width: 100%
+ height: 100%
+ backface-visibility: hidden
+ transform: translateZ(0) scale(1)
+ transform-origin: 0 0
+
+ div
+ position: absolute
+ width: 30.8px
+ height: 30.8px
+ border-radius: 50%
+ background: #e15b64
+ transform: translate(61.6px, 61.6px) scale(1)
+ animation: loading-ball 1.92s infinite cubic-bezier(0, .5, .5, 1)
+
+ &:nth-child(1)
+ background: #f47e60
+ transform: translate(113.96px, 61.6px) scale(1)
+ animation: loading-ball-r .48s infinite cubic-bezier(0, .5, .5, 1), loading-ball-c 1.92s infinite step-start
+
+ &:nth-child(2)
+ background: #e15b64
+ animation-delay: -.48s
+
+ &:nth-child(3)
+ background: #f47e60
+ animation-delay: -.96s
+
+ &:nth-child(4)
+ background: #f8b26a
+ animation-delay: -1.44s
+
+ &:nth-child(5)
+ background: #abbd81
+ animation-delay: -1.92s
+
+@keyframes loading-ball
+ 0%
+ transform: translate(9.24px, 61.6px) scale(0)
+
+ 25%
+ transform: translate(9.24px, 61.6px) scale(0)
+
+ 50%
+ transform: translate(9.24px, 61.6px) scale(1)
+
+ 75%
+ transform: translate(61.6px, 61.6px) scale(1)
+
+ 100%
+ transform: translate(113.96px, 61.6px) scale(1)
+
+@keyframes loading-ball-r
+ 0%
+ transform: translate(113.96px, 61.6px) scale(1)
+
+ 100%
+ transform: translate(113.96px, 61.6px) scale(0)
+
+@keyframes loading-ball-c
+ 0%
+ background: #e15b64
+
+ 25%
+ background: #abbd81
+
+ 50%
+ background: #f8b26a
+
+ 75%
+ background: #f47e60
+
+ 100%
+ background: #e15b64
diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl
index efd3781..041603f 100644
--- a/source/css/_tags/note.styl
+++ b/source/css/_tags/note.styl
@@ -73,6 +73,9 @@
&:last-child
margin-bottom: 0 !important
+ .img-alt
+ margin: 5px 0 10px
+
if $note-icons
&:not(.no-icon)
padding-left: 3em
diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl
index 90ede9c..2447a1b 100644
--- a/source/css/_tags/tabs.styl
+++ b/source/css/_tags/tabs.styl
@@ -15,43 +15,36 @@
background: var(--tab-botton-bg)
> .tab
- margin: 0
- padding: 0
- list-style: none
+ flex-grow: 1
+ padding: 8px 18px
+ border-top: 2px solid var(--tab-border-color)
+ background: var(--tab-botton-bg)
+ color: var(--tab-botton-color)
+ line-height: 2
+ transition: all .4s
- +maxWidth768()
- flex-grow: 1
-
- button
- display: block
- padding: 8px 18px
- width: 100%
- border-top: 2px solid var(--tab-border-color)
- background: var(--tab-botton-bg)
- color: var(--tab-botton-color)
- line-height: 2
- transition: all .4s
-
- i
- width: 1.5em
+ i
+ width: 1.5em
&.active
- button
- border-top: 2px solid $tab-active-border-color
- background: var(--tab-button-active-bg)
- cursor: default
+ border-top: 2px solid $tab-active-border-color
+ background: var(--tab-button-active-bg)
+ cursor: default
&:not(.active)
- button
- &:hover
- border-top: 2px solid var(--tab-button-hover-bg)
- background: var(--tab-button-hover-bg)
+ &:hover
+ border-top: 2px solid var(--tab-button-hover-bg)
+ background: var(--tab-button-hover-bg)
+
+ &.no-default
+ & ~ .tab-to-top
+ display: none
> .tab-contents
.tab-item-content
position: relative
display: none
- padding: 36px 24px
+ padding: 36px 24px 10px
+maxWidth768()
padding: 24px 14px
@@ -60,11 +53,19 @@
display: block
animation: tabshow .5s
- .tab-to-top
- position: relative
- display: block
- margin: 0 0 0 auto
- color: $tab-to-top-color
+ > :last-child
+ margin-bottom: 0
+
+ > .tab-to-top
+ padding: 0 16px 10px 0
+ width: 100%
+ text-align: right
+
+ button
+ color: $tab-to-top-color
+
+ &:hover
+ color: $tab-to-top-hover-color
@keyframes tabshow
0%
diff --git a/source/css/var.styl b/source/css/var.styl
index 04d4326..09e4129 100644
--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -101,7 +101,7 @@ $tag-hide-toggle-bg = #f0f0f0
$preloader-bg = #37474f
$preloader-word-color = #fff
// rightside
-$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
+$rightside-bottom = hexo-config('rightside_bottom') ? convert(hexo-config('rightside_bottom')) : 40px
// fireworks
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
// Tag Plugins - Note
@@ -179,7 +179,6 @@ $tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
+$tab-to-top-hover-color = $theme-color
// Tag Plugins - timeline
$timeline-default-color = $theme-color
-// archor
-$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'
\ No newline at end of file
diff --git a/source/js/main.js b/source/js/main.js
index 303300d..a22b57f 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -4,9 +4,7 @@ document.addEventListener('DOMContentLoaded', function () {
const adjustMenu = init => {
const getAllWidth = ele => {
- let width = 0
- ele.length && Array.from(ele).forEach(i => { width += i.offsetWidth })
- return width
+ return Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0)
}
if (init) {
@@ -16,15 +14,8 @@ document.addEventListener('DOMContentLoaded', function () {
$nav = document.getElementById('nav')
}
- let hideMenuIndex = ''
- if (window.innerWidth <= 768) hideMenuIndex = true
- else hideMenuIndex = headerContentWidth > $nav.offsetWidth - 120
-
- if (hideMenuIndex) {
- $nav.classList.add('hide-menu')
- } else {
- $nav.classList.remove('hide-menu')
- }
+ const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120
+ $nav.classList.toggle('hide-menu', hideMenuIndex)
}
// 初始化header
@@ -56,17 +47,19 @@ document.addEventListener('DOMContentLoaded', function () {
* 首頁top_img底下的箭頭
*/
const scrollDownInIndex = () => {
- const $scrollDownEle = document.getElementById('scroll-down')
- $scrollDownEle && $scrollDownEle.addEventListener('click', function () {
+ const handleScrollToDest = () => {
btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
- })
+ }
+
+ const $scrollDownEle = document.getElementById('scroll-down')
+ $scrollDownEle && btf.addEventListenerPjax($scrollDownEle, 'click', handleScrollToDest)
}
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
- const addHighlightTool = function () {
+ const addHighlightTool = () => {
const highLight = GLOBAL_CONFIG.highlight
if (!highLight) return
@@ -79,7 +72,7 @@ document.addEventListener('DOMContentLoaded', function () {
const isPrismjs = plugin === 'prismjs'
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
- const highlightShrinkEle = isHighlightShrink !== undefined ? `` : ''
+ const highlightShrinkEle = isHighlightShrink !== undefined ? '' : ''
const highlightCopyEle = highlightCopy ? '' : ''
const copy = (text, ctx) => {
@@ -103,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
// click events
- const highlightCopyFn = (ele) => {
+ const highlightCopyFn = ele => {
const $buttonParent = ele.parentNode
$buttonParent.classList.add('copy-true')
const selection = window.getSelection()
@@ -118,14 +111,8 @@ document.addEventListener('DOMContentLoaded', function () {
$buttonParent.classList.remove('copy-true')
}
- const highlightShrinkFn = (ele) => {
- const $nextEle = [...ele.parentNode.children].slice(1)
- ele.firstChild.classList.toggle('closed')
- if (btf.isHidden($nextEle[$nextEle.length - 1])) {
- $nextEle.forEach(e => { e.style.display = 'block' })
- } else {
- $nextEle.forEach(e => { e.style.display = 'none' })
- }
+ const highlightShrinkFn = ele => {
+ ele.classList.toggle('closed')
}
const highlightToolsFn = function (e) {
@@ -138,14 +125,14 @@ document.addEventListener('DOMContentLoaded', function () {
this.classList.toggle('expand-done')
}
- function createEle (lang, item, service) {
+ const createEle = (lang, item, service) => {
const fragment = document.createDocumentFragment()
if (isShowTool) {
const hlTools = document.createElement('div')
hlTools.className = `highlight-tools ${highlightShrinkClass}`
hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
- hlTools.addEventListener('click', highlightToolsFn)
+ btf.addEventListenerPjax(hlTools, 'click', highlightToolsFn)
fragment.appendChild(hlTools)
}
@@ -153,7 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
const ele = document.createElement('div')
ele.className = 'code-expand-btn'
ele.innerHTML = ''
- ele.addEventListener('click', expandCode)
+ btf.addEventListenerPjax(ele, 'click', expandCode)
fragment.appendChild(ele)
}
@@ -177,7 +164,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
})
} else {
- $figureHighlight.forEach(function (item) {
+ $figureHighlight.forEach(item => {
if (highlightLang) {
let langName = item.getAttribute('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
@@ -193,16 +180,14 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* PhotoFigcaption
*/
- function addPhotoFigcaption () {
- document.querySelectorAll('#article-container img').forEach(function (item) {
- const parentEle = item.parentNode
+ const addPhotoFigcaption = () => {
+ document.querySelectorAll('#article-container img').forEach(item => {
const altValue = item.title || item.alt
- if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
- const ele = document.createElement('div')
- ele.className = 'img-alt is-center'
- ele.textContent = altValue
- parentEle.insertBefore(ele, item.nextSibling)
- }
+ if (!altValue) return
+ const ele = document.createElement('div')
+ ele.className = 'img-alt is-center'
+ ele.textContent = altValue
+ item.insertAdjacentElement('afterend', ele)
})
}
@@ -216,97 +201,173 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* justified-gallery 圖庫排版
*/
- const runJustifiedGallery = function (ele) {
- 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 += `
`
- })
- return str
+
+ const fetchUrl = async (url) => {
+ const response = await fetch(url)
+ return await response.json()
+ }
+
+ const runJustifiedGallery = (item, data, isButton = false, tabs) => {
+ const dataLength = data.length
+
+ const ig = new InfiniteGrid.JustifiedInfiniteGrid(item, {
+ gap: 5,
+ isConstantSize: true,
+ sizeRange: [150, 600],
+ useResizeObserver: true,
+ observeChildren: true,
+ useTransform: true
+ // useRecycle: false
+ })
+
+ if (tabs) {
+ btf.addGlobalFn('igOfTabs', () => { ig.destroy() }, false, tabs)
}
- const lazyloadFn = (i, arr, limit) => {
- const loadItem = 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
- }
+ const replaceDq = str => str.replace(/"/g, '"') // replace double quotes to "
- const fetchUrl = async (url) => {
- const response = await fetch(url)
- return await response.json()
- }
+ const getItems = (nextGroupKey, count) => {
+ const nextItems = []
+ const startCount = (nextGroupKey - 1) * count
- const runJustifiedGallery = (item, arr) => {
- if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
- else {
- const limit = item.getAttribute('data-limit')
- lazyloadFn(item, arr, limit)
- const clickBtnFn = () => {
- const lastItemLength = lazyloadFn(item, arr, limit)
- 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)
+ for (let i = 0; i < count; ++i) {
+ const num = startCount + i
+ if (num >= dataLength) {
+ break
}
- item.nextElementSibling.addEventListener('click', clickBtnFn)
+
+ const item = data[num]
+ const alt = item.alt ? `alt="${replaceDq(item.alt)}"` : ''
+ const title = item.title ? `title="${replaceDq(item.title)}"` : ''
+
+ nextItems.push(`
- ${dataStr}
-
-
+ return `
+
`
}
-function galleryGroup (args) {
- const name = args[0]
- const descr = args[1]
- const url = urlFor(args[2])
- const img = urlFor(args[3])
+const galleryGroup = args => {
+ const [name, descr, url, img] = args
+ const imgUrl = urlFor(img)
+ const urlLink = urlFor(url)
- return `
- ${dataStr}
+
+
${name}
${descr}
- +${display}
${hexo.render.renderSync({ text: content, engine: 'markdown' })}
${escapeHTML(content)}
${escapeHtmlTags(content)}
`;
+ return s.replace(/[&"'<>]/g, c => lookup[c])
+ }
+ return `${escapeHtmlTags(content)}
`
}
-hexo.extend.tag.register('score', score, {ends: true});
+hexo.extend.tag.register('score', score, { ends: true })
diff --git a/scripts/tag/series.js b/scripts/tag/series.js
new file mode 100644
index 0000000..4a901df
--- /dev/null
+++ b/scripts/tag/series.js
@@ -0,0 +1,69 @@
+/**
+ * series plugin
+ * Syntax:
+ * {% series [series name] %}
+ * Usage:
+ * {% series %}
+ * {% series series1 %}
+ */
+
+'use strict'
+
+const urlFor = require('hexo-util').url_for.bind(hexo)
+const groups = {}
+
+hexo.extend.filter.register('before_post_render', data => {
+ if (!hexo.theme.config.series.enable) return data
+ const { layout, series } = data
+ if (layout === 'post' && series) {
+ groups[series] = groups[series] || []
+ groups[series].push({
+ title: data.title,
+ path: data.path,
+ date: data.date.unix()
+ })
+ }
+ return data
+})
+
+function series (args) {
+ const { series } = hexo.theme.config
+ if (!series.enable) {
+ hexo.log.warn('Series plugin is disabled in the theme config')
+ return ''
+ }
+
+ const seriesArr = args.length ? groups[args[0]] : groups[this.series]
+
+ if (!seriesArr) {
+ hexo.log.warn(`There is no series named "${args[0]}"`)
+ return ''
+ }
+
+ const isAsc = (series.order || 1) === 1 // 1: asc, -1: desc
+ const isSortByTitle = series.orderBy === 'title'
+
+ const compareFn = (a, b) => {
+ const itemA = isSortByTitle ? a.title.toUpperCase() : a.date
+ const itemB = isSortByTitle ? b.title.toUpperCase() : b.date
+
+ if (itemA < itemB) {
+ return isAsc ? -1 : 1
+ }
+ if (itemA > itemB) {
+ return isAsc ? 1 : -1
+ }
+ return 0
+ }
+
+ seriesArr.sort(compareFn)
+
+ let result = ''
+ seriesArr.forEach(ele => {
+ result += `- ${result}
- ${result}
${postContent + toTop}
`
+ let isActive = ''
+ if ((tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1)) {
+ isActive = ' active'
+ noDefault = false
+ }
+ tabNav += ``
+ tabContent += `${postContent}
`
}
- tabNav = ``
+ const toTop = ''
+
+ tabNav = ``
tabContent = `${tabContent}
`
- return `${tabNav + tabContent}
`
+ return `${tabNav + tabContent + toTop}
`
}
hexo.extend.tag.register('tabs', postTabs, { ends: true })
diff --git a/scripts/tag/timeline.js b/scripts/tag/timeline.js
index 6c87a6b..6dde854 100644
--- a/scripts/tag/timeline.js
+++ b/scripts/tag/timeline.js
@@ -5,15 +5,15 @@
'use strict'
-function timeLineFn (args, content) {
+const timeLineFn = (args, content) => {
const tlBlock = /\n([\w\W\s\S]*?)/g
let result = ''
let color = ''
+ let text = ''
if (args.length) {
- args = args.join(' ').split(',')
- color = args[1]
- const mdContent = hexo.render.renderSync({ text: args[0], engine: 'markdown' })
+ [text, color] = args.join(' ').split(',')
+ const mdContent = hexo.render.renderSync({ text, engine: 'markdown' })
result += `${mdContent}
+ 
+
`)
}
- btf.initJustifiedGallery(item)
- btf.loadLightbox(item.querySelectorAll('img'))
+ return nextItems
}
- const addJustifiedGallery = () => {
- ele.forEach(item => {
- item.classList.contains('url')
- ? fetchUrl(item.textContent).then(res => { runJustifiedGallery(item, res) })
- : runJustifiedGallery(item, JSON.parse(item.textContent))
- })
+ const buttonText = GLOBAL_CONFIG.infinitegrid.buttonText
+ const addButton = item => {
+ const button = document.createElement('button')
+ button.textContent = buttonText
+
+ const buttonFn = e => {
+ e.target.removeEventListener('click', buttonFn)
+ e.target.remove()
+ btf.setLoading.add(item)
+ appendItem(ig.getGroups().length + 1, 10)
+ }
+
+ button.addEventListener('click', buttonFn)
+ item.insertAdjacentElement('afterend', button)
}
- if (window.fjGallery) {
- addJustifiedGallery()
- return
+ const appendItem = (nextGroupKey, count) => {
+ ig.append(getItems(nextGroupKey, count), nextGroupKey)
}
- getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
- getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(addJustifiedGallery)
+ const maxGroupKey = Math.ceil(dataLength / 10)
+
+ const completeFn = e => {
+ const { updated, isResize, mounted } = e
+ if (!updated.length || !mounted.length || isResize) {
+ return
+ }
+
+ btf.loadLightbox(item.querySelectorAll('img:not(.medium-zoom-image)'))
+
+ if (ig.getGroups().length === maxGroupKey) {
+ btf.setLoading.remove(item)
+ ig.off('renderComplete', completeFn)
+ return
+ }
+
+ if (isButton) {
+ btf.setLoading.remove(item)
+ addButton(item)
+ }
+ }
+
+ const requestAppendFn = btf.debounce(e => {
+ const nextGroupKey = (+e.groupKey || 0) + 1
+ appendItem(nextGroupKey, 10)
+
+ if (nextGroupKey === maxGroupKey) {
+ ig.off('requestAppend', requestAppendFn)
+ }
+ }, 300)
+
+ btf.setLoading.add(item)
+ ig.on('renderComplete', completeFn)
+
+ if (isButton) {
+ appendItem(1, 10)
+ } else {
+ ig.on('requestAppend', requestAppendFn)
+ ig.renderItems()
+ }
+
+ btf.addGlobalFn('justifiedGallery', () => { ig.destroy() })
+ }
+
+ const addJustifiedGallery = async (ele, tabs = false) => {
+ const init = async () => {
+ for (const item of ele) {
+ if (btf.isHidden(item)) continue
+ if (tabs && item.classList.contains('loaded')) {
+ item.querySelector('.gallery-items').innerHTML = ''
+ const button = item.querySelector(':scope > button')
+ const loadingContainer = item.querySelector(':scope > .loading-container')
+ button && button.remove()
+ loadingContainer && loadingContainer.remove()
+ }
+
+ const isButton = item.getAttribute('data-button') === 'true'
+ const text = item.firstElementChild.textContent
+ item.classList.add('loaded')
+ const content = item.getAttribute('data-type') === 'url' ? await fetchUrl(text) : JSON.parse(text)
+ runJustifiedGallery(item.lastElementChild, content, isButton, tabs)
+ }
+ }
+
+ if (typeof InfiniteGrid === 'function') {
+ init()
+ } else {
+ await getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
+ init()
+ }
}
/**
* rightside scroll percent
*/
const rightsideScrollPercent = currentTop => {
- const perNum = btf.getScrollPercent(currentTop, document.body)
- const $goUp = document.getElementById('go-up')
- if (perNum < 95) {
- $goUp.classList.add('show-percent')
- $goUp.querySelector('.scroll-percent').textContent = perNum
+ const scrollPercent = btf.getScrollPercent(currentTop, document.body)
+ const goUpElement = document.getElementById('go-up')
+
+ if (scrollPercent < 95) {
+ goUpElement.classList.add('show-percent')
+ goUpElement.querySelector('.scroll-percent').textContent = scrollPercent
} else {
- $goUp.classList.remove('show-percent')
+ goUpElement.classList.remove('show-percent')
}
}
/**
* 滾動處理
*/
- const scrollFn = function () {
+ const scrollFn = () => {
const $rightside = document.getElementById('rightside')
const innerHeight = window.innerHeight + 56
let initTop = 0
- let isChatShow = true
const $header = document.getElementById('page-header')
const isChatBtn = typeof chatBtn !== 'undefined'
const isShowPercent = GLOBAL_CONFIG.percent.rightside
// 當滾動條小于 56 的時候
if (document.body.scrollHeight <= innerHeight) {
- $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
+ $rightside.classList.add('rightside-show')
return
}
@@ -317,50 +378,51 @@ document.addEventListener('DOMContentLoaded', function () {
return result
}
+ let flag = ''
const scrollTask = btf.throttle(() => {
const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop)
if (currentTop > 56) {
+ if (flag === '') {
+ $header.classList.add('nav-fixed')
+ $rightside.classList.add('rightside-show')
+ }
+
if (isDown) {
- if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
- if (isChatBtn && isChatShow === true) {
- window.chatBtn.hide()
- isChatShow = false
+ if (flag !== 'down') {
+ $header.classList.remove('nav-visible')
+ isChatBtn && window.chatBtn.hide()
+ flag = 'down'
}
} else {
- if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
- if (isChatBtn && isChatShow === false) {
- window.chatBtn.show()
- isChatShow = true
+ if (flag !== 'up') {
+ $header.classList.add('nav-visible')
+ isChatBtn && window.chatBtn.show()
+ flag = 'up'
}
}
- $header.classList.add('nav-fixed')
- if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
- $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
- }
} else {
+ flag = ''
if (currentTop === 0) {
$header.classList.remove('nav-fixed', 'nav-visible')
}
- $rightside.style.cssText = "opacity: ''; transform: ''"
+ $rightside.classList.remove('rightside-show')
}
isShowPercent && rightsideScrollPercent(currentTop)
if (document.body.scrollHeight <= innerHeight) {
- $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
+ $rightside.classList.add('rightside-show')
}
- }, 200)
+ }, 300)
- window.scrollCollect = scrollTask
-
- window.addEventListener('scroll', scrollCollect)
+ btf.addEventListenerPjax(window, 'scroll', scrollTask, { passive: true })
}
/**
* toc,anchor
*/
- const scrollFnToDo = function () {
+ const scrollFnToDo = () => {
const isToc = GLOBAL_CONFIG_SITE.isToc
const isAnchor = GLOBAL_CONFIG.isAnchor
const $article = document.getElementById('article-container')
@@ -371,37 +433,24 @@ document.addEventListener('DOMContentLoaded', function () {
if (isToc) {
const $cardTocLayout = document.getElementById('card-toc')
- $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
+ $cardToc = $cardTocLayout.querySelector('.toc-content')
$tocLink = $cardToc.querySelectorAll('.toc-link')
$tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
isExpand = $cardToc.classList.contains('is-expand')
- window.mobileToc = {
- open: () => {
- $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
- },
+ // toc元素點擊
+ const tocItemClickFn = e => {
+ const target = e.target.closest('.toc-link')
+ if (!target) return
- close: () => {
- $cardTocLayout.style.animation = 'toc-close .2s'
- setTimeout(() => {
- $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
- }, 100)
+ e.preventDefault()
+ btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300)
+ if (window.innerWidth < 900) {
+ $cardTocLayout.classList.remove('open')
}
}
- // toc元素點擊
- $cardToc.addEventListener('click', e => {
- e.preventDefault()
- const target = e.target.classList
- if (target.contains('toc-content')) return
- const $target = target.contains('toc-link')
- ? e.target
- : e.target.parentElement
- btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
- if (window.innerWidth < 900) {
- window.mobileToc.close()
- }
- })
+ btf.addEventListenerPjax($cardToc, 'click', tocItemClickFn)
autoScrollToc = item => {
const activePosition = item.getBoundingClientRect().top
@@ -416,9 +465,9 @@ document.addEventListener('DOMContentLoaded', function () {
}
// find head position & add active class
- const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
+ const $articleList = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
let detectItem = ''
- const findHeadPosition = function (top) {
+ const findHeadPosition = top => {
if (top === 0) {
return false
}
@@ -426,7 +475,7 @@ document.addEventListener('DOMContentLoaded', function () {
let currentId = ''
let currentIndex = ''
- list.forEach(function (ele, index) {
+ $articleList.forEach((ele, index) => {
if (top > btf.getEleTop(ele) - 80) {
const id = ele.id
currentId = id ? '#' + encodeURI(id) : ''
@@ -464,7 +513,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
// main of scroll
- window.tocScrollFn = btf.throttle(() => {
+ const tocScrollFn = btf.throttle(() => {
const currentTop = window.scrollY || document.documentElement.scrollTop
if (isToc && GLOBAL_CONFIG.percent.toc) {
$tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
@@ -472,21 +521,22 @@ document.addEventListener('DOMContentLoaded', function () {
findHeadPosition(currentTop)
}, 100)
- window.addEventListener('scroll', tocScrollFn)
+ btf.addEventListenerPjax(window, 'scroll', tocScrollFn, { passive: true })
}
- const modeChangeFn = mode => {
- if (!window.themeChange) {
+ const handleThemeChange = mode => {
+ const globalFn = window.globalFn || {}
+ const themeChange = globalFn.themeChange || {}
+ if (!themeChange) {
return
}
- const turnMode = item => window.themeChange[item](mode)
-
- Object.keys(window.themeChange).forEach(item => {
- if (['disqus', 'disqusjs'].includes(item)) {
- setTimeout(() => turnMode(item), 300)
+ Object.keys(themeChange).forEach(key => {
+ const themeChangeFn = themeChange[key]
+ if (['disqus', 'disqusjs'].includes(key)) {
+ setTimeout(() => themeChangeFn(mode), 300)
} else {
- turnMode(item)
+ themeChangeFn(mode)
}
})
}
@@ -495,7 +545,7 @@ document.addEventListener('DOMContentLoaded', function () {
* Rightside
*/
const rightSideFn = {
- switchReadMode: () => { // read-mode
+ readmode: () => { // read mode
const $body = document.body
$body.classList.add('read-mode')
const newEle = document.createElement('button')
@@ -511,74 +561,58 @@ document.addEventListener('DOMContentLoaded', function () {
newEle.addEventListener('click', clickFn)
},
- switchDarkMode: () => { // Switch Between Light And Dark Mode
+ darkmode: () => { // switch between light and dark mode
const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
if (willChangeMode === 'dark') {
activateDarkMode()
- saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
activateLightMode()
- saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
- modeChangeFn(willChangeMode)
+ saveToLocal.set('theme', willChangeMode, 2)
+ handleThemeChange(willChangeMode)
},
- showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
- const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
- rightsideHideClassList.toggle('show')
- if (e.classList.contains('show')) {
- rightsideHideClassList.add('status')
+ 'rightside-config': item => { // Show or hide rightside-hide-btn
+ const hideLayout = item.firstElementChild
+ if (hideLayout.classList.contains('show')) {
+ hideLayout.classList.add('status')
setTimeout(() => {
- rightsideHideClassList.remove('status')
+ hideLayout.classList.remove('status')
}, 300)
}
- e.classList.toggle('show')
+
+ hideLayout.classList.toggle('show')
},
- scrollToTop: () => { // Back to top
+ 'go-up': () => { // Back to top
btf.scrollToDest(0, 500)
},
- hideAsideBtn: () => { // Hide aside
+ 'hide-aside-btn': () => { // Hide aside
const $htmlDom = document.documentElement.classList
const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
saveToLocal.set('aside-status', saveStatus, 2)
$htmlDom.toggle('hide-aside')
},
- runMobileToc: () => {
- if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
- else window.mobileToc.close()
+ 'mobile-toc-button': item => { // Show mobile toc
+ const tocEle = document.getElementById('card-toc')
+ tocEle.style.transition = 'transform 0.3s ease-in-out'
+ tocEle.classList.toggle('open')
+ tocEle.addEventListener('transitionend', () => {
+ tocEle.style.transition = ''
+ }, { once: true })
},
- toggleChatDisplay: () => {
+ 'chat-btn': () => { // Show chat
window.chatBtnFn()
+ },
+ translateLink: () => { // switch between traditional and simplified chinese
+ window.translateFn.translatePage()
}
}
document.getElementById('rightside').addEventListener('click', function (e) {
- const $target = e.target.id ? e.target : e.target.parentNode
- switch ($target.id) {
- case 'go-up':
- rightSideFn.scrollToTop()
- break
- case 'rightside_config':
- rightSideFn.showOrHideBtn($target)
- break
- case 'mobile-toc-button':
- rightSideFn.runMobileToc()
- break
- case 'readmode':
- rightSideFn.switchReadMode()
- break
- case 'darkmode':
- rightSideFn.switchDarkMode()
- break
- case 'hide-aside-btn':
- rightSideFn.hideAsideBtn()
- break
- case 'chat-btn':
- rightSideFn.toggleChatDisplay()
- break
- default:
- break
+ const $target = e.target.closest('[id]')
+ if ($target && rightSideFn[$target.id]) {
+ rightSideFn[$target.id](this)
}
})
@@ -587,24 +621,35 @@ document.addEventListener('DOMContentLoaded', function () {
* 側邊欄sub-menu 展開/收縮
*/
const clickFnOfSubMenu = () => {
- document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
- item.addEventListener('click', function () {
- this.classList.toggle('hide')
- })
- })
+ const handleClickOfSubMenu = e => {
+ const target = e.target.closest('.site-page.group')
+ if (!target) return
+ target.classList.toggle('hide')
+ }
+
+ document.querySelector('#sidebar-menus .menus_items').addEventListener('click', handleClickOfSubMenu)
+ }
+
+ /**
+ * 手机端目录点击
+ */
+ const openMobileMenu = () => {
+ const handleClick = () => { sidebarFn.open() }
+ btf.addEventListenerPjax(document.getElementById('toggle-menu'), 'click', handleClick)
}
/**
* 複製時加上版權信息
*/
const addCopyright = () => {
- const copyright = GLOBAL_CONFIG.copyright
- document.body.oncopy = (e) => {
+ const { limitCount, languages } = GLOBAL_CONFIG.copyright
+
+ const handleCopy = (e) => {
e.preventDefault()
const copyFont = window.getSelection(0).toString()
let textFont = copyFont
- if (copyFont.length > copyright.limitCount) {
- textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
+ if (copyFont.length > limitCount) {
+ textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}`
}
if (e.clipboardData) {
return e.clipboardData.setData('text', textFont)
@@ -612,6 +657,8 @@ document.addEventListener('DOMContentLoaded', function () {
return window.clipboardData.setData('text', textFont)
}
}
+
+ document.body.addEventListener('copy', handleCopy)
}
/**
@@ -640,114 +687,119 @@ document.addEventListener('DOMContentLoaded', function () {
* table overflow
*/
const addTableWrap = () => {
- const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
- if ($table.length) {
- $table.forEach(item => {
+ const $table = document.querySelectorAll('#article-container table')
+ if (!$table.length) return
+
+ $table.forEach(item => {
+ if (!item.closest('.highlight')) {
btf.wrap(item, 'div', { class: 'table-wrap' })
- })
- }
+ }
+ })
}
/**
* tag-hide
*/
- const clickFnOfTagHide = function () {
- const $hideInline = document.querySelectorAll('#article-container .hide-button')
- if ($hideInline.length) {
- $hideInline.forEach(function (item) {
- item.addEventListener('click', function (e) {
- const $this = this
- $this.classList.add('open')
- const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
- $fjGallery.length && btf.initJustifiedGallery($fjGallery)
- })
- })
+ const clickFnOfTagHide = () => {
+ const hideButtons = document.querySelectorAll('#article-container .hide-button')
+ if (!hideButtons.length) return
+ const handleClick = function (e) {
+ const $this = this
+ $this.classList.add('open')
+ const $fjGallery = $this.nextElementSibling.querySelectorAll('.gallery-container')
+ $fjGallery.length && addJustifiedGallery($fjGallery)
}
- }
- const tabsFn = {
- clickFnOfTabs: function () {
- document.querySelectorAll('#article-container .tab > button').forEach(function (item) {
- item.addEventListener('click', function (e) {
- const $this = this
- const $tabItem = $this.parentNode
-
- if (!$tabItem.classList.contains('active')) {
- const $tabContent = $tabItem.parentNode.nextElementSibling
- const $siblings = btf.siblings($tabItem, '.active')[0]
- $siblings && $siblings.classList.remove('active')
- $tabItem.classList.add('active')
- const tabId = $this.getAttribute('data-href').replace('#', '')
- const childList = [...$tabContent.children]
- childList.forEach(item => {
- if (item.id === tabId) item.classList.add('active')
- else item.classList.remove('active')
- })
- const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
- if ($isTabJustifiedGallery.length > 0) {
- btf.initJustifiedGallery($isTabJustifiedGallery)
- }
- }
- })
- })
- },
- backToTop: () => {
- document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
- item.addEventListener('click', function () {
- btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300)
- })
- })
- }
- }
-
- const toggleCardCategory = function () {
- const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
- if ($cardCategory.length) {
- $cardCategory.forEach(function (item) {
- item.addEventListener('click', function (e) {
- e.preventDefault()
- const $this = this
- $this.classList.toggle('expand')
- const $parentEle = $this.parentNode.nextElementSibling
- if (btf.isHidden($parentEle)) {
- $parentEle.style.display = 'block'
- } else {
- $parentEle.style.display = 'none'
- }
- })
- })
- }
- }
-
- const switchComments = function () {
- let switchDone = false
- const $switchBtn = document.querySelector('#comment-switch > .switch-btn')
- $switchBtn && $switchBtn.addEventListener('click', function () {
- this.classList.toggle('move')
- document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) {
- if (btf.isHidden(item)) {
- item.style.cssText = 'display: block;animation: tabshow .5s'
- } else {
- item.style.cssText = "display: none;animation: ''"
- }
- })
-
- if (!switchDone && typeof loadOtherComment === 'function') {
- switchDone = true
- loadOtherComment()
- }
+ hideButtons.forEach(item => {
+ item.addEventListener('click', handleClick, { once: true })
})
}
- const addPostOutdateNotice = function () {
- const data = GLOBAL_CONFIG.noticeOutdate
+ const tabsFn = () => {
+ const navTabsElement = document.querySelectorAll('#article-container .tabs')
+ if (!navTabsElement.length) return
+
+ const removeAndAddActiveClass = (elements, detect) => {
+ Array.from(elements).forEach(element => {
+ element.classList.remove('active')
+ if (element === detect || element.id === detect) {
+ element.classList.add('active')
+ }
+ })
+ }
+
+ const addTabNavEventListener = (item, isJustifiedGallery) => {
+ const navClickHandler = function (e) {
+ const target = e.target.closest('button')
+ if (target.classList.contains('active')) return
+ removeAndAddActiveClass(this.children, target)
+ this.classList.remove('no-default')
+ const tabId = target.getAttribute('data-href')
+ const tabContent = this.nextElementSibling
+ removeAndAddActiveClass(tabContent.children, tabId)
+ if (isJustifiedGallery) {
+ btf.removeGlobalFnEvent('igOfTabs', this)
+ const justifiedGalleryItems = tabContent.querySelectorAll(`:scope > #${tabId} .gallery-container`)
+ justifiedGalleryItems.length && addJustifiedGallery(justifiedGalleryItems, this)
+ }
+ }
+ btf.addEventListenerPjax(item.firstElementChild, 'click', navClickHandler)
+ }
+
+ const addTabToTopEventListener = item => {
+ const btnClickHandler = (e) => {
+ const target = e.target.closest('button')
+ if (!target) return
+ btf.scrollToDest(btf.getEleTop(item), 300)
+ }
+ btf.addEventListenerPjax(item.lastElementChild, 'click', btnClickHandler)
+ }
+
+ navTabsElement.forEach(item => {
+ const isJustifiedGallery = !!item.querySelectorAll('.gallery-container')
+ addTabNavEventListener(item, isJustifiedGallery)
+ addTabToTopEventListener(item)
+ })
+ }
+
+ const toggleCardCategory = () => {
+ const cardCategory = document.querySelector('#aside-cat-list.expandBtn')
+ if (!cardCategory) return
+
+ const handleToggleBtn = (e) => {
+ const target = e.target
+ if (target.nodeName === 'I') {
+ e.preventDefault()
+ target.parentNode.classList.toggle('expand')
+ }
+ }
+ btf.addEventListenerPjax(cardCategory, 'click', handleToggleBtn, true)
+ }
+
+ const switchComments = () => {
+ const switchBtn = document.getElementById('switch-btn')
+ if (!switchBtn) return
+ let switchDone = false
+ const commentContainer = document.getElementById('post-comment')
+ const handleSwitchBtn = () => {
+ commentContainer.classList.toggle('move')
+ if (!switchDone) {
+ switchDone = true
+ loadOtherComment()
+ }
+ }
+ btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
+ }
+
+ const addPostOutdateNotice = () => {
+ const { limitDay, messagePrev, messageNext, position } = GLOBAL_CONFIG.noticeOutdate
const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
- if (diffDay >= data.limitDay) {
+ if (diffDay >= limitDay) {
const ele = document.createElement('div')
ele.className = 'post-outdate-notice'
- ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext
+ ele.textContent = `${messagePrev} ${diffDay} ${messageNext}`
const $targetEle = document.getElementById('article-container')
- if (data.position === 'top') {
+ if (position === 'top') {
$targetEle.insertBefore(ele, $targetEle.firstChild)
} else {
$targetEle.appendChild(ele)
@@ -774,7 +826,7 @@ document.addEventListener('DOMContentLoaded', function () {
const unRefreshFn = function () {
window.addEventListener('resize', () => {
adjustMenu(false)
- btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
+ mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close()
})
document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })
@@ -786,7 +838,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (GLOBAL_CONFIG.autoDarkmode) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (saveToLocal.get('theme') !== undefined) return
- e.matches ? modeChangeFn('dark') : modeChangeFn('light')
+ e.matches ? handleThemeChange('dark') : handleThemeChange('light')
})
}
}
@@ -810,16 +862,16 @@ document.addEventListener('DOMContentLoaded', function () {
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
scrollFn()
- const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
- $jgEle.length && runJustifiedGallery($jgEle)
+ btf.removeGlobalFnEvent('justifiedGallery')
+ const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
+ galleryContainer.length && addJustifiedGallery(galleryContainer)
runLightbox()
addTableWrap()
clickFnOfTagHide()
- tabsFn.clickFnOfTabs()
- tabsFn.backToTop()
+ tabsFn()
switchComments()
- document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
+ openMobileMenu()
}
refreshFn()
diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js
index 9ac9f94..9ce7b0e 100644
--- a/source/js/search/algolia.js
+++ b/source/js/search/algolia.js
@@ -39,7 +39,7 @@ window.addEventListener('load', () => {
}
const searchClickFn = () => {
- document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+ btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js
index 47cf84d..0eecff6 100644
--- a/source/js/search/local-search.js
+++ b/source/js/search/local-search.js
@@ -246,10 +246,12 @@ window.addEventListener('load', () => {
const input = document.querySelector('#local-search-input input')
const statsItem = document.getElementById('local-search-stats-wrap')
const $loadingStatus = document.getElementById('loading-status')
+ const isXml = !path.endsWith('json')
const inputEventFunction = () => {
if (!localSearch.isfetched) return
- const searchText = input.value.trim().toLowerCase()
+ let searchText = input.value.trim().toLowerCase()
+ isXml && (searchText = searchText.replace(//g, '>'))
if (searchText !== '') $loadingStatus.innerHTML = ''
const keywords = searchText.split(/[-\s]+/)
const container = document.getElementById('local-search-results')
@@ -259,11 +261,14 @@ window.addEventListener('load', () => {
resultItems = localSearch.getResultItems(keywords)
}
if (keywords.length === 1 && keywords[0] === '') {
- container.classList.add('no-result')
container.textContent = ''
+ statsItem.textContent = ''
} else if (resultItems.length === 0) {
container.textContent = ''
- statsItem.innerHTML = `${languages.hits_empty.replace(/\$\{query}/, searchText)}
`
+ const statsDiv = document.createElement('div')
+ statsDiv.className = 'search-result-stats'
+ statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
+ statsItem.innerHTML = statsDiv.outerHTML
} else {
resultItems.sort((left, right) => {
if (left.includedCount !== right.includedCount) {
@@ -276,7 +281,6 @@ window.addEventListener('load', () => {
const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
- container.classList.remove('no-result')
container.innerHTML = `${resultItems.map(result => result.item).join('')}
`
statsItem.innerHTML = `${stats}
`
window.pjax && window.pjax.refresh(container)
@@ -330,7 +334,7 @@ window.addEventListener('load', () => {
}
const searchClickFn = () => {
- document.querySelector('#search-button > .search').addEventListener('click', openSearch)
+ btf.addEventListenerPjax(document.querySelector('#search-button > .search'), 'click', openSearch)
}
const searchFnOnce = () => {
diff --git a/source/js/tw_cn.js b/source/js/tw_cn.js
index c27db8f..15d8d15 100644
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', function () {
return Traditionalized(txt)
} else return txt
}
+
function translateBody (fobj) {
let objs
if (typeof fobj === 'object') objs = fobj.childNodes
@@ -107,9 +108,15 @@ document.addEventListener('DOMContentLoaded', function () {
setLang()
setTimeout(translateBody, translateDelay)
}
- translateButtonObject.addEventListener('click', translatePage, false)
}
}
+
+ window.translateFn = {
+ translatePage,
+ Traditionalized,
+ Simplized
+ }
+
translateInitialization()
document.addEventListener('pjax:complete', translateInitialization)
})
diff --git a/source/js/utils.js b/source/js/utils.js
index adff39c..2c8242c 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,38 +1,35 @@
const btf = {
- debounce: function (func, wait, immediate) {
+ debounce: (func, wait = 0, immediate = false) => {
let timeout
- return function () {
- const context = this
- const args = arguments
- const later = function () {
+ return (...args) => {
+ const later = () => {
timeout = null
- if (!immediate) func.apply(context, args)
+ if (!immediate) func(...args)
}
const callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
- if (callNow) func.apply(context, args)
+ if (callNow) func(...args)
}
},
- throttle: function (func, wait, options) {
+ throttle: function (func, wait, options = {}) {
let timeout, context, args
let previous = 0
- if (!options) options = {}
- const later = function () {
+ const later = () => {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
- const throttled = function () {
+ const throttled = (...params) => {
const now = new Date().getTime()
if (!previous && options.leading === false) previous = now
const remaining = wait - (now - previous)
context = this
- args = arguments
+ args = params
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
@@ -155,27 +152,6 @@ const btf = {
ele.style.animation = text
},
- getParents: (elem, selector) => {
- for (; elem && elem !== document; elem = elem.parentNode) {
- if (elem.matches(selector)) return elem
- }
- return null
- },
-
- siblings: (ele, selector) => {
- return [...ele.parentNode.children].filter((child) => {
- if (selector) {
- return child !== ele && child.matches(selector)
- }
- return child !== ele
- })
- },
-
- /**
- * @param {*} selector
- * @param {*} eleType the type of create element
- * @param {*} options object key: value
- */
wrap: (selector, eleType, options) => {
const createEle = document.createElement(eleType)
for (const [key, value] of Object.entries(options)) {
@@ -185,13 +161,6 @@ const btf = {
createEle.appendChild(selector)
},
- unwrap: el => {
- const parent = el.parentNode
- if (parent && parent !== document.body) {
- parent.replaceChild(el, parent)
- }
- },
-
isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0,
getEleTop: ele => {
@@ -214,7 +183,7 @@ const btf = {
}
if (service === 'fancybox') {
- ele.forEach(i => {
+ Array.from(ele).forEach(i => {
if (i.parentNode.tagName !== 'A') {
const dataSrc = i.dataset.lazySrc || i.src
const dataCaption = i.title || i.alt || ''
@@ -257,22 +226,20 @@ const btf = {
}
},
- initJustifiedGallery: function (selector) {
- const runJustifiedGallery = i => {
- if (!btf.isHidden(i)) {
- fjGallery(i, {
- itemSelector: '.fj-gallery-item',
- rowHeight: i.getAttribute('data-rowHeight'),
- gutter: 4,
- onJustify: function () {
- this.$container.style.opacity = '1'
- }
- })
- }
+ setLoading: {
+ add: ele => {
+ const html = `
+
+
+ `
+ ele.insertAdjacentHTML('afterend', html)
+ },
+ remove: ele => {
+ ele.nextElementSibling.remove()
}
-
- if (Array.from(selector).length === 0) runJustifiedGallery(selector)
- else selector.forEach(i => { runJustifiedGallery(i) })
},
updateAnchor: (anchor) => {
@@ -297,11 +264,33 @@ const btf = {
return percentage
},
- addModeChange: (name, fn) => {
- if (window.themeChange && window.themeChange[name]) return
- window.themeChange = {
- ...window.themeChange,
- [name]: fn
- }
+ addGlobalFn: (key, fn, name = false, parent = window) => {
+ const globalFn = parent.globalFn || {}
+ const keyObj = globalFn[key] || {}
+
+ if (name && keyObj[name]) return
+
+ name = name || Object.keys(keyObj).length
+ keyObj[name] = fn
+ globalFn[key] = keyObj
+ parent.globalFn = globalFn
+ },
+
+ addEventListenerPjax: (ele, event, fn, option = false) => {
+ ele.addEventListener(event, fn, option)
+ btf.addGlobalFn('pjax', () => {
+ ele.removeEventListener(event, fn, option)
+ })
+ },
+
+ removeGlobalFnEvent: (key, parent = window) => {
+ const { globalFn = {} } = parent
+ const keyObj = globalFn[key] || {}
+ const keyArr = Object.keys(keyObj)
+ if (!keyArr.length) return
+ keyArr.forEach(i => {
+ keyObj[i]()
+ })
+ delete parent.globalFn[key]
}
}
+
+
+