XPoet
parent
967f6f978f
commit
e65ec7f711
|
|
@ -141,9 +141,10 @@ post:
|
|||
custom_label_list: ["Trainee", "Engineer", "Architect"]
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# Code copy
|
||||
# Code block tools
|
||||
# Support code copy and code block collapse
|
||||
# ---------------------------------------------------------------------------------------
|
||||
code_copy:
|
||||
code_block_tools:
|
||||
enable: false # Option values: true | false
|
||||
style: default # Option values: default | mac
|
||||
|
||||
|
|
|
|||
|
|
@ -6,20 +6,31 @@
|
|||
'js/dark-light-toggle.js'
|
||||
]) %>
|
||||
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<%
|
||||
const {
|
||||
local_search: t_local_search,
|
||||
code_copy: t_code_copy,
|
||||
code_block_tools: t_code_block_tools,
|
||||
lazyload: t_lazyload,
|
||||
toc: t_toc,
|
||||
pjax: t_pjax
|
||||
} = theme
|
||||
%>
|
||||
|
||||
<% if (t_local_search?.enable === true) { %>
|
||||
<%- __js('js/local-search.js') %>
|
||||
<% } %>
|
||||
|
||||
<% if (theme.code_copy.enable) { %>
|
||||
<%- __js('js/code-copy.js') %>
|
||||
<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %>
|
||||
<%- __js('js/code-block-tools.js') %>
|
||||
<% } %>
|
||||
|
||||
<% if (theme.lazyload.enable) { %>
|
||||
<% if (t_lazyload?.enable === true) { %>
|
||||
<%- __js('js/lazyload.js') %>
|
||||
<% } %>
|
||||
|
||||
<div class="post-scripts<%= theme.pjax.enable === true ? ' pjax' : '' %>">
|
||||
<% if (theme.toc.enable && is_post()) { %>
|
||||
<div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
|
||||
<% if (t_toc?.enable === true && is_post()) { %>
|
||||
<%- __js([
|
||||
'js/left-side-toggle.js',
|
||||
'js/libs/anime.min.js',
|
||||
|
|
@ -28,6 +39,6 @@
|
|||
<% } %>
|
||||
</div>
|
||||
|
||||
<% if (theme.pjax.enable === true) { %>
|
||||
<% if (t_pjax?.enable === true) { %>
|
||||
<%- partial('pjax/pjax') %>
|
||||
<% } %>
|
||||
|
|
|
|||
|
|
@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () {
|
|||
}
|
||||
|
||||
let theme_config = {
|
||||
toc: theme.toc,
|
||||
style: theme.style,
|
||||
local_search: theme.local_search,
|
||||
code_copy: theme.code_copy,
|
||||
side_tools: theme.side_tools,
|
||||
pjax: theme.pjax,
|
||||
lazyload: theme.lazyload,
|
||||
toc: theme.toc || {},
|
||||
style: theme.style || {},
|
||||
local_search: theme.local_search || {},
|
||||
code_copy: theme.code_copy || {},
|
||||
code_block_tools: theme.code_block_tools || {},
|
||||
side_tools: theme.side_tools || {},
|
||||
pjax: theme.pjax || {},
|
||||
lazyload: theme.lazyload || {},
|
||||
version: theme.version
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
disable-user-select() {
|
||||
-moz-user-select none
|
||||
-ms-user-select none
|
||||
-webkit-user-select none
|
||||
user-select none
|
||||
}
|
||||
|
||||
.highlight-container {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
margin 1.4rem 0
|
||||
overflow hidden
|
||||
|
||||
.code-tools-box {
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
background var(--fourth-text-color)
|
||||
border-top-left-radius 0.3rem
|
||||
border-top-right-radius 0.3rem
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
padding 0.3rem 0.6rem 0.3rem 0.4rem
|
||||
|
||||
&.folded {
|
||||
border-bottom-left-radius 0.3rem
|
||||
border-bottom-right-radius 0.3rem
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
margin-left 0.2rem
|
||||
font-size 0.9rem
|
||||
font-weight 600
|
||||
font-family "Source Code Pro", consolas, Menlo
|
||||
color var(--default-text-color)
|
||||
justify-content flex-start
|
||||
}
|
||||
|
||||
.tool {
|
||||
disable-user-select()
|
||||
cursor pointer
|
||||
|
||||
i {
|
||||
color var(--second-text-color)
|
||||
font-size 0.8rem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fold {
|
||||
font-weight bold
|
||||
padding 0.1rem 0.4rem 0.1rem 0.2rem
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
figure.highlight {
|
||||
margin 0
|
||||
|
||||
&.folded {
|
||||
height 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
|
||||
margin 1.4rem 0 1.8rem 0
|
||||
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4)
|
||||
|
||||
&:hover {
|
||||
.code-tools-box .copy {
|
||||
opacity 1
|
||||
}
|
||||
}
|
||||
|
||||
.code-tools-box {
|
||||
justify-content flex-end
|
||||
background #21252b
|
||||
padding 0.4rem 0.6rem 0.7rem 0.4rem
|
||||
|
||||
&::before {
|
||||
position absolute
|
||||
content ''
|
||||
width 0.8rem
|
||||
height 0.8rem
|
||||
left 0.8rem
|
||||
background #fc625d
|
||||
border-radius 50%
|
||||
box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b
|
||||
}
|
||||
|
||||
&.folded {
|
||||
border-bottom-left-radius 0
|
||||
border-bottom-right-radius 0
|
||||
|
||||
.copy {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
order 1
|
||||
color #bbb
|
||||
}
|
||||
|
||||
.fold {
|
||||
order 2
|
||||
padding 0.1rem 0.1rem 0.1rem 0.6rem
|
||||
i {
|
||||
color #ccc
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.copy {
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
padding 0.4rem 0.5rem
|
||||
font-weight bold
|
||||
opacity 0
|
||||
transition-t("opacity", "0", "0.2", "ease-in-out")
|
||||
|
||||
i {
|
||||
font-size 1rem
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -35,44 +35,44 @@ $night-highlight-deletion = #008000
|
|||
$night-highlight-addition = #800000
|
||||
|
||||
code-theme(mode) {
|
||||
--code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground;
|
||||
--code-background: mode == 'light' ? $code-background : $night-code-background;
|
||||
--highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background;
|
||||
--highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground;
|
||||
--highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment;
|
||||
--highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red;
|
||||
--highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange;
|
||||
--highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow;
|
||||
--highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green;
|
||||
--highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua;
|
||||
--highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue;
|
||||
--highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple;
|
||||
--highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color;
|
||||
--highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color;
|
||||
--code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
|
||||
--code-background: mode == 'light' ? $code-background : $night-code-background
|
||||
--highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
|
||||
--highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
|
||||
--highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
|
||||
--highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
|
||||
--highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
|
||||
--highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
|
||||
--highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
|
||||
--highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
|
||||
--highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
|
||||
--highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
|
||||
--highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
|
||||
--highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
code-theme('light');
|
||||
code-theme('light')
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
code-theme('light');
|
||||
code-theme('light')
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
code-theme('dark');
|
||||
code-theme('dark')
|
||||
}
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
code-theme('light');
|
||||
code-theme('light')
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
code-theme('dark');
|
||||
code-theme('dark')
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
@require "code-theme.styl"
|
||||
|
||||
$code-block {
|
||||
overflow auto
|
||||
margin 20px 0
|
||||
padding 0
|
||||
font-size 0.96rem
|
||||
line-height 1.5rem
|
||||
color var(--highlight-foreground)
|
||||
background var(--highlight-background)
|
||||
}
|
||||
|
||||
|
||||
pre, code {
|
||||
font-family "Source Code Pro", consolas, Menlo
|
||||
}
|
||||
|
||||
code {
|
||||
padding 5px
|
||||
word-wrap break-word
|
||||
border-radius 2px
|
||||
font-size 0.96rem
|
||||
color var(--code-foreground)
|
||||
background var(--code-background)
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend $code-block
|
||||
padding 10px
|
||||
|
||||
code {
|
||||
padding 0
|
||||
color var(--highlight-foreground)
|
||||
background none
|
||||
text-shadow none
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@extend $code-block
|
||||
border-radius 1px
|
||||
|
||||
pre {
|
||||
border none
|
||||
margin 0
|
||||
padding 10px 0
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
margin 0
|
||||
width auto
|
||||
border none
|
||||
border-spacing unset
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
border none
|
||||
padding 0
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size 1rem
|
||||
color var(--highlight-foreground)
|
||||
line-height 1rem
|
||||
margin-bottom 1rem
|
||||
|
||||
a {
|
||||
float right
|
||||
color var(--highlight-foreground)
|
||||
|
||||
&:hover {
|
||||
border-bottom-color var(--highlight-foreground)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gutter pre {
|
||||
padding-left 10px
|
||||
padding-right 10px
|
||||
color var(--highlight-gutter-color)
|
||||
text-align center
|
||||
background-color var(--highlight-gutter-bg-color)
|
||||
}
|
||||
|
||||
.code pre {
|
||||
width 100%
|
||||
padding-left 10px
|
||||
padding-right 10px
|
||||
background-color var(--highlight-background)
|
||||
}
|
||||
|
||||
.line {
|
||||
height 20px
|
||||
color var(--default-text-color)
|
||||
|
||||
.attr {
|
||||
color var(--default-text-color)
|
||||
}
|
||||
|
||||
.string {
|
||||
color var(--default-text-color)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gutter {
|
||||
-webkit-user-select none
|
||||
-moz-user-select none
|
||||
-ms-user-select none
|
||||
user-select none
|
||||
}
|
||||
|
||||
.gist table {
|
||||
width auto
|
||||
|
||||
td {
|
||||
border none
|
||||
}
|
||||
}
|
||||
|
||||
// For diff highlight
|
||||
pre .deletion {
|
||||
background var(--highlight-deletion)
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background var(--highlight-addition)
|
||||
}
|
||||
|
||||
pre .meta {
|
||||
color var(--highlight-purple)
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
.comment {
|
||||
color var(--highlight-comment)
|
||||
}
|
||||
|
||||
.variable
|
||||
.attribute
|
||||
.tag
|
||||
.regexp
|
||||
.ruby .constant
|
||||
.xml .tag .title
|
||||
.xml .pi
|
||||
.xml .doctype
|
||||
.html .doctype
|
||||
.css .id
|
||||
.css .class
|
||||
.css .pseudo {
|
||||
color var(--highlight-red)
|
||||
}
|
||||
|
||||
.number
|
||||
.preprocessor
|
||||
.built_in
|
||||
.literal
|
||||
.params
|
||||
.constant
|
||||
.command {
|
||||
color var(--highlight-orange)
|
||||
}
|
||||
|
||||
.ruby .class .title
|
||||
.css .rules .attribute
|
||||
.string
|
||||
.value
|
||||
.inheritance
|
||||
.header
|
||||
.ruby .symbol
|
||||
.xml .cdata
|
||||
.special
|
||||
.number
|
||||
.formula {
|
||||
color var(--highlight-green)
|
||||
}
|
||||
|
||||
.title
|
||||
.css .hexcolor {
|
||||
color var(--highlight-aqua)
|
||||
}
|
||||
|
||||
.function
|
||||
.python .decorator
|
||||
.python .title
|
||||
.ruby .function .title
|
||||
.ruby .title .keyword
|
||||
.perl .sub
|
||||
.javascript .title
|
||||
.coffeescript .title {
|
||||
color var(--highlight-blue)
|
||||
}
|
||||
|
||||
.keyword
|
||||
.javascript .function {
|
||||
color var(--highlight-purple)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
disable-user-select() {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.highlight-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1.8;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
padding: 2px 6px;
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem;
|
||||
color: var(--default-text-color);
|
||||
disable-user-select();
|
||||
transition-t("opacity", "0", "0.2", "ease-in-out");
|
||||
|
||||
|
||||
if (hexo-config('code_copy.style') == 'mac') {
|
||||
color: white;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
} else {
|
||||
background: var(--background-color);
|
||||
border: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (hexo-config('code_copy.style') == 'mac') {
|
||||
.highlight-container {
|
||||
background: #21252b;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
|
||||
padding-top: 20px;
|
||||
margin-top: 10px;
|
||||
|
||||
&::before {
|
||||
background: #fc625d;
|
||||
border-radius: 50%;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
content: ' ';
|
||||
height: 12px;
|
||||
left: 12px;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
@require "code-theme.styl"
|
||||
|
||||
$code-block {
|
||||
overflow: auto;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
font-size 0.96rem;
|
||||
line-height: 1.5rem;
|
||||
color: var(--highlight-foreground);
|
||||
background: var(--highlight-background);
|
||||
}
|
||||
|
||||
|
||||
pre, code {
|
||||
font-family: "Source Code Pro", consolas, Menlo;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 5px;
|
||||
word-wrap: break-word;
|
||||
border-radius: 2px;
|
||||
font-size: 0.96rem;
|
||||
color: var(--code-foreground);
|
||||
background: var(--code-background);
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend $code-block;
|
||||
padding: 10px;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
color: var(--highlight-foreground);
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@extend $code-block;
|
||||
border-radius: 1px;
|
||||
|
||||
pre {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
border-spacing: unset;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 1rem;
|
||||
color: var(--highlight-foreground);
|
||||
line-height: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
float: right;
|
||||
color: var(--highlight-foreground);
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: var(--highlight-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gutter pre {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: var(--highlight-gutter-color);
|
||||
text-align: center;
|
||||
background-color: var(--highlight-gutter-bg-color);
|
||||
}
|
||||
|
||||
.code pre {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: var(--highlight-background);
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 20px;
|
||||
color: var(--default-text-color);
|
||||
|
||||
.attr {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
.string {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gutter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.gist table {
|
||||
width: auto;
|
||||
|
||||
td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// For diff highlight
|
||||
pre .deletion {
|
||||
background: var(--highlight-deletion);
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background: var(--highlight-addition);
|
||||
}
|
||||
|
||||
pre .meta {
|
||||
color: var(--highlight-purple);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
.comment {
|
||||
color: var(--highlight-comment);
|
||||
}
|
||||
|
||||
.variable
|
||||
.attribute
|
||||
.tag
|
||||
.regexp
|
||||
.ruby .constant
|
||||
.xml .tag .title
|
||||
.xml .pi
|
||||
.xml .doctype
|
||||
.html .doctype
|
||||
.css .id
|
||||
.css .class
|
||||
.css .pseudo {
|
||||
color: var(--highlight-red);
|
||||
}
|
||||
|
||||
.number
|
||||
.preprocessor
|
||||
.built_in
|
||||
.literal
|
||||
.params
|
||||
.constant
|
||||
.command {
|
||||
color: var(--highlight-orange);
|
||||
}
|
||||
|
||||
.ruby .class .title
|
||||
.css .rules .attribute
|
||||
.string
|
||||
.value
|
||||
.inheritance
|
||||
.header
|
||||
.ruby .symbol
|
||||
.xml .cdata
|
||||
.special
|
||||
.number
|
||||
.formula {
|
||||
color: var(--highlight-green);
|
||||
}
|
||||
|
||||
.title
|
||||
.css .hexcolor {
|
||||
color: var(--highlight-aqua);
|
||||
}
|
||||
|
||||
.function
|
||||
.python .decorator
|
||||
.python .title
|
||||
.ruby .function .title
|
||||
.ruby .title .keyword
|
||||
.perl .sub
|
||||
.javascript .title
|
||||
.coffeescript .title {
|
||||
color: var(--highlight-blue);
|
||||
}
|
||||
|
||||
.keyword
|
||||
.javascript .function {
|
||||
color: var(--highlight-purple);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@ $dark-default-text-color = #bebec6;
|
|||
$dark-first-text-color = lighten($dark-default-text-color, 30%);
|
||||
$dark-second-text-color = lighten($dark-default-text-color, 20%);
|
||||
$dark-third-text-color = darken($dark-default-text-color, 20%);
|
||||
$dark-fourth-text-color = darken($dark-default-text-color, 80%);
|
||||
$dark-fourth-text-color = darken($dark-default-text-color, 75%);
|
||||
$dark-border-color = lighten($dark-background-color, 20%);
|
||||
$dark-selection-color = $selection-color;
|
||||
$dark-shadow-color = rgba(128, 128, 128, 0.2);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.article-meta-info {
|
||||
font-size: 0.8rem;
|
||||
color: var(--third-text-color);
|
||||
|
||||
.article-meta-item {
|
||||
margin-right: 10px;
|
||||
color: var(--third-text-color);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "common/basic.styl"
|
||||
@import "common/markdown.styl"
|
||||
@import "common/codeblock/highlight.styl"
|
||||
@import "common/codeblock/copy-code.styl"
|
||||
@import "common/codeblock/code-theme.styl"
|
||||
@import "common/code-block/highlight.styl"
|
||||
@import "common/code-block/code-block-tools.styl"
|
||||
@import "common/code-block/code-theme.styl"
|
||||
@import "layout/page.styl"
|
||||
@import "layout/_partial/local-search.styl"
|
||||
@import "layout/_partial/toc.styl"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
/* global KEEP */
|
||||
|
||||
KEEP.initCodeBlockTools = () => {
|
||||
HTMLElement.prototype.wrap = function (wrapper) {
|
||||
this.parentNode.insertBefore(wrapper, this);
|
||||
this.parentNode.removeChild(this);
|
||||
wrapper.appendChild(this);
|
||||
};
|
||||
|
||||
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy;
|
||||
const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools;
|
||||
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac';
|
||||
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right';
|
||||
|
||||
const foldDom = `<span class="tool fold"><i class="fas fa-chevron-down"></i></span>`
|
||||
|
||||
document.querySelectorAll('figure.highlight').forEach(element => {
|
||||
let codeLang = element.classList.length ? element.classList[1].toUpperCase() : '';
|
||||
if (codeLang === 'PLAINTEXT') { codeLang = '' }
|
||||
const highlightContainer = document.createElement('div');
|
||||
highlightContainer.classList.add('highlight-container');
|
||||
element.wrap(highlightContainer);
|
||||
|
||||
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
|
||||
|
||||
highlightContainer.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<div class="code-tools-box">
|
||||
${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
|
||||
<span class="tool copy"><i class="fas fa-copy"></i></span>
|
||||
</div>`
|
||||
);
|
||||
const codeToolsBox = element.parentNode.querySelector('.code-tools-box');
|
||||
const copyDom = codeToolsBox.querySelector('.copy');
|
||||
const targetFoldDom = codeToolsBox.querySelector('.fold');
|
||||
|
||||
copyDom.addEventListener('click', event => {
|
||||
const target = event.currentTarget;
|
||||
const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
|
||||
const tta = document.createElement('textarea');
|
||||
tta.style.top = window.scrollY + 'px';
|
||||
tta.style.position = 'absolute';
|
||||
tta.style.opacity = '0';
|
||||
tta.readOnly = true;
|
||||
tta.value = code;
|
||||
document.body.append(tta);
|
||||
const selection = document.getSelection();
|
||||
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
|
||||
tta.select();
|
||||
tta.setSelectionRange(0, code.length);
|
||||
tta.readOnly = false;
|
||||
const result = document.execCommand('copy');
|
||||
target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times';
|
||||
tta.blur();
|
||||
target.blur();
|
||||
if (selected) {
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(selected);
|
||||
}
|
||||
document.body.removeChild(tta);
|
||||
});
|
||||
|
||||
copyDom.addEventListener('mouseleave', event => {
|
||||
setTimeout(() => {
|
||||
event.target.querySelector('i').className = 'fas fa-copy';
|
||||
}, 500);
|
||||
});
|
||||
|
||||
let isFold = false
|
||||
targetFoldDom.addEventListener('click', event => {
|
||||
const target = event.currentTarget;
|
||||
const icon = target.querySelector('i');
|
||||
isFold = !isFold
|
||||
if (isFold) {
|
||||
icon.className = foldedIconClassName
|
||||
element.classList.add('folded');
|
||||
codeToolsBox.classList.add('folded');
|
||||
} else {
|
||||
icon.className = 'fas fa-chevron-down';
|
||||
element.classList.remove('folded');
|
||||
codeToolsBox.classList.remove('folded');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
KEEP.initCodeCopy = () => {
|
||||
|
||||
HTMLElement.prototype.wrap = function (wrapper) {
|
||||
this.parentNode.insertBefore(wrapper, this);
|
||||
this.parentNode.removeChild(this);
|
||||
wrapper.appendChild(this);
|
||||
};
|
||||
|
||||
document.querySelectorAll('figure.highlight').forEach(element => {
|
||||
const box = document.createElement('div');
|
||||
element.wrap(box);
|
||||
box.classList.add('highlight-container');
|
||||
box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fas fa-copy"></i></div>');
|
||||
const button = element.parentNode.querySelector('.copy-btn');
|
||||
button.addEventListener('click', event => {
|
||||
const target = event.currentTarget;
|
||||
const code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
|
||||
const ta = document.createElement('textarea');
|
||||
ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
|
||||
ta.style.position = 'absolute';
|
||||
ta.style.opacity = '0';
|
||||
ta.readOnly = true;
|
||||
ta.value = code;
|
||||
document.body.append(ta);
|
||||
const selection = document.getSelection();
|
||||
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
|
||||
ta.select();
|
||||
ta.setSelectionRange(0, code.length);
|
||||
ta.readOnly = false;
|
||||
const result = document.execCommand('copy');
|
||||
target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times';
|
||||
ta.blur(); // For iOS
|
||||
target.blur();
|
||||
if (selected) {
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(selected);
|
||||
}
|
||||
document.body.removeChild(ta);
|
||||
});
|
||||
button.addEventListener('mouseleave', event => {
|
||||
setTimeout(() => {
|
||||
event.target.querySelector('i').className = 'fas fa-copy';
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -50,15 +50,18 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
KEEP.initModeToggle();
|
||||
KEEP.initBack2Top();
|
||||
|
||||
if (KEEP.theme_config.local_search.enable === true) {
|
||||
if (KEEP.theme_config.local_search?.enable === true) {
|
||||
KEEP.initLocalSearch();
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.code_copy.enable === true) {
|
||||
KEEP.initCodeCopy();
|
||||
if (
|
||||
KEEP.theme_config.code_block_tools?.enable === true
|
||||
|| KEEP.theme_config.code_copy?.enable === true
|
||||
) {
|
||||
KEEP.initCodeBlockTools();
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.lazyload.enable === true) {
|
||||
if (KEEP.theme_config.lazyload?.enable === true) {
|
||||
KEEP.initLazyLoad();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue