build: update code block configuration items

This commit is contained in:
XPoet 2022-10-20 12:22:06 +08:00
parent 212f04c7dc
commit 53155ad495
6 changed files with 69 additions and 62 deletions

View File

@ -157,6 +157,7 @@ post:
# Support code copy and code block collapse
# ---------------------------------------------------------------------------------------
code_block:
tools: # Include "code copy", "code block collapse" and "code language"
enable: false # Option values: true | false
style: default # Option values: default | mac
highlight_theme: default # Option values: default | obsidian

View File

@ -21,7 +21,7 @@ const {
<%- __js('js/local-search.js') %>
<% } %>
<% if (t_code_block?.enable === true || t_code_copy?.enable === true) { %>
<% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
<%- __js('js/code-block.js') %>
<% } %>

View File

@ -3,60 +3,7 @@
box-sizing border-box
margin 1.4rem 0
.code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
}
.tool {
disable-user-select()
cursor pointer
i {
font-size 0.8rem
}
}
.fold {
padding 0 0.4rem 0 0.2rem
}
}
figure.highlight {
margin 0
&.folded {
height 0
}
}
if (hexo-config('code_block.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
&.mac {
margin 1.4rem 0 1.8rem 0
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
@ -124,4 +71,58 @@
}
}
}
.code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
}
.tool {
disable-user-select()
cursor pointer
i {
font-size 0.8rem
}
}
.fold {
padding 0 0.4rem 0 0.2rem
}
}
figure.highlight {
margin 0
&.folded {
height 0
}
}
}

View File

@ -10,7 +10,7 @@ $dark-code-background = darken($dark-background-color-1, 10%)
if (hexo-config('code_block.highlight_theme') == 'obsidian') {
$toolbar-foreground = #b5b5b5
$toolbar-background = #3a3f40
$highlight-foreground = #e8e2bb
$highlight-foreground = #faf5d6
$highlight-background = #273036
$highlight-gutter-color = #7a979a
$highlight-gutter-bg-color = #273130

View File

@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
wrapper.appendChild(this)
}
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
const { style: codeBlockStyle } = KEEP.theme_config?.code_block
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
const {style: codeCopyStyle} = KEEP.theme_config?.code_copy || {}
const {style: codeBlockStyle} = KEEP.theme_config?.code_block || {}
const {style: codeBlockToolsStyle} = KEEP.theme_config?.code_block?.tools || {}
const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
const {
copy: copyLang,
@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
}
const highlightContainer = document.createElement('div')
highlightContainer.classList.add('highlight-container')
if (isMac) {
highlightContainer.classList.add('mac')
}
element.wrap(highlightContainer)
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`

View File

@ -56,7 +56,7 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.initLocalSearch()
}
if (code_block?.enable === true || code_copy?.enable === true) {
if (code_block?.tools?.enable === true || code_block?.enable === true || code_copy?.enable === true) {
KEEP.initCodeBlockTools()
}