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

breaking changes: 移除博天api

Browse Source 
breaking changes: 移除 waline 的 avatar 和 avatar cdn 配置
feat: anchor 不再限制 post 頁開啟，可以在任何頁面開啟
feat: 文章標題支持點擊跳轉到此標題開始閲讀 closed #653
feat: toc可以設置全部展開 closed #709
feat: 增加 新的評論系統 giscus
feat: 支持新的評論名寫法，主題會處理評論名字大小寫，舊的會兼容
feat: 友情鏈接列表增加 fetch url 獲取
improvement: 鼠標移到最新評論內容，增加 title 顯示
fix: 修復 rightside 遮擋內容，導致內容無法點擊的 bug
fix: 修復 mermaid 在某些頁面（有元素 id 為 mermaid 時） 會無法加載的 bug
fix: 修復 搜索框不會自動 focus 的 bug
This commit is contained in:
Jerry
2021-11-14 17:50:11 +08:00
Unverified
parent f7c50586ce
commit ffeab5e20c
30 changed files with 363 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -119,5 +119,5 @@ script.
},
isPhotoFigcaption: !{theme.photofigcaption},
islazyload: !{theme.lazyload.enable},
isanchor: !{theme.anchor}
isAnchor: !{theme.anchor}
}

67
layout/includes/page/flink.pug
View File

@@ -1,18 +1,57 @@
#article-container
.flink
if site.data.link
each i in site.data.link
if i.class_name
h2!= i.class_name
if i.class_desc
.flink-desc!=i.class_desc
.flink-list
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
.flink-item-icon
img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
.flink-item-name= item.name
.flink-item-desc(title=item.descr)= item.descr
if page.flink_url
script.
(()=>{
const replaceSymbol = (str) => {
return str.replace(/[\p{P}\p{S}]/gu, '-')
}
let result = ''
fetch('!{url_for(page.flink_url)}')
.then(response => response.json())
.then(str => {
for(let i = 0; i < str.length; i++){
const replaceClassName = replaceSymbol(str[i].class_name)
const className = str[i].class_name ? `<h2 id='${replaceClassName}'><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ''
const classDesc = str[i].class_desc ? `<div class='flink-desc'>${str[i].class_desc}</div>` : ''
let listResult = ''
const lists = str[i].link_list
for(let j = 0; j < lists.length; j++){
listResult += `
<div class="flink-list-item">
<a href='${lists[j].link}' title='${lists[j].name}' target='_blank'>
<div class='flink-item-icon'>
<img class='no-lightbox' src='${lists[j].avatar}' onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt='${lists[j].name}' />
</div>
<div class='flink-item-name'>${lists[j].name}</div>
<div class='flink-item-desc' title='${lists[j].descr}'>${lists[j].descr}</div>
</a>
</div>`
}
result += `${className}${classDesc} <div class='flink-list'>${listResult}</div>`
}
document.querySelector('.flink').insertAdjacentHTML('afterbegin', result)
})
})()
else
if site.data.link
each i in site.data.link
if i.class_name
!=markdown(`## ${i.class_name}`)
if i.class_desc
.flink-desc!=i.class_desc
.flink-list
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
.flink-item-icon
img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
.flink-item-name= item.name
.flink-item-desc(title=item.descr)= item.descr
!= page.content

49
layout/includes/third-party/comments/giscus.pug vendored Normal file
View File

@@ -0,0 +1,49 @@
- const { repo, repo_id, category_id, option } = theme.giscus
- const themes = theme.giscus.theme
script.
function loadGiscus () {
let nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
const config = Object.assign({
src: '!{theme.CDN.giscus}',
'data-repo': '!{repo}',
'data-repo-id': '!{repo_id}',
'data-category-id': '!{category_id}',
'data-mapping': 'pathname',
'data-theme': nowTheme,
'data-reactions-enabled': '1',
crossorigin: 'anonymous',
async: true
},!{JSON.stringify(option)})
let ele = document.createElement('script')
for (let key in config) {
ele.setAttribute(key, config[key])
}
document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
}
function changeGiscusTheme () {
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
function sendMessage(message) {
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}
sendMessage({
setConfig: {
theme: theme
}
});
}
if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
else loadGiscus()
} else {
function loadOtherComment () {
loadGiscus()
}
}

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

@@ -33,6 +33,8 @@ hr
#twikoo-wrap
when 'Waline'
#waline-wrap
when 'Giscus'
#giscus-wrap
when 'Facebook Comments'
.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
data-numposts= theme.facebook_comments.pageSize || 10

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

@@ -16,5 +16,7 @@ each name in theme.comments.use
!=partial('includes/third-party/comments/twikoo', {}, {cache: true})
when 'Waline'
!=partial('includes/third-party/comments/waline', {}, {cache: true})
when 'Giscus'
!=partial('includes/third-party/comments/giscus', {}, {cache: true})
when 'Facebook Comments'
!=partial('includes/third-party/comments/facebook_comments', {}, {cache: true})

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

@@ -1,4 +1,4 @@
- const { serverURL, avatar, avatarCDN, visitor, option } = theme.waline
- const { serverURL, visitor, option } = theme.waline
script.
function loadWaline () {
@@ -6,15 +6,13 @@ script.
const waline = new Waline(Object.assign({
el: '#waline-wrap',
serverURL: '!{serverURL}',
avatar: '#{avatar}',
avatarCDN: '!{avatarCDN || "https://sdn.geekzu.org/avatar/"}',
path: location.pathname,
visitor: !{visitor},
dark: 'html[data-theme="dark"]'
}, !{JSON.stringify(option)}))
}
if (typeof Waline === 'function') initWaline()
if (typeof Waline === 'function') initWaline()
else getScript('!{url_for(theme.CDN.waline)}').then(initWaline)
}

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

@@ -3,6 +3,7 @@ script.
const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
if ($mermaidWrap.length) {
window.runMermaid = () => {
window.loadMermaid = true
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
Array.from($mermaidWrap).forEach((item, index) => {
@@ -17,7 +18,7 @@ script.
}
const loadMermaid = () => {
window.mermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
window.loadMermaid ? runMermaid() : getScript('!{theme.CDN.mermaid}').then(runMermaid)
}
window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)

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

@@ -49,7 +49,7 @@ script.
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}

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

@@ -75,7 +75,7 @@ script.
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}

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

@@ -60,7 +60,7 @@ script.
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}

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

@@ -37,7 +37,7 @@ script.
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}

11
layout/includes/third-party/newest-comments/waline.pug vendored
View File

@@ -16,13 +16,6 @@ script.
return content
}
const getIcon = (ava,mail) => {
if (ava) return ava
let defaultIcon = '!{ avatar ? `?d=${avatar}` : ''}'
let iconUrl = "!{avatarCDN ? avatarCDN : 'https://gravatar.loli.net/avatar/'}" + mail + defaultIcon
return iconUrl
}
const generateHtml = array => {
let result = ''
@@ -36,7 +29,7 @@ script.
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
@@ -59,7 +52,7 @@ script.
const walineArray = res.comments.map(e => {
return {
'content': changeContent(e.comment),
'avatar': getIcon(e.QQAvatar,e.mail),
'avatar': e.avatar,
'nick': e.nick,
'url': e.url + '#' + e.objectId,
'date': e.updatedAt,

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

@@ -3,38 +3,6 @@
case source
when 1
script.
function subtitleType () {
fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
.then(response => response.json())
.then(data => {
if (!{effect}) {
const sub = !{JSON.stringify(subContent)}
sub.unshift(data.text)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{loop},
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = data.text
}
})
}
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('!{url_for(theme.CDN.typed)}').then(subtitleType)
}
} else {
subtitleType()
}
when 2
script.
function subtitleType () {
fetch('https://v1.hitokoto.cn')
@@ -67,7 +35,7 @@ case source
subtitleType()
}
when 3
when 2
script.
function subtitleType () {
getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
@@ -99,7 +67,7 @@ case source
subtitleType()
}
when 4
when 3
script.
function subtitleType () {
getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {

6
layout/includes/widget/card_post_toc.pug
View File

@@ -1,4 +1,6 @@
- let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
- let tocExpand = page.toc_expand !== undefined ? page.toc_expand : theme.toc.expand
- let tocExpandClass = tocExpand ? 'is-expand' : ''
#card-toc.card-widget
.item-headline
@@ -7,7 +9,7 @@
span.toc-percentage
if (page.encrypt == true)
.toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
.toc-content.toc-div-class(class=tocExpandClass style="display:none")!=toc(page.origin, {list_number: tocNumber})
else
.toc-content!=toc(page.content, {list_number: tocNumber})
.toc-content(class=tocExpandClass)!=toc(page.content, {list_number: tocNumber})