${array[i].nick}
+ ${array[i].nick} /
.*?<\/code>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
- content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
- content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
@@ -26,8 +27,8 @@ script.
'date': item.createdAt
}
})
- // set expiry to 10 min
- saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
+
+ saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), !{theme.newest_comments.storage}/(60*24))
generateHtml(disqusArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
@@ -43,10 +44,7 @@ script.
result += ''
if (!{theme.newest_comments.avatar}) {
- let name = 'src'
- if(!{theme.lazyload.enable}) {
- name = 'data-lazy-src'
- }
+ const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
result += `![${array[i].nick}]()
`
}
diff --git a/layout/includes/third-party/newest-comments/github-issues.pug b/layout/includes/third-party/newest-comments/github-issues.pug
index 03bb331..e561f95 100644
--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -3,9 +3,10 @@ script.
const changeContent = (content) => {
if (content === '') return content
+ content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+ content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+ content = content.replace(/.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
- content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
- content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
@@ -13,21 +14,50 @@ script.
return content
}
+ const findTrueUrl = (array) => {
+ let url = ''
+ Promise.all(array.map(item =>
+ fetch(item.url).then(resp => resp.json()).then(data => {
+ if (data.user.login === 'utterances-bot') {
+ url = data.body.match(/https?\:\/\/[^\" ]+/ig).slice(-1)
+ return url[0]
+ } else {
+ url = data.body.match(/https?\:\/\/[^\" ]+/i)
+ return url[0]
+ }
+ })
+ )).then(res => {
+ array = array.map((i,index)=> {
+ return {
+ ...i,
+ url: res[index]
+ }
+ })
+
+ saveToLocal.set('github-newest-comments', JSON.stringify(array), !{theme.newest_comments.storage}/(60*24))
+ generateHtml(array)
+ });
+ }
+
const getComment = () => {
- fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1')
+ fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1',{
+ "headers": {
+ Accept: 'application/vnd.github.v3.html+json'
+ }
+ })
.then(response => response.json())
.then(data => {
const githubArray = data.map(item => {
return {
'avatar': item.user.avatar_url,
- 'content': changeContent(item.body),
+ 'content': changeContent(item.body_html),
'nick': item.user.login,
- 'url': item.html_url,
- 'date': item.updated_at
+ 'url': item.issue_url,
+ 'date': item.updated_at,
+ 'githubUrl': item.html_url
}
})
- saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
- generateHtml(githubArray)
+ findTrueUrl(githubArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
@@ -42,16 +72,13 @@ script.
result += ''
if (!{theme.newest_comments.avatar}) {
- let name = 'src'
- if(!{theme.lazyload.enable}) {
- name = 'data-lazy-src'
- }
- result += `![${array[i].nick}]()
`
+ const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+ result += `![${array[i].nick}]()
`
}
result += ``
}
} else {
diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug
index 13fdea4..d8cea8c 100644
--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug
@@ -3,9 +3,10 @@ script.
const changeContent = (content) => {
if (content === '') return content
+ content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+ content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+ content = content.replace(/.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
- content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
- content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
@@ -21,8 +22,18 @@ script.
pageSize: !{theme.newest_comments.limit},
includeReply: true
}).then(function (res) {
- saveToLocal.set('twikoo-newest-comments', JSON.stringify(res), 10/(60*24))
- generateHtml(res)
+ const twikooArray = res.map(e => {
+ return {
+ 'content': changeContent(e.comment),
+ 'avatar': e.avatar,
+ 'nick': e.nick,
+ 'url': e.url + '#' + e.id,
+ 'date': new Date(e.created).toISOString()
+ }
+ })
+
+ saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), !{theme.newest_comments.storage}/(60*24))
+ generateHtml(twikooArray)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
@@ -44,16 +55,13 @@ script.
result += ''
if (!{theme.newest_comments.avatar}) {
- let name = 'src'
- if(!{theme.lazyload.enable}) {
- name = 'data-lazy-src'
- }
- result += `![${array[i].nick}]()
`
+ const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+ result += `![${array[i].nick}]()
`
}
result += `
- ${changeContent(array[i].commentText)}
- ${array[i].nick}
+ ${array[i].content}
+ ${array[i].nick} /
`
}
} else {
diff --git a/layout/includes/third-party/newest-comments/valine.pug b/layout/includes/third-party/newest-comments/valine.pug
index 98c195d..809da74 100644
--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/layout/includes/third-party/newest-comments/valine.pug
@@ -6,9 +6,10 @@ script.
const changeContent = (content) => {
if (content === '') return content
+ content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+ content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+ content = content.replace(/.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
- content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
- content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
@@ -18,7 +19,6 @@ script.
const getIcon = (icon, mail) => {
if (icon) return icon
-
let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
return iconUrl
@@ -32,16 +32,13 @@ script.
result += ''
if (!{theme.newest_comments.avatar}) {
- let name = 'src'
- if(!{theme.lazyload.enable}) {
- name = 'data-lazy-src'
- }
- result += `![${array[i].nick}]()
`
+ const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+ result += `![${array[i].nick}]()
`
}
result += ``
}
} else {
@@ -55,12 +52,7 @@ script.
}
const getComment = () => {
- let serverURL = ''
- if (!{Boolean(theme.valine.serverURLs)}) {
- serverURL = '!{theme.valine.serverURLs}'
- } else {
- serverURL = 'https://!{theme.valine.appId.substring(0,8)}.api.lncldglobal.com'
- }
+ const serverURL = '!{theme.valine.serverURLs || `https://${theme.valine.appId.substring(0,8)}.api.lncldglobal.com` }'
var settings = {
"method": "GET",
@@ -76,15 +68,14 @@ script.
.then(data => {
const valineArray = data.results.map(function (e) {
return {
- 'avatar': e.QQAvatar,
+ 'avatar': getIcon(e.QQAvatar, e.mail),
'content': changeContent(e.comment),
- 'mail': e.mail,
'nick': e.nick,
'url': e.url + '#' + e.objectId,
- 'date': e.createdAt,
+ 'date': e.updatedAt,
}
})
- saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
+ saveToLocal.set('valine-newest-comments', JSON.stringify(valineArray), !{theme.newest_comments.storage}/(60*24))
generateHtml(valineArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
@@ -94,7 +85,7 @@ script.
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
- const data = saveToLocal.get('leancloud-newest-comments')
+ const data = saveToLocal.get('valine-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug
index c99abc2..8a09847 100644
--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/layout/includes/third-party/newest-comments/waline.pug
@@ -5,9 +5,10 @@ script.
const changeContent = (content) => {
if (content === '') return content
+ content = content.replace(/]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
+ content = content.replace(/]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[!{_p("aside.card_newest_comments.link")}]') // replace url
+ content = content.replace(/.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
- content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
- content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
@@ -15,7 +16,8 @@ script.
return content
}
- const getIcon = (mail) => {
+ const getIcon = (avatar,mail) => {
+ if (avatar) return avatar
let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
let iconUrl = `https://gravatar.loli.net/avatar/${mail + defaultIcon}`
return iconUrl
@@ -29,16 +31,13 @@ script.
result += ''
if (!{theme.newest_comments.avatar}) {
- let name = 'src'
- if(!{theme.lazyload.enable}) {
- name = 'data-lazy-src'
- }
- result += `![${array[i].nick}]()
`
+ const name = '!{theme.lazyload.enable ? "data-lazy-src" : "src"}'
+ result += `![${array[i].nick}]()
`
}
result += ``
}
} else {
@@ -61,13 +60,13 @@ script.
const walineArray = comments.map(function (e) {
return {
'content': changeContent(e.comment),
- 'mail': e.mail,
+ 'avatar': getIcon(e.QQAvatar,e.mail),
'nick': e.nick,
'url': e.url + '#' + e.objectId,
- 'date': e.createdAt,
+ 'date': e.updatedAt,
}
})
- saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10/(60*24))
+ saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
generateHtml(walineArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug
index e61305f..7ac1395 100644
--- a/layout/includes/third-party/pangu.pug
+++ b/layout/includes/third-party/pangu.pug
@@ -1,10 +1,10 @@
script.
function panguFn () {
- if (typeof pangu === 'object') pangu.spacingElementById('content-inner')
+ if (typeof pangu === 'object') pangu.autoSpacingPage()
else {
getScript('!{url_for(theme.CDN.pangu)}')
.then(() => {
- pangu.spacingElementById('content-inner')
+ pangu.autoSpacingPage()
})
}
}
diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug
index 0d41660..92c389c 100644
--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -7,7 +7,7 @@ script(src=url_for(theme.CDN.pjax))
script.
let pjaxSelectors = [
'title',
- '#config_change',
+ '#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
@@ -78,3 +78,9 @@ script.
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
})
+
+ document.addEventListener('pjax:error', (e) => {
+ if (e.request.status === 404) {
+ pjax.loadUrl('/404.html')
+ }
+ })
diff --git a/layout/includes/third-party/share/index.pug b/layout/includes/third-party/share/index.pug
index 41892a6..f28ceab 100644
--- a/layout/includes/third-party/share/index.pug
+++ b/layout/includes/third-party/share/index.pug
@@ -1,7 +1,7 @@
.post_share
if theme.addThis.enable
- !=partial('includes/third-party/share/add-this', {}, {cache:theme.fragment_cache})
+ !=partial('includes/third-party/share/add-this', {}, {cache: true})
else if theme.sharejs.enable
include ./share-js.pug
else if theme.addtoany.enable
- !=partial('includes/third-party/share/addtoany', {}, {cache:theme.fragment_cache})
+ !=partial('includes/third-party/share/addtoany', {}, {cache: true})
diff --git a/layout/includes/widget/card_archives.pug b/layout/includes/widget/card_archives.pug
index 1080e28..bb0e78e 100644
--- a/layout/includes/widget/card_archives.pug
+++ b/layout/includes/widget/card_archives.pug
@@ -1,9 +1,5 @@
if theme.aside.card_archives.enable
.card-widget.card-archives
- .item-headline
- i.fas.fa-archive
- span= _p('aside.card_archives')
-
- let type = theme.aside.card_archives.type || 'monthly'
- let format = theme.aside.card_archives.format || 'MMMM YYYY'
- let order = theme.aside.card_archives.order || -1
diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug
index 4f69e2f..529ea55 100644
--- a/layout/includes/widget/card_categories.pug
+++ b/layout/includes/widget/card_categories.pug
@@ -1,7 +1,4 @@
if theme.aside.card_categories.enable
if site.categories.length
.card-widget.card-categories
- .item-headline
- i.fas.fa-folder-open
- span= _p('aside.card_categories')
!=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug
index 10dd161..a37b066 100644
--- a/layout/includes/widget/index.pug
+++ b/layout/includes/widget/index.pug
@@ -5,23 +5,23 @@
.sticky_layout
include ./card_post_toc.pug
else
- !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+ !=partial('includes/widget/card_author', {}, {cache: true})
+ !=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
- !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+ !=partial('includes/widget/card_recent_post', {}, {cache: true})
+ !=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
- !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+ !=partial('includes/widget/card_author', {}, {cache: true})
+ !=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
- !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
- !=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache})
\ No newline at end of file
+ !=partial('includes/widget/card_recent_post', {}, {cache: true})
+ !=partial('includes/widget/card_ad', {}, {cache: true})
+ !=partial('includes/widget/card_newest_comment', {}, {cache: true})
+ !=partial('includes/widget/card_categories', {}, {cache: true})
+ !=partial('includes/widget/card_tags', {}, {cache: true})
+ !=partial('includes/widget/card_archives', {}, {cache: true})
+ !=partial('includes/widget/card_webinfo', {}, {cache: true})
+ !=partial('includes/widget/card_self', {}, {cache: true})
\ No newline at end of file
diff --git a/layout/page.pug b/layout/page.pug
index 474580d..7287546 100644
--- a/layout/page.pug
+++ b/layout/page.pug
@@ -16,4 +16,4 @@ block content
if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
- !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
\ No newline at end of file
+ !=partial('includes/third-party/comments/index', {}, {cache: true})
\ No newline at end of file
diff --git a/layout/post.pug b/layout/post.pug
index 7249b9f..a5399b2 100644
--- a/layout/post.pug
+++ b/layout/post.pug
@@ -15,17 +15,18 @@ block content
include includes/third-party/share/index.pug
if theme.reward.enable
- !=partial('includes/post/reward', {}, {cache:theme.fragment_cache})
+ !=partial('includes/post/reward', {}, {cache: true})
//- ad
if theme.ad && theme.ad.post
.ads-wrap!=theme.ad.post
- include includes/pagination.pug
+ if theme.post_pagination
+ include includes/pagination.pug
if theme.related_post && theme.related_post.enable
!= related_posts(page,site.posts)
if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
- !=partial('includes/third-party/comments/index', {}, {cache:theme.fragment_cache})
+ !=partial('includes/third-party/comments/index', {}, {cache: true})
\ No newline at end of file
diff --git a/package.json b/package.json
index 2b6d80d..3ae4979 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "hexo-theme-butterfly",
- "version": "3.5.1",
+ "version": "3.6.0",
"description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json",
"scripts": {
@@ -20,13 +20,13 @@
},
"bugs": {
"url": "https://github.com/jerryc127/hexo-theme-butterfly/issues",
- "email": "wong@jerryc.me"
+ "email": "btf@immyw.com"
},
"dependencies": {
"hexo-renderer-stylus": "^2.0.1",
"hexo-renderer-pug": "^1.0.0"
},
"homepage": "https://butterfly.js.org/",
- "author": "Jerry ",
+ "author": "Jerry ",
"license": "Apache-2.0"
}
diff --git a/scripts/helpers/aside_archives.js b/scripts/helpers/aside_archives.js
index 9112306..779c1d4 100644
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -19,7 +19,6 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
: (yearA, monthA, yearB, monthB) => yearA === yearB
const limit = options.limit
- const moreButton = this._p('aside.more_button')
let result = ''
if (!format) {
@@ -67,11 +66,18 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
return this.url_for(url)
}
- result += ''
-
const len = data.length
const Judge = limit === 0 ? len : Math.min(len, limit)
+ result += `${this._p('aside.card_archives')}`
+
+ if (len > Judge) {
+ result += `
+ `
+ }
+
+ result += ''
+
for (let i = 0; i < Judge; i++) {
const item = data[i]
@@ -89,11 +95,6 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {
result += ''
}
- if (len > Judge) {
- result += '- '
- result += `
- ${moreButton}
`
- }
result += '
'
return result
})
diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js
index bb83de5..0e60b8e 100644
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -25,7 +25,6 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
const limit = options.limit === 0 ? categories.length : options.limit
const isExpand = options.expand !== 'none'
const expandClass = isExpand && options.expand === true ? 'expand' : ''
-
const buttonLabel = this._p('aside.more_button')
const prepareQuery = (parent) => {
const query = {}
@@ -80,17 +79,19 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
const list = hierarchicalList(limit, 0)
const moreButton = function () {
- let moreHtml = ''
if (categories.length <= limit) return ''
- moreHtml += '- '
- moreHtml += `
- ${buttonLabel}
`
+ const moreHtml = `
+ `
return moreHtml
}
- return `
- ${list[0]}
+ return `
+
+ ${this._p('aside.card_categories')}
${moreButton()}
+
+
+ ${list[0]}
`
})
diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js
new file mode 100644
index 0000000..93f714d
--- /dev/null
+++ b/scripts/helpers/inject_head_js.js
@@ -0,0 +1,145 @@
+/**
+ * Butterfly
+ * inject js to head
+ */
+
+'use strict'
+
+hexo.extend.helper.register('inject_head_js', function () {
+ const { darkmode, aside, change_font_size } = this.theme
+
+ 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,
+ }
+ 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)
+ })
+ `
+
+ let darkmodeJs = ''
+ if (darkmode.enable) {
+ darkmodeJs = `
+ win.activateDarkMode = function () {
+ document.documentElement.setAttribute('data-theme', 'dark')
+ if (document.querySelector('meta[name="theme-color"]') !== null) {
+ document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
+ }
+ }
+ win.activateLightMode = function () {
+ document.documentElement.setAttribute('data-theme', 'light')
+ if (document.querySelector('meta[name="theme-color"]') !== null) {
+ document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
+ }
+ }
+ const t = saveToLocal.get('theme')
+ `
+
+ const autoChangeMode = darkmode.autoChangeMode
+
+ if (autoChangeMode === 1) {
+ darkmodeJs += `
+ const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+ const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
+ const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
+ const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+ if (t === undefined) {
+ if (isLightMode) activateLightMode()
+ else if (isDarkMode) activateDarkMode()
+ else if (isNotSpecified || hasNoSupport) {
+ const now = new Date()
+ const hour = now.getHours()
+ const isNight = hour <= 6 || hour >= 18
+ isNight ? activateDarkMode() : activateLightMode()
+ }
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+ if (saveToLocal.get('theme') === undefined) {
+ e.matches ? activateDarkMode() : activateLightMode()
+ }
+ })
+ } else if (t === 'light') activateLightMode()
+ else activateDarkMode()
+ `
+ } else if (autoChangeMode === 2) {
+ darkmodeJs += `
+ const now = new Date()
+ const hour = now.getHours()
+ const isNight = hour <= 6 || hour >= 18
+ if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
+ else if (t === 'light') activateLightMode()
+ else activateDarkMode()
+ `
+ } else {
+ darkmodeJs += `
+ if (t === 'dark') activateDarkMode()
+ else if (t === 'light') activateLightMode()
+ `
+ }
+ }
+
+ let asideStatus = ''
+ if (aside.enable && aside.button) {
+ asideStatus = `
+ const asideStatus = saveToLocal.get('aside-status')
+ if (asideStatus !== undefined) {
+ if (asideStatus === 'hide') {
+ document.documentElement.classList.add('hide-aside')
+ } else {
+ document.documentElement.classList.remove('hide-aside')
+ }
+ }
+ `
+ }
+
+ let changFontAside = ''
+ if (change_font_size) {
+ changFontAside = `
+ const fontSizeVal = saveToLocal.get('global-font-size')
+ if (fontSizeVal !== undefined) {
+ document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
+ }
+ `
+ }
+
+ return ``
+})
diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js
index fd44158..3042d95 100644
--- a/scripts/helpers/page.js
+++ b/scripts/helpers/page.js
@@ -15,7 +15,7 @@ hexo.extend.helper.register('page_description', function () {
let description = page.description || page.content || page.title || config.description
if (description) {
- description = escapeHTML(stripHTML(description).substring(0, 200)
+ description = escapeHTML(stripHTML(description).substring(0, 150)
.trim()
).replace(/\n/g, ' ')
return description
@@ -54,8 +54,8 @@ hexo.extend.helper.register('cloudTags', function (options = {}) {
return result
})
-hexo.extend.helper.register('urlNoIndex', function () {
- return prettyUrls(this.url, { trailing_index: false, trailing_html: false })
+hexo.extend.helper.register('urlNoIndex', function (url = null) {
+ return prettyUrls(url || this.url, { trailing_index: false, trailing_html: false })
})
hexo.extend.helper.register('md5', function (path) {
diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl
index e77ff53..a8c1063 100644
--- a/source/css/_global/function.styl
+++ b/source/css/_global/function.styl
@@ -127,6 +127,7 @@ if hexo-config('avatar.effect') == true
transform: translateY(50px)
100%
+ filter: none
opacity: 1
transform: translateY(0)
diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl
index d06931e..71fc5f1 100644
--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -27,6 +27,8 @@
--blockquote-bg: $blockquote-background-color
--reward-pop: $reward-pop-up-bg
--toc-link-color: $toc-link-color
+ --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .06)
+ --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .15)
html
height: 100%
diff --git a/source/css/_layout/404.styl b/source/css/_layout/404.styl
index e7cedcb..e9a8610 100644
--- a/source/css/_layout/404.styl
+++ b/source/css/_layout/404.styl
@@ -18,7 +18,11 @@ if hexo-config('error_404.enable')
height: 18rem
border-radius: 8px
background: var(--card-bg)
- box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ box-shadow: var(--card-box-shadow)
+ transition: all .3s
+
+ &:hover
+ box-shadow: var(--card-hover-box-shadow)
+maxWidth768()
flex-direction: column
@@ -45,6 +49,7 @@ if hexo-config('error_404.enable')
padding: .5rem
text-align: center
font-size: 14px
+
if $site-name-font
font-family: $site-name-font
diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl
index a55880c..cee1701 100644
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -23,11 +23,11 @@
padding: 1rem 1.2rem
border-radius: 8px
background: var(--card-bg)
- box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ box-shadow: var(--card-box-shadow)
transition: box-shadow .3s
&:hover
- box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+ box-shadow: var(--card-hover-box-shadow)
if hexo-config('aside.mobile') == false
+maxWidth768()
@@ -110,6 +110,7 @@
position: sticky
position: -webkit-sticky
top: 20px
+ transition: top .3s
.card-tag-cloud
a
@@ -213,16 +214,6 @@
width: 20%
text-align: right
- &.more
- span
- padding-right: .3rem
- width: auto !important
- transition: .5s
-
- &:hover
- span
- padding-right: .6rem
-
.card-categories
.card-category-list
&.child
@@ -333,6 +324,21 @@
> .card-widget
margin-top: 0
+ .card-more-btn
+ float: right
+ color: inherit
+
+ &:hover
+ animation: more-btn-move 1s infinite
+
+@keyframes more-btn-move
+ 0%,
+ 100%
+ transform: translateX(0)
+
+ 50%
+ transform: translateX(3px)
+
@keyframes toc-open
0%
transform: scale(.7)
diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
index b081f93..37ca649 100644
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -69,7 +69,7 @@
font-size: 30px
// page
- &.not-index-bg
+ &.not-home-page
height: 20rem
+maxWidth768()
@@ -101,19 +101,6 @@
background-color: alpha($dark-black, .5)
content: ''
- &.no-top-img
- margin-bottom: .5rem
- height: 60px
- background: 0
-
- #nav
- background: rgba(255, 255, 255, .8)
- box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
-
- a
- color: var(--font-color)
- text-shadow: none
-
#post-info
position: absolute
bottom: 5rem
@@ -129,6 +116,75 @@
bottom: 1.1rem
padding: 0 1.1rem
+ &.not-top-img
+ margin-bottom: .5rem
+ height: 60px
+ background: 0
+
+ #nav
+ background: rgba(255, 255, 255, .8)
+ box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
+
+ a
+ color: var(--font-color)
+ text-shadow: none
+
+ &.nav-fixed
+ #nav
+ position: fixed
+ top: -60px
+ z-index: 91
+ background: rgba(255, 255, 255, .8)
+ box-shadow: 0 5px 6px -5px alpha($grey, .6)
+ transition: transform .2s ease-in-out, opacity .2s ease-in-out
+
+ a,
+ #site-name,
+ #toggle-menu
+ color: var(--font-color)
+ text-shadow: none
+
+ &:hover
+ color: $light-blue
+
+ &.nav-visible
+ #nav
+ transition: all .5s
+ transform: translate3d(0, 100%, 0)
+
+ & + .layout
+ & > .aside-content > .sticky_layout
+ top: 70px
+ transition: top .5s
+
+// css hack
+// all browser in ios and safari in all apple device
+_::-webkit-full-page-media,
+_:future,
+:root #page-header.full_page
+ background-attachment: scroll !important
+
+#page
+ h1.page-title
+ margin: .4rem 0 1rem
+
+// for not top_img
+#post
+ & > #post-info
+ margin-bottom: 1.5rem
+
+ .post-title
+ padding-bottom: .2rem
+ border-bottom: 1px solid var(--light-grey)
+ color: var(--text-highlight-color)
+
+ .post-edit-link
+ float: right
+
+ #post-meta,
+ #post-meta a
+ color: #78818a
+
#post-info
.post-title
@extend .limit-more-line
@@ -142,6 +198,9 @@
+maxWidth768()
font-size: 1.72em
+ .post-edit-link
+ padding-left: .5rem
+
#post-meta
color: var(--light-grey)
font-size: 95%
@@ -183,27 +242,6 @@
time
display: none
-// for not top_img
-#post
- & > #post-info
- margin-bottom: 1.5rem
-
- .post-title
- padding-bottom: .2rem
- border-bottom: 1px solid var(--light-grey)
- color: var(--text-highlight-color)
-
- #post-meta,
- #post-meta a
- color: #78818a
-
-// css hack
-// all browser in ios and safari in all apple device
-_::-webkit-full-page-media,
-_:future,
-:root #page-header.full_page
- background-attachment: scroll !important
-
#nav
position: absolute
top: 0
@@ -221,10 +259,6 @@ _:future,
+maxWidth768()
padding: 0 16px
- &:not(.fixed)
- #menus
- padding-right: 0 !important
-
&.show
opacity: 1
@@ -245,27 +279,6 @@ _:future,
&:hover
color: var(--white)
- &.fixed
- position: fixed
- top: -60px
- z-index: 91
- background: rgba(255, 255, 255, .8)
- box-shadow: 0 5px 6px -5px alpha($grey, .6)
- transition: transform .2s ease-in-out, opacity .2s ease-in-out
-
- a,
- #site-name,
- #toggle-menu
- color: var(--font-color)
- text-shadow: none
-
- &:hover
- color: $light-blue
-
- &.visible
- transition: all .5s
- transform: translate3d(0, 100%, 0)
-
#site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
@@ -335,8 +348,8 @@ _:future,
display: inline-block
padding: .3rem .7rem
width: 100%
- color: var(--font-color)
- text-shadow: none
+ color: var(--font-color) !important
+ text-shadow: none !important
&.hide-menu
#toggle-menu
@@ -363,4 +376,4 @@ _:future,
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
- cursor: pointer
\ No newline at end of file
+ cursor: pointer
diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl
index b792a06..aee8aca 100644
--- a/source/css/_layout/pagination.styl
+++ b/source/css/_layout/pagination.styl
@@ -75,5 +75,5 @@
transform: scale(1.1)
&.pagination-post
- margin: 2rem 0 !important
+ margin-top: 2rem
background: $dark-black
\ No newline at end of file
diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
index 5c2ad25..bce034a 100644
--- a/source/css/_layout/post.styl
+++ b/source/css/_layout/post.styl
@@ -152,6 +152,7 @@ no-beautify()
text-decoration: underline
img
+ display: block
margin: 0 auto .8rem
p
@@ -171,9 +172,6 @@ no-beautify()
no-beautify()
#post
- img
- display: block
-
.tag_share
.post-meta
&__tag-list
@@ -218,24 +216,13 @@ no-beautify()
transition: box-shadow .3s ease-in-out
&:before
+ @extend .fontawesomeIcon
position: absolute
- top: t = .5rem
- right: t
- width: w = .8rem
- height: w
- border-radius: w
- background: $light-blue
- content: ''
-
- &:after
- position: absolute
- top: t = .7rem
- right: t
- width: w = .4rem
- height: w
- border-radius: w
- background: var(--card-bg)
- content: ''
+ top: .1rem
+ right: .6rem
+ color: $theme-color
+ content: '\f1f9'
+ font-size: 1rem
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl
index b296917..5d69ec5 100644
--- a/source/css/_layout/relatedposts.styl
+++ b/source/css/_layout/relatedposts.styl
@@ -1,5 +1,5 @@
.relatedPosts
- margin-top: 1rem
+ margin-top: 2rem
& > .headline
margin-bottom: 5px
diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl
index b5d5717..ba91955 100644
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -12,60 +12,58 @@
cursor: pointer
transition: all .4s
- &:hover
- box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
+ &:hover
+ & > .reward-main
+ display: block
- .reward-main
- display: block
+ .reward-main
+ position: absolute
+ bottom: 40px
+ left: 0
+ z-index: 100
+ display: none
+ padding: 0 0 15px
+ width: 100%
- .reward-main
- position: absolute
- bottom: 40px
- left: 0
- z-index: 100
- display: none
- padding: 0 0 15px
- width: 100%
+ .reward-all
+ display: inline-block
+ margin: 0
+ padding: 1rem .5rem
+ border-radius: 4px
+ background: var(--reward-pop)
- .reward-all
+ &:before
+ position: absolute
+ bottom: -10px
+ left: 0
+ width: 100%
+ height: 20px
+ content: ''
+
+ &:after
+ position: absolute
+ right: 0
+ bottom: 2px
+ left: 0
+ margin: 0 auto
+ width: 0
+ height: 0
+ border-top: 13px solid var(--reward-pop)
+ border-right: 13px solid transparent
+ border-left: 13px solid transparent
+ content: ''
+
+ .reward-item
display: inline-block
- margin: 0
- padding: 1rem .5rem
- border-radius: 4px
- background: var(--reward-pop)
+ padding: 0 8px
+ list-style-type: none
+ vertical-align: top
- &:before
- position: absolute
- bottom: -10px
- left: 0
- width: 100%
- height: 20px
- content: ''
+ img
+ width: 130px
+ height: 130px
- &:after
- position: absolute
- right: 0
- bottom: 2px
- left: 0
- margin: 0 auto
- width: 0
- height: 0
- border-top: 13px solid var(--reward-pop)
- border-right: 13px solid transparent
- border-left: 13px solid transparent
- content: ''
-
- .reward-item
- display: inline-block
- padding: 0 8px
- list-style-type: none
- vertical-align: top
-
- img
- width: 130px
- height: 130px
-
- .post-qr-code-desc
- padding-top: .4rem
- width: 130px
- color: $reward-pop-up-color
+ .post-qr-code-desc
+ padding-top: .4rem
+ width: 130px
+ color: $reward-pop-up-color
diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl
index 39d1299..05678c2 100644
--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -24,7 +24,6 @@
color: var(--btn-color)
text-align: center
font-size: 16px
- cursor: pointer
&:hover
background-color: var(--btn-hover-color)
diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl
index 334c4a4..af709f3 100644
--- a/source/css/_layout/third-party.styl
+++ b/source/css/_layout/third-party.styl
@@ -10,10 +10,6 @@
&:hover
background: var(--btn-hover-color)
- textarea
- &:focus
- background-image: none
-
.vimg
transition: all .3s
@@ -30,11 +26,17 @@ if hexo-config('valine.bg')
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+ &:focus
+ background-image: none
+
if hexo-config('waline.bg')
#waline-wrap
textarea
background: url(hexo-config('waline.bg')) 100% 100% no-repeat
+ &:focus
+ background-image: none
+
.fireworks
position: fixed
top: 0
diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl
index ee5a28b..ad4b4de 100644
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -53,8 +53,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
// 頭部
#page-header
- & > #nav.fixed,
- &.no-top-img #nav
+ &.nav-fixed > #nav,
+ &.not-top-img > #nav
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl
index b1ee497..dbe2308 100644
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -38,9 +38,7 @@ if hexo-config('readmode')
border-radius: 8px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
- text-align: center
font-size: 16px
- cursor: pointer
transition: background .3s
&:hover
@@ -49,9 +47,6 @@ if hexo-config('readmode')
#aside-content
display: none
- #body-wrap
- padding-left: 0 !important
-
#page-header.post-bg
background-color: transparent
background-image: none !important
@@ -60,7 +55,6 @@ if hexo-config('readmode')
opacity: 0
& > #post-info
- padding: 0
text-align: center
#post
@@ -81,7 +75,7 @@ if hexo-config('readmode')
.post-outdate-notice,
#web_bg,
#rightside,
- .no-top-img
+ .not-top-img
display: none !important
#article-container
@@ -90,7 +84,7 @@ if hexo-config('readmode')
pre,
.highlight:not(.js-file-line-container)
- background: var(-highlight-bg) !important
+ background: var(--highlight-bg) !important
*
color: var(--font-color) !important
@@ -196,4 +190,8 @@ if hexo-config('readmode')
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color) !important
- color: var(--font-color)
\ No newline at end of file
+ color: var(--font-color)
+
+ &:before,
+ .note-icon
+ color: var(--font-color)
diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl
index d28abdd..5868fb9 100644
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -18,10 +18,10 @@
padding: 50px 40px
border-radius: 8px
background: var(--card-bg)
- box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ box-shadow: var(--card-box-shadow)
&:hover
- box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+ box-shadow: var(--card-hover-box-shadow)
+maxWidth768()
padding: 1.8rem .7rem !important
@@ -47,6 +47,6 @@
& > div
width: 100% !important
-#page
- h1.page-title
- margin-top: .4rem
\ No newline at end of file
+// fix chrome enter animation blur
+.layout
+ filter: blur(0)
\ No newline at end of file
diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl
index b37d26e..f7e9280 100644
--- a/source/css/_page/flink.styl
+++ b/source/css/_page/flink.styl
@@ -1,76 +1,77 @@
-.flink#article-container
- .flink-desc
- margin: .2rem 0 .5rem
+#article-container
+ .flink
+ .flink-desc
+ margin: .2rem 0 .5rem
- .flink-list
- overflow: auto
- padding: 10px 10px 0
- text-align: center
+ .flink-list
+ overflow: auto
+ padding: 10px 10px 0
+ text-align: center
- & > .flink-list-item
- position: relative
- float: left
- overflow: hidden
- margin: 15px 7px
- width: calc(100% / 3 - 15px)
- height: 90px
- border-radius: 8px
- line-height: 17px
- -webkit-transform: translateZ(0)
+ & > .flink-list-item
+ position: relative
+ float: left
+ overflow: hidden
+ margin: 15px 7px
+ width: calc(100% / 3 - 15px)
+ height: 90px
+ border-radius: 8px
+ line-height: 17px
+ -webkit-transform: translateZ(0)
- +maxWidth1024()
- width: calc(50% - 15px) !important
+ +maxWidth1024()
+ width: calc(50% - 15px) !important
- +maxWidth600()
- width: calc(100% - 15px) !important
+ +maxWidth600()
+ width: calc(100% - 15px) !important
- &:hover
- img
- transform: rotate(360deg)
+ &:hover
+ img
+ transform: rotate(360deg)
- &:before
- position: absolute
- top: 0
- right: 0
- bottom: 0
- left: 0
- z-index: -1
- background: var(--text-bg-hover)
- content: ''
- transition: transform .3s ease-out
- transform: scale(0)
+ &:before
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: -1
+ background: var(--text-bg-hover)
+ content: ''
+ transition: transform .3s ease-out
+ transform: scale(0)
- &:hover:before,
- &:focus:before,
- &:active:before
- transform: scale(1)
+ &:hover:before,
+ &:focus:before,
+ &:active:before
+ transform: scale(1)
- a
- color: var(--font-color)
- text-decoration: none
+ a
+ color: var(--font-color)
+ text-decoration: none
- img
- float: left
- margin: 15px 10px
- width: 60px
- height: 60px
- border-radius: 35px
- transition: all .3s
+ img
+ float: left
+ margin: 15px 10px
+ width: 60px
+ height: 60px
+ border-radius: 35px
+ transition: all .3s
- .img-alt
- display: none
+ .img-alt
+ display: none
- .flink-item-name
- @extend .limit-one-line
- display: block
- padding: 16px 10px 0 0
- height: 40px
- font-weight: bold
- font-size: 1.43em
+ .flink-item-name
+ @extend .limit-one-line
+ display: block
+ padding: 16px 10px 0 0
+ height: 40px
+ font-weight: bold
+ font-size: 1.43em
- .flink-item-desc
- @extend .limit-one-line
- display: block
- padding: 16px 10px 16px 0
- height: 50px
- font-size: .93em
+ .flink-item-desc
+ @extend .limit-one-line
+ display: block
+ padding: 16px 10px 16px 0
+ height: 50px
+ font-size: .93em
diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl
index e9ddf6e..7d10e3e 100644
--- a/source/css/_page/homepage.styl
+++ b/source/css/_page/homepage.styl
@@ -9,14 +9,14 @@
height: 20em
border-radius: 12px 8px 8px 12px
background: var(--card-bg)
- box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ box-shadow: var(--card-box-shadow)
transition: all .3s
+maxWidth768()
border-radius: 12px 12px 8px 8px
&:hover
- box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+ box-shadow: var(--card-hover-box-shadow)
img.post_bg
transform: scale(1.1)
diff --git a/source/js/main.js b/source/js/main.js
index 08db8b6..da5be46 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,17 +1,16 @@
document.addEventListener('DOMContentLoaded', function () {
- let blogNameWidth = document.getElementById('site-name').offsetWidth
+ const $blogName = document.getElementById('site-name')
+ let blogNameWidth = $blogName && $blogName.offsetWidth
const $menusEle = document.querySelector('#menus .menus_items')
let menusWidth = $menusEle && $menusEle.offsetWidth
const $searchEle = document.querySelector('#search-button')
let searchWidth = $searchEle && $searchEle.offsetWidth
- let detectFontSizeChange = false
- const adjustMenu = () => {
- if (detectFontSizeChange) {
- blogNameWidth = document.getElementById('site-name').offsetWidth
+ const adjustMenu = (change = false) => {
+ if (change) {
+ blogNameWidth = $blogName && $blogName.offsetWidth
menusWidth = $menusEle && $menusEle.offsetWidth
searchWidth = $searchEle && $searchEle.offsetWidth
- detectFontSizeChange = false
}
const $nav = document.getElementById('nav')
let t
@@ -316,7 +315,7 @@ document.addEventListener('DOMContentLoaded', function () {
let initTop = 0
let isChatShow = true
- const $nav = document.getElementById('nav')
+ const $header = document.getElementById('page-header')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
window.addEventListener('scroll', btf.throttle(function (e) {
@@ -324,25 +323,25 @@ document.addEventListener('DOMContentLoaded', function () {
const isDown = scrollDirection(currentTop)
if (currentTop > 56) {
if (isDown) {
- if ($nav.classList.contains('visible')) $nav.classList.remove('visible')
+ if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
} else {
- if (!$nav.classList.contains('visible')) $nav.classList.add('visible')
+ if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
if (isChatBtnHide && isChatShow === false) {
chatBtnShow()
isChatShow = true
}
}
- $nav.classList.add('fixed')
+ $header.classList.add('nav-fixed')
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
}
} else {
if (currentTop === 0) {
- $nav.classList.remove('fixed', 'visible')
+ $header.classList.remove('nav-fixed', 'nav-visible')
}
$rightside.style.cssText = "opacity: ''; transform: ''"
}
@@ -449,7 +448,7 @@ document.addEventListener('DOMContentLoaded', function () {
let currentIndex = ''
list.forEach(function (ele, index) {
- if (top > btf.getEleTop(ele) - 70) {
+ if (top > btf.getEleTop(ele) - 80) {
currentId = '#' + encodeURI(ele.getAttribute('id'))
currentIndex = index
}
@@ -536,17 +535,16 @@ document.addEventListener('DOMContentLoaded', function () {
adjustFontSize: (plus) => {
const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
let newValue = ''
- detectFontSizeChange = true
if (plus) {
if (fontSizeVal >= 20) return
newValue = fontSizeVal + 1
document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
- !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
+ !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
} else {
if (fontSizeVal <= 10) return
newValue = fontSizeVal - 1
document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
- document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
+ document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
}
saveToLocal.set('global-font-size', newValue, 2)
@@ -798,6 +796,7 @@ document.addEventListener('DOMContentLoaded', function () {
const unRefreshFn = function () {
window.addEventListener('resize', adjustMenu)
+ window.addEventListener('orientationchange', () => { setTimeout(adjustMenu(true), 100) })
clickFnOfSubMenu()
GLOBAL_CONFIG.islazyload && lazyloadImg()