WebServer/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2025-09-15 12:58:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

breaking changes: 更新 fancybox 到 4

Browse Source 
improvement: 網站資料顯示，但標籤和分類為0時，數量顯示為 0，而不是隱藏
improvement: subtitle 代碼優化， 1.當source設為false，同時sub也沒有配置，將會讀取hexo配置文件的 subtitle,2.無須使用轉義字符
improvement: 禁止ios點擊搜索框，頁面放大的問題
This commit is contained in:
Jerry 2021-08-08 15:36:22 +08:00
parent 45d6ced507
commit f1bf2413a0
13 changed files with 142 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_config.yml
View File

@ -595,16 +595,13 @@ subtitle:
loop: true
# source調用第三方服務
# source: false 關閉調用
# source: 1 調用搏天api的隨機語錄（簡體）
# source: 1 調用搏天 api 的隨機語錄（簡體）
# source: 2 調用一言網的一句話（簡體）
# source: 3 調用一句網（簡體）
# source: 4 調用今日詩詞（簡體）
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果有英文逗號' , ',請使用轉義字元 ,
# 如果有英文雙引號' " ',請使用轉義字元 "
# 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
# 如果關閉打字效果，subtitle只會顯示sub的第一行文字
# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
sub:
# Loading Animation (加載動畫)
@ -876,8 +873,8 @@ CDN:
pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
# photo
fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css
fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js
medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
# snackbar

2
layout/includes/head.pug
View File

@ -20,7 +20,7 @@
meta(charset='UTF-8')
meta(http-equiv="X-UA-Compatible" content="IE=edge")
meta(name="viewport" content="width=device-width,initial-scale=1")
meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")
title= tabTitle
if pageKeywords
meta(name="keywords" content=pageKeywords)

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

@ -13,7 +13,7 @@
each item in i.link_list
.flink-list-item
a(href=url_for(item.link) title=item.name target="_blank")
.flink-item-icon
.flink-item-icon.not-lightbox
img(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

33
layout/includes/sidebar.pug
View File

@ -3,26 +3,21 @@
#sidebar-menus
.avatar-img.is-center
img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
.site-data
if site.posts.length
.data-item.is-center
.data-item-link
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
.site-data.is-center
.data-item
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
if site.tags.length
.data-item.is-center
.data-item-link
a(href=url_for(config.tag_dir) + '/' )
.headline= _p('aside.tags')
.length-num= site.tags.length
.data-item
a(href=url_for(config.tag_dir) + '/' )
.headline= _p('aside.tags')
.length-num= site.tags.length
.data-item
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
if site.categories.length
.data-item.is-center
.data-item-link
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
hr
!=partial('includes/header/menu_item', {}, {cache: true})

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

@ -1,4 +1,5 @@
- let source = theme.subtitle.source
- const { effect,loop,source,sub } = theme.subtitle
- let subContent = sub || new Array()
case source
when 1
@ -7,14 +8,14 @@ case source
fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
.then(response => response.json())
.then(data => {
if (!{theme.subtitle.effect}) {
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
var both = sub.unshift(data.text)
typed = new Typed('#subtitle', {
if (!{effect}) {
const sub = !{JSON.stringify(subContent)}
sub.unshift(data.text)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
loop: !{loop},
backSpeed: 50,
})
} else {
@ -23,7 +24,7 @@ case source
})
}
if (!{theme.subtitle.effect}) {
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
@ -39,15 +40,15 @@ case source
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (!{theme.subtitle.effect}) {
var from = '出自 ' + data.from
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
var both = sub.unshift(data.hitokoto, from)
var typed = new Typed('#subtitle', {
if (!{effect}) {
const from = '出自 ' + data.from
const sub = !{JSON.stringify(subContent)}
sub.unshift(data.hitokoto, from)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
loop: !{loop},
backSpeed: 50,
})
} else {
@ -56,7 +57,7 @@ case source
})
}
if (!{theme.subtitle.effect}) {
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
@ -70,16 +71,16 @@ case source
script.
function subtitleType () {
getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
var con = str[0]
if (!{theme.subtitle.effect}) {
var from = '出自 ' + str[1]
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
var both = sub.unshift(con, from)
var typed = new Typed('#subtitle', {
const con = str[0]
if (!{effect}) {
const from = '出自 ' + str[1]
const sub = !{JSON.stringify(subContent)}
sub.unshift(con, from)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
loop: !{loop},
backSpeed: 50,
})
} else {
@ -88,7 +89,7 @@ case source
})
}
if (!{theme.subtitle.effect}) {
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
@ -102,16 +103,16 @@ case source
script.
function subtitleType () {
getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
jinrishici.load(function (result) {
if (!{theme.subtitle.effect}) {
var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',')
var content = result.data.content
var both = sub.unshift(content)
var typed = new Typed('#subtitle', {
jinrishici.load(result =>{
if (!{effect}) {
const sub = !{JSON.stringify(subContent)}
const content = result.data.content
sub.unshift(content)
window.typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
loop: !{loop},
backSpeed: 50,
})
} else {
@ -121,7 +122,7 @@ case source
})
}
if (!{theme.subtitle.effect}) {
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {
@ -132,22 +133,23 @@ case source
}
default
- subContent = subContent.length ? subContent : new Array(config.subtitle)
script.
function subtitleType () {
if (!{theme.subtitle.effect}) {
var typed = new Typed("#subtitle", {
strings: "!{theme.subtitle.sub}".split(","),
if (!{effect}) {
window.typed = new Typed("#subtitle", {
strings: !{JSON.stringify(subContent)},
startDelay: 300,
typeSpeed: 150,
loop: !{theme.subtitle.loop},
loop: !{loop},
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
}
}
if (!{theme.subtitle.effect}) {
if (!{effect}) {
if (typeof Typed === 'function') {
subtitleType()
} else {

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

@ -6,24 +6,21 @@ if theme.aside.card_author.enable
.author-info__name= config.author
.author-info__description!= theme.aside.card_author.description || config.description
.card-info-data
if site.posts.length
.card-info-data-item.is-center
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
.card-info-data.is-center
.card-info-data-item
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
if site.tags.length
.card-info-data-item.is-center
a(href=url_for(config.tag_dir) + '/')
.headline= _p('aside.tags')
.length-num= site.tags.length
.card-info-data-item
a(href=url_for(config.tag_dir) + '/')
.headline= _p('aside.tags')
.length-num= site.tags.length
if site.categories.length
.card-info-data-item.is-center
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
.card-info-data-item
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
if theme.aside.card_author.button.enable
a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "hexo-theme-butterfly",
"version": "4.0.0-b2",
"version": "4.0.0-b3",
"description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json",
"scripts": {

2
scripts/tag/gallery.js
View File

@ -19,7 +19,7 @@ function galleryGroup (args) {
const img = urlFor(args[3])
return `
<figure class="gallery-group">
<figure class="gallery-group not-lightbox">
<img class="gallery-group-img" src='${img}' alt="Group Image Gallery">
<figcaption>
<div class="gallery-group-name">${name}</div>

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

@ -199,9 +199,6 @@ if $site-name-font
transform: scaleX(1)
img
max-width: 100%
transition: all .2s
&[src=''],
&:not([src])
opacity: 0

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

@ -154,6 +154,7 @@ no-beautify()
img
display: block
margin: 0 auto .8rem
max-width: 100%
p
margin: 0 0 .8rem

15
source/css/_layout/sidebar.styl
View File

@ -34,16 +34,15 @@
.data-item
display: table-cell
.data-item-link
& > a > div
@extend .limit-one-line
& > a > div
@extend .limit-one-line
.length-num
color: var(--text-highlight-color)
font-size: 1.28em
.length-num
color: var(--text-highlight-color)
font-size: 1.28em
.headline
color: var(--font-color)
.headline
color: var(--font-color)
hr
margin: 1rem auto

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

@ -27,7 +27,7 @@ figure.gallery-group
img
position: relative
margin: 0 !important
max-width: none
max-width: none !important
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden

118
source/js/main.js
View File

@ -234,11 +234,57 @@ document.addEventListener('DOMContentLoaded', function () {
})
}
/**
* fancybox和 mediumZoom
*/
const addFancybox = () => {
const runFancybox = () => {
document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img').forEach(i => {
const lazyloadSrc = i.dataset.lazySrc || i.src
const dataCaption = i.alt || ''
btf.wrap(i, 'a', { href: lazyloadSrc, 'data-fancybox': 'gallery', 'data-caption': dataCaption, 'data-thumb': lazyloadSrc })
})
Fancybox.destroy()
Fancybox.bind('[data-fancybox]', {
Hash: false
})
}
if (typeof Fancybox !== 'function') {
const ele = document.createElement('link')
ele.rel = 'stylesheet'
ele.href = GLOBAL_CONFIG.source.fancybox.css
document.head.appendChild(ele)
getScript(`${GLOBAL_CONFIG.source.fancybox.js}`).then(() => {
runFancybox()
})
} else {
runFancybox()
}
}
const addMediumZoom = () => {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.not-lightbox) > img, #article-container > img'))
zoom.on('open', e => {
const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
})
}
// It needs to call it after the Justified Gallery done, or the fancybox maybe not work
const runLightbox = () => {
GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
GLOBAL_CONFIG.lightbox === 'fancybox' && addFancybox()
}
/**
* justified-gallery 圖庫排版
* 需要 jQuery
*/
let detectJgJsLoad = false
const runJustifiedGallery = function (ele) {
const $justifiedGallery = $(ele)
@ -251,72 +297,29 @@ document.addEventListener('DOMContentLoaded', function () {
})
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
}
/**
* fancybox和 mediumZoom
*/
const addFancybox = function (ele) {
const runFancybox = (ele) => {
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({
selector: '[data-fancybox]',
loop: true,
transitionEffect: 'slide',
protect: true,
buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
hash: false
})
if (detectJgJsLoad) {
runLightbox()
btf.initJustifiedGallery($justifiedGallery)
return
}
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($(ele))
})
} else {
runFancybox($(ele))
}
}
const addMediumZoom = () => {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a):not(.flink-item-icon) > img'))
zoom.on('open', e => {
const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
runLightbox()
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
const jqLoadAndRun = () => {
const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.flink-item-icon) > img, #article-container > img')
: []
const fbLengthNoZero = $fancyboxEle.length > 0
const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
const jgLengthNoZero = $jgEle.length > 0
if (jgLengthNoZero || fbLengthNoZero) {
if ($jgEle.length) {
btf.isJqueryLoad(() => {
jgLengthNoZero && runJustifiedGallery($jgEle)
fbLengthNoZero && addFancybox($fancyboxEle)
runJustifiedGallery($jgEle)
})
return
}
runLightbox()
}
/**
@ -853,7 +856,6 @@ document.addEventListener('DOMContentLoaded', function () {
addHighlightTool()
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
jqLoadAndRun()
GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()
scrollFn()
addTableWrap()
clickFnOfTagHide()