dengtongyu/hexo-blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
dengtongyu committed 2020-11-23 19:01:28 +08:00
1 parent 522abb824b
commit 63389e016a
168 files changed
+11220
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/butterfly/source/css/_global/function.styl
+199
View File
@@ -0,0 +1,199 @@
.limit-one-line
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.limit-more-line
display: -webkit-box
overflow: hidden
-webkit-box-orient: vertical
.fontawesomeIcon
display: inline-block
font-weight: 600
font-style: normal
font-variant: normal
font-family: 'Font Awesome 5 Free'
text-rendering: auto
-webkit-font-smoothing: antialiased
maxWidth600()
@media screen and (max-width: 600px)
{block}
maxWidth768()
@media screen and (max-width: 768px)
{block}
minWidth768()
@media screen and (min-width: 768px)
{block}
maxWidth1024()
@media screen and (max-width: 1024px)
{block}
maxWidth900()
@media screen and (max-width: 900px)
{block}
minWidth900()
@media screen and (min-width: 900px)
{block}
minWidth2000()
@media screen and (min-width: 2000px)
{block}
// animation
if hexo-config('enter_transitions')
#content-inner,
#footer
animation: main 1s
#page-header
animation: header-effect 1s
#site-title,
#site-subtitle
animation: titlescale 1s
#nav.show
animation: headerNoOpacity 1s
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
#sidebar-menus
&.open
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5)s
.card-announcement-animation
color: #FF0000
animation: announ_animation .8s linear infinite
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
@keyframes scroll-down-effect
0%
top: 0
opacity: .4
50%
top: -16px
opacity: 1
100%
top: 0
opacity: .4
@keyframes header-effect
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
100%
transform: translateY(0)
@keyframes main
0%
opacity: 0
transform: translateY(50px)
100%
opacity: 1
transform: translateY(0)
@keyframes titlescale
0%
opacity: 0
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@keyframes search_close
0%
opacity: 1
transform: scale(1)
100%
opacity: 0
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
to
transform: rotate(360deg)
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)
@keyframes announ_animation
0%,
to
transform: scale(1)
50%
transform: scale(1.2)
@keyframes sidebarItem
0%
transform: translateX(200px)
100%
transform: translateX(0)
themes/butterfly/source/css/_global/index.styl
+217
View File
@@ -0,0 +1,217 @@
[data-theme='light']
--global-bg: $body-bg
--font-color: $font-black
--hr-border: lighten($theme-hr-color, 50%)
--hr-before-color: lighten($theme-hr-color, 30%)
--search-bg: $search-bg
--search-input-color: $search-input-color
--search-result-title: $search-result-title
--preloader-bg: $preloader-bg
--preloader-color: $preloader-word-color
--tab-border-color: $tab-border-color
--tab-botton-bg: $tab-botton-bg
--tab-botton-color: $tab-botton-color
--tab-button-hover-bg: $tab-button-hover-bg
--tab-button-active-bg: $tab-button-active-bg
--card-bg: $card-bg
--sidebar-bg: $sidebar-background
--btn-hover-color: $button-hover-color
--btn-color: $button-color
--btn-bg: $button-bg
--text-bg-hover: $text-bg-hover
--light-grey: $light-grey
--white: $white
--text-highlight-color: $text-highlight-color
--blockquote-color: $blockquote-color
--blockquote-bg: $blockquote-background-color
--reward-pop: $reward-pop-up-bg
--toc-link-color: $toc-link-color
html
height: 100%
font-size: 20px
body
position: relative
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
if !hexo-config('copy.enable')
user-select: none
*::-webkit-scrollbar
width: 8px
height: 8px
*::-webkit-scrollbar-thumb
background: var(--btn-bg)
*::-webkit-scrollbar-track
background-color: transparent
input::placeholder
color: var(--font-color)
#web_bg
position: fixed
z-index: -999
width: 100%
height: 100%
background: $web-bg
background-attachment: local
background-position: center
background-size: cover
background-repeat: no-repeat
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 1rem 0 .7rem
color: var(--text-highlight-color)
font-weight: bold
code
font-size: inherit !important
*
box-sizing: border-box
hr
position: relative
margin: 2rem auto
border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: var(--hr-before-color)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
.table-wrap
overflow-x: scroll
margin: 0 0 1rem
table
display: table
width: 100%
border-spacing: 0
border-collapse: collapse
empty-cells: show
thead
background: alpha($table-thead-bg, 10%)
th,
td
padding: .3rem .6rem
border: 1px solid var(--light-grey)
vertical-align: middle
*::selection
background: $theme-text-selection-color
color: #F7F7F7
button
padding: 0
outline: 0
border: none
background: none
cursor: pointer
a
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word
&:hover
color: $light-blue
// font
if $site-name-font
#site-title,
#site-subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
.is-center
text-align: center
.copy-true
user-select: all
.pull-left
float: left
.pull-right
float: right
.button--animated
position: relative
z-index: 1
transition: color 1s
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--btn-hover-color)
content: ''
transition: transform .5s ease-out
transform: scaleX(0)
transform-origin: 0 50%
&:hover
&:before
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
img
max-width: 100%
transition: all .2s
img[src=''],
img:not([src])
opacity: 0
.img-alt
margin: -.5rem 0 .5rem
color: #858585
&:hover
text-decoration: none !important
.post-ad
margin: 2rem 0
.ad-height
display: block !important
height: auto !important
themes/butterfly/source/css/_highlight/highlight.styl
+186
View File
@@ -0,0 +1,186 @@
// 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')
wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
@require 'theme'
if $highlighEnable
@require 'highlight/index'
if $prismjsEnable
@require 'prismjs/index'
$code-block
overflow: auto
margin: 0 0 1rem
padding: 0
background: $highlight-background
color: $highlight-foreground
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
blockquote
margin: 0 0 1rem
padding: .1rem .8rem
border-left: .2rem solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
a
word-break: break-all
p
margin: 0 !important
padding: .5rem 0
footer
padding: 0 0 .5rem
cite
&:before
padding: 0 .3em
content: '—'
#article-container
pre,
code
font-size: $code-font-size
font-family: $code-font-family !important
code
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
padding: 10px 20px
code
padding: 0
background: none
color: $highlight-foreground
text-shadow: none
figure.highlight
@extend $code-block
position: relative
pre
margin: 0
padding: 8px 0
border: none
figcaption,
.caption
padding: .3rem 0 .1rem .7rem
font-size: $code-font-size
line-height: 1em
a
float: right
padding-right: 10px
color: $highlight-foreground
&:hover
border-bottom-color: $highlight-foreground
.highlight-tools
position: relative
display: flex
align-items: center
overflow: hidden
min-height: 1.2rem
height: 2.15em
background: $highlight-tools.bg-color
color: $highlight-tools.color
font-size: $code-font-size
&.closed + table
display: none
.expand
position: absolute
padding: .4rem .7rem
cursor: pointer
transition: transform .3s
& + .code-lang
left: 1.7rem
&.closed
transition: all .3s
transform: rotate(-90deg) !important
.code-lang
position: absolute
left: .7rem
text-transform: uppercase
font-weight: bold
font-size: 1.15em
user-select: none
.copy-notice
position: absolute
right: 1.7rem
opacity: 0
.copy-button
position: absolute
right: .7rem
cursor: pointer
transition: color .2s
&:hover
color: $theme-color
.gutter
user-select: none
.gist table
width: auto
td
border: none
if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
figure.highlight
margin: 0 0 1.2rem
border-radius: 7px
box-shadow: 0 5px 10px 0 $highlight-mac-border
-webkit-transform: translateZ(0)
.highlight-tools
&:after
position: absolute
left: .7rem
width: 12px
height: 12px
border-radius: 50%
background: #fc625d
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
content: ' '
.expand
right: 0
&.closed
transition: all .3s
transform: rotate(90deg) !important
& ~ .copy-notice
right: 2.8rem
& ~ .copy-button
right: 1.8rem
.code-lang
left: 3.8rem !important
themes/butterfly/source/css/_highlight/highlight/diff.styl
+77
View File
@@ -0,0 +1,77 @@
figure.highlight
table
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
pre .deletion
color: $highlight-deletion
pre .addition
color: $highlight-addition
pre .meta
color: $highlight-purple
pre
.comment
color: $highlight-comment
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
.tag
color: $highlight-aqua
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
.built_in
color: $highlight-yellow
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
.tag .attr,
.javascript .function
color: $highlight-purple
themes/butterfly/source/css/_highlight/highlight/index.styl
+39
View File
@@ -0,0 +1,39 @@
if $highlight_theme != false
@require 'diff'
#article-container
figure.highlight
.line
if wordWrap
&:before
display: inline-block
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
.gutter pre
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
text-align: right
.code pre
padding-right: .5rem
padding-left: .5rem
width: 100%
themes/butterfly/source/css/_highlight/prismjs/diff.styl
+302
View File
@@ -0,0 +1,302 @@
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
// prism-base16-ateliersulphurpool.light
pre[class*='language-']
.token.function
color: #ffb62c
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: rgba(149, 165, 166, .8)
.token.punctuation
color: #5e6687
.token.namespace
opacity: .7
.token.operator,
.token.boolean,
.token.number
color: #c76b29
.token.property
color: #c08b30
.token.tag
color: #3d8fd1
.token.string
color: #22a2c9
.token.selector
color: #6679cc
.token.attr-name
color: #c76b29
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
color: #22a2c9
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit
color: #ac9739
.token.statement,
.token.regex,
.token.atrule
color: #22a2c9
.token.placeholder,
.token.variable
color: #3d8fd1
.token.deleted
text-decoration: line-through
.token.inserted
border-bottom: 1px dotted #202746
text-decoration: none
.token.italic
font-style: italic
.token.important,
.token.bold
font-weight: bold
.token.important
color: #c94922
.token.entity
cursor: help
pre > code.highlight
outline: .4em solid #c94922
outline-offset: .4em
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
// prism-atom-dark
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #7C7C7C
.token.punctuation
color: #c5c8c6
.namespace
opacity: .7
.token.property,
.token.keyword,
.token.tag
color: #96CBFE
.token.class-name
color: #FFFFB6
.token.boolean,
.token.constant
color: #99CC99
.token.symbol,
.token.deleted
color: #f92672
.token.number
color: #FF73FD
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #A8FF60
.token.variable
color: #C6C5FE
.token.operator
color: #EDEDED
.token.entity
color: #FFFFB6
cursor: help
.token.url
color: #96CBFE
.language-css .token.string,
.style .token.string
color: #87C38A
.token.atrule,
.token.attr-value
color: #F9EE98
.token.function
color: #DAD085
.token.regex
color: #E9C062
.token.important
color: #fd971f
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
if $highlight_theme == 'pale night'
// prism-dracula
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #6272a4
.token.punctuation
color: #f8f8f2
.namespace
opacity: .7
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: #ff79c6
.token.boolean,
.token.number
color: #bd93f9
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #50fa7b
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: #f8f8f2
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #f1fa8c
.token.keyword
color: #8be9fd
.token.regex,
.token.important
color: #ffb86c
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
.token.entity
cursor: help
if $highlight_theme == 'ocean'
// prism-material-oceanic
pre[class*='language-']
&.language-css > code,
&.language-sass > code,
&.language-scss > code
color: #fd9170 !important
.namespace
opacity: .7
.token.atrule,
.token.symbol,
.token.constant,
.token.boolean,
.token.function
color: #c792ea
.token.attr-name,
.token.builtin,
.token.class
color: #ffcb6b
.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string
color: #c3e88d
.token.cdata,
.token.property,
.token.char,
.token.inserted
color: #80cbc4
.token.class-name,
.token.color,
.token.hexcode,
.token.regex
color: #f2ff00
.token.comment,
.token.prolog,
.token.doctype
color: #546e7a
.token.deleted,
.token.variable,
.token.entity,
.token.selector,
.token.tag,
.token.unit
color: #f07178
.token.id
color: #c792ea
font-weight: bold
.token.important
color: #c792ea
font-weight: bold
.token.keyword
color: #c792ea
font-style: italic
.token.number,
.token.url
color: #fd9170
.token.operator,
.token.punctuation
color: #89ddff
themes/butterfly/source/css/_highlight/prismjs/index.styl
+20
View File
@@ -0,0 +1,20 @@
if hexo-fonfig('prismjs_settings.line_number')
@require 'line-number'
if $highlight_theme != false
@require 'diff'
#article-container
pre[class*='language-']
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
&:not(.line-numbers)
padding: 10px 20px
.caption
margin-left: -3.8em
padding: .2rem .8rem !important
a
padding: 0 !important
themes/butterfly/source/css/_highlight/prismjs/line-number.styl
+34
View File
@@ -0,0 +1,34 @@
#article-container
pre[class*='language-']
&.line-numbers
position: relative
padding-left: 3.8em
counter-reset: linenumber
line-height: $line-height-code-block
> code
position: relative
white-space: inherit
line-height: $line-height-code-block
.line-numbers-rows
position: absolute
top: 0
left: -3.8em
width: 3em
letter-spacing: -1px
font-size: 100%
pointer-events: none
user-select: none
& > span
display: block
counter-increment: linenumber
pointer-events: none
&:before
display: block
padding-right: .8em
color: $highlight-gutter.color
content: counter(linenumber)
text-align: right
themes/butterfly/source/css/_highlight/theme.styl
+119
View File
@@ -0,0 +1,119 @@
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
$highlight-background = #212121
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-mac-border = rgba(0, 0, 0, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = darken($highlight-background, 6)
if $highlighEnable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = darken($highlight-background, 6)
if $highlighEnable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = darken($highlight-background, 5)
if $highlighEnable
$highlight-comment = rgba(101, 115, 126, .8)
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
$highlight-background = #F6F8FA
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlighEnable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == false
$highlight-background = #F6F8FA
$highlight-foreground = #90A4AE
$highlight-selection = #80CBC440
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-scrollbar = darken($highlight-background, 8)
themes/butterfly/source/css/_layout/404.styl
+77
View File
@@ -0,0 +1,77 @@
if hexo-config('error_404.enable')
#error-wrap
position: absolute
top: 50%
right: 0
left: 0
margin: 0 auto
padding: 0 1rem
max-width: 1000px
transform: translate(0, -50%)
.error-content
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 0 1rem
height: 18rem
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+maxWidth768()
flex-direction: column
margin: 0
height: 25rem
.error-img
flex: 1
height: 100%
border-top-left-radius: 8px
border-bottom-left-radius: 8px
background-color: $theme-color
background-position: center
background-size: cover
+maxWidth768()
flex: 1
width: 100%
border-top-right-radius: 8px
border-bottom-left-radius: 0
.error-info
flex: 1
padding: .5rem
text-align: center
font-size: 14px
if $site-name-font
font-family: $site-name-font
+maxWidth768()
flex: 1.1
width: 100%
.error_title
margin-top: -4rem
font-size: 9em
+maxWidth768()
margin-top: -3rem
.error_subtitle
@extend .limit-more-line
margin-top: -3.5rem
word-break: break-word
font-size: 1.6em
-webkit-line-clamp: 2
a
display: inline-block
margin-top: .5rem
padding: .3rem 1.5rem
background: var(--btn-bg)
color: var(--btn-color)
i
padding-right: .3rem
themes/butterfly/source/css/_layout/aside.styl
+340
View File
@@ -0,0 +1,340 @@
#aside_content
width: 25%
+minWidth900()
if hexo-config('aside.position') == 'right'
padding-left: 15px
else
padding-right: 15px
+maxWidth900()
width: 100%
if hexo-config('aside.mobile') == false
+maxWidth768()
display: none
> .card-widget:first-child
margin-top: 0
+maxWidth900()
margin-top: 1rem
.card-widget
position: relative
overflow: hidden
margin-top: 1rem
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.card-info
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.author-info
&__name
font-weight: 500
font-size: 1.57em
&__description
margin-top: -.3rem
.card-info-data
display: table
padding: .7rem 0
width: 100%
table-layout: fixed
& > .card-info-data-item
display: table-cell
a
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: 1em
.length-num
margin-top: -.3rem
color: var(--text-highlight-color)
font-size: 1.4em
.card-info-social-icons
margin: .3rem 0 -.3rem
.social-icon
margin: 0 .5rem
color: var(--font-color)
font-size: 1.4em
cursor: pointer
i
transition: all .3s
&:hover
transform: rotate(540deg)
#card-info-btn
display: block
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
line-height: 2.4
span
padding-left: .5rem
.card-content
padding: 1rem 1.2rem
.item-headline
padding-bottom: .3rem
font-size: 1.2em
span
margin-left: .5rem
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px
.card-tag-cloud
a
display: inline-block
padding: 0 .1rem
&:hover
color: $text-hover !important
.aside-list
& > span
display: block
margin-bottom: .5rem
text-align: center
& > .aside-list-item
display: flex
align-items: center
padding: .3rem 0
&:first-child
padding-top: 0
&:not(:last-child)
border-bottom: 1px dashed #f5f5f5
&:last-child
padding-bottom: 0
.thumbnail
overflow: hidden
width: w = 4.2em
height: w
& > img
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
.content
flex: 1
padding-left: 10px
word-break: break-all
& > .name
@extend .limit-more-line
-webkit-line-clamp: 1
& > time,
& > .name
display: block
color: $theme-meta-color
font-size: 85%
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
font-size: 95%
line-height: 1.5
-webkit-line-clamp: 2
&:hover
color: $text-hover
&.no-cover
min-height: 4.4em
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: inline-block
padding: .15rem .5rem
width: 100%
color: var(--font-color)
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: var(--text-bg-hover)
span
@extend .limit-one-line
display: inline-block
vertical-align: bottom
&:first-child
width: 80%
&:last-child
width: 20%
text-align: right
&.more
span
padding-right: .3rem
width: auto !important
transition: .5s
&:hover
span
padding-right: .6rem
.card-categories
.card-category-list
&.child
padding: 0 0 0 .8rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
margin-right: -.35rem
padding: .35rem
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
display: none
.card-webinfo
.webinfo
.webinfo-item
display: flex
align-items: center
padding: .1rem .5rem 0
div
&:first-child
flex: 1
padding-right: 1rem
// toc
#card-toc
+maxWidth900()
position: fixed
right: 45px
bottom: 30px
z-index: 100
display: none
width: $toc-mobile-width
transform-origin: right bottom
animation: toc-open .3s
.toc-child
display: block !important
.toc-content
overflow-y: auto
max-height: calc(100vh - 120px)
ol,
li
list-style: none
> ol
padding: 0 !important
ol
margin: 0
padding-left: .4rem
.toc-link
display: block
padding-left: .3rem
border-left: 3px solid transparent
color: var(--toc-link-color)
transition: all .2s ease-in-out
&.active
border-left-color: darken($theme-toc-color, 20%)
background: $theme-toc-color
color: $toc-active-color
&:before
position: absolute
top: .6rem
right: 1.2rem
color: #a9a9a9
content: attr(progress-percentage)
font-style: italic
font-size: 1.2rem
@keyframes toc-open
0%
transform: scale(.7)
100%
transform: scale(1)
@keyframes toc-close
0%
transform: scale(1)
100%
transform: scale(.7)
+minWidth900()
html.hide-aside
.layout
justify-content: center
> .aside_content
display: none
> div:first-child
width: 80%
themes/butterfly/source/css/_layout/chat.styl
+8
View File
@@ -0,0 +1,8 @@
// chat
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
#chatra:not(.chatra--expanded)
visibility: hidden !important
width: 1px !important
height: 1px !important
opacity: 0 !important
pointer-events: none
themes/butterfly/source/css/_layout/comments.styl
+64
View File
@@ -0,0 +1,64 @@
#post-comment
.comment-head
margin-bottom: 1rem
.comment-headline
display: inline-block
vertical-align: middle
font-weight: 700
font-size: 1.43em
#comment-switch
display: inline-block
if hexo-config('comments.text')
float: right
margin: .1rem auto 0
padding: .2rem .8rem
width: max-content
border-radius: 8px
background: $comments-switch-bg
else
vertical-align: middle
> span
display: none
.first-comment
color: $comments-switch-first-text
.second-comment
color: $comments-switch-second-text
.switch-btn
position: relative
display: inline-block
margin: -4px .4rem 0
width: 42px
height: 22px
border-radius: 34px
background-color: $comments-switch-first-text
vertical-align: middle
cursor: pointer
transition: .4s
&:before
position: absolute
bottom: 4px
left: 4px
width: 14px
height: 14px
border-radius: 50%
background-color: $comments-switch-round
content: ''
transition: .4s
&.move
background-color: $comments-switch-second-text
&:before
transform: translateX(20px)
.comment-wrap
> div:nth-child(2)
display: none
themes/butterfly/source/css/_layout/footer.styl
+33
View File
@@ -0,0 +1,33 @@
#footer
position: relative
background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover
if hexo-config('footer_bg') != false
&:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
#footer-wrap
position: relative
padding: 2rem 1rem
color: var(--light-grey)
text-align: center
a
color: var(--light-grey)
&:hover
text-decoration: underline
.footer-separator
margin: 0 .2rem
.icp-icon
padding: 0 4px
vertical-align: text-bottom
themes/butterfly/source/css/_layout/head.styl
+366
View File
@@ -0,0 +1,366 @@
#page-header
position: relative
width: 100%
background-color: $light-blue
background-position: center center
background-size: cover
background-repeat: no-repeat
transition: all .5s
// index
&.full_page
height: $index_top_img_height
background-attachment: fixed
#site-info
position: absolute
top: $index_site_info_top
padding: 0 .5rem
width: 100%
#site-title,
#site-subtitle,
#scroll-down .scroll-down-effects
text-align: center
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
line-height: 1.5
#site-title
margin: 0
color: var(--white)
font-size: 1.85em
+minWidth768()
font-size: 2.85em
#site-subtitle
color: var(--light-grey)
font-size: 1.15em
+minWidth768()
font-size: 1.72em
#site_social_icons
display: none
margin: 0 auto
width: 15rem
text-align: center
+maxWidth768()
display: block
.social-icon
margin: 0 .5rem
color: var(--light-grey)
text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
font-size: 1.43em
cursor: pointer
#scroll-down
position: absolute
bottom: 0
width: 100%
cursor: pointer
.scroll-down-effects
position: relative
width: 100%
color: var(--light-grey)
font-size: 30px
// page
&.not-index-bg
height: 20rem
+maxWidth768()
height: 14rem
#page-site-info
position: absolute
top: 10rem
padding: 0 .5rem
width: 100%
+maxWidth768()
top: 7rem
// post
&.post-bg
height: 20rem
+maxWidth768()
height: 18rem
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
background-color: alpha($dark-black, .5)
content: ''
&.no-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
#post-info
position: absolute
bottom: 5rem
padding: 0 8%
width: 100%
text-align: center
+maxWidth900()
bottom: 1.5rem
text-align: left
+maxWidth768()
bottom: 1.1rem
padding: 0 1.1rem
#post-info
.post-title
@extend .limit-more-line
margin-bottom: .4rem
font-size: 2.5em
font-weight: normal
color: var(--white)
line-height: 1.5
-webkit-line-clamp: 3
+maxWidth768()
font-size: 1.72em
#post-meta
color: var(--light-grey)
font-size: 95%
+minWidth768()
> .meta-secondline
> span:first-child
display: none
+maxWidth768()
font-size: 90%
> .meta-firstline,
> .meta-secondline
display: inline
.post-meta
&-separator
margin: 0 .25rem
&-icon
margin-right: .2rem
&-label
if hexo-config('post_meta.post.label')
margin-right: .2rem
else
display: none
a
color: var(--light-grey)
transition: all .3s ease-out
&:hover
color: $text-hover
text-decoration: underline
if hexo-config('post_meta.post.date_format') == 'relative'
time
display: none
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
[data-theme='light']
#post
#post-info
#post-meta,
#post-meta a
color: #78818a
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
z-index: 90
display: flex
flex-wrap: wrap
align-items: center
padding: 0 36px
width: 100%
height: 60px
font-size: 1.3em
opacity: 0
transition: all .5s
+maxWidth768()
padding: 0 16px
&:not(.fixed)
#menus
padding-right: 0 !important
&.show
opacity: 1
#blog_name
flex: 1
#toggle-menu
display: none
padding: .1rem 0 0 .3rem
vertical-align: top
&:hover
color: var(--white)
a
color: var(--light-grey)
&:hover
color: var(--white)
&.fixed
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.visible
transition: all .5s
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
cursor: pointer
.menus_items
display: inline
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
&:hover
.menus_item_child
display: block
i.expand
transform: rotate(180deg) !important
i.expand
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
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: var(--sidebar-bg)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
list-style: none
&:hover
background: var(--text-bg-hover)
a
display: inline-block
padding: .3rem .7rem
width: 100%
color: var(--font-color)
text-shadow: none
&.hide-menu
#toggle-menu
display: inline-block !important
.site-page
font-size: inherit
.menus_items
display: none !important
#search_button span
display: none !important
#search_button
display: inline
padding: 0 0 0 .7rem
.site-page
position: relative
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer
themes/butterfly/source/css/_layout/loading.styl
+95
View File
@@ -0,0 +1,95 @@
if hexo-config('preloader')
.loading-bg
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: var(--preloader-bg)
#loading-box
.loading-left-bg
@extend .loading-bg
.loading-right-bg
@extend .loading-bg
right: 0
.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate
.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
.loading-word
position: absolute
color: var(--preloader-color)
font-size: .8rem
.configure-core
width: 100%
height: 100%
background-color: var(--preloader-bg)
&.loaded
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)
.loading-right-bg
transition: all .5s
transform: translate(100%, 0)
.spinner-box
display: none
@keyframes configure-clockwise
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(270deg)
100%
transform: rotate(360deg)
@keyframes configure-xclockwise
0%
transform: rotate(45deg)
25%
transform: rotate(-45deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-225deg)
100%
transform: rotate(-315deg)
themes/butterfly/source/css/_layout/pagination.styl
+79
View File
@@ -0,0 +1,79 @@
#pagination
overflow: hidden
margin-top: 1rem
width: 100%
.pagination
text-align: center
.page-number
display: inline-block
margin: 0 .2rem
min-width: w = 1.2rem
height: w
text-align: center
line-height: w
cursor: pointer
&.current
background: $theme-paginator-color
color: var(--white)
cursor: default
img.prev-cover,
img.next-cover
position: absolute
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.pagination-info
position: absolute
top: 50%
padding: 1rem 2rem
width: 100%
transform: translate(0, -50%)
.prev_info,
.next_info
@extend .limit-one-line
color: var(--white)
font-weight: 500
.next-post
.pagination-info
text-align: right
.pull-full
width: 100% !important
.prev-post .label,
.next-post .label
color: var(--light-grey)
text-transform: uppercase
font-size: 90%
.prev-post,
.next-post
width: 50%
+maxWidth768()
width: 100%
a
position: relative
display: block
overflow: hidden
height: 150px
&:hover
img.prev-cover,
img.next-cover
opacity: .8
transform: scale(1.1)
&.pagination-post
margin: 2rem 0 !important
background: $dark-black
themes/butterfly/source/css/_layout/post.styl
+277
View File
@@ -0,0 +1,277 @@
beautify()
headStyle(fontsize)
padding-left: unit(fontsize + .4, 'rem')
code
font-size: unit(fontsize, 'rem')
&:before
margin-left: unit((-(fontsize + .2)), 'rem')
font-size: unit(fontsize, 'rem')
&:hover
padding-left: unit(fontsize + .6, 'rem')
h1,
h2,
h3,
h4,
h5,
h6
transition: all .2s ease-out
&:before
position: absolute
top: calc(50% - .35rem)
color: $title-prefix-icon-color
content: $title-prefix-icon
line-height: 1
transition: all .2s ease-out
@extend .fontawesomeIcon
&:hover
&:before
color: $light-blue
h1
headStyle(1)
h2
headStyle(.9)
h3
headStyle(.8)
h4
headStyle(.7)
h5
headStyle(.6)
h6
headStyle(.6)
ol,
ul
margin-top: .4rem
padding: 0 0 0 .8rem
list-style: none
counter-reset: li
+maxWidth768()
padding: 0 0 0 .4rem
p
margin: 0 0 .5rem
ol,
ul
padding-left: .6rem
+maxWidth768()
padding-left: .2rem
li
&:not(.tab)
position: relative
margin: .2rem 0
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all .3s ease-out
ol
> li
&:not(.tab)
padding: .2em .2em .2em 1.8em
&:before
margin-top: .65em
width: w = 1.45em
height: h = w
border-radius: .5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: .85em
line-height: h
ul
> li:not(.tab)
padding: .2em .2em .2em 1.4em
&:hover
&:before
border-color: $pseudo-hover
&:before
$w = .42em
top: .78em
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
line-height: h
no-beautify()
ol,
ul
margin-top: .4rem
p
margin: 0 0 .5rem
ol,
ul
padding-left: .5rem
li
position: relative
margin: .3rem 0
padding-left: .3rem
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
img
margin: 0 auto .8rem
p
margin: 0 0 .8rem
iframe
margin: 0 0 1rem
if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
beautify()
else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
no-beautify()
&.post-content
beautify()
else
no-beautify()
#post
img
display: block
.tag_share
.post-meta
&__tag-list
display: inline-block
&__tags
display: inline-block
margin: .4rem .4rem .4rem 0
padding: 0 .6rem
width: fit-content
border: 1px solid $light-blue
border-radius: .6rem
color: $light-blue
font-size: .85em
transition: all .2s ease-in-out
&:hover
background: $light-blue
color: var(--white)
.post_share
display: inline-block
float: right
margin: .4rem 0
width: fit-content
.social-share
font-size: .85em
.social-share-icon
margin: 0 4px
width: w = 1.85em
height: w
font-size: 1.2em
line-height: w
.post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
&:before
position: absolute
top: t = .5rem
right: t
width: w = .8rem
height: w
border-radius: w
background: $light-blue
content: ''
&:after
position: absolute
top: t = .7rem
right: t
width: w = .4rem
height: w
border-radius: w
background: var(--card-bg)
content: ''
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
.post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: .3rem
a
text-decoration: underline
word-break: break-word
&:hover
text-decoration: none
.post-outdate-notice
position: relative
margin: 0 0 1rem
padding: .5em 1.2em
border-radius: 3px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color
if hexo-config('noticeOutdate.style') == 'flat'
padding: .5em 1em .5em 2.6em
border-left: 5px solid $noticeOutdate-border
&:before
@extend .fontawesomeIcon
position: absolute
top: 50%
left: .9em
color: $noticeOutdate-border
content: '\f071'
transform: translateY(-50%)
themes/butterfly/source/css/_layout/relatedposts.styl
+54
View File
@@ -0,0 +1,54 @@
.relatedPosts
margin-top: 1rem
& > .headline
margin-bottom: 5px
font-weight: 700
font-size: 1.43em
& > .relatedPosts-list
& > div
position: relative
display: inline-block
overflow: hidden
margin: 3px
width: calc(33.333% - 6px)
height: 200px
background: $dark-black
vertical-align: bottom
&:hover
.cover
opacity: .8
transform: scale(1.1)
+maxWidth768()
margin: 2px
width: calc(50% - 4px)
height: 150px
+maxWidth600()
width: calc(100% - 4px)
.cover
width: 100%
height: 100%
opacity: .4
transition: all .6s
object-fit: cover
.content
position: absolute
top: 50%
padding: 0 1rem
width: 100%
transform: translate(0, -50%)
.date
color: var(--light-grey)
font-size: 90%
.title
@extend .limit-more-line
color: var(--white)
-webkit-line-clamp: 2
themes/butterfly/source/css/_layout/reward.styl
+71
View File
@@ -0,0 +1,71 @@
.post-reward
position: relative
margin-top: 4rem
width: 100%
text-align: center
.reward-button
display: inline-block
padding: .2rem 1.2rem
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-all
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
themes/butterfly/source/css/_layout/rightside.styl
+44
View File
@@ -0,0 +1,44 @@
#rightside
position: fixed
right: -38px
bottom: $rightside-bottom
z-index: 100
opacity: 0
transition: all .5s
#rightside-config-hide
transition: transform .4s
transform: translate(35px, 0)
&.show
transform: translate(0, 0) !important
& > div
& > button,
& > a
display: block
margin-bottom: 2px
width: 30px
height: 30px
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
font-size: 16px
cursor: pointer
&:hover
background-color: var(--btn-hover-color)
#rightside_config
i
animation: avatar_turn_around 2s linear infinite
#mobile-toc-button
display: none
+maxWidth900()
display: block
+maxWidth900()
#hide-aside-btn
display: none
themes/butterfly/source/css/_layout/sidebar.styl
+97
View File
@@ -0,0 +1,97 @@
#sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: auto
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .author-avatar
padding: 1.3rem 1.5rem 0
text-align: center
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.site-data
display: table
padding: .6rem .5rem 0
width: 100%
table-layout: fixed
.data-item
display: table-cell
.data-item-link
& > a > div
@extend .limit-one-line
.length-num
color: var(--text-highlight-color)
font-size: 1.28em
.headline
color: var(--font-color)
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
display: block
padding: .3rem 1.5rem
color: var(--font-color)
font-size: 1.15em
cursor: pointer
i:first-child
width: 25%
text-align: left
span
width: 75%
&:hover
color: $light-blue
.expand
position: absolute
top: .78em
right: .4rem
transition: transform .3s
&.hide
transform: rotate(90deg) !important
.menus_item_child
margin: 0
list-style: none
if hexo-config('hide_sidebar_menu_child')
display: none
themes/butterfly/source/css/_layout/third-party.styl
+99
View File
@@ -0,0 +1,99 @@
#vcomment
font-size: 1.1em
.vbtn
border: none
background: var(--btn-bg)
color: var(--btn-color)
&:hover
background: var(--btn-hover-color)
if hexo-config('valine.bg')
textarea
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
&:focus
background-image: none
.vimg
transition: all .3s
&:hover
transform: rotate(360deg)
.vcards .vcard .vcontent.expand
&:before,
&:after
z-index: 22
.fireworks
position: fixed
top: 0
left: 0
z-index: $fireworks-zIndex
pointer-events: none
.medium-zoom-image--opened
z-index: 99999 !important
margin: 0 !important
.medium-zoom-overlay
z-index: 99999 !important
.mermaid
overflow: auto
margin: 0 0 1rem
background: $white
text-align: center
opacity: 0
transition: all .3s
&[data-processed]
opacity: 1
.utterances,
.fb-comments iframe
width: 100% !important
#gitalk-container
.gt-meta
margin: 0 0 .8em
padding: .3rem 0 .8em
.katex-wrap
overflow: auto
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
&::-webkit-scrollbar
display: none
// mathjax
.mathjax-overflow
overflow-x: auto
overflow-y: hidden
mjx-container[jax='CHTML'][display='true']
overflow-x: auto
overflow-y: hidden
padding-bottom: .3rem
.aplayer
color: $font-black
#article-container
.aplayer
margin: 0 0 1rem
if hexo-config('beautify.enable')
ol,
ul
margin: 0
padding: 0
li
margin: 0
padding: 0 15px
&:before
content: none
themes/butterfly/source/css/_mode/darkmode.styl
+156
View File
@@ -0,0 +1,156 @@
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
--global-bg: darken(#121212, 2)
--font-color: alpha(#FFFFFF, .7)
--hr-border: alpha(#FFFFFF, .4)
--hr-before-color: alpha(#FFFFFF, .7)
--search-bg: #121212
--search-input-color: alpha(#FFFFFF, .7)
--search-result-title: alpha(#FFFFFF, .9)
--preloader-bg: darken(#121212, 2)
--preloader-color: alpha(#FFFFFF, .7)
--tab-border-color: #2c2c2c
--tab-botton-bg: #2c2c2c
--tab-botton-color: alpha(#FFFFFF, .7)
--tab-button-hover-bg: lighten(#121212, 15)
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .7)
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .7)
--white: alpha(#FFFFFF, .9)
--text-highlight-color: alpha(#FFFFFF, .9)
--blockquote-color: alpha(#FFFFFF, .7)
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
#web_bg:before,
#footer:before,
#page-header:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#article-container
code
background: #2c2c2c
pre > code
background: 0
.note
code
background: $code-background
.aplayer
filter: brightness(.8)
// 頭部
#page-header
& > #nav.fixed,
&.no-top-img #nav
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')
background: #2c2c2c !important
.switch-btn
filter: brightness(.8)
// note
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
.note
filter: brightness(.8)
// hide-tags
.hide-button,
.btn-beautify,
.mermaid,
.post-outdate-notice,
.error-img,
#article-container iframe,
img,
.gist
filter: brightness(.8)
#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)
svg
fill: alpha(#FFFFFF, .9) !important
// Disqus and Disqusjs
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .7)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .7)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .7)
#artitalk_main #lazy
background: #121212
#operare_artitalk .c2
background: #121212
themes/butterfly/source/css/_mode/readmode.styl
+186
View File
@@ -0,0 +1,186 @@
if hexo-config('readmode')
[data-theme='light']
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
-highlight-bg: #f7f7f7
[data-theme='dark']
.read-mode
--font-color: rgba(255, 255, 255, .7)
--readmode-light-color: #0d0d0d
--white: rgba(255, 255, 255, .9)
--light-grey: rgba(255, 255, 255, .7)
--gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7)
-highlight-bg: #171717
.read-mode
background: var(--readmode-light-color)
#aside_content
display: none
#body-wrap
padding-left: 0 !important
#page-header.post-bg
background-color: transparent
background-image: none !important
&:before
opacity: 0
& > #post-info
padding: 0
text-align: center
#post
margin: 0 auto
background: transparent
box-shadow: none
&:hover
box-shadow: none
& > canvas
display: none !important
.highlight-tools,
#footer,
#post > *:not(#post-info):not(.post-content),
#to_comment,
#mobile-toc-button,
#nav,
.post-outdate-notice,
#web_bg
display: none !important
if !hexo-config('chat_btn')
#chatra,
#tidio-chat-code,
#tidio-chat,
#daodream-container,
.gitter-chat-embed,
.gitter-open-chat-button
display: none !important
#article-container
a
color: #99a9bf
pre,
.highlight:not(.js-file-line-container)
background: var(-highlight-bg) !important
*
color: var(--font-color) !important
figure.highlight
border-radius: 0 !important
box-shadow: none !important
& > :not(.highlight-tools)
display: block !important
.line:before
color: var(--font-color) !important
.hljs
background: var(-highlight-bg) !important
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''
&:hover
padding: 0
ul,
li,
ol
&:hover:before
transform: none !important
ol,
li
&:before
background: transparent !important
color: var(--font-color) !important
ul
>li
&:before
border: .15rem solid var(--gray) !important
.tabs
border: 2px solid var(--tab-border-color)
> .nav-tabs
background: transparent
> .tab
border-bottom: 0
button
border-top: none !important
background: transparent
&:hover
background: none !important
&.active
button
text-decoration: underline
> .tab-contents .tab-item-content.active
animation: none
code
color: var(--font-color)
blockquote
border-left: .2rem solid var(--gray)
background-color: var(--readmode-light-color)
.hide-toggle
border: 1px solid var(--gray) !important
.hide-button,
.btn-beautify
background: var(--readmode-light-color) !important
color: var(--font-color) !important
.btn-beautify
border: 1px solid var(--gray) !important
.button--animated:before
background: var(--readmode-light-color) !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid var(--gray)
& > .button--animated:before
background: var(--readmode-light-color)
.note
border: 2px solid var(--gray)
border-left-color: var(--gray) !important
filter: none
background-color: var(--readmode-light-color) !important
color: var(--font-color)
themes/butterfly/source/css/_page/archives.styl
+115
View File
@@ -0,0 +1,115 @@
.article-sort
margin-left: .5rem
padding-left: 1rem
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: .5rem
padding-bottom: 1rem
padding-left: 1rem
font-size: 1.72em
&:hover
&:before
border-color: $pseudo-hover
&:before
position: absolute
top: calc(((100% - 1.8rem) / 2))
left: -.45rem
z-index: 1
width: w = .5rem
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
line-height: h
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: .1rem
height: 1.5em
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
display: flex
align-items: center
margin: 0 0 1rem .5rem
transition: all .2s ease-in-out
&:hover
&:before
border-color: $pseudo-hover
&:before
$w = .3rem
position: absolute
left: calc(-1rem - 17px)
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
transition: all .2s ease-in-out
&.no-article-cover
height: 80px
.article-sort-item-info
padding: 0
&.year
font-size: 1.43em
&:hover
&:before
border-color: $light-blue
&:before
border-color: $pseudo-hover
&-time
color: $theme-meta-color
font-size: 95%
time
padding-left: .3rem
cursor: default
&-title
@extend .limit-more-line
color: var(--font-color)
font-size: 1.1em
transition: all .3s
-webkit-line-clamp: 2
&:hover
color: $text-hover
transform: translateX(10px)
&-img
overflow: hidden
width: 80px
height: 80px
img
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
&-info
flex: 1
padding: 0 .8rem
themes/butterfly/source/css/_page/categories.styl
+62
View File
@@ -0,0 +1,62 @@
#page
.category-lists
padding: 1rem 0 1.5rem
+maxWidth768()
padding: 0
.category-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
.category-list
a
color: var(--font-color)
&:hover
color: $text-hover
.category-list-count
margin-left: .4rem
color: $theme-meta-color
&:before
content: '('
&:after
content: ')'
ul
margin-top: .4rem
padding: 0 0 0 1rem
list-style: none
counter-reset: li
ul
padding-left: .2rem
li
position: relative
margin: .3rem 0
padding: .12em .4em .12em 1.4em
&:before
position: absolute
left: 0
cursor: pointer
transition: all .3s ease-out
$w = .43em
top: .7em
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: transparent
content: ''
// line-height: h
&:hover
&:before
border-color: $pseudo-hover
themes/butterfly/source/css/_page/common.styl
+52
View File
@@ -0,0 +1,52 @@
.layout
display: flex
margin: 0 auto
padding: 2rem 15px
max-width: 1200px
+maxWidth900()
flex-direction: column
+maxWidth768()
padding: 1rem 5px !important
+minWidth2000()
max-width: 1500px
& > div:first-child:not(.recent-posts)
align-self: flex-start
padding: 50px 40px
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+maxWidth768()
padding: 1.8rem .7rem !important
& > div:first-child
width: 75%
transition: all .3s
+maxWidth900()
width: 100% !important
if hexo-config('aside.position') == 'left'
+minWidth900()
order: 2
// 隱藏aside
&.hide-aside
max-width: 1000px
+minWidth2000()
max-width: 1300px
& > div
width: 100% !important
#page
h1.page-title
margin-top: .4rem
themes/butterfly/source/css/_page/flink.styl
+76
View File
@@ -0,0 +1,76 @@
.flink#article-container
.flink-desc
margin: .2rem 0 .5rem
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
-webkit-transform: translateZ(0)
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: var(--font-color)
text-decoration: none
img
float: left
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
display: block
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
display: block
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
themes/butterfly/source/css/_page/homepage.styl
+150
View File
@@ -0,0 +1,150 @@
#recent-posts
& > .recent-post-item:not(:first-child)
margin-top: 1rem
& > .recent-post-item
display: flex
flex-direction: row
align-items: center
height: 20em
border-radius: 12px 8px 8px 12px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
+maxWidth768()
border-radius: 12px 12px 8px 8px
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
img.post_bg
transform: scale(1.1)
if hexo-config('cover.position') == 'both'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('cover.position') == 'left'
.left_radius
border-radius: 8px 0 0 8px
.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('cover.position') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0
.right_radius
order: 2
border-radius: 0 8px 8px 0
.post_cover
overflow: hidden
width: 45%
height: 100%
-webkit-mask-image: -webkit-radial-gradient(white, black)
img.post_bg
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
& >.recent-post-info
display: inline-block
overflow: hidden
padding: 0 40px
width: 55%
&.no-cover
width: 100%
& > .article-title
@extend .limit-more-line
margin-bottom: .3rem
color: var(--text-highlight-color)
font-size: 1.72em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
&:hover
color: $text-hover
& > .article-meta-wrap
color: $theme-meta-color
font-size: 90%
& > .post-meta-date
cursor: default
.sticky
color: $sticky-color
i
margin: 0 .2rem 0 0
.article-meta-label
if hexo-config('post_meta.page.label')
padding-right: .2rem
else
display: none
.article-meta__separator
margin: 0 .3rem
.article-meta__link
margin: 0 .2rem
.fa-angle-right
margin: 0 .2rem
if hexo-config('post_meta.page.date_format') == 'relative'
time
display: none
a
color: $theme-meta-color
&:hover
color: $text-hover
text-decoration: underline
& > .content
@extend .limit-more-line
margin-top: .3rem
-webkit-line-clamp: 3
+maxWidth768()
#recent-posts
.recent-post-item
flex-direction: column
height: auto !important
.post_cover
order: 1 !important
width: 100%
height: 230px
border-radius: 8px 8px 0 0
.recent-post-info
order: 2 !important
padding: 1rem 1rem 1.5rem
width: 100%
&.no-cover
padding: 1.5rem 1rem
.article-title
font-size: 1.43em
.content
height: auto
themes/butterfly/source/css/_page/tags.styl
+19
View File
@@ -0,0 +1,19 @@
.tag-cloud
&-list
a
display: inline-block
padding: 0 .4rem
transition: all .3s
&:hover
color: $text-hover !important
transform: scale(1.1)
+maxWidth768()
zoom: .85
&-title
font-size: 2.57em
+maxWidth768()
font-size: 2em
themes/butterfly/source/css/_search/algolia.styl
+77
View File
@@ -0,0 +1,77 @@
#algolia-search
.search-dialog
animation: titlescale .5s
.ais-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: .25rem .7rem
outline: none
border: 2px solid $search-color
border-radius: 2rem
background: var(--search-bg)
color: var(--search-input-color)
.ais-hits--item.algolia-hit-item
position: relative
padding-left: 1.2rem
&:hover
&:before
border-color: $pseudo-hover
&:before
$w = .5em
position: absolute
top: .53em
left: 0
width: w = $w
height: h = w
border: .15rem solid $search-color
border-radius: w
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
a
display: block
color: var(--search-result-title)
cursor: pointer
&:hover
color: $search-color
em
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
margin: .8rem 0 0
padding: 0
text-align: center
.ais-pagination--item
margin: 0 .2rem
padding: 0
a
display: inline-block
min-width: 1.2rem
height: 1.2rem
text-align: center
line-height: 1.2rem
.ais-pagination--item.current
a
background: $theme-paginator-color
color: #eee
cursor: default
.algolia-logo
padding-top: 2px
width: 4rem
height: 1.5rem
themes/butterfly/source/css/_search/index.styl
+49
View File
@@ -0,0 +1,49 @@
.search-dialog
position: fixed
top: 5rem
left: 50%
z-index: 1001
display: none
margin-left: -15rem
padding: 1rem
width: 30rem
background: var(--search-bg)
+maxWidth768()
top: 0
left: 0
margin: 0
width: 100%
height: 100%
hr
margin: 1rem auto
span.search-close-button
position: absolute
top: .8rem
right: 1rem
color: $grey
font-size: 1.4em
line-height: 1
cursor: pointer
transition: color .2s ease-in-out
&:hover
color: $search-color
&__title
padding: 0 0 .7rem
color: $search-color
font-size: 1.4em
line-height: 1
#search-mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
display: none
background: rgba($dark-black, .6)
themes/butterfly/source/css/_search/local-search.styl
+69
View File
@@ -0,0 +1,69 @@
#local-search
.search-dialog
animation: titlescale .5s
.local-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: .25rem .7rem
width: 100%
outline: none
border: 2px solid $search-color
border-radius: 2rem
background: var(--search-bg)
color: var(--search-input-color)
-webkit-appearance: none
.local-search__hit-item
position: relative
padding-left: 1.2rem
line-height: 1.7
&:hover
&:before
border-color: $pseudo-hover
&:before
$w = .5em
position: absolute
top: .45em
left: 0
width: w = $w
height: h = w
border: .15rem solid $search-color
border-radius: w
background: transparent
content: ''
line-height: h
transition: all .2s ease-in-out
a
display: block
color: var(--search-result-title)
font-weight: 600
cursor: pointer
&:hover
color: $search-color
.search-result
margin: 0 0 .4rem
word-break: break-all
.search-keyword
color: $search-keyword-highlight
font-weight: bold
.local-search-stats__hr
display: none !important
.search-result-list
overflow-y: auto
max-height: 10.5rem
+maxWidth768()
padding-bottom: 2rem
max-height: 75vh !important
themes/butterfly/source/css/_tags/button.styl
+58
View File
@@ -0,0 +1,58 @@
#article-container
.btn-center
margin: 0 0 1rem
text-align: center
.btn-beautify
display: inline-block
margin: 0 .2rem .3rem
padding: 0 1rem
background-color: $btn-default-color
color: $btn-color
line-height: 2
&:not(.block) + .btn-beautify:not(.block)
margin: 0 .2rem 1rem
&.block
display: block
margin: 0 0 1rem
width: fit-content
width: -moz-fit-content
&.center
margin: 0 auto 1rem
&.right
margin: 0 0 1rem auto
&.larger
padding: .3rem 1.3rem
&:hover
text-decoration: none
for $type in $tagsP-types
&.{$type}
background-color: lookup('$tagsP-' + $type + '-color')
&.outline
border: 1px solid transparent
border-color: $btn-default-color
background-color: transparent
color: $btn-default-color
transition: all .3s
&.button--animated:before
background: $btn-default-color
&:hover
color: white !important
for $type in $tagsP-types
&.{$type}
border-color: lookup('$tagsP-' + $type + '-color')
color: lookup('$tagsP-' + $type + '-color')
&.button--animated:before
background: lookup('$tagsP-' + $type + '-color')
themes/butterfly/source/css/_tags/gallery.styl
+104
View File
@@ -0,0 +1,104 @@
figure.gallery-group
position: relative
float: left
overflow: hidden
margin: .3rem .2rem
width: calc(50% - .4rem)
height: 250px
border-radius: 8px
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
+maxWidth600()
width: calc(100% - .4rem)
&:hover
img
opacity: .4
transform: translate3d(0, 0, 0)
.gallery-group-name::after
transform: translate3d(0, 0, 0)
p
opacity: 1
transform: translate3d(0, 0, 0)
img
position: relative
margin: 0 !important
max-width: none
width: calc(100% + 20px)
height: 250px
backface-visibility: hidden
opacity: .8
transition: opacity .35s, transform .35s
transform: translate3d(-10px, 0, 0)
object-fit: cover
figcaption
position: absolute
top: 0
left: 0
padding: 1.5rem
width: 100%
height: 100%
color: $gallery-color
text-transform: uppercase
backface-visibility: hidden
& > a
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
opacity: 0
p
@extend .limit-more-line
margin: 0
padding: .4rem 0 0
letter-spacing: 1px
font-size: 1.1em
line-height: 1.5
opacity: 0
transition: opacity .35s, transform .35s
transform: translate3d(100%, 0, 0)
-webkit-line-clamp: 4
.gallery-group-name
@extend .limit-more-line
position: relative
margin: 0
padding: .4rem 0
font-weight: bold
font-size: 1.65em
line-height: 1.5
-webkit-line-clamp: 2
&:after
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: $gallery-color
content: ''
transition: transform .35s
transform: translate3d(-100%, 0, 0)
.gallery-group-main
overflow: auto
padding: 0 0 .8rem
.justified-gallery
margin: 0 0 .8rem
img
opacity: 0
.fancybox
width: auto
text-align: inherit
themes/butterfly/source/css/_tags/hexo.styl
+30
View File
@@ -0,0 +1,30 @@
// pullquote
blockquote
&.pullquote
position: relative
max-width: 45%
font-size: 110%
&.left
float: left
margin: 1em .5em 0 0
&.right
float: right
margin: 1em 0 0 .5rem
// hexo tag video
.video-container
position: relative
overflow: hidden
margin-bottom: .8rem
padding-top: 56.25%
height: 0
iframe
position: absolute
top: 0
left: 0
margin-top: 0
width: 100%
height: 100%
themes/butterfly/source/css/_tags/hide.styl
+46
View File
@@ -0,0 +1,46 @@
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
display: inline-block
padding: .3rem 1rem
background: $tag-hide-bg
color: var(--white)
&.open
display: none
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.hide-toggle
margin-bottom: 1rem
border: 1px solid $tag-hide-toggle-bg
& > .hide-button
padding: .3rem .5rem
background: $tag-hide-toggle-bg
color: #1F2D3D
cursor: pointer
& > i
font-size: 1.2em
transition: all .3s
&.open
i
transform: rotate(90deg)
& > .hide-content
display: none
margin: 1.5rem 1.2rem
themes/butterfly/source/css/_tags/note.styl
+121
View File
@@ -0,0 +1,121 @@
.note
$note-icons = hexo-config('note.icons')
position: relative
margin: 0 0 1rem
padding: 15px
if hexo-config('note.border_radius') is a 'unit'
border-radius: unit(hexo-config('note.border_radius'), px)
&.icon
padding-left: 2.25rem
& > .note-icon
position: absolute
top: calc(50% - .4rem)
left: .7rem
font-size: larger
for $type in $tagsP-types
&.{$type}
&:not(.disabled)
border-left-color: lookup('$tagsP-' + $type + '-color') !important
&.modern
border-left-color: transparent !important
color: lookup('$tagsP-' + $type + '-color')
&:not(.simple)
background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
& > .note-icon
color: lookup('$tagsP-' + $type + '-color')
&.simple
border: 1px solid #EEEEEE
border-left-width: 5px
&.modern
border: 1px solid transparent !important
background-color: #f5f5f5
color: $font-black
&.flat
border: initial
border-left: 5px solid #EEEEEE
background-color: lighten(#EEEEEE, 65%)
color: $font-black
h2,
h3,
h4,
h5,
h6
if $note-icons
margin-top: 3px
else
margin-top: 0
margin-bottom: 0
padding-top: 0 !important
border-bottom: initial
p,
ul,
ol,
table,
pre,
blockquote,
img
&:first-child
margin-top: 0 !important
&:last-child
margin-bottom: 0 !important
if $note-icons
&:not(.no-icon)
padding-left: 2.25rem
&::before
position: absolute
top: calc(50% - .8rem)
left: .7rem
font-size: larger
@extend .fontawesomeIcon
for $type in $note-types
&.{$type}
&.flat
background: lookup('$note-' + $type + '-bg')
&.modern
border-color: lookup('$note-modern-' + $type + '-border')
background: lookup('$note-modern-' + $type + '-bg')
color: lookup('$note-modern-' + $type + '-text')
a
&:not(.btn)
color: lookup('$note-modern-' + $type + '-text')
&:hover
color: lookup('$note-modern-' + $type + '-hover')
&:not(.modern)
border-left-color: lookup('$note-' + $type + '-border')
h2,
h3,
h4,
h5,
h6
color: lookup('$note-' + $type + '-text')
if $note-icons
&:not(.no-icon)
&::before
content: lookup('$note-' + $type + '-icon')
&:not(.modern)
&::before
color: lookup('$note-' + $type + '-text')
themes/butterfly/source/css/_tags/tabs.styl
+74
View File
@@ -0,0 +1,74 @@
#article-container
.tabs
position: relative
margin: 0 0 1rem
border-right: 1px solid var(--tab-border-color)
border-bottom: 1px solid var(--tab-border-color)
border-left: 1px solid var(--tab-border-color)
> .nav-tabs
display: flex
flex-wrap: wrap
margin: 0
padding: 0
background: var(--tab-botton-bg)
> .tab
margin: 0
padding: 0
list-style: none
+maxWidth768()
flex-grow: 1
button
display: block
padding: .5rem 1rem
width: 100%
border-top: 2px solid var(--tab-border-color)
background: var(--tab-botton-bg)
color: var(--tab-botton-color)
line-height: 2
transition: all .4s
i
width: 1.5em
&.active
button
border-top: 2px solid $tab-active-border-color
background: var(--tab-button-active-bg)
cursor: default
&:not(.active)
button
&:hover
border-top: 2px solid var(--tab-button-hover-bg)
background: var(--tab-button-hover-bg)
> .tab-contents
.tab-item-content
position: relative
display: none
padding: 1.8rem 1.2rem
+maxWidth768()
padding: 1.2rem .7rem
&.active
display: block
animation: tabshow .5s
.tab-to-top
position: relative
display: block
margin: 0 0 0 auto
color: $tab-to-top-color
@keyframes tabshow
0%
transform: translateY(15px)
100%
transform: translateY(0)
themes/butterfly/source/css/_third-party/normalize.min.css
Vendored
+180
View File
@@ -0,0 +1,180 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
themes/butterfly/source/css/index.styl
+19
View File
@@ -0,0 +1,19 @@
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search
if hexo-config('algolia_search.enable')
@import '_search/index'
@import '_search/algolia'
if hexo-config('local_search') && hexo-config('local_search.enable')
@import '_search/index'
@import '_search/local-search'
themes/butterfly/source/css/var.styl
+178
View File
@@ -0,0 +1,178 @@
// color
$bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #F47466
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
// font
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
// hr
$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
// page beatutify
$beautifyEnable = hexo-config('beautify.enable')
$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$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
$font-color = #1F2D3D
$rem = 20px
$text-line-height = 2
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
// Global color & SVG
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
$text-highlight-color = $font-color
$text-hover = $theme-color
$text-bg-hover = $theme-color
// code
$line-height-code-block = 1.6
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-background = #f6f8fa
$sidebar-width = 300px
// aside
$toc-link-color = #666261
$toc-mobile-width = 300px
$toc-active-color = #fff
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$button-bg = $theme-color
$pseudo-hover = $button-hover-color
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-input-color = $font-black
$search-color = $theme-color
$search-keyword-highlight = #F47466
$search-result-title = $font-black
// comments
$comments-switch-first-text = $bright-blue
$comments-switch-second-text = $light-orange
$comments-switch-round = #fff
$comments-switch-bg = #f6f8fa
// noticeOutdate
$noticeOutdate-bg = #ffe6e6
$noticeOutdate-color = #ff6666
$noticeOutdate-border = #ff8080
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
// preloader
$preloader-bg = #37474f
$preloader-word-color = #fff
// rightside
$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
// fireworks
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
// Tag Plugins - Note
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
// Default
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
// Tag Plugins - Button/note
$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$tagsP-blue-color = #428bca
$tagsP-pink-color = #FF69B4
$tagsP-red-color = #FF0000
$tagsP-orange-color = #FF8C00
$tagsP-purple-color = #6f42c1
$tagsP-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-botton-color = $font-color
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
themes/butterfly/source/img/404.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

themes/butterfly/source/img/algolia.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362">
<linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)">
<stop offset="0" stop-color="#00aeff"/>
<stop offset="1" stop-color="#3369e7"/>
</linearGradient>
<path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/>
<path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/>
<path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

themes/butterfly/source/img/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 B

themes/butterfly/source/img/friend_404.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

themes/butterfly/source/img/icp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

themes/butterfly/source/img/loading.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

themes/butterfly/source/js/main.js
+723
View File
@@ -0,0 +1,723 @@
$(function () {
const blogNameWidth = $('#site-name').width()
const menusWidth = $('#menus').width()
const adjustMenu = () => {
const $nav = $('#nav')
let t
if (window.innerWidth < 768) t = true
else t = blogNameWidth + menusWidth > $nav.width() - 30
if (t) {
$nav.addClass('hide-menu')
} else {
$nav.removeClass('hide-menu')
}
}
// 初始化header
const initAdjust = () => {
adjustMenu()
$('#nav').addClass('show')
}
// sidebar menus
const sidebarFn = () => {
const $toggleMenu = $('#toggle-menu')
const $mobileSidebarMenus = $('#sidebar-menus')
const $menuMask = $('#menu-mask')
const $body = $('body')
function openMobileSidebar () {
btf.sidebarPaddingR()
$body.css('overflow', 'hidden')
$menuMask.fadeIn()
$toggleMenu.removeClass('close').addClass('open')
$mobileSidebarMenus.addClass('open')
}
function closeMobileSidebar () {
$body.css({ overflow: '', 'padding-right': '' })
$menuMask.fadeOut()
$toggleMenu.removeClass('open').addClass('close')
$mobileSidebarMenus.removeClass('open')
}
$toggleMenu.on('click', function () {
openMobileSidebar()
})
$menuMask.on('click touchstart', function (e) {
if ($toggleMenu.hasClass('open')) {
closeMobileSidebar()
}
})
$(window).on('resize', function (e) {
if (!$toggleMenu.is(':visible')) {
if ($toggleMenu.hasClass('open')) closeMobileSidebar()
}
})
}
/**
* 首頁top_img底下的箭頭
*/
const scrollDownInIndex = () => {
$('#scroll-down').on('click', function () {
btf.scrollToDest('#content-inner')
})
}
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
const addHighlightTool = function () {
const isHighlightCopy = GLOBAL_CONFIG.highlight.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"]')
if (isShowTool && $figureHighlight.length) {
const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
let highlightShrinkEle = ''
let highlightCopyEle = ''
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
if (isHighlightShrink !== undefined) {
highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
}
if (isHighlightCopy) {
highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
}
if (isHighlightLang) {
if (isPrismjs) {
$figureHighlight.each(function () {
const $this = $(this)
const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.wrap('<figure class="highlight"></figure>').before(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
})
} else {
$figureHighlight.each(function (i, o) {
const $this = $(this)
let langName = $this.attr('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
})
}
} else {
const ele = `<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`
if (isPrismjs) $figureHighlight.wrap('<figure class="highlight"></figure>').before(ele)
else $figureHighlight.prepend(ele)
}
/**
* 代碼收縮
*/
if (isHighlightShrink !== undefined) {
$('.highlight-tools >.expand').on('click', function () {
const $this = $(this)
const $table = $this.parent().nextAll()
$this.toggleClass('closed')
$table.is(':visible') ? $table.css('display', 'none') : $table.css('display', 'block')
})
}
/**
* 代碼copy
*/
if (isHighlightCopy) {
const copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
document.execCommand('copy')
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0
}, 650)
}, 400)
})
}
} else {
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
}
}
}
// click events
$('.highlight-tools >.copy-button').on('click', function () {
const $buttonParent = $(this).parents('figure.highlight')
$buttonParent.addClass('copy-true')
const selection = window.getSelection()
const range = document.createRange()
if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0])
else range.selectNodeContents($buttonParent.find('table .code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
const text = selection.toString()
copy(text, this)
selection.removeAllRanges()
$buttonParent.removeClass('copy-true')
})
}
}
}
/**
* PhotoFigcaption
*/
function addPhotoFigcaption () {
const images = $('#article-container img').not('.justified-gallery img')
images.each(function (i, o) {
const $this = $(o)
if ($this.attr('alt')) {
const t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
$this.after(t)
}
})
}
/**
* justified-gallery 圖庫排版
*/
let detectJgJsLoad = false
const runJustifiedGallery = function () {
const $justifiedGallery = $('.justified-gallery')
if ($justifiedGallery.length) {
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
})
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
}
}
/**
* fancybox和 mediumZoom
*/
const addLightBox = function () {
if (GLOBAL_CONFIG.lightbox === 'fancybox') {
const images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
images.each(function (i, o) {
const lazyloadSrc = $(o).attr('data-lazy-src') ? $(o).attr('data-lazy-src') : $(o).attr('src')
const dataCaption = $(o).attr('alt') ? $(o).attr('alt') : ''
$(o).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
})
} else {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
zoom.on('open', function (event) {
const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
})
}
}
/**
* 滾動處理
*/
const scrollFn = function () {
let initTop = 0
let isChatShow = true
const $rightside = $('#rightside')
const $nav = $('#nav')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
$(window).scroll(btf.throttle(function (event) {
const currentTop = $(this).scrollTop()
const isDown = scrollDirection(currentTop)
if (currentTop > 56) {
if (isDown) {
if ($nav.hasClass('visible')) $nav.removeClass('visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
} else {
if (!$nav.hasClass('visible')) $nav.addClass('visible')
if (isChatBtnHide && isChatShow === false) {
window.chatBtnShow()
isChatShow = true
}
}
$nav.addClass('fixed')
if ($rightside.css('opacity') === '0') {
$rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
}
} else {
if (currentTop === 0) {
$nav.removeClass('fixed').removeClass('visible')
}
$rightside.css({ opacity: '', transform: '' })
}
}, 200))
// find the scroll direction
function scrollDirection (currentTop) {
const result = currentTop > initTop // true is down & false is up
initTop = currentTop
return result
}
}
/**
* toc
*/
const tocFn = function () {
const $cardTocLayout = $('#card-toc')
const $cardToc = $cardTocLayout.find('.toc-content')
const $tocChild = $cardToc.find('.toc-child')
const $tocLink = $cardToc.find('.toc-link')
const $article = $('#article-container')
$tocChild.hide()
// main of scroll
$(window).scroll(btf.throttle(function (event) {
const currentTop = $(this).scrollTop()
scrollPercent(currentTop)
findHeadPosition(currentTop)
}, 100))
// expand toc-item
const expandToc = function ($item) {
if ($item.is(':visible')) {
return
}
$item.fadeIn(400)
}
const scrollPercent = function (currentTop) {
const docHeight = $article.height()
const winHeight = $(window).height()
const headerHeight = $article.offset().top
const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
const scrollPercent = (currentTop - headerHeight) / (contentMath)
const scrollPercentRounded = Math.round(scrollPercent * 100)
const percentage = (scrollPercentRounded > 100) ? 100
: (scrollPercentRounded <= 0) ? 0
: scrollPercentRounded
$cardToc.attr('progress-percentage', percentage)
}
// anchor
const isAnchor = GLOBAL_CONFIG.isanchor
const updateAnchor = function (anchor) {
if (window.history.replaceState && anchor !== window.location.hash) {
window.history.replaceState(undefined, undefined, anchor)
}
}
const mobileToc = {
open: () => {
$cardTocLayout.css('display', 'block')
},
close: () => {
$cardTocLayout.css('animation', 'toc-close .2s')
setTimeout(() => {
$cardTocLayout.css({ display: '', animation: '' })
}, 100)
}
}
$('#mobile-toc-button').on('click', () => {
if ($cardTocLayout.is(':visible')) {
mobileToc.close()
} else {
mobileToc.open()
}
})
// toc元素點擊
$tocLink.on('click', function (e) {
e.preventDefault()
btf.scrollToDest(decodeURI($(this).attr('href')))
if (window.innerWidth < 900) {
mobileToc.close()
}
})
const autoScrollToc = function (currentTop, item) {
const activePosition = item.offset().top
const $tocContent = $cardToc
const sidebarScrollTop = $tocContent.scrollTop()
if (activePosition > (currentTop + $(window).height() - 100)) {
$tocContent.scrollTop(sidebarScrollTop + 100)
}
if (activePosition < currentTop + 100) {
$tocContent.scrollTop(sidebarScrollTop - 100)
}
}
// find head position & add active class
// DOM Hierarchy:
// ol.toc > (li.toc-item, ...)
// li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
const list = $article.find('h1,h2,h3,h4,h5,h6')
const findHeadPosition = function (top) {
// assume that we are not in the post page if no TOC link be found,
// thus no need to update the status
if ($tocLink.length === 0) {
return false
}
let currentId = ''
list.each(function () {
const head = $(this)
if (top > head.offset().top - 70) {
currentId = '#' + encodeURI($(this).attr('id'))
}
})
if (currentId === '') {
$tocLink.removeClass('active')
$tocChild.hide()
}
const currentActive = $tocLink.filter('.active')
if (currentId && currentActive.attr('href') !== currentId) {
if (isAnchor) updateAnchor(currentId)
$tocLink.removeClass('active')
const _this = $tocLink.filter('[href="' + currentId + '"]')
_this.addClass('active')
autoScrollToc(top, _this)
const parents = _this.parents('.toc-child')
// Returned list is in reverse order of the DOM elements
// Thus `parents.last()` is the outermost .toc-child container
// i.e. list of subsections
const topLink = (parents.length > 0) ? parents.last() : _this
expandToc(topLink.closest('.toc-item').find('.toc-child'))
topLink
// Find all top-level .toc-item containers, i.e. sections
// excluding the currently active one
.closest('.toc-item').siblings('.toc-item')
// Hide their respective list of subsections
.find('.toc-child').hide()
}
}
}
/**
* Rightside
*/
const $rightsideEle = $('#rightside')
// read-mode
$rightsideEle.on('click', '#readmode', function () {
$('body').toggleClass('read-mode')
})
// Switch Between Light And Dark Mode
if ($('#darkmode').length) {
const switchReadMode = function () {
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') {
activateDarkMode()
saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
activateLightMode()
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
}
$rightsideEle.on('click', '#darkmode', () => {
switchReadMode()
typeof utterancesTheme === 'function' && utterancesTheme()
typeof FB === 'object' && window.loadFBComment()
window.DISQUS && $('#disqus_thread').children().length && setTimeout(() => window.disqusReset(), 200)
})
}
// rightside 點擊設置 按鈕 展開
$rightsideEle.on('click', '#rightside_config', () => $('#rightside-config-hide').toggleClass('show'))
// Back to top
$rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))
$rightsideEle.on('click', '#hide-aside-btn', () => {
const $htmlDom = $(document.documentElement)
if ($htmlDom.hasClass('hide-aside')) {
$htmlDom.removeClass('hide-aside')
saveToLocal.set('aside-status', 'show', 2)
} else {
$htmlDom.addClass('hide-aside')
saveToLocal.set('aside-status', 'hide', 2)
}
})
/**
* menu
* 側邊欄sub-menu 展開/收縮
* 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
*/
const clickFnOfSubMenu = function () {
$('#sidebar-menus .expand').on('click', function () {
$(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
$(this).toggleClass('hide')
})
$(window).on('touchmove', function (e) {
const $menusChild = $('#nav .menus_item_child')
if ($menusChild.is(':visible')) {
$menusChild.css('display', 'none')
}
})
}
/**
* 複製時加上版權信息
*/
const addCopyright = () => {
const copyright = GLOBAL_CONFIG.copyright
document.body.oncopy = (e) => {
e.preventDefault()
let textFont; const copyFont = window.getSelection(0).toString()
if (copyFont.length > copyright.limitCount) {
textFont = copyFont + '\n' + '\n' + '\n' +
copyright.languages.author + '\n' +
copyright.languages.link + window.location.href + '\n' +
copyright.languages.source + '\n' +
copyright.languages.info
} else {
textFont = copyFont
}
if (e.clipboardData) {
return e.clipboardData.setData('text', textFont)
} else {
return window.clipboardData.setData('text', textFont)
}
}
}
/**
* 網頁運行時間
*/
const addRuntime = () => {
const $runtimeCount = $('#runtimeshow')
if ($runtimeCount.length) {
const publishDate = $runtimeCount.attr('data-publishDate')
$runtimeCount.text(btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
}
}
/**
* 最後一次更新時間
*/
const addLastPushDate = () => {
const $lastPushDateItem = $('#last-push-date')
if ($lastPushDateItem.length) {
const lastPushDate = $lastPushDateItem.attr('data-lastPushDate')
const diffDay = btf.diffDate(lastPushDate, true)
$lastPushDateItem.text(diffDay)
}
}
/**
* table overflow
*/
const addTableWrap = function () {
const $table = $('#article-container table').not($('figure.highlight > table'))
$table.each(function () {
$(this).wrap('<div class="table-wrap"></div>')
})
}
/**
* tag-hide
*/
const clickFnOfTagHide = function () {
const $hideInline = $('.hide-button')
if ($hideInline.length) {
$hideInline.on('click', function (e) {
const $this = $(this)
const $hideContent = $(this).next('.hide-content')
$this.toggleClass('open')
$hideContent.toggle()
if ($this.hasClass('open')) {
if ($hideContent.find('.justified-gallery').length > 0) {
btf.initJustifiedGallery($hideContent.find('.justified-gallery'))
}
}
})
}
}
const tabsFn = {
clickFnOfTabs: function () {
const $tab = $('#article-container .tabs')
$tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) {
const $this = $(this)
const $tabItem = $this.parent()
if (!$tabItem.hasClass('active')) {
const $tabContent = $this.parents('.nav-tabs').next()
$tabItem.siblings('.active').removeClass('active')
$tabItem.addClass('active')
const tabId = $this.attr('data-href')
$tabContent.find('> .tab-item-content').removeClass('active')
$tabContent.find(`> ${tabId}`).addClass('active')
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
if ($isTabJustifiedGallery.length > 0) {
btf.initJustifiedGallery($isTabJustifiedGallery)
}
}
})
},
backToTop: () => {
const backToTopBtn = $('#article-container .tabs .tab-to-top')
backToTopBtn.on('click', function () {
btf.scrollToDest($(this).parents('.tabs'))
})
}
}
const toggleCardCategory = function () {
const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
$cardCategory.on('click', function (e) {
e.preventDefault()
$(this).toggleClass('expand').parents('.parent').next().slideToggle(300)
})
}
const switchComments = function () {
let switchDone = false
$('#comment-switch > .switch-btn').on('click', function () {
const $btn = $(this)
$btn.hasClass('move') ? $btn.removeClass('move') : $btn.addClass('move')
$('#post-comment > .comment-wrap > div').each(function (i, o) {
const $this = $(o)
if ($this.is(':visible')) {
$this.hide()
} else {
$this.css({
display: 'block',
animation: 'tabshow .5s'
})
}
})
if (!switchDone && typeof loadOtherComment === 'function') {
switchDone = true
loadOtherComment()
}
})
}
const addPostOutdateNotice = function () {
const data = GLOBAL_CONFIG.noticeOutdate
var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
if (diffDay >= data.limitDay) {
const code = `<div class="post-outdate-notice">${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}</div>`
if (data.position === 'top') {
$('#article-container').prepend(code)
} else {
$('#article-container').append(code)
}
}
}
const lazyloadImg = () => {
window.lazyLoadInstance = new LazyLoad({
elements_selector: 'img',
threshold: 0,
data_src: 'lazy-src'
})
}
const relativeDate = function (selector) {
selector.each((i, o) => {
const $this = $(o)
const timeVal = $this.attr('datetime')
$this.text(btf.diffDate(timeVal, true)).css('display', 'inline')
})
}
const unRefreshFn = function () {
$(window).on('resize', function () {
adjustMenu()
})
clickFnOfSubMenu()
GLOBAL_CONFIG.islazyload && lazyloadImg()
GLOBAL_CONFIG.copyright !== undefined && addCopyright()
}
window.refreshFn = function () {
initAdjust()
if (GLOBAL_CONFIG_SITE.isPost) {
GLOBAL_CONFIG_SITE.isToc && tocFn()
GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
} else {
GLOBAL_CONFIG.relativeDate.homepage && relativeDate($('#recent-posts time'))
GLOBAL_CONFIG.runtime && addRuntime()
addLastPushDate()
toggleCardCategory()
}
sidebarFn()
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
GLOBAL_CONFIG.highlight && addHighlightTool()
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
runJustifiedGallery()
GLOBAL_CONFIG.lightbox !== 'null' && addLightBox()
scrollFn()
addTableWrap()
clickFnOfTagHide()
tabsFn.clickFnOfTabs()
tabsFn.backToTop()
switchComments()
}
refreshFn()
unRefreshFn()
})
themes/butterfly/source/js/search/algolia.js
+145
View File
@@ -0,0 +1,145 @@
$(function () {
const openSearch = () => {
$('body').css({ width: '100%', overflow: 'hidden' })
$('#algolia-search .search-dialog').css('display', 'block')
$('.ais-search-box--input').focus()
$('#search-mask').fadeIn()
// shortcut: ESC
document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', f)
}
})
}
const closeSearch = () => {
$('body').css({ width: '', overflow: '' })
$('#algolia-search .search-dialog').css({
animation: 'search_close .5s'
})
setTimeout(function () {
$('#algolia-search .search-dialog').css({
animation: '',
display: 'none'
})
}, 500)
$('#search-mask').fadeOut()
}
const searchClickFn = () => {
$('a.social-icon.search').on('click', openSearch)
$('#search-mask, .search-close-button').on('click touchstart', closeSearch)
}
searchClickFn()
window.addEventListener('pjax:complete', function () {
closeSearch()
searchClickFn()
})
const algolia = GLOBAL_CONFIG.algolia
const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
if (!isAlgoliaValid) {
return console.error('Algolia setting is invalid!')
}
const search = instantsearch({
appId: algolia.appId,
apiKey: algolia.apiKey,
indexName: algolia.indexName,
searchParameters: {
hitsPerPage: algolia.hits.per_page || 10
},
searchFunction: function (helper) {
const searchInput = $('#algolia-search-input').find('input')
if (searchInput.val()) {
helper.search()
}
}
})
search.addWidget(
instantsearch.widgets.searchBox({
container: '#algolia-search-input',
reset: false,
magnifier: false,
placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
})
)
search.addWidget(
instantsearch.widgets.hits({
container: '#algolia-hits',
templates: {
item: function (data) {
const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
return (
'<a href="' + link + '" class="algolia-hit-item-link">' +
data._highlightResult.title.value +
'</a>'
)
},
empty: function (data) {
return (
'<div id="algolia-hits-empty">' +
GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
'</div>'
)
}
},
cssClasses: {
item: 'algolia-hit-item'
}
})
)
search.addWidget(
instantsearch.widgets.stats({
container: '#algolia-stats',
templates: {
body: function (data) {
const stats = GLOBAL_CONFIG.algolia.languages.hits_stats
.replace(/\$\{hits}/, data.nbHits)
.replace(/\$\{time}/, data.processingTimeMS)
return (
'<hr>' +
stats +
'<span class="algolia-logo pull-right">' +
' <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
'</span>'
)
}
}
})
)
search.addWidget(
instantsearch.widgets.pagination({
container: '#algolia-pagination',
scrollTo: false,
showFirstLast: false,
labels: {
first: '<i class="fas fa-angle-double-left"></i>',
last: '<i class="fas fa-angle-double-right"></i>',
previous: '<i class="fas fa-angle-left"></i>',
next: '<i class="fas fa-angle-right"></i>'
},
cssClasses: {
root: 'pagination',
item: 'pagination-item',
link: 'page-number',
active: 'current',
disabled: 'disabled-item'
}
})
)
search.start()
window.pjax && search.on('render', () => {
window.pjax.refresh(document.getElementById('algolia-hits'))
})
})
themes/butterfly/source/js/search/local-search.js
+164
View File
@@ -0,0 +1,164 @@
$(function () {
let loadFlag = false
const openSearch = function () {
$('body').css({
width: '100%',
overflow: 'hidden'
})
$('#local-search .search-dialog').css('display', 'block')
$('#local-search-input input').focus()
$('#search-mask').fadeIn()
if (!loadFlag) {
search(GLOBAL_CONFIG.localSearch.path)
loadFlag = true
}
// shortcut: ESC
document.addEventListener('keydown', function f (event) {
if (event.code === 'Escape') {
closeSearch()
document.removeEventListener('keydown', f)
}
})
}
const closeSearch = function () {
$('body').css({
width: '',
overflow: ''
})
$('#local-search .search-dialog').css({
animation: 'search_close .5s'
})
setTimeout(function () {
$('#local-search .search-dialog').css({
animation: '',
display: 'none'
})
}, 500)
$('#search-mask').fadeOut()
}
const searchClickFn = () => {
$('a.social-icon.search').on('click', openSearch)
$('#search-mask, .search-close-button').on('click', closeSearch)
}
searchClickFn()
window.addEventListener('pjax:complete', function () {
$('#local-search .search-dialog').is(':visible') && closeSearch()
searchClickFn()
})
function search (path) {
$.ajax({
url: GLOBAL_CONFIG.root + path,
dataType: 'xml',
success: function (xmlResponse) {
// get the contents from search data
const datas = $('entry', xmlResponse).map(function () {
return {
title: $('title', this).text(),
content: $('content', this).text(),
url: $('url', this).text()
}
}).get()
const $input = $('#local-search-input input')[0]
const $resultContent = $('#local-hits')[0]
$input.addEventListener('input', function () {
let str = '<div class="search-result-list">'
const keywords = this.value.trim().toLowerCase().split(/[\s]+/)
$resultContent.innerHTML = ''
if (this.value.trim().length <= 0) {
$('.local-search-stats__hr').hide()
return
}
let count = 0
// perform local searching
datas.forEach(function (data) {
let isMatch = true
if (!data.title || data.title.trim() === '') {
data.title = 'Untitled'
}
let dataTitle = data.title.trim().toLowerCase()
const dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
const dataUrl = data.url.startsWith('/') ? data.url : GLOBAL_CONFIG.root + data.url
let indexTitle = -1
let indexContent = -1
let firstOccur = -1
// only match artiles with not empty titles and contents
if (dataTitle !== '' || dataContent !== '') {
keywords.forEach(function (keyword, i) {
indexTitle = dataTitle.indexOf(keyword)
indexContent = dataContent.indexOf(keyword)
if (indexTitle < 0 && indexContent < 0) {
isMatch = false
} else {
if (indexContent < 0) {
indexContent = 0
}
if (i === 0) {
firstOccur = indexContent
}
}
})
} else {
isMatch = false
}
// show search results
if (isMatch) {
const content = data.content.trim().replace(/<[^>]+>/g, '')
if (firstOccur >= 0) {
// cut out 130 characters
let start = firstOccur - 30
let end = firstOccur + 100
if (start < 0) {
start = 0
}
if (start === 0) {
end = 100
}
if (end > content.length) {
end = content.length
}
let matchContent = content.substring(start, end)
// highlight all keywords
keywords.forEach(function (keyword) {
const regS = new RegExp(keyword, 'gi')
matchContent = matchContent.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
dataTitle = dataTitle.replace(regS, '<span class="search-keyword">' + keyword + '</span>')
})
str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>'
count += 1
$('.local-search-stats__hr').show()
if (dataContent !== '') {
str += '<p class="search-result">' + matchContent + '...</p>'
}
}
str += '</div>'
}
})
if (count === 0) {
str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
'</div>'
}
str += '</div>'
$resultContent.innerHTML = str
window.pjax && window.pjax.refresh($resultContent)
})
}
})
}
})
themes/butterfly/source/js/tw_cn.js
+99
View File
@@ -0,0 +1,99 @@
/* eslint-disable no-undef */
(function () {
const translate = GLOBAL_CONFIG.translate
const snackbarData = GLOBAL_CONFIG.Snackbar
const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
let currentEncoding = defaultEncoding
const targetEncodingCookie = 'translate-chn-cht'
let targetEncoding =
saveToLocal.get(targetEncodingCookie) === undefined
? defaultEncoding
: Number(saveToLocal.get('translate-chn-cht'))
let translateButtonObject
const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
function translateText (txt) {
if (txt === '' || txt == null) return ''
if (currentEncoding === 1 && targetEncoding === 2) return Simplized(txt)
else if (currentEncoding === 2 && targetEncoding === 1) { return Traditionalized(txt) } else return txt
}
function translateBody (fobj) {
let objs
if (typeof fobj === 'object') objs = fobj.childNodes
else objs = document.body.childNodes
for (let i = 0; i < objs.length; i++) {
const obj = objs.item(i)
if (
'||BR|HR|'.indexOf('|' + obj.tagName + '|') > 0 ||
obj === translateButtonObject
) { continue }
if (obj.title !== '' && obj.title != null) { obj.title = translateText(obj.title) }
if (obj.alt !== '' && obj.alt != null) obj.alt = translateText(obj.alt)
if (obj.placeholder !== '' && obj.placeholder != null) obj.placeholder = translateText(obj.placeholder)
if (
obj.tagName === 'INPUT' &&
obj.value !== '' &&
obj.type !== 'text' &&
obj.type !== 'hidden'
) { obj.value = translateText(obj.value) }
if (obj.nodeType === 3) obj.data = translateText(obj.data)
else translateBody(obj)
}
}
function translatePage () {
if (targetEncoding === 1) {
currentEncoding = 1
targetEncoding = 2
translateButtonObject.innerHTML = msgToTraditionalChinese
saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
translateBody()
if (isSnackbar) btf.snackbarShow(snackbarData.cht_to_chs)
} else if (targetEncoding === 2) {
currentEncoding = 2
targetEncoding = 1
translateButtonObject.innerHTML = msgToSimplifiedChinese
saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
translateBody()
if (isSnackbar) btf.snackbarShow(snackbarData.chs_to_cht)
}
}
function JTPYStr () {
return '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖Line truncated
}
function FTPYStr () {
return '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴Line truncated
}
function Traditionalized (cc) {
let str = ''
const ss = JTPYStr()
const tt = FTPYStr()
for (let i = 0; i < cc.length; i++) {
if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) !== -1) { str += tt.charAt(ss.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
}
return str
}
function Simplized (cc) {
let str = ''
const ss = JTPYStr()
const tt = FTPYStr()
for (let i = 0; i < cc.length; i++) {
if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) !== -1) { str += ss.charAt(tt.indexOf(cc.charAt(i))) } else str += cc.charAt(i)
}
return str
}
function translateInitialization () {
translateButtonObject = document.getElementById('translateLink')
if (translateButtonObject) {
if (currentEncoding !== targetEncoding) {
setTimeout(function () { translateBody() }, translateDelay)
if (targetEncoding === 1) { translateButtonObject.innerHTML = msgToSimplifiedChinese } else translateButtonObject.innerHTML = msgToTraditionalChinese
}
translateButtonObject.addEventListener('click', translatePage, false)
}
}
translateInitialization()
document.addEventListener('pjax:complete', translateInitialization)
})()
themes/butterfly/source/js/utils.js
+149
View File
@@ -0,0 +1,149 @@
/* eslint-disable no-unused-vars */
var btf = {
debounce: function (func, wait, immediate) {
let timeout
return function () {
const context = this
const args = arguments
const later = function () {
timeout = null
if (!immediate) func.apply(context, args)
}
const callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
},
throttle: function (func, wait, options) {
let timeout, context, args
let previous = 0
if (!options) options = {}
const later = function () {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
const throttled = function () {
const now = new Date().getTime()
if (!previous && options.leading === false) previous = now
const remaining = wait - (now - previous)
context = this
args = arguments
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled
},
sidebarPaddingR: () => {
const innerWidth = window.innerWidth
const clientWidth = document.body.clientWidth
const paddingRight = innerWidth - clientWidth
if (innerWidth !== clientWidth) {
$('body').css('padding-right', paddingRight)
}
},
scrollToDest: name => {
const scrollOffset = $(name).offset().top
let offset
if ($(window).scrollTop() > scrollOffset) {
offset = 65
} else {
offset = 0
}
$('body,html').animate({
scrollTop: scrollOffset - offset
})
},
snackbarShow: (text, showAction, duration) => {
const sa = (typeof showAction !== 'undefined') ? showAction : false
const dur = (typeof duration !== 'undefined') ? duration : 2000
const position = GLOBAL_CONFIG.Snackbar.position
const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
Snackbar.show({
text: text,
backgroundColor: bg,
showAction: sa,
duration: dur,
pos: position
})
},
initJustifiedGallery: function (selector) {
selector.each(function (i, o) {
if ($(this).is(':visible')) {
$(this).justifiedGallery({
rowHeight: 220,
margins: 4
})
}
})
},
diffDate: (d, more = false) => {
const dateNow = new Date()
const datePost = new Date(d)
const dateDiff = dateNow.getTime() - datePost.getTime()
const minute = 1000 * 60
const hour = minute * 60
const day = hour * 24
const month = day * 30
let result
if (more) {
const monthCount = dateDiff / month
const dayCount = dateDiff / day
const hourCount = dateDiff / hour
const minuteCount = dateDiff / minute
if (monthCount > 12) {
result = datePost.toLocaleDateString().replace(/\//g, '-')
} else if (monthCount >= 1) {
result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
} else if (dayCount >= 1) {
result = parseInt(dayCount) + ' ' + GLOBAL_CONFIG.date_suffix.day
} else if (hourCount >= 1) {
result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour
} else if (minuteCount >= 1) {
result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min
} else {
result = GLOBAL_CONFIG.date_suffix.just
}
} else {
result = parseInt(dateDiff / day)
}
return result
},
loadComment: (dom, callback) => {
if ('IntersectionObserver' in window) {
const observerItem = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
callback()
observerItem.disconnect()
}
}, { threshold: [0] })
observerItem.observe(dom)
} else {
callback()
}
}
}