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

feat: 新增設置代碼行數限制，顯示展開按鈕

Browse Source 
improvement: prismjs 可以配置 code_word_wrap
improvement: 搜索 hover 效果與其它目錄一致
improvement: css 優化
fix: 修復prismjs 無法識別的語言 顯示 null 而不是顯示 code 的 bug
fix: 修復默認代碼大小不會隨着字體放大/放小而改變的bug
fix: 修復prismjs 在ios safari 下自動換行的bug
This commit is contained in:
Jerry 2021-03-14 23:25:58 +08:00
parent 2f3094cc0a
commit 7bc46c47ed
14 changed files with 225 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -27,6 +27,7 @@ highlight_theme: light # darker / pale night / light / ocean / mac / mac light
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false
# copy settings

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

@ -78,7 +78,8 @@
highlight = JSON.stringify({
plugin: config.highlight.enable ? 'highlighjs' : 'prismjs',
highlightCopy: theme.highlight_copy,
highlightLang: theme.highlight_lang
highlightLang: theme.highlight_lang,
highlightHeightLimit: theme.highlight_height_limit
})
}

2
layout/includes/header/menu_item.pug
View File

@ -20,7 +20,7 @@ if theme.menu
ul.menus_item_child
each val,lab in value
li
a.site-page(href=url_for(trim(val.split('||')[0])))
a.site-page.child(href=url_for(trim(val.split('||')[0])))
if val.split('||')[1]
i.fa-fw(class=trim(val.split('||')[1]))
span=' '+ lab

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

@ -45,7 +45,7 @@ script.
// google analytics
typeof gtag === 'function' && gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname});
//- // baidu analytics
// baidu analytics
typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

2
package.json
View File

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

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

@ -1,4 +1,3 @@
// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
@ -6,6 +5,16 @@ wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_w
@require 'theme'
:root
--hl-color: $highlight-foreground
--hl-bg: $highlight-background
--hltools-bg: $highlight-tools.bg-color
--hltools-color: $highlight-tools.color
--hlnumber-bg: $highlight-gutter.bg-color
--hlnumber-color: $highlight-gutter.color
--hlscrollbar-bg: $highlight-scrollbar
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
if $highlighEnable
@require 'highlight/index'
@ -16,8 +25,8 @@ $code-block
overflow: auto
margin: 0 0 1rem
padding: 0
background: $highlight-background
color: $highlight-foreground
background: var(--hl-bg)
color: var(--hl-color)
line-height: $line-height-code-block
if wordWrap
@ -56,9 +65,6 @@ blockquote
padding: .1rem .2rem
background: $code-background
color: $code-foreground
word-wrap: break-word
word-break: break-word
overflow-wrap: break-word
pre
@extend $code-block
@ -67,7 +73,7 @@ blockquote
code
padding: 0
background: none
color: $highlight-foreground
color: var(--hl-color)
text-shadow: none
figure.highlight
@ -88,10 +94,10 @@ blockquote
a
float: right
padding-right: 10px
color: $highlight-foreground
color: var(--hl-color)
&:hover
border-bottom-color: $highlight-foreground
border-bottom-color: var(--hl-color)
.highlight-tools
position: relative
@ -100,8 +106,8 @@ blockquote
overflow: hidden
min-height: 1.2rem
height: 2.15em
background: $highlight-tools.bg-color
color: $highlight-tools.color
background: var(--hltools-bg)
color: var(--hltools-color)
font-size: $code-font-size
&.closed + table
@ -185,3 +191,38 @@ blockquote
.code-lang
left: 3.8rem !important
if hexo-config('highlight_height_limit')
.code-expand-btn
position: absolute
bottom: 0
z-index: 10
width: 100%
background: var(--hlexpand-bg)
text-align: center
font-size: $code-font-size
cursor: pointer
i
padding: .3rem 0
color: var(--hlnumber-color)
animation: code-expand-key 1.2s infinite
&.expand-done
display: none !important
&:not(.expand-done)
& ~ table,
& ~ pre
overflow: hidden
height: unit(hexo-config('highlight_height_limit'), px)
@keyframes code-expand-key
0%
opacity: .6
50%
opacity: .1
100%
opacity: .6

2
source/css/_highlight/highlight/diff.styl
View File

@ -1,7 +1,7 @@
figure.highlight
table
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
background: var(--hlscrollbar-bg)
pre .deletion
color: $highlight-deletion

6
source/css/_highlight/highlight/index.styl
View File

@ -9,7 +9,7 @@ if $highlight_theme != false
display: inline-block
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
color: var(--hlnumber-color)
content: counter(line)
counter-increment: line
text-align: left
@ -29,8 +29,8 @@ if $highlight_theme != false
.gutter pre
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
background-color: var(--hlnumber-bg)
color: var(--hlnumber-color)
text-align: right
.code pre

2
source/css/_highlight/prismjs/index.styl
View File

@ -7,7 +7,7 @@ if $highlight_theme != false
#article-container
pre[class*='language-']
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
background: var(--hlscrollbar-bg)
&:not(.line-numbers)
padding: 10px 20px

11
source/css/_highlight/prismjs/line-number.styl
View File

@ -8,9 +8,16 @@
> code
position: relative
white-space: inherit
line-height: $line-height-code-block
if hexo-config('code_word_wrap')
white-space: pre-wrap
else
white-space: inherit
word-wrap: normal
word-break: normal
overflow-wrap: normal
.line-numbers-rows
position: absolute
top: 0
@ -29,6 +36,6 @@
&:before
display: block
padding-right: .8em
color: $highlight-gutter.color
color: var(--hlnumber-color)
content: counter(linenumber)
text-align: right

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

@ -303,22 +303,6 @@ _:future,
padding: 4px
transition: transform .3s
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%
.menus_item_child
position: absolute
right: 0
@ -377,3 +361,19 @@ _:future,
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer
&:not(.child)
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
&:after
width: 100%

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

@ -27,6 +27,14 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
#web_bg:before,
#footer:before,
@ -42,7 +50,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background: #2c2c2c
pre > code
background: 0
background: lighten(#121212, 2)
figure.highlight
box-shadow: none
.note
code
@ -63,33 +74,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
// 代碼框
#article-container
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2) !important
color: alpha(#FFFFFF, .7) !important
figure.highlight
box-shadow: none
if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
table::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
.line:before
color: alpha(#FFFFFF, .7) !important
.hljs
background-color: lighten(#121212, 2) !important
pre[class*='language-']::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
.highlight-tools
background: lighten(#121212, 3) !important
color: #90a4ae !important
#post-comment
#comment-switch
if hexo-config('comments.text')
@ -118,16 +102,6 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .7) !important
input
background-color: #121212
// Gitalk
#gitalk-container
filter: brightness(.8)
@ -135,7 +109,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
svg
fill: alpha(#FFFFFF, .9) !important
// Disqus and Disqusjs
// Disqusjs 反代模式下的適配
#disqus_thread
#dsqjs
.dsqjs-tab-active,

2
source/css/var.styl
View File

@ -28,7 +28,7 @@ $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon')
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : $font-size
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
$font-color = #1F2D3D
$rem = 20px
$text-line-height = 2

227
source/js/main.js
View File

@ -81,123 +81,142 @@ document.addEventListener('DOMContentLoaded', function () {
* 只適用於Hexo默認的代碼渲染
*/
const addHighlightTool = function () {
const isHighlightCopy = GLOBAL_CONFIG.highlight.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
const highLight = GLOBAL_CONFIG.highlight
if (!highLight) return
const isHighlightCopy = highLight.highlightCopy
const isHighlightLang = highLight.highlightLang
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
const highlightHeightLimit = highLight.highlightHeightLimit
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
if (isShowTool && $figureHighlight.length) {
const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
let highlightShrinkEle = ''
let highlightCopyEle = ''
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
const isPrismjs = highLight.plugin === 'prismjs'
if (isHighlightShrink !== undefined) {
highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
}
let highlightShrinkEle = ''
let highlightCopyEle = ''
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
if (isHighlightCopy) {
highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
}
if (isHighlightShrink !== undefined) {
highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></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)
}
if (isHighlightCopy) {
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 {
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 (isPrismjs) {
$figureHighlight.forEach(function (item) {
const langName = item.getAttribute('data-language') !== undefined ? item.getAttribute('data-language') : 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
btf.wrap(item, 'figure', '', 'highlight')
const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle
item.parentNode.insertBefore(newEle, item)
})
} else {
$figureHighlight.forEach(function (item) {
let langName = item.getAttribute('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightLangEle + highlightCopyEle
item.insertBefore(newEle, item.firstChild)
})
const prevEle = ctx.previousElementSibling
prevEle.innerText = GLOBAL_CONFIG.copy.success
prevEle.style.opacity = 1
setTimeout(() => { prevEle.style.opacity = 0 }, 700)
}
} else {
if (isPrismjs) {
$figureHighlight.forEach(function (item) {
btf.wrap(item, 'figure', '', 'highlight')
const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightCopyEle
item.parentNode.insertBefore(newEle, item)
})
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$figureHighlight.forEach(function (item) {
const newEle = createEle()
newEle.innerHTML = highlightShrinkEle + highlightCopyEle
item.insertBefore(newEle, item.firstChild)
})
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 expandCode = function () {
this.classList.toggle('expand-done')
}
function createEle (lang, item, service) {
const fragment = document.createDocumentFragment()
if (isShowTool) {
const hlTools = document.createElement('div')
hlTools.className = `highlight-tools ${highlightShrinkClass}`
hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
hlTools.addEventListener('click', highlightToolsFn)
fragment.appendChild(hlTools)
}
if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
const ele = document.createElement('div')
ele.className = 'code-expand-btn'
ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
ele.addEventListener('click', expandCode)
fragment.appendChild(ele)
}
if (service === 'hl') {
item.insertBefore(fragment, item.firstChild)
} else {
item.parentNode.insertBefore(fragment, item)
}
}
if (isHighlightLang) {
if (isPrismjs) {
$figureHighlight.forEach(function (item) {
const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
btf.wrap(item, 'figure', '', 'highlight')
createEle(highlightLangEle, item)
})
} else {
$figureHighlight.forEach(function (item) {
let langName = item.getAttribute('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
createEle(highlightLangEle, item, 'hl')
})
}
} else {
if (isPrismjs) {
$figureHighlight.forEach(function (item) {
btf.wrap(item, 'figure', '', 'highlight')
createEle('', item)
})
} else {
$figureHighlight.forEach(function (item) {
createEle('', item, 'hl')
})
}
}
}
/**
@ -819,7 +838,7 @@ document.addEventListener('DOMContentLoaded', function () {
sidebarFn()
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
GLOBAL_CONFIG.highlight && addHighlightTool()
addHighlightTool()
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
jqLoadAndRun()
GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom()