biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-12 22:17:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 去除 jQuery (fancybox和圖庫 仍需要加載jQuery)

Browse Source 
feat: 點擊文字特效增加隨機配置
feat: 可配置是否添加css前綴
fix: 修復子目錄下，配置justifiedGallery CDN（相對鏈接）後，連接會無法訪問的bugs
fix: 修復 pangu 配置post 後，仍在全站生效的bugs
improvement: 夜間模式下，廣告降低亮度
improvement: 手機端toc邊距微調
improvement: html格式優化
improvement: 搜索優化
improvement: 刪除不必要的語言文件
This commit is contained in:
Jerry
2020-11-21 00:27:01 +08:00
parent 7f03c3f716
commit 88b1cc553c
64 changed files with 969 additions and 795 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@@ -26,7 +26,7 @@ If you are a problem when visiting the website, please open your browser 'develo
<!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) --> <!-- Check all with "x" especially FAQ & Documentation!! (使用 "x" 選擇) -->
<!-- 請確認是否都已經翻閲過如下的資料, 尤其是安裝文件！！ --> <!-- 請確認是否都已經翻閲過如下的資料, 尤其是安裝文件！！ -->
- [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html). - [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html).
- [] Yes, I have read [Butterfly Documentation](https://demo.jerryc.me/posts/21cfbf15/). - [] Yes, I have read [Butterfly Documentation](https://butterfly.js.org/posts/21cfbf15/).
- [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me. - [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me.
## Butterfly Information ## Butterfly Information

2
README.md
View File

@@ -71,7 +71,7 @@ npm i hexo-theme-butterfly
- [x] Related articles - [x] Related articles
- [x] Displays outdated notice for a post - [x] Displays outdated notice for a post
- [x] Share (AddThis/Sharejs/Addtoany) - [x] Share (AddThis/Sharejs/Addtoany)
- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments) - [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
- [x] Multiple Comment System Support - [x] Multiple Comment System Support
- [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp) - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp)
- [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics) - [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics)

2
README_CN.md
View File

@@ -71,7 +71,7 @@ theme: butterfly
- [x] 顯示相關文章 - [x] 顯示相關文章
- [x] 過期文章提醒 - [x] 過期文章提醒
- [x] 多種分享系統（AddThis/Sharejs/Addtoany） - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments） - [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
- [x] 支持雙評論部署 - [x] 支持雙評論部署
- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp） - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
- [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析） - [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析）

4
_config.yml
View File

@@ -542,6 +542,7 @@ ClickShowText:
# - LOVE # - LOVE
# - YOU # - YOU
fontSize: 15px fontSize: 15px
random: false
mobile: false mobile: false
# Default display mode (網站默認的顯示模式) # Default display mode (網站默認的顯示模式)
@@ -814,6 +815,9 @@ Open_Graph_meta: true
# Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度) # Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度)
fragment_cache: true fragment_cache: true
# Add the vendor prefixes to ensure compatibility
css_prefix: true
# Inject # Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag) # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前 # 插入代码到头部 </head> 之前 和 底部 </body> 之前

1
languages/default.yml
View File

@@ -41,7 +41,6 @@ local_search:
label: Local search label: Local search
input_placeholder: Search for Posts input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" hits_empty: "We didn't find any results for the search: ${query}"
powered_by: Powered by
pagination: pagination:
prev: Previous Post prev: Previous Post

1
languages/en.yml
View File

@@ -41,7 +41,6 @@ local_search:
label: Local search label: Local search
input_placeholder: Search for Posts input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" hits_empty: "We didn't find any results for the search: ${query}"
powered_by: Powered by
pagination: pagination:
prev: Previous Post prev: Previous Post

2
languages/zh-CN.yml
View File

@@ -42,8 +42,6 @@ local_search:
label: 本地搜索 label: 本地搜索
input_placeholder: 搜索文章 input_placeholder: 搜索文章
hits_empty: '找不到您查询的内容：${query}' hits_empty: '找不到您查询的内容：${query}'
powered: '提供支持'
by: 由
pagination: pagination:
prev: 上一篇 prev: 上一篇

2
languages/zh-TW.yml
View File

@@ -42,8 +42,6 @@ local_search:
label: 本地搜尋 label: 本地搜尋
input_placeholder: 搜尋文章 input_placeholder: 搜尋文章
hits_empty: '找不到您查詢的內容：${query}' hits_empty: '找不到您查詢的內容：${query}'
powered: '提供支援'
by: 由
pagination: pagination:
prev: 上一篇 prev: 上一篇

8
layout/includes/additional-js.pug
View File

@@ -1,5 +1,4 @@
div div
script(src=url_for(theme.CDN.jquery))
script(src=url_for(theme.CDN.utils)) script(src=url_for(theme.CDN.utils))
script(src=url_for(theme.CDN.main)) script(src=url_for(theme.CDN.main))
@@ -8,11 +7,9 @@ div
if theme.medium_zoom if theme.medium_zoom
script(src=url_for(theme.CDN.medium_zoom)) script(src=url_for(theme.CDN.medium_zoom))
else if theme.fancybox
script(src=url_for(theme.CDN.fancybox))
if theme.instantpage if theme.instantpage
script(src=url_for(theme.CDN.instantpage) type="module" defer) script(src=url_for(theme.CDN.instantpage) type="module")
if theme.lazyload.enable if theme.lazyload.enable
script(src=url_for(theme.CDN.lazyload)) script(src=url_for(theme.CDN.lazyload))
@@ -36,9 +33,6 @@ div
if theme.subtitle.enable && is_home() && theme.index_img !== false if theme.subtitle.enable && is_home() && theme.index_img !== false
include ./third-party/subtitle.pug include ./third-party/subtitle.pug
if page.type === 'artitalk'
include ./third-party/artitalk.pug
include ./third-party/math/index.pug include ./third-party/math/index.pug
if commentsJsLoad if commentsJsLoad

3
layout/includes/head.pug
View File

@@ -53,9 +53,6 @@ if (theme.pwa && theme.pwa.enable)
link(rel='stylesheet', href=url_for(theme.CDN.main_css)) link(rel='stylesheet', href=url_for(theme.CDN.main_css))
link(rel='stylesheet', href=url_for(theme.CDN.fontawesome)) link(rel='stylesheet', href=url_for(theme.CDN.fontawesome))
if theme.fancybox
link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
if (theme.snackbar && theme.snackbar.enable) if (theme.snackbar && theme.snackbar.enable)
link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))

32
layout/includes/head/config.pug
View File

@@ -54,7 +54,8 @@
if (theme.ClickShowText && theme.ClickShowText.enable) { if (theme.ClickShowText && theme.ClickShowText.enable) {
ClickShowText = JSON.stringify({ ClickShowText = JSON.stringify({
text: theme.ClickShowText.text.join(","), text: theme.ClickShowText.text.join(","),
fontSize: theme.ClickShowText.fontSize fontSize: theme.ClickShowText.fontSize,
random: theme.ClickShowText.random
}) })
} }
@@ -119,9 +120,16 @@ script.
ClickShowText: !{ClickShowText}, ClickShowText: !{ClickShowText},
lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}', lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
Snackbar: !{Snackbar}, Snackbar: !{Snackbar},
justifiedGallery: { source: {
js: '!{theme.CDN.justifiedGallery_js}', jQuery: '!{url_for(theme.CDN.jquery)}',
css: '!{theme.CDN.justifiedGallery_css}' justifiedGallery: {
js: '!{url_for(theme.CDN.justifiedGallery_js)}',
css: '!{url_for(theme.CDN.justifiedGallery_css)}'
},
fancybox: {
js: '!{url_for(theme.CDN.fancybox)}',
css: '!{url_for(theme.CDN.fancybox_css)}'
}
}, },
isPhotoFigcaption: !{theme.photofigcaption}, isPhotoFigcaption: !{theme.photofigcaption},
islazyload: !{theme.lazyload.enable}, islazyload: !{theme.lazyload.enable},
@@ -156,5 +164,17 @@ script.
} }
} }
// https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
const 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)
})

4
layout/includes/head/preconnect.pug
View File

@@ -1,7 +1,7 @@
link(rel="preconnect" href="//cdn.jsdelivr.net") link(rel="preconnect" href="//cdn.jsdelivr.net")
if theme.google_analytics if theme.google_analytics
link(rel="preconnect" href="//www.google-analytics.com" crossorigin) link(rel="preconnect" href="//www.google-analytics.com" crossorigin='')
if theme.baidu_analytics if theme.baidu_analytics
link(rel="preconnect" href="//hm.baidu.com") link(rel="preconnect" href="//hm.baidu.com")
@@ -13,7 +13,7 @@ if theme.cnzz_analytics
link(rel="preconnect" href="//s4.cnzz.com") link(rel="preconnect" href="//s4.cnzz.com")
if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1 if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
link(rel="preconnect" href="//fonts.googleapis.com" crossorigin) link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
link(rel="preconnect" href="//busuanzi.ibruce.info") link(rel="preconnect" href="//busuanzi.ibruce.info")

6
layout/includes/header/nav.pug
View File

@@ -2,15 +2,15 @@ nav#nav
span#blog_name span#blog_name
a#site-name(href=url_for('/')) #[=config.title] a#site-name(href=url_for('/')) #[=config.title]
span#menus #menus
if (theme.algolia_search.enable || theme.local_search.enable) if (theme.algolia_search.enable || theme.local_search.enable)
#search_button #search-button
a.site-page.social-icon.search a.site-page.social-icon.search
i.fas.fa-search.fa-fw i.fas.fa-search.fa-fw
span=' '+_p('search') span=' '+_p('search')
!=fragment_cache('menus', function(){return partial('includes/header/menu_item')}) !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
span#toggle-menu.close #toggle-menu
a.site-page a.site-page
i.fas.fa-bars.fa-fw i.fas.fa-bars.fa-fw

2
layout/includes/mixins/post-ui.pug
View File

@@ -78,4 +78,4 @@ mixin postUI(posts)
if theme.ad && theme.ad.index if theme.ad && theme.ad.index
if (index + 1) % 3 == 0 if (index + 1) % 3 == 0
.recent-post-item.ad-height!=theme.ad.index .recent-post-item.ads-wrap!=theme.ad.index

24
layout/includes/page/artitalk.pug
View File

@@ -1,4 +1,28 @@
- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false
if top_img === false if top_img === false
h1.page-title= page.title h1.page-title= page.title
#artitalk_main #artitalk_main
script.
(()=>{
let setting = {
appId: '!{theme.artitalk.appId}',
appKey: '!{theme.artitalk.appKey}',
}
if (!{Boolean(option)}) {
const otherSetting = !{option}
setting = Object.assign({}, setting, otherSetting)
}
const init = () => {
new Artitalk(setting)
}
if (typeof Artitalk === 'function') {
init()
} else {
getScript('!{theme.CDN.artitalk}').then(init)
}
})()

8
layout/includes/pagination.pug
View File

@@ -18,9 +18,9 @@ else
- var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
a(href=url_for(page.prev.path)) a(href=url_for(page.prev.path))
if theme.lazyload.enable if theme.lazyload.enable
img.prev-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) img.prev-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
else else
img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
.pagination-info .pagination-info
.label=_p('pagination.prev') .label=_p('pagination.prev')
.prev_info=page.prev.title .prev_info=page.prev.title
@@ -31,9 +31,9 @@ else
.next-post(class=hasPagePrev) .next-post(class=hasPagePrev)
a(href=url_for(page.next.path)) a(href=url_for(page.next.path))
if theme.lazyload.enable if theme.lazyload.enable
img.next-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) img.next-cover(data-lazy-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
else else
img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
.pagination-info .pagination-info
.label=_p('pagination.next') .label=_p('pagination.next')
.next_info=page.next.title .next_info=page.next.title

24
layout/includes/third-party/artitalk.pug vendored
View File

@@ -1,24 +0,0 @@
- let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false
script.
(()=>{
let setting = {
appId: '!{theme.artitalk.appId}',
appKey: '!{theme.artitalk.appKey}',
}
if (!{Boolean(option)}) {
const otherSetting = !{option}
setting = Object.assign({}, setting, otherSetting)
}
const init = () => {
new Artitalk(setting)
}
if (typeof Artitalk === 'function') {
init()
} else {
$.getScript('!{theme.CDN.artitalk}',init)
}
})()

6
layout/includes/third-party/baidu_push.pug vendored
View File

@@ -3,11 +3,11 @@ if theme.baidu_push
(function(){ (function(){
const bp = document.createElement('script'); const bp = document.createElement('script');
const curProtocol = window.location.protocol.split(':')[0]; const curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https'){ if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} }
else{ else{
bp.src = 'http://push.zhanzhang.baidu.com/push.js'; bp.src = 'http://push.zhanzhang.baidu.com/push.js';
} }
bp.dataset.pjax = '' bp.dataset.pjax = ''
const s = document.getElementsByTagName("script")[0]; const s = document.getElementsByTagName("script")[0];

2
layout/includes/third-party/comments/disqusjs.pug vendored
View File

@@ -29,7 +29,7 @@ script.
if (window.disqusJsLoad) initDisqusjs() if (window.disqusJsLoad) initDisqusjs()
else { else {
addDisqusjsCSS() addDisqusjsCSS()
$.getScript('!{url_for(theme.CDN.disqusjs)}', initDisqusjs) getScript('!{url_for(theme.CDN.disqusjs)}').then(initDisqusjs)
window.disqusJsLoad = true window.disqusJsLoad = true
} }
} }

2
layout/includes/third-party/comments/gitalk.pug vendored
View File

@@ -28,7 +28,7 @@ script.
if (typeof Gitalk === 'function') initGitalk() if (typeof Gitalk === 'function') initGitalk()
else { else {
addGitalkSource() addGitalkSource()
$.getScript('!{url_for(theme.CDN.gitalk)}', initGitalk) getScript('!{url_for(theme.CDN.gitalk)}').then(initGitalk)
} }
} }

2
layout/includes/third-party/comments/twikoo.pug vendored
View File

@@ -9,7 +9,7 @@ script.
if (typeof twikoo.init === 'function') { if (typeof twikoo.init === 'function') {
init() init()
} else { } else {
$.getScript('!{theme.CDN.twikoo}', init) getScript('!{theme.CDN.twikoo}').then(init)
} }
} }

2
layout/includes/third-party/comments/valine.pug vendored
View File

@@ -36,7 +36,7 @@ script.
} }
if (typeof Valine === 'function') initValine() if (typeof Valine === 'function') initValine()
else $.getScript('!{url_for(theme.CDN.valine)}', initValine) else getScript('!{url_for(theme.CDN.valine)}').then(initValine)
} }
if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) { if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {

9
layout/includes/third-party/math/katex.pug vendored
View File

@@ -2,6 +2,9 @@ link(rel="stylesheet" type="text/css" href=theme.CDN.katex)
script(src=url_for(theme.CDN.katex_copytex)) script(src=url_for(theme.CDN.katex_copytex))
link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css) link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
script. script.
$(function () { (() => {
$('span.katex-display').wrap('<div class="katex-wrap"></div>') document.querySelectorAll('#article-container span.katex-display').forEach(item => {
}) btf.wrap(item, 'div', '', 'katex-wrap')
})
})()

2
layout/includes/third-party/math/mermaid.pug vendored
View File

@@ -2,7 +2,7 @@ script.
if (document.getElementsByClassName('mermaid').length) { if (document.getElementsByClassName('mermaid').length) {
if (window.mermaidJsLoad) mermaid.init() if (window.mermaidJsLoad) mermaid.init()
else { else {
$.getScript('!{theme.CDN.mermaid}', function () { getScript('!{theme.CDN.mermaid}').then(() => {
window.mermaidJsLoad = true window.mermaidJsLoad = true
mermaid.initialize({ mermaid.initialize({
theme: '!{theme.mermaid.theme}', theme: '!{theme.mermaid.theme}',

33
layout/includes/third-party/newest-comments/disqus-comment.pug vendored
View File

@@ -14,24 +14,25 @@ script.
} }
const getDisqusComment = () => { const getDisqusComment = () => {
let disqusArray = [] fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}')
$.getJSON('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}', function(data){ .then(response => response.json())
$.each(data.response, (i, item) => { .then(data => {
disqusArray.push({ const disqusArray = data.response.map(item => {
'avatar': item.author.avatar.cache, return {
'content': changeContent(item.message), 'avatar': item.author.avatar.cache,
'nick': item.author.name, 'content': changeContent(item.message),
'url': item.url, 'nick': item.author.name,
'date': item.createdAt 'url': item.url,
'date': item.createdAt
}
}) })
// set expiry to 10 min
saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
generateHtml(disqusArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
}) })
// set expiry to 10 min
saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
generateHtml(disqusArray)
}).fail(()=>{
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
})
} }
const generateHtml = array => { const generateHtml = array => {

31
layout/includes/third-party/newest-comments/github-issues.pug vendored
View File

@@ -14,23 +14,24 @@ script.
} }
const getGithubIssues = () => { const getGithubIssues = () => {
let githubArray = [] 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')
$.getJSON('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', (data) => { .then(response => response.json())
$.each(data, (index, item) => { .then(data => {
githubArray.push({ const githubArray = data.map(item => {
'avatar': item.user.avatar_url, return {
'content': changeContent(item.body), 'avatar': item.user.avatar_url,
'nick': item.user.login, 'content': changeContent(item.body),
'url': item.html_url, 'nick': item.user.login,
'date': item.updated_at 'url': item.html_url,
'date': item.updated_at
}
}) })
saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
generateHtml(githubArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
}) })
saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
generateHtml(githubArray)
}).fail(()=>{
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
})
} }
const generateHtml = array => { const generateHtml = array => {

37
layout/includes/third-party/newest-comments/leancloud.pug vendored
View File

@@ -51,9 +51,7 @@ script.
} }
var settings = { var settings = {
"url": `${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,
"method": "GET", "method": "GET",
"timeout": 0,
"headers": { "headers": {
"X-LC-Id": '!{theme.newest_comments.leancloud.appId}', "X-LC-Id": '!{theme.newest_comments.leancloud.appId}',
"X-LC-Key": '!{theme.newest_comments.leancloud.appKey}', "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}',
@@ -61,26 +59,25 @@ script.
}, },
} }
$.ajax(settings).done((response) => { fetch(`${serverURL}/1.1/classes/Comment?limit=!{theme.newest_comments.limit}&order=-createdAt`,settings)
var valineArray = [] .then(response => response.json())
response.results.forEach((e)=>{ .then(data => {
valineArray.push({ const valineArray = data.results.map(function (e) {
'avatar': e.QQAvatar, return {
'content': changeContent(e.comment), 'avatar': e.QQAvatar,
'mail': e.mail, 'content': changeContent(e.comment),
'nick': e.nick, 'mail': e.mail,
'url': e.url, 'nick': e.nick,
'date': e.createdAt, 'url': e.url,
'date': e.createdAt,
}
}) })
saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
generateHtml(valineArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
}) })
saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
generateHtml(valineArray)
}).fail(()=>{
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
})
} }
const newestCommentInit = () => { const newestCommentInit = () => {

9
layout/includes/third-party/pangu.pug vendored
View File

@@ -2,9 +2,10 @@ script.
function panguFn () { function panguFn () {
if (typeof pangu === 'object') pangu.spacingElementById('content-inner') if (typeof pangu === 'object') pangu.spacingElementById('content-inner')
else { else {
$.getScript('!{url_for(theme.CDN.pangu)}', () => { getScript('!{url_for(theme.CDN.pangu)}')
pangu.spacingElementById('content-inner') .then(() => {
}) pangu.spacingElementById('content-inner')
})
} }
} }
@@ -16,4 +17,4 @@ script.
} }
} }
document.addEventListener('DOMContentLoaded', panguFn) document.addEventListener('DOMContentLoaded', panguInit)

14
layout/includes/third-party/pjax.pug vendored
View File

@@ -29,8 +29,12 @@ script.
document.addEventListener('pjax:complete', function () { document.addEventListener('pjax:complete', function () {
window.refreshFn() window.refreshFn()
$('script[data-pjax]').each(function () { document.querySelectorAll('script[data-pjax]').forEach(item => {
$(this).parent().append($(this).remove()) const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
}) })
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update() GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
@@ -69,10 +73,8 @@ script.
typeof typed === 'object' && typed.destroy() typeof typed === 'object' && typed.destroy()
$(window).off('scroll')
//reset readmode //reset readmode
$('body').hasClass('read-mode') && $('body').removeClass('read-mode') const $bodyClassList = document.body.classList
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
}) })

12
layout/includes/third-party/search/local-search.pug vendored
View File

@@ -7,18 +7,6 @@
input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
hr hr
#local-search-results #local-search-results
#local-hits
#local-stats
#hr.local-search-stats__hr
case config.language
when "zh-CN"
span=_p("local_search.by")
| #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
| #[span=_p("local_search.powered")]
when "en"
default
span=_p("local_search.powered_by")
| #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
span.search-close-button span.search-close-button
i.fas.fa-times i.fas.fa-times
#search-mask #search-mask

108
layout/includes/third-party/subtitle.pug vendored
View File

@@ -1,28 +1,34 @@
- var source = theme.subtitle.source - let source = theme.subtitle.source
case source case source
when 1 when 1
script. script.
function subtitleType () { function subtitleType () {
$.getJSON('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',function (data) { fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
if (!{theme.subtitle.effect}) { .then(response => response.json())
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') .then(data => {
var both = sub.unshift(data.text) if (!{theme.subtitle.effect}) {
typed = new Typed('#subtitle', { var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
strings: sub, var both = sub.unshift(data.text)
startDelay: 300, typed = new Typed('#subtitle', {
typeSpeed: 150, strings: sub,
loop: !{theme.subtitle.loop}, startDelay: 300,
backSpeed: 50, typeSpeed: 150,
}) loop: !{theme.subtitle.loop},
} else { backSpeed: 50,
document.getElementById('subtitle').innerHTML = data.text })
} } else {
}) document.getElementById('subtitle').innerHTML = data.text
}
})
} }
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
if (typeof Typed === 'function') subtitleType() if (typeof Typed === 'function') {
else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else { } else {
subtitleType() subtitleType()
} }
@@ -30,27 +36,32 @@ case source
when 2 when 2
script. script.
function subtitleType () { function subtitleType () {
$.getJSON('https://v1.hitokoto.cn', function (data) { fetch('https://v1.hitokoto.cn')
if (!{theme.subtitle.effect}) { .then(response => response.json())
var from = '出自 ' + data.from .then(data => {
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') if (!{theme.subtitle.effect}) {
var both = sub.unshift(data.hitokoto, from) var from = '出自 ' + data.from
var typed = new Typed('#subtitle', { var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
strings: sub, var both = sub.unshift(data.hitokoto, from)
startDelay: 300, var typed = new Typed('#subtitle', {
typeSpeed: 150, strings: sub,
loop: !{theme.subtitle.loop}, startDelay: 300,
backSpeed: 50, typeSpeed: 150,
}) loop: !{theme.subtitle.loop},
} else { backSpeed: 50,
document.getElementById('subtitle').innerHTML = data.hitokoto })
} } else {
}) document.getElementById('subtitle').innerHTML = data.hitokoto
}
})
} }
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
if (typeof Typed === 'function') subtitleType() if (typeof Typed === 'function') {
else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else { } else {
subtitleType() subtitleType()
} }
@@ -58,7 +69,7 @@ case source
when 3 when 3
script. script.
function subtitleType () { function subtitleType () {
$.getScript('http://yijuzhan.com/api/word.php?m=js', function () { getScript('http://yijuzhan.com/api/word.php?m=js').then(() => {
var con = str[0] var con = str[0]
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
var from = '出自 ' + str[1] var from = '出自 ' + str[1]
@@ -78,8 +89,11 @@ case source
} }
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
if (typeof Typed === 'function') subtitleType() if (typeof Typed === 'function') {
else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else { } else {
subtitleType() subtitleType()
} }
@@ -87,7 +101,7 @@ case source
when 4 when 4
script. script.
function subtitleType () { function subtitleType () {
$.getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () { getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
jinrishici.load(function (result) { jinrishici.load(function (result) {
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
@@ -108,8 +122,11 @@ case source
} }
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
if (typeof Typed === 'function') subtitleType() if (typeof Typed === 'function') {
else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else { } else {
subtitleType() subtitleType()
} }
@@ -131,8 +148,11 @@ case source
} }
if (!{theme.subtitle.effect}) { if (!{theme.subtitle.effect}) {
if (typeof Typed === 'function') subtitleType() if (typeof Typed === 'function') {
else $.getScript('!{url_for(theme.CDN.typed)}', subtitleType) subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else { } else {
subtitleType() subtitleType()
} }

5
layout/includes/widget/card_ad.pug
View File

@@ -1,2 +1,3 @@
.card-widget.card-ad if theme.ad && theme.ad.aside
!= theme.ad.aside .card-widget.ads-wrap
!= theme.ad.aside

13
layout/includes/widget/card_announcement.pug
View File

@@ -1,6 +1,7 @@
.card-widget.card-announcement if theme.aside.card_announcement.enable
.card-content .card-widget.card-announcement
.item-headline .card-content
i.fas.fa-bullhorn.card-announcement-animation .item-headline
span= _p('aside.card_announcement') i.fas.fa-bullhorn.card-announcement-animation
.announcement_content!= theme.aside.card_announcement.content span= _p('aside.card_announcement')
.announcement_content!= theme.aside.card_announcement.content

21
layout/includes/widget/card_archives.pug
View File

@@ -1,11 +1,12 @@
.card-widget.card-archives if theme.aside.card_archives.enable
.card-content .card-widget.card-archives
.item-headline .card-content
i.fas.fa-archive .item-headline
span= _p('aside.card_archives') i.fas.fa-archive
span= _p('aside.card_archives')
- let type = theme.aside.card_archives.type || 'monthly' - let type = theme.aside.card_archives.type || 'monthly'
- let format = theme.aside.card_archives.format || 'MMMM YYYY' - let format = theme.aside.card_archives.format || 'MMMM YYYY'
- let order = theme.aside.card_archives.order || -1 - let order = theme.aside.card_archives.order || -1
- let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8 - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8
!= aside_archives({ type:type, format: format, order: order, limit: limit }) != aside_archives({ type:type, format: format, order: order, limit: limit })

63
layout/includes/widget/card_author.pug
View File

@@ -1,36 +1,37 @@
.card-widget.card-info if theme.aside.card_author.enable
.card-content .card-widget.card-info
.card-info-avatar.is-center .card-content
if theme.lazyload.enable .card-info-avatar.is-center
img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") if theme.lazyload.enable
else img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") else
.author-info__name= config.author img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
.author-info__description!= theme.aside.card_author.description || config.description .author-info__name= config.author
.author-info__description!= theme.aside.card_author.description || config.description
.card-info-data .card-info-data
if site.posts.length if site.posts.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.archive_dir) + '/') a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles') .headline= _p('aside.articles')
.length-num= site.posts.length .length-num= site.posts.length
if site.tags.length if site.tags.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.tag_dir) + '/') a(href=url_for(config.tag_dir) + '/')
.headline= _p('aside.tags') .headline= _p('aside.tags')
.length-num= site.tags.length .length-num= site.tags.length
if site.categories.length if site.categories.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.category_dir) + '/') a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories') .headline= _p('aside.categories')
.length-num= site.categories.length .length-num= site.categories.length
a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
i(class=theme.aside.card_author.button.icon) i(class=theme.aside.card_author.button.icon)
span=theme.aside.card_author.button.text span=theme.aside.card_author.button.text
if(theme.social) if(theme.social)
.card-info-social-icons.is-center .card-info-social-icons.is-center
!=fragment_cache('social', function(){return partial('includes/header/social')}) !=fragment_cache('social', function(){return partial('includes/header/social')})

17
layout/includes/widget/card_categories.pug
View File

@@ -1,9 +1,8 @@
if site.categories.length if theme.aside.card_categories.enable
.card-widget.card-categories if site.categories.length
.card-content .card-widget.card-categories
.item-headline .card-content
i.fas.fa-folder-open .item-headline
span= _p('aside.card_categories') i.fas.fa-folder-open
!=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand }) 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 })

15
layout/includes/widget/card_newest_comment.pug
View File

@@ -1,7 +1,8 @@
.card-widget#card-newest-comments if theme.newest_comments.enable
.card-content .card-widget#card-newest-comments
.item-headline .card-content
i.fas.fa-bolt .item-headline
span= _p('aside.card_newest_comments.headline') i.fas.fa-bolt
.aside-list span= _p('aside.card_newest_comments.headline')
span= _p('aside.card_newest_comments.loading_text') .aside-list
span= _p('aside.card_newest_comments.loading_text')

53
layout/includes/widget/card_recent_post.pug
View File

@@ -1,27 +1,28 @@
.card-widget.card-recent-post if theme.aside.card_recent_post.enable
.card-content .card-widget.card-recent-post
.item-headline .card-content
i.fas.fa-history .item-headline
span= _p('aside.card_recent_post') i.fas.fa-history
.aside-list span= _p('aside.card_recent_post')
- let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5 .aside-list
- let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date' - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
- site.posts.sort(sort, -1).limit(postLimit).each(function(article){ - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
- let link = article.link || article.path - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
- let title = article.title || _p('no_title') - let link = article.link || article.path
- let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' - let title = article.title || _p('no_title')
- let post_cover = article.cover - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
.aside-list-item(class=no_cover) - let post_cover = article.cover
if post_cover && theme.cover.aside_enable .aside-list-item(class=no_cover)
a.thumbnail(href=url_for(link) title=title) if post_cover && theme.cover.aside_enable
if theme.lazyload.enable a.thumbnail(href=url_for(link) title=title)
img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) if theme.lazyload.enable
img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
else
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
.content
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'
time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
else else
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title) time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
.content - })
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'
time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
else
time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
- })

23
layout/includes/widget/card_tags.pug
View File

@@ -1,12 +1,13 @@
if site.tags.length if theme.aside.card_tags.enable
.card-widget.card-tags if site.tags.length
.card-content .card-widget.card-tags
.item-headline .card-content
i.fas.fa-tags .item-headline
span= _p('aside.card_tags') i.fas.fa-tags
span= _p('aside.card_tags')
- let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
if theme.aside.card_tags.color if theme.aside.card_tags.color
.card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'})
else else
.card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'}) .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

61
layout/includes/widget/card_webinfo.pug
View File

@@ -1,31 +1,32 @@
.card-widget.card-webinfo if theme.aside.card_webinfo.enable
.card-content .card-widget.card-webinfo
.item-headline .card-content
i.fas.fa-chart-line .item-headline
span= _p('aside.card_webinfo.headline') i.fas.fa-chart-line
.webinfo span= _p('aside.card_webinfo.headline')
if theme.aside.card_webinfo.post_count .webinfo
.webinfo-item if theme.aside.card_webinfo.post_count
.item-name= _p('aside.card_webinfo.article_name') + " :" .webinfo-item
.item-count= site.posts.length .item-name= _p('aside.card_webinfo.article_name') + " :"
if theme.runtimeshow.enable .item-count= site.posts.length
.webinfo-item if theme.runtimeshow.enable
.item-name= _p('aside.card_webinfo.runtime.name') + " :" .webinfo-item
.item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) .item-name= _p('aside.card_webinfo.runtime.name') + " :"
if theme.wordcount.enable && theme.wordcount.total_wordcount .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
.webinfo-item if theme.wordcount.enable && theme.wordcount.total_wordcount
.item-name=_p('aside.card_webinfo.site_wordcount') + " :" .webinfo-item
.item-count=totalcount(site) .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
if theme.busuanzi.site_uv .item-count=totalcount(site)
.webinfo-item if theme.busuanzi.site_uv
.item-name= _p('aside.card_webinfo.site_uv_name') + " :" .webinfo-item
.item-count#busuanzi_value_site_uv .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
if theme.busuanzi.site_pv .item-count#busuanzi_value_site_uv
.webinfo-item if theme.busuanzi.site_pv
.item-name= _p('aside.card_webinfo.site_pv_name') + " :" .webinfo-item
.item-count#busuanzi_value_site_pv .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
if theme.aside.card_webinfo.last_push_date .item-count#busuanzi_value_site_pv
.webinfo-item if theme.aside.card_webinfo.last_push_date
.item-name= _p('aside.card_webinfo.last_push_date.name') + " :" .webinfo-item
.item-count#last-push-date(data-lastPushDate=date_xml(Date.now())) .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
.item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))

33
layout/includes/widget/index.pug
View File

@@ -1,28 +1,17 @@
#aside_content.aside_content #aside_content.aside_content
if theme.aside.card_author.enable !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
if theme.aside.card_announcement.enable
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout .sticky_layout
if is_post() if is_post()
if showToc if showToc
include ./card_post_toc.pug include ./card_post_toc.pug
if theme.aside.card_recent_post.enable !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
if theme.ad && theme.ad.aside
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
else else
if theme.aside.card_recent_post.enable !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
if theme.ad && theme.ad.aside !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
if theme.newest_comments.enable !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
if theme.aside.card_categories.enable !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
if theme.aside.card_tags.enable
!=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
if theme.aside.card_archives.enable
!=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
if theme.aside.card_webinfo.enable
!=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

2
layout/post.pug
View File

@@ -19,7 +19,7 @@ block content
//- ad //- ad
if theme.ad && theme.ad.post if theme.ad && theme.ad.post
.post-ad!=theme.ad.post .ads-wrap!=theme.ad.post
include includes/pagination.pug include includes/pagination.pug
if theme.related_post && theme.related_post.enable if theme.related_post && theme.related_post.enable

4
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "hexo-theme-butterfly", "name": "hexo-theme-butterfly",
"version": "3.3.0", "version": "3.4.0-b1",
"description": "A Simple and Card UI Design theme for Hexo", "description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json", "main": "package.json",
"scripts": { "scripts": {
@@ -26,7 +26,7 @@
"hexo-renderer-stylus": "^2.0.1", "hexo-renderer-stylus": "^2.0.1",
"hexo-renderer-pug": "^1.0.0" "hexo-renderer-pug": "^1.0.0"
}, },
"homepage": "https://demo.jerryc.me/", "homepage": "https://butterfly.js.org/",
"author": "Jerry <wong@jerryc.me>", "author": "Jerry <wong@jerryc.me>",
"license": "Apache-2.0" "license": "Apache-2.0"
} }

4
scripts/helpers/aside_categories.js
View File

@@ -65,11 +65,11 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
result += '</a>' result += '</a>'
result += '</li>'
if (child) { if (child) {
result += `<ul class="card-category-list child">${child}</ul>` result += `<ul class="card-category-list child">${child}</ul>`
} }
result += '</li>'
} }
}) })
} }

2
scripts/tag/gallery.js
View File

@@ -20,7 +20,7 @@ function galleryGroup (args) {
return ` return `
<figure class="gallery-group"> <figure class="gallery-group">
<img class="gallery-group-img" src='${img}'> <img class="gallery-group-img" src='${img}' alt="Group Image Gallery">
<figcaption> <figcaption>
<div class="gallery-group-name">${name}</div> <div class="gallery-group-name">${name}</div>
<p>${desrc}</p> <p>${desrc}</p>

2
scripts/tag/hide.js
View File

@@ -44,7 +44,7 @@ function hideBlock (args, content) {
group += '"' group += '"'
return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display} return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
</button><span class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</span></div>` </button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
} }
function hideToggle (args, content) { function hideToggle (args, content) {

2
scripts/tag/tabs.js
View File

@@ -44,7 +44,7 @@ function postTabs (args, content) {
const icon = tabIcon.trim() const icon = tabIcon.trim()
tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`) tabIcon.length > 0 && (tabIcon = `<i class="${icon}"${isOnlyicon}></i>`)
const toTop = '<button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button>' const toTop = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button>'
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '' const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>` tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`

7
source/css/_global/function.styl
View File

@@ -151,6 +151,13 @@ if hexo-config('avatar.effect') == true
100% 100%
opacity: 1 opacity: 1
@keyframes to_hide
0%
opacity: 1
100%
opacity: 0
@keyframes ribbon_to_show @keyframes ribbon_to_show
0% 0%
opacity: 0 opacity: 0

34
source/css/_global/index.styl
View File

@@ -57,16 +57,17 @@ body
input::placeholder input::placeholder
color: var(--font-color) color: var(--font-color)
#web_bg if $web-bg
position: fixed #web_bg
z-index: -999 position: fixed
width: 100% z-index: -999
height: 100% width: 100%
background: $web-bg height: 100%
background-attachment: local background: $web-bg
background-position: center background-attachment: local
background-size: cover background-position: center
background-repeat: no-repeat background-size: cover
background-repeat: no-repeat
h1, h1,
h2, h2,
@@ -198,9 +199,9 @@ img
max-width: 100% max-width: 100%
transition: all .2s transition: all .2s
img[src=''], &[src=''],
img:not([src]) &:not([src])
opacity: 0 opacity: 0
.img-alt .img-alt
margin: -.5rem 0 .5rem margin: -.5rem 0 .5rem
@@ -208,10 +209,3 @@ img:not([src])
&:hover &:hover
text-decoration: none !important text-decoration: none !important
.post-ad
margin: 2rem 0
.ad-height
display: block !important
height: auto !important

1
source/css/_highlight/highlight.styl
View File

@@ -132,6 +132,7 @@ blockquote
position: absolute position: absolute
right: 1.7rem right: 1.7rem
opacity: 0 opacity: 0
transition: opacity .4s
.copy-button .copy-button
position: absolute position: absolute

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

@@ -27,7 +27,7 @@
border-radius: 8px border-radius: 8px
background: var(--card-bg) background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s transition: box-shadow .3s
&:hover &:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15) box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
@@ -265,23 +265,38 @@
// toc // toc
#card-toc #card-toc
+minWidth900()
right: 0 !important
+maxWidth900() +maxWidth900()
position: fixed position: fixed
right: 45px right: -100%
bottom: 30px bottom: 30px
z-index: 100 z-index: 100
display: none max-height: calc(100% - 60px)
width: $toc-mobile-width width: $toc-mobile-width
opacity: 0
transform-origin: right bottom transform-origin: right bottom
animation: toc-open .3s // animation: toc-open .3s
.toc-child
display: block !important
.toc-content .toc-content
overflow-y: auto overflow-y: auto
max-height: calc(100vh - 120px) max-height: calc(100vh - 120px)
+maxWidth900()
max-height: calc(100vh - 140px)
.toc-child
display: none
+maxWidth900()
display: block !important
.toc-item
&.active
.toc-child
display: block
ol, ol,
li li
list-style: none list-style: none

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

@@ -351,10 +351,10 @@ _:future,
.menus_items .menus_items
display: none !important display: none !important
#search_button span #search-button span
display: none !important display: none !important
#search_button #search-button
display: inline display: inline
padding: 0 0 0 .7rem padding: 0 0 0 .7rem

3
source/css/_layout/post.styl
View File

@@ -275,3 +275,6 @@ no-beautify()
color: $noticeOutdate-border color: $noticeOutdate-border
content: '\f071' content: '\f071'
transform: translateY(-50%) transform: translateY(-50%)
.ads-wrap
margin: 2rem 0

3
source/css/_mode/darkmode.styl
View File

@@ -106,7 +106,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.error-img, .error-img,
#article-container iframe, #article-container iframe,
img, img,
.gist .gist,
.ads-wrap
filter: brightness(.8) filter: brightness(.8)
#aside_content .aside-list > .aside-list-item:not(:last-child) #aside_content .aside-list > .aside-list-item:not(:last-child)

4
source/css/_page/homepage.styl
View File

@@ -43,6 +43,10 @@
order: 2 order: 2
border-radius: 0 8px 8px 0 border-radius: 0 8px 8px 0
&.ads-wrap
display: block !important
height: auto !important
.post_cover .post_cover
overflow: hidden overflow: hidden
width: 45% width: 45%

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

@@ -57,9 +57,6 @@
color: $search-keyword-highlight color: $search-keyword-highlight
font-weight: bold font-weight: bold
.local-search-stats__hr
display: none !important
.search-result-list .search-result-list
overflow-y: auto overflow-y: auto
max-height: 10.5rem max-height: 10.5rem

3
source/css/_tags/gallery.styl
View File

@@ -99,6 +99,9 @@ figure.gallery-group
img img
opacity: 0 opacity: 0
.img-alt
display: none
.fancybox .fancybox
width: auto width: auto
text-align: inherit text-align: inherit

9
source/css/_tags/hide.styl
View File

@@ -10,6 +10,12 @@
&.open &.open
display: none display: none
& + div
display: block
& + span
display: inline
& > .hide-content & > .hide-content
display: none display: none
@@ -41,6 +47,9 @@
i i
transform: rotate(90deg) transform: rotate(90deg)
& + div
display: block
& > .hide-content & > .hide-content
display: none display: none
margin: 1.5rem 1.2rem margin: 1.5rem 1.2rem

4
source/css/index.styl
View File

@@ -1,4 +1,6 @@
@import 'nib' if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css' @import '_third-party/normalize.min.css'
// project // project
@import 'var' @import 'var'

678
source/js/main.js
View File

@@ -1,61 +1,57 @@
$(function () { document.addEventListener('DOMContentLoaded', function () {
const blogNameWidth = $('#site-name').width() const blogNameWidth = document.getElementById('site-name').offsetWidth
const menusWidth = $('#menus').width() const menusWidth = document.getElementById('menus').offsetWidth
const adjustMenu = () => { const adjustMenu = () => {
const $nav = $('#nav') const $nav = document.getElementById('nav')
let t let t
if (window.innerWidth < 768) t = true if (window.innerWidth < 768) t = true
else t = blogNameWidth + menusWidth > $nav.width() - 30 else t = blogNameWidth + menusWidth > $nav.offsetWidth - 100
if (t) { if (t) {
$nav.addClass('hide-menu') $nav.classList.add('hide-menu')
} else { } else {
$nav.removeClass('hide-menu') $nav.classList.remove('hide-menu')
} }
} }
// 初始化header // 初始化header
const initAdjust = () => { const initAdjust = () => {
adjustMenu() adjustMenu()
$('#nav').addClass('show') document.getElementById('nav').classList.add('show')
} }
// sidebar menus // sidebar menus
const sidebarFn = () => { const sidebarFn = () => {
const $toggleMenu = $('#toggle-menu') const $toggleMenu = document.getElementById('toggle-menu')
const $mobileSidebarMenus = $('#sidebar-menus') const $mobileSidebarMenus = document.getElementById('sidebar-menus')
const $menuMask = $('#menu-mask') const $menuMask = document.getElementById('menu-mask')
const $body = $('body') const $body = document.body
function openMobileSidebar () { function openMobileSidebar () {
btf.sidebarPaddingR() btf.sidebarPaddingR()
$body.css('overflow', 'hidden') $body.style.overflow = 'hidden'
$menuMask.fadeIn() btf.fadeIn($menuMask, 0.5)
$toggleMenu.removeClass('close').addClass('open') $mobileSidebarMenus.classList.add('open')
$mobileSidebarMenus.addClass('open')
} }
function closeMobileSidebar () { function closeMobileSidebar () {
$body.css({ overflow: '', 'padding-right': '' }) $body.style.cssText = "overflow: ''; padding-right: ''"
$menuMask.fadeOut() btf.fadeOut($menuMask, 0.5)
$toggleMenu.removeClass('open').addClass('close') $mobileSidebarMenus.classList.remove('open')
$mobileSidebarMenus.removeClass('open')
} }
$toggleMenu.on('click', function () { $toggleMenu.addEventListener('click', openMobileSidebar)
openMobileSidebar()
})
$menuMask.on('click touchstart', function (e) { $menuMask.addEventListener('click', e => {
if ($toggleMenu.hasClass('open')) { if ($mobileSidebarMenus.classList.contains('open')) {
closeMobileSidebar() closeMobileSidebar()
} }
}) })
$(window).on('resize', function (e) { window.addEventListener('resize', e => {
if (!$toggleMenu.is(':visible')) { if (btf.isHidden($toggleMenu)) {
if ($toggleMenu.hasClass('open')) closeMobileSidebar() if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar()
} }
}) })
} }
@@ -64,8 +60,8 @@ $(function () {
* 首頁top_img底下的箭頭 * 首頁top_img底下的箭頭
*/ */
const scrollDownInIndex = () => { const scrollDownInIndex = () => {
$('#scroll-down').on('click', function () { document.getElementById('scroll-down').addEventListener('click', function () {
btf.scrollToDest('#content-inner') btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
}) })
} }
@@ -78,7 +74,7 @@ $(function () {
const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"]') const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
if (isShowTool && $figureHighlight.length) { if (isShowTool && $figureHighlight.length) {
const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs' const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
@@ -95,88 +91,100 @@ $(function () {
highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
} }
const copy = (text, ctx) => {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
document.execCommand('copy')
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
const prevEle = ctx.previousElementSibling
prevEle.innerText = GLOBAL_CONFIG.copy.success
prevEle.style.opacity = 1
setTimeout(() => { prevEle.style.opacity = 0 }, 700)
}
} else {
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
}
}
}
// click events
const highlightCopyFn = (ele) => {
const $buttonParent = ele.parentNode
$buttonParent.classList.add('copy-true')
const selection = window.getSelection()
const range = document.createRange()
if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
const text = selection.toString()
copy(text, ele.lastChild)
selection.removeAllRanges()
$buttonParent.classList.remove('copy-true')
}
const highlightShrinkFn = (ele) => {
const $nextEle = [...ele.parentNode.children].slice(1)
ele.firstChild.classList.toggle('closed')
if (btf.isHidden($nextEle[0])) {
$nextEle.forEach(e => { e.style.display = 'block' })
} else {
$nextEle.forEach(e => { e.style.display = 'none' })
}
}
const highlightToolsFn = function (e) {
const $target = e.target.classList
if ($target.contains('expand')) highlightShrinkFn(this)
else if ($target.contains('copy-button')) highlightCopyFn(this)
}
const createEle = () => {
const newEle = document.createElement('div')
newEle.className = `highlight-tools ${highlightShrinkClass}`
newEle.addEventListener('click', highlightToolsFn)
return newEle
}
if (isHighlightLang) { if (isHighlightLang) {
if (isPrismjs) { if (isPrismjs) {
$figureHighlight.each(function () { $figureHighlight.forEach(function (item) {
const $this = $(this) const langName = item.getAttribute('data-language') !== undefined ? item.getAttribute('data-language') : 'Code'
const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>` const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.wrap('<figure class="highlight"></figure>').before(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`) btf.wrap(item, 'figure', '', 'highlight')
const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle
item.parentNode.insertBefore(newEle, item)
}) })
} else { } else {
$figureHighlight.each(function (i, o) { $figureHighlight.forEach(function (item) {
const $this = $(this) let langName = item.getAttribute('class').split(' ')[1]
let langName = $this.attr('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code' if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>` const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`) const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle
item.insertBefore(newEle, item.firstChild)
}) })
} }
} else { } else {
const ele = `<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>` if (isPrismjs) {
if (isPrismjs) $figureHighlight.wrap('<figure class="highlight"></figure>').before(ele) $figureHighlight.forEach(function (item) {
else $figureHighlight.prepend(ele) btf.wrap(item, 'figure', '', 'highlight')
} const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightCopyEle
/** item.parentNode.insertBefore(newEle, item)
* 代碼收縮 })
*/ } else {
$figureHighlight.forEach(function (item) {
if (isHighlightShrink !== undefined) { const newEle = createEle()
$('.highlight-tools >.expand').on('click', function () { newEle.innerHTML = highlightShrinkEle + highlightCopyEle
const $this = $(this) item.insertBefore(newEle, item.firstChild)
const $table = $this.parent().nextAll() })
$this.toggleClass('closed')
$table.is(':visible') ? $table.css('display', 'none') : $table.css('display', 'block')
})
}
/**
* 代碼copy
*/
if (isHighlightCopy) {
const copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
document.execCommand('copy')
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0
}, 650)
}, 400)
})
}
} else {
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
}
}
} }
// click events
$('.highlight-tools >.copy-button').on('click', function () {
const $buttonParent = $(this).parents('figure.highlight')
$buttonParent.addClass('copy-true')
const selection = window.getSelection()
const range = document.createRange()
if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0])
else range.selectNodeContents($buttonParent.find('table .code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
const text = selection.toString()
copy(text, this)
selection.removeAllRanges()
$buttonParent.removeClass('copy-true')
})
} }
} }
} }
@@ -185,24 +193,27 @@ $(function () {
* PhotoFigcaption * PhotoFigcaption
*/ */
function addPhotoFigcaption () { function addPhotoFigcaption () {
const images = $('#article-container img').not('.justified-gallery img') document.querySelectorAll('#article-container img').forEach(function (item) {
images.each(function (i, o) { const parentEle = item.parentNode
const $this = $(o) if (!parentEle.parentNode.classList.contains('justified-gallery')) {
if ($this.attr('alt')) { const ele = document.createElement('div')
const t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>') ele.className = 'img-alt is-center'
$this.after(t) ele.textContent = item.getAttribute('alt')
parentEle.insertBefore(ele, item.nextSibling)
} }
}) })
} }
/** /**
* justified-gallery 圖庫排版 * justified-gallery 圖庫排版
* 需要 jQuery
*/ */
let detectJgJsLoad = false let detectJgJsLoad = false
const runJustifiedGallery = function () { const runJustifiedGallery = function () {
const $justifiedGallery = $('.justified-gallery') let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery')
if ($justifiedGallery.length) { if ($justifiedGallery.length) {
$justifiedGallery = $($justifiedGallery)
const $imgList = $justifiedGallery.find('img') const $imgList = $justifiedGallery.find('img')
$imgList.unwrap() $imgList.unwrap()
if ($imgList.length) { if ($imgList.length) {
@@ -214,8 +225,8 @@ $(function () {
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else { else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`) $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery) btf.initJustifiedGallery($justifiedGallery)
}) })
detectJgJsLoad = true detectJgJsLoad = true
@@ -228,21 +239,37 @@ $(function () {
*/ */
const addLightBox = function () { const addLightBox = function () {
if (GLOBAL_CONFIG.lightbox === 'fancybox') { if (GLOBAL_CONFIG.lightbox === 'fancybox') {
const images = $('#article-container img:not(.gallery-group-img)').not($('a>img')) const images = document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img')
images.each(function (i, o) { if (images.length) {
const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src') btf.isJqueryLoad(() => {
const dataCaption = $(o).attr('alt') ? $(o).attr('alt') : '' const runFancybox = (ele) => {
$(o).wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`) ele.each(function (i, o) {
}) const $this = $(o)
const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
const dataCaption = $this.attr('alt') || ''
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="group" data-caption="${dataCaption}" class="fancybox"></a>`)
})
$().fancybox({ $().fancybox({
selector: '[data-fancybox]', selector: '[data-fancybox]',
loop: true, loop: true,
transitionEffect: 'slide', transitionEffect: 'slide',
protect: true, protect: true,
buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
hash: false hash: false
}) })
}
if (typeof $.fancybox === 'undefined') {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
runFancybox($(images))
})
} else {
runFancybox($(images))
}
})
}
} else { } else {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
zoom.on('open', function (event) { zoom.on('open', function (event) {
@@ -260,36 +287,36 @@ $(function () {
const scrollFn = function () { const scrollFn = function () {
let initTop = 0 let initTop = 0
let isChatShow = true let isChatShow = true
const $rightside = $('#rightside') const $rightside = document.getElementById('rightside')
const $nav = $('#nav') const $nav = document.getElementById('nav')
const isChatBtnHide = typeof chatBtnHide === 'function' const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function' const isChatBtnShow = typeof chatBtnShow === 'function'
$(window).scroll(btf.throttle(function (event) { window.addEventListener('scroll', btf.throttle(function (e) {
const currentTop = $(this).scrollTop() const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop) const isDown = scrollDirection(currentTop)
if (currentTop > 56) { if (currentTop > 56) {
if (isDown) { if (isDown) {
if ($nav.hasClass('visible')) $nav.removeClass('visible') if ($nav.classList.contains('visible')) $nav.classList.remove('visible')
if (isChatBtnShow && isChatShow === true) { if (isChatBtnShow && isChatShow === true) {
chatBtnHide() chatBtnHide()
isChatShow = false isChatShow = false
} }
} else { } else {
if (!$nav.hasClass('visible')) $nav.addClass('visible') if (!$nav.classList.contains('visible')) $nav.classList.add('visible')
if (isChatBtnHide && isChatShow === false) { if (isChatBtnHide && isChatShow === false) {
window.chatBtnShow() chatBtnShow()
isChatShow = true isChatShow = true
} }
} }
$nav.addClass('fixed') $nav.classList.add('fixed')
if ($rightside.css('opacity') === '0') { if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.css({ opacity: '1', transform: 'translateX(-38px)' }) $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
} }
} else { } else {
if (currentTop === 0) { if (currentTop === 0) {
$nav.removeClass('fixed').removeClass('visible') $nav.classList.remove('fixed', 'visible')
} }
$rightside.css({ opacity: '', transform: '' }) $rightside.style.cssText = "opacity: ''; transform: ''"
} }
}, 200)) }, 200))
@@ -305,40 +332,29 @@ $(function () {
* toc * toc
*/ */
const tocFn = function () { const tocFn = function () {
const $cardTocLayout = $('#card-toc') const $cardTocLayout = document.getElementById('card-toc')
const $cardToc = $cardTocLayout.find('.toc-content') const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
const $tocChild = $cardToc.find('.toc-child') const $tocLink = $cardToc.querySelectorAll('.toc-link')
const $tocLink = $cardToc.find('.toc-link') const $article = document.getElementById('article-container')
const $article = $('#article-container')
$tocChild.hide()
// main of scroll // main of scroll
$(window).scroll(btf.throttle(function (event) { window.addEventListener('scroll', btf.throttle(function (e) {
const currentTop = $(this).scrollTop() const currentTop = window.scrollY || document.documentElement.scrollTop
scrollPercent(currentTop) scrollPercent(currentTop)
findHeadPosition(currentTop) findHeadPosition(currentTop)
}, 100)) }, 100))
// expand toc-item
const expandToc = function ($item) {
if ($item.is(':visible')) {
return
}
$item.fadeIn(400)
}
const scrollPercent = function (currentTop) { const scrollPercent = function (currentTop) {
const docHeight = $article.height() const docHeight = $article.clientHeight
const winHeight = $(window).height() const winHeight = document.documentElement.clientHeight
const headerHeight = $article.offset().top const headerHeight = $article.offsetTop
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight) const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
const scrollPercent = (currentTop - headerHeight) / (contentMath) const scrollPercent = (currentTop - headerHeight) / (contentMath)
const scrollPercentRounded = Math.round(scrollPercent * 100) const scrollPercentRounded = Math.round(scrollPercent * 100)
const percentage = (scrollPercentRounded > 100) ? 100 const percentage = (scrollPercentRounded > 100) ? 100
: (scrollPercentRounded <= 0) ? 0 : (scrollPercentRounded <= 0) ? 0
: scrollPercentRounded : scrollPercentRounded
$cardToc.attr('progress-percentage', percentage) $cardToc.setAttribute('progress-percentage', percentage)
} }
// anchor // anchor
@@ -351,94 +367,86 @@ $(function () {
const mobileToc = { const mobileToc = {
open: () => { open: () => {
$cardTocLayout.css('display', 'block') $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px'
}, },
close: () => { close: () => {
$cardTocLayout.css('animation', 'toc-close .2s') $cardTocLayout.style.animation = 'toc-close .2s'
setTimeout(() => { setTimeout(() => {
$cardTocLayout.css({ display: '', animation: '' }) $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
}, 100) }, 100)
} }
} }
$('#mobile-toc-button').on('click', () => { document.getElementById('mobile-toc-button').addEventListener('click', () => {
if ($cardTocLayout.is(':visible')) { if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open()
mobileToc.close() else mobileToc.close()
} else {
mobileToc.open()
}
}) })
// toc元素點擊 // toc元素點擊
$tocLink.on('click', function (e) { $cardToc.addEventListener('click', (e) => {
e.preventDefault() e.preventDefault()
btf.scrollToDest(decodeURI($(this).attr('href'))) const $target = e.target.classList.contains('toc-link')
? e.target
: e.target.parentElement
btf.scrollToDest(document.querySelector(decodeURI($target.getAttribute('href'))).offsetTop, 300)
if (window.innerWidth < 900) { if (window.innerWidth < 900) {
mobileToc.close() mobileToc.close()
} }
}) })
const autoScrollToc = function (currentTop, item) { const autoScrollToc = function (item) {
const activePosition = item.offset().top const activePosition = item.getBoundingClientRect().top
const $tocContent = $cardToc const sidebarScrollTop = $cardToc.scrollTop
const sidebarScrollTop = $tocContent.scrollTop() if (activePosition > (document.documentElement.clientHeight - 100)) {
if (activePosition > (currentTop + $(window).height() - 100)) { $cardToc.scrollTop = sidebarScrollTop + 150
$tocContent.scrollTop(sidebarScrollTop + 100)
} }
if (activePosition < currentTop + 100) { if (activePosition < 100) {
$tocContent.scrollTop(sidebarScrollTop - 100) $cardToc.scrollTop = sidebarScrollTop - 150
} }
} }
// find head position & add active class // find head position & add active class
// DOM Hierarchy: const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
// ol.toc > (li.toc-item, ...) let detectItem = ''
// li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
const list = $article.find('h1,h2,h3,h4,h5,h6')
const findHeadPosition = function (top) { const findHeadPosition = function (top) {
// assume that we are not in the post page if no TOC link be found,
// thus no need to update the status
if ($tocLink.length === 0) { if ($tocLink.length === 0) {
return false return false
} }
let currentId = '' let currentId = ''
list.each(function () { let currentIndex = ''
const head = $(this)
if (top > head.offset().top - 70) { list.forEach(function (ele, index) {
currentId = '#' + encodeURI($(this).attr('id')) if (top > ele.offsetTop - 70) {
currentId = '#' + encodeURI(ele.getAttribute('id'))
currentIndex = index
} }
}) })
if (detectItem === currentIndex) return
if (currentId === '') { if (currentId === '') {
$tocLink.removeClass('active') $cardToc.querySelectorAll('.active').forEach(i => { i.classList.remove('active') })
$tocChild.hide() detectItem = currentIndex
return
} }
const currentActive = $tocLink.filter('.active') detectItem = currentIndex
if (currentId && currentActive.attr('href') !== currentId) {
if (isAnchor) updateAnchor(currentId)
$tocLink.removeClass('active') $cardToc.querySelectorAll('.active').forEach(item => { item.classList.remove('active') })
const currentActive = $tocLink[currentIndex]
currentActive.classList.add('active')
if (isAnchor) updateAnchor(currentId)
const _this = $tocLink.filter('[href="' + currentId + '"]') setTimeout(function () {
_this.addClass('active') autoScrollToc(currentActive)
autoScrollToc(top, _this) }, 0)
const parents = _this.parents('.toc-child') let parent = currentActive.parentNode
// Returned list is in reverse order of the DOM elements
// Thus `parents.last()` is the outermost .toc-child container for (; !parent.matches('.toc'); parent = parent.parentNode) {
// i.e. list of subsections if (parent.matches('li')) parent.classList.add('active')
const topLink = (parents.length > 0) ? parents.last() : _this
expandToc(topLink.closest('.toc-item').find('.toc-child'))
topLink
// Find all top-level .toc-item containers, i.e. sections
// excluding the currently active one
.closest('.toc-item').siblings('.toc-item')
// Hide their respective list of subsections
.find('.toc-child').hide()
} }
} }
} }
@@ -446,17 +454,11 @@ $(function () {
/** /**
* Rightside * Rightside
*/ */
const rightSideFn = {
const $rightsideEle = $('#rightside') switchReadMode: () => { // read-mode
document.body.classList.toggle('read-mode')
// read-mode },
$rightsideEle.on('click', '#readmode', function () { switchDarkMode: () => { // Switch Between Light And Dark Mode
$('body').toggleClass('read-mode')
})
// Switch Between Light And Dark Mode
if ($('#darkmode').length) {
const switchReadMode = function () {
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') { if (nowMode === 'light') {
activateDarkMode() activateDarkMode()
@@ -467,30 +469,46 @@ $(function () {
saveToLocal.set('theme', 'light', 2) saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
} }
} // handle some cases
$rightsideEle.on('click', '#darkmode', () => {
switchReadMode()
typeof utterancesTheme === 'function' && utterancesTheme() typeof utterancesTheme === 'function' && utterancesTheme()
typeof FB === 'object' && window.loadFBComment() typeof FB === 'object' && window.loadFBComment()
window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200) window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}) },
showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
document.getElementById('rightside-config-hide').classList.toggle('show')
},
scrollToTop: () => { // Back to top
btf.scrollToDest(0, 500)
},
hideAsideBtn: () => { // Hide aside
const $htmlDom = document.documentElement.classList
$htmlDom.contains('hide-aside')
? saveToLocal.set('aside-status', 'show', 2)
: saveToLocal.set('aside-status', 'hide', 2)
$htmlDom.toggle('hide-aside')
}
} }
// rightside 點擊設置 按鈕 展開 document.getElementById('rightside').addEventListener('click', function (e) {
$rightsideEle.on('click', '#rightside_config', () => $('#rightside-config-hide').toggleClass('show')) const $target = e.target.id || e.target.parentNode.id
switch ($target) {
// Back to top case 'go-up':
$rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body')) rightSideFn.scrollToTop()
break
$rightsideEle.on('click', '#hide-aside-btn', () => { case 'rightside_config':
const $htmlDom = $(document.documentElement) rightSideFn.showOrHideBtn()
if ($htmlDom.hasClass('hide-aside')) { break
$htmlDom.removeClass('hide-aside') case 'readmode':
saveToLocal.set('aside-status', 'show', 2) rightSideFn.switchReadMode()
} else { break
$htmlDom.addClass('hide-aside') case 'darkmode':
saveToLocal.set('aside-status', 'hide', 2) rightSideFn.switchDarkMode()
break
case 'hide-aside-btn':
rightSideFn.hideAsideBtn()
break
default:
break
} }
}) })
@@ -500,16 +518,23 @@ $(function () {
* 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
*/ */
const clickFnOfSubMenu = function () { const clickFnOfSubMenu = function () {
$('#sidebar-menus .expand').on('click', function () { document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) {
$(this).parents('.menus_item').find('> .menus_item_child').slideToggle() e.addEventListener('click', function () {
$(this).toggleClass('hide') this.classList.toggle('hide')
const $dom = this.parentNode.nextElementSibling
if (btf.isHidden($dom)) {
$dom.style.display = 'block'
} else {
$dom.style.display = 'none'
}
})
}) })
$(window).on('touchmove', function (e) { window.addEventListener('touchmove', function (e) {
const $menusChild = $('#nav .menus_item_child') const $menusChild = document.querySelectorAll('#nav .menus_item_child')
if ($menusChild.is(':visible')) { $menusChild.forEach(item => {
$menusChild.css('display', 'none') if (!btf.isHidden(item)) item.style.display = 'none'
} })
}) })
} }
@@ -542,10 +567,10 @@ $(function () {
* 網頁運行時間 * 網頁運行時間
*/ */
const addRuntime = () => { const addRuntime = () => {
const $runtimeCount = $('#runtimeshow') const $runtimeCount = document.getElementById('runtimeshow')
if ($runtimeCount.length) { if ($runtimeCount !== null) {
const publishDate = $runtimeCount.attr('data-publishDate') const publishDate = $runtimeCount.getAttribute('data-publishDate')
$runtimeCount.text(btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime) $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
} }
} }
@@ -553,11 +578,10 @@ $(function () {
* 最後一次更新時間 * 最後一次更新時間
*/ */
const addLastPushDate = () => { const addLastPushDate = () => {
const $lastPushDateItem = $('#last-push-date') const $lastPushDateItem = document.getElementById('last-push-date')
if ($lastPushDateItem.length) { if ($lastPushDateItem !== null) {
const lastPushDate = $lastPushDateItem.attr('data-lastPushDate') const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
const diffDay = btf.diffDate(lastPushDate, true) $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
$lastPushDateItem.text(diffDay)
} }
} }
@@ -565,85 +589,101 @@ $(function () {
* table overflow * table overflow
*/ */
const addTableWrap = function () { const addTableWrap = function () {
const $table = $('#article-container table').not($('figure.highlight > table')) const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
$table.each(function () { if ($table.length) {
$(this).wrap('<div class="table-wrap"></div>') $table.forEach(item => {
}) btf.wrap(item, 'div', '', 'table-wrap')
})
}
} }
/** /**
* tag-hide * tag-hide
*/ */
const clickFnOfTagHide = function () { const clickFnOfTagHide = function () {
const $hideInline = $('.hide-button') const $hideInline = document.querySelectorAll('#article-container .hide-button')
if ($hideInline.length) { if ($hideInline.length) {
$hideInline.on('click', function (e) { $hideInline.forEach(function (item) {
const $this = $(this) item.addEventListener('click', function (e) {
const $hideContent = $(this).next('.hide-content') const $this = this
$this.toggleClass('open') const $hideContent = $this.nextElementSibling
$hideContent.toggle() $this.classList.toggle('open')
if ($this.hasClass('open')) { if ($this.classList.contains('open')) {
if ($hideContent.find('.justified-gallery').length > 0) { if ($hideContent.querySelectorAll('.justified-gallery').length > 0) {
btf.initJustifiedGallery($hideContent.find('.justified-gallery')) btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery'))
}
} }
} })
}) })
} }
} }
const tabsFn = { const tabsFn = {
clickFnOfTabs: function () { clickFnOfTabs: function () {
const $tab = $('#article-container .tabs') document.querySelectorAll('#article-container .tab > button').forEach(function (item) {
$tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) { item.addEventListener('click', function (e) {
const $this = $(this) const $this = this
const $tabItem = $this.parent() const $tabItem = $this.parentNode
if (!$tabItem.hasClass('active')) { if (!$tabItem.classList.contains('active')) {
const $tabContent = $this.parents('.nav-tabs').next() const $tabContent = $tabItem.parentNode.nextElementSibling
$tabItem.siblings('.active').removeClass('active') btf.siblings($tabItem, 'active')[0].classList.remove('active')
$tabItem.addClass('active') $tabItem.classList.add('active')
const tabId = $this.attr('data-href') const tabId = $this.getAttribute('data-href').replace('#', '')
$tabContent.find('> .tab-item-content').removeClass('active') const childList = [...$tabContent.children]
$tabContent.find(`> ${tabId}`).addClass('active') childList.forEach(item => {
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery') if (item.id === tabId) item.classList.add('active')
if ($isTabJustifiedGallery.length > 0) { else item.classList.remove('active')
btf.initJustifiedGallery($isTabJustifiedGallery) })
const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`)
if ($isTabJustifiedGallery.length > 0) {
btf.initJustifiedGallery($isTabJustifiedGallery)
}
} }
} })
}) })
}, },
backToTop: () => { backToTop: () => {
const backToTopBtn = $('#article-container .tabs .tab-to-top') document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
backToTopBtn.on('click', function () { item.addEventListener('click', function () {
btf.scrollToDest($(this).parents('.tabs')) btf.scrollToDest(btf.getParents(this, '.tabs').offsetTop, 300)
})
}) })
} }
} }
const toggleCardCategory = function () { const toggleCardCategory = function () {
const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i') const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
$cardCategory.on('click', function (e) { if ($cardCategory.length > 0) {
e.preventDefault() $cardCategory.forEach(function (item) {
$(this).toggleClass('expand').parents('.parent').next().slideToggle(300) 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 () { const switchComments = function () {
let switchDone = false let switchDone = false
$('#comment-switch > .switch-btn').on('click', function () { const $switchBtn = document.querySelector('#comment-switch > .switch-btn')
const $btn = $(this) $switchBtn && $switchBtn.addEventListener('click', function () {
$btn.hasClass('move') ? $btn.removeClass('move') : $btn.addClass('move') this.classList.toggle('move')
$('#post-comment > .comment-wrap > div').each(function (i, o) { document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) {
const $this = $(o) if (btf.isHidden(item)) {
if ($this.is(':visible')) { item.style.cssText = 'display: block;animation: tabshow .5s'
$this.hide()
} else { } else {
$this.css({ item.style.cssText = "display: none;animation: ''"
display: 'block',
animation: 'tabshow .5s'
})
} }
}) })
if (!switchDone && typeof loadOtherComment === 'function') { if (!switchDone && typeof loadOtherComment === 'function') {
switchDone = true switchDone = true
loadOtherComment() loadOtherComment()
@@ -655,11 +695,14 @@ $(function () {
const data = GLOBAL_CONFIG.noticeOutdate const data = GLOBAL_CONFIG.noticeOutdate
var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate) var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
if (diffDay >= data.limitDay) { if (diffDay >= data.limitDay) {
const code = `<div class="post-outdate-notice">${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}</div>` const ele = document.createElement('div')
ele.className = 'post-outdate-notice'
ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext
const $targetEle = document.getElementById('article-container')
if (data.position === 'top') { if (data.position === 'top') {
$('#article-container').prepend(code) $targetEle.insertBefore(ele, $targetEle.firstChild)
} else { } else {
$('#article-container').append(code) $targetEle.appendChild(ele)
} }
} }
} }
@@ -673,17 +716,16 @@ $(function () {
} }
const relativeDate = function (selector) { const relativeDate = function (selector) {
selector.each((i, o) => { selector.forEach(item => {
const $this = $(o) const $this = item
const timeVal = $this.attr('datetime') const timeVal = $this.getAttribute('datetime')
$this.text(btf.diffDate(timeVal, true)).css('display', 'inline') $this.innerText = btf.diffDate(timeVal, true)
$this.style.display = 'inline'
}) })
} }
const unRefreshFn = function () { const unRefreshFn = function () {
$(window).on('resize', function () { window.addEventListener('resize', adjustMenu)
adjustMenu()
})
clickFnOfSubMenu() clickFnOfSubMenu()
GLOBAL_CONFIG.islazyload && lazyloadImg() GLOBAL_CONFIG.islazyload && lazyloadImg()
@@ -696,9 +738,9 @@ $(function () {
if (GLOBAL_CONFIG_SITE.isPost) { if (GLOBAL_CONFIG_SITE.isPost) {
GLOBAL_CONFIG_SITE.isToc && tocFn() GLOBAL_CONFIG_SITE.isToc && tocFn()
GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice() GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time')) GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
} else { } else {
GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time')) GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
GLOBAL_CONFIG.runtime && addRuntime() GLOBAL_CONFIG.runtime && addRuntime()
addLastPushDate() addLastPushDate()
toggleCardCategory() toggleCardCategory()

39
source/js/search/algolia.js
View File

@@ -1,9 +1,9 @@
$(function () { window.addEventListener('load', () => {
const openSearch = () => { const openSearch = () => {
$('body').css({ width: '100%', overflow: 'hidden' }) document.body.style.cssText = 'width: 100%;overflow: hidden'
$('#algolia-search .search-dialog').css('display', 'block') document.querySelector('#algolia-search .search-dialog').style.display = 'block'
$('.ais-search-box--input').focus() document.querySelector('#algolia-search .ais-search-box--input').focus()
$('#search-mask').fadeIn() btf.fadeIn(document.getElementById('search-mask'), 0.5)
// shortcut: ESC // shortcut: ESC
document.addEventListener('keydown', function f (event) { document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') { if (event.code === 'Escape') {
@@ -14,30 +14,23 @@ $(function () {
} }
const closeSearch = () => { const closeSearch = () => {
$('body').css({ width: '', overflow: '' }) document.body.style.cssText = "width: '';overflow: ''"
$('#algolia-search .search-dialog').css({ const $searchDialog = document.querySelector('#algolia-search .search-dialog')
animation: 'search_close .5s' $searchDialog.style.animation = 'search_close .5s'
}) setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500)
btf.fadeOut(document.getElementById('search-mask'), 0.5)
setTimeout(function () {
$('#algolia-search .search-dialog').css({
animation: '',
display: 'none'
})
}, 500)
$('#search-mask').fadeOut()
} }
const searchClickFn = () => { const searchClickFn = () => {
$('a.social-icon.search').on('click', openSearch) document.querySelector('#search-button > .search').addEventListener('click', openSearch)
$('#search-mask, .search-close-button').on('click touchstart', closeSearch) document.getElementById('search-mask').addEventListener('click', closeSearch)
document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
} }
searchClickFn() searchClickFn()
window.addEventListener('pjax:complete', function () { window.addEventListener('pjax:complete', function () {
closeSearch() getComputedStyle(document.querySelector('#algolia-search .search-dialog')).display === 'block' && closeSearch()
searchClickFn() searchClickFn()
}) })
@@ -55,9 +48,9 @@ $(function () {
hitsPerPage: algolia.hits.per_page || 10 hitsPerPage: algolia.hits.per_page || 10
}, },
searchFunction: function (helper) { searchFunction: function (helper) {
const searchInput = $('#algolia-search-input').find('input') const searchInput = document.querySelector('#algolia-search-input input')
if (searchInput.val()) { if (searchInput.value) {
helper.search() helper.search()
} }
} }

76
source/js/search/local-search.js
View File

@@ -1,18 +1,14 @@
$(function () { window.addEventListener('load', () => {
let loadFlag = false let loadFlag = false
const openSearch = function () { const openSearch = function () {
$('body').css({ document.body.style.cssText = 'width: 100%;overflow: hidden'
width: '100%', document.querySelector('#local-search .search-dialog').style.display = 'block'
overflow: 'hidden' document.querySelector('#local-search-input input').focus()
}) btf.fadeIn(document.getElementById('search-mask'), 0.5)
$('#local-search .search-dialog').css('display', 'block')
$('#local-search-input input').focus()
$('#search-mask').fadeIn()
if (!loadFlag) { if (!loadFlag) {
search(GLOBAL_CONFIG.localSearch.path) search(GLOBAL_CONFIG.localSearch.path)
loadFlag = true loadFlag = true
} }
// shortcut: ESC // shortcut: ESC
document.addEventListener('keydown', function f (event) { document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') { if (event.code === 'Escape') {
@@ -23,60 +19,48 @@ $(function () {
} }
const closeSearch = function () { const closeSearch = function () {
$('body').css({ document.body.style.cssText = "width: '';overflow: ''"
width: '', const $searchDialog = document.querySelector('#local-search .search-dialog')
overflow: '' $searchDialog.style.animation = 'search_close .5s'
}) setTimeout(() => { $searchDialog.style.cssText = "display: none; animation: ''" }, 500)
$('#local-search .search-dialog').css({ btf.fadeOut(document.getElementById('search-mask'), 0.5)
animation: 'search_close .5s'
})
setTimeout(function () {
$('#local-search .search-dialog').css({
animation: '',
display: 'none'
})
}, 500)
$('#search-mask').fadeOut()
} }
// click function
const searchClickFn = () => { const searchClickFn = () => {
$('a.social-icon.search').on('click', openSearch) document.querySelector('#search-button > .search').addEventListener('click', openSearch)
$('#search-mask, .search-close-button').on('click', closeSearch) document.getElementById('search-mask').addEventListener('click', closeSearch)
document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
} }
searchClickFn() searchClickFn()
// pjax
window.addEventListener('pjax:complete', function () { window.addEventListener('pjax:complete', function () {
$('#local-search .search-dialog').is(':visible') && closeSearch() getComputedStyle(document.querySelector('#local-search .search-dialog')).display === 'block' && closeSearch()
searchClickFn() searchClickFn()
}) })
function search (path) { function search (path) {
$.ajax({ fetch(GLOBAL_CONFIG.root + path)
url: GLOBAL_CONFIG.root + path, .then(response => response.text())
dataType: 'xml', .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
success: function (xmlResponse) { .then(data => {
// get the contents from search data const datas = [...data.querySelectorAll('entry')].map(function (item) {
const datas = $('entry', xmlResponse).map(function () {
return { return {
title: $('title', this).text(), title: item.querySelector('title').textContent,
content: $('content', this).text(), content: item.querySelector('content').textContent,
url: $('url', this).text() url: item.querySelector('url').textContent
} }
}).get() })
const $input = $('#local-search-input input')[0] const $input = document.querySelector('#local-search-input input')
const $resultContent = $('#local-hits')[0] const $resultContent = document.getElementById('local-search-results')
$input.addEventListener('input', function () { $input.addEventListener('input', function () {
let str = '<div class="search-result-list">' let str = '<div class="search-result-list">'
const keywords = this.value.trim().toLowerCase().split(/[\s]+/) const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
$resultContent.innerHTML = '' $resultContent.innerHTML = ''
if (this.value.trim().length <= 0) { if (this.value.trim().length <= 0) return
$('.local-search-stats__hr').hide()
return
}
let count = 0 let count = 0
// perform local searching // perform local searching
datas.forEach(function (data) { datas.forEach(function (data) {
@@ -141,7 +125,6 @@ $(function () {
str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
count += 1 count += 1
$('.local-search-stats__hr').show()
if (dataContent !== '') { if (dataContent !== '') {
str += '<p class="search-result">' + matchContent + '...</p>' str += '<p class="search-result">' + matchContent + '...</p>'
@@ -158,7 +141,6 @@ $(function () {
$resultContent.innerHTML = str $resultContent.innerHTML = str
window.pjax && window.pjax.refresh($resultContent) window.pjax && window.pjax.refresh($resultContent)
}) })
} })
})
} }
}) })

4
source/js/tw_cn.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable no-undef */ /* eslint-disable no-undef */
(function () { document.addEventListener('DOMContentLoaded', function () {
const translate = GLOBAL_CONFIG.translate const translate = GLOBAL_CONFIG.translate
const snackbarData = GLOBAL_CONFIG.Snackbar const snackbarData = GLOBAL_CONFIG.Snackbar
const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文 const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
@@ -96,4 +96,4 @@
} }
translateInitialization() translateInitialization()
document.addEventListener('pjax:complete', translateInitialization) document.addEventListener('pjax:complete', translateInitialization)
})() })

133
source/js/utils.js
View File

@@ -56,23 +56,10 @@ var btf = {
const clientWidth = document.body.clientWidth const clientWidth = document.body.clientWidth
const paddingRight = innerWidth - clientWidth const paddingRight = innerWidth - clientWidth
if (innerWidth !== clientWidth) { if (innerWidth !== clientWidth) {
$('body').css('padding-right', paddingRight) document.body.style.paddingRight = paddingRight + 'px'
} }
}, },
scrollToDest: name => {
const scrollOffset = $(name).offset().top
let offset
if ($(window).scrollTop() > scrollOffset) {
offset = 65
} else {
offset = 0
}
$('body,html').animate({
scrollTop: scrollOffset - offset
})
},
snackbarShow: (text, showAction, duration) => { snackbarShow: (text, showAction, duration) => {
const sa = (typeof showAction !== 'undefined') ? showAction : false const sa = (typeof showAction !== 'undefined') ? showAction : false
const dur = (typeof duration !== 'undefined') ? duration : 2000 const dur = (typeof duration !== 'undefined') ? duration : 2000
@@ -88,6 +75,9 @@ var btf = {
}, },
initJustifiedGallery: function (selector) { initJustifiedGallery: function (selector) {
if (!(selector instanceof jQuery)) {
selector = $(selector)
}
selector.each(function (i, o) { selector.each(function (i, o) {
if ($(this).is(':visible')) { if ($(this).is(':visible')) {
$(this).justifiedGallery({ $(this).justifiedGallery({
@@ -145,5 +135,118 @@ var btf = {
} else { } else {
callback() callback()
} }
} },
scrollToDest: (pos, time) => {
if (pos < 0 || time < 0) {
return
}
var currentPos = window.scrollY || window.screenTop
if (currentPos > pos) pos = pos - 65
var start = null
time = time || 500
window.requestAnimationFrame(function step (currentTime) {
start = !start ? currentTime : start
if (currentPos < pos) {
const progress = currentTime - start
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos)
if (progress < time) {
window.requestAnimationFrame(step)
} else {
window.scrollTo(0, pos)
}
} else {
const progress = currentTime - start
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time))
if (progress < time) {
window.requestAnimationFrame(step)
} else {
window.scrollTo(0, pos)
}
}
})
},
fadeIn: (ele, time) => {
ele.style.cssText = `display:block;animation: to_show ${time}s`
},
fadeOut: (ele, time) => {
ele.addEventListener('animationend', function f () {
ele.style.cssText = "display: none; animation: '' "
ele.removeEventListener('animationend', f)
})
ele.style.animation = `to_hide ${time}s`
},
getParents: (elem, selector) => {
// polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function (s) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s)
let i = matches.length
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1
}
}
for (; elem && elem !== document; elem = elem.parentNode) {
if (elem.matches(selector)) return elem
}
return null
},
/**
*
* @param {*} ele
* @param {*} selector class name
*/
siblings: (ele, selector) => {
return [...ele.parentNode.children].filter((child) => {
if (selector) {
return child !== ele && child.classList.contains(selector)
}
})
},
/**
*
* @param {*} selector
* @param {*} eleType the type of create element
* @param {*} id id
* @param {*} cn class name
*/
wrap: function (selector, eleType, id = null, cn = null) {
const creatEle = document.createElement(eleType)
if (id) creatEle.id = id
if (cn) creatEle.className = cn
selector.parentNode.insertBefore(creatEle, selector)
creatEle.appendChild(selector)
},
unwrap: function (el) {
const elParentNode = el.parentNode
if (elParentNode !== document.body) {
elParentNode.parentNode.insertBefore(el, elParentNode)
elParentNode.parentNode.removeChild(elParentNode)
}
},
isJqueryLoad: (fn) => {
if (typeof jQuery === 'undefined') {
getScript(GLOBAL_CONFIG.source.jQuery).then(fn)
} else {
fn()
}
},
isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0
} }