Skip to content

Commit

Permalink
update: waline 2.X;add: folding tags;change: volantis plugin style
Browse files Browse the repository at this point in the history
  • Loading branch information
YiHui-Liu committed Oct 7, 2022
1 parent 34a40cb commit 2d39b6d
Show file tree
Hide file tree
Showing 9 changed files with 244 additions and 62 deletions.
2 changes: 2 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,8 @@ waline:
emoji:
- https://cdn.jsdelivr.net/gh/walinejs/[email protected]/bilibili
- https://cdn.jsdelivr.net/gh/walinejs/[email protected]/qq
# reaction
reaction: false

# Valine
# See: https://valine.js.org/quickstart.html
Expand Down
3 changes: 2 additions & 1 deletion layout/_third-party/comments/waline.pug
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ script&attributes(dataPjax).
locale: {
admin: '!{theme.waline.locale.admin}',
placeholder: '!{theme.waline.locale.placeholder}'
}
},
reaction: !{theme.waline.reaction}
});
}

Expand Down
38 changes: 38 additions & 0 deletions scripts/tags/folding.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* folding.js | https://volantis.js.org
*/

'use strict';

function postFolding(args, content) {
if(/::/g.test(args)){
args = args.join(' ').split('::');
}
else{
args = args.join(' ').split(',');
}
let style = '';
let title = '';
if (args.length > 1) {
style = args[0].trim();
title = args[1].trim();
} else if (args.length > 0) {
title = args[0].trim();
}
if (style != undefined) {
return `<details ${style}><summary> ${title} </summary>
<div class='content'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>
</details>`;
}
return `<details><summary> ${title} </summary>
<div class='content'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>
</details>`;


}

hexo.extend.tag.register('folding', postFolding, {ends: true});
102 changes: 102 additions & 0 deletions source/css/_common/components/plugins/folding.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
details
display: block
padding: $gap
margin: $gap-p 0
border-radius: $border-codeblock
background: $color-card
font-size: $fontsize-list
trans()
summary
cursor: pointer
padding: $gap
margin: 0 - $gap
border-radius: $border-codeblock
color: alpha($color-p, .7)
font-size: $fontsize-meta
font-weight: bold
position: relative
line-height: normal
>
p,h1,h2,h3,h4,h5,h6
display: inline
border-bottom: none !important
&:hover
color: $color-p
&:after
position: absolute
content: '+'
text-align: center
top: 50%
transform: translateY(-50%)
right: $gap

border: 1px solid $color-block
>summary
background: $color-block
&::marker
content: ' '
&[blue]
border-color: bgcolor($color-md-blue)
>summary
background: bgcolor($color-md-blue)
&[cyan]
border-color: bgcolor($color-mac-cyan)
>summary
background: bgcolor($color-mac-cyan)
&[green]
border-color: bgcolor($color-mac-green)
>summary
background: bgcolor($color-mac-green)
&[yellow]
border-color: bgcolor($color-mac-yellow)
>summary
background: bgcolor($color-mac-yellow)
&[red]
border-color: bgcolor($color-mac-red)
>summary
background: bgcolor($color-mac-red)

details[open]
border-color: alpha($color-p, .2)
>summary
border-bottom: 1px solid alpha($color-p, .2)
border-bottom-left-radius: 0
border-bottom-right-radius: 0
&[blue]
border-color: alpha($color-md-blue, .3)
>summary
border-bottom-color: alpha($color-md-blue, .3)
&[cyan]
border-color: alpha($color-mac-cyan, .3)
>summary
border-bottom-color: alpha($color-mac-cyan, .3)
&[green]
border-color: alpha($color-mac-green, .3)
>summary
border-bottom-color: alpha($color-mac-green, .3)
&[yellow]
border-color: alpha($color-mac-yellow, .3)
>summary
border-bottom-color: alpha($color-mac-yellow, .3)
&[red]
border-color: alpha($color-mac-red, .3)
>summary
border-bottom-color: alpha($color-mac-red, .3)
>summary
color: $color-p
margin-bottom: 0
&:hover
&:after
content: '-'
>div.content
padding: $gap
margin: 0 - $gap
margin-top: 0
p>a:hover
text-decoration: underline
>
p,.tabs,ul,ol,.highlight,.note,details
&:first-child
margin-top: 0
&:last-child
margin-bottom: 0
3 changes: 2 additions & 1 deletion source/css/_common/components/plugins/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
@import './table.styl';
@import './image.styl';
@import './note.styl';
@import './friends.styl';
@import './friends.styl';
@import './folding.styl';
88 changes: 44 additions & 44 deletions source/css/_common/components/plugins/note.styl
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
div.note
$border-codeblock = 4px
bg($c)
return mix($c, $card-color, 10)
return mix($c, $color-card, 10)
border($c)
return mix($c, $card-color, 100)
return mix($c, $color-card, 100)
position: relative
margin-top: $gap-p
margin-bottom: $gap-p
Expand Down Expand Up @@ -33,7 +33,7 @@ div.note
margin-top: $gap-p * 0.5
margin-bottom: $gap-p * 0.5
.link-card
background: var(--card-color)
background: var(--color-card)
&::before
position: absolute
top: "calc(50% - %s * 0.5)" % (24px)
Expand All @@ -47,42 +47,42 @@ div.note
font-family: 'Font Awesome 5 Free'

background: var(--color-block)
border-left: $border-codeblock solid $theme-color
border-left: $border-codeblock solid $color-theme
&::before
color: $theme-color
color: $color-theme
content: '\f054'
&::before
content: '\f054'

&.quote
background: bg($note-color-blue)
border-color: border($note-color-blue)
background: bg($color-md-blue)
border-color: border($color-md-blue)
&::before
color: border($note-color-blue)
color: border($color-md-blue)
content: '\f10d'
&.info
background: bg($theme-color)
border-color: border($theme-color)
background: bg($color-theme)
border-color: border($color-theme)
&::before
color: border($theme-color)
color: border($color-theme)
content: '\f129'
&.success,&.done
background: bg($note-color-mac-green)
border-color: border($note-color-mac-green)
background: bg($color-mac-green)
border-color: border($color-mac-green)
&::before
color: border($note-color-mac-green)
color: border($color-mac-green)
content: '\f00c'
&.warning
background: bg($note-color-mac-yellow)
border-color: border($note-color-mac-yellow)
background: bg($color-mac-yellow)
border-color: border($color-mac-yellow)
&::before
color: border($note-color-mac-yellow)
color: border($color-mac-yellow)
content: '\f12a'
&.danger,&.error
background: bg($note-color-mac-red)
border-color: border($note-color-mac-red)
background: bg($color-mac-red)
border-color: border($color-mac-red)
&::before
color: border($note-color-mac-red)
color: border($color-mac-red)
content: '\f00d'
&.radiation::before
content: '\f7b9'
Expand Down Expand Up @@ -114,42 +114,42 @@ div.note
background: none
border-color: none
&.light
background: mix($text-color, $card-color, 5)
border-color: mix($text-color, $card-color, 50)
background: mix($color-text, $color-card, 5)
border-color: mix($color-text, $color-card, 50)
&::before
color: mix($text-color, $card-color, 50)
color: mix($color-text, $color-card, 50)
&.gray
background: mix($text-color, $card-color, 5)
border-color: mix($text-color, $card-color, 80)
background: mix($color-text, $color-card, 5)
border-color: mix($color-text, $color-card, 80)
&::before
color: mix($text-color, $card-color, 80)
color: mix($color-text, $color-card, 80)
&.theme
background: bg($theme-color)
border-color: border($theme-color)
background: bg($color-theme)
border-color: border($color-theme)
&::before
color: border($theme-color)
color: border($color-theme)
&.red
background: bg($note-color-mac-red)
border-color: border($note-color-mac-red)
background: bg($color-mac-red)
border-color: border($color-mac-red)
&::before
color: border($note-color-mac-red)
color: border($color-mac-red)
&.yellow
background: bg($note-color-mac-yellow)
border-color: border($note-color-mac-yellow)
background: bg($color-mac-yellow)
border-color: border($color-mac-yellow)
&::before
color: border($note-color-mac-yellow)
color: border($color-mac-yellow)
&.green
background: bg($note-color-mac-green)
border-color: border($note-color-mac-green)
background: bg($color-mac-green)
border-color: border($color-mac-green)
&::before
color: border($note-color-mac-green)
color: border($color-mac-green)
&.cyan
background: bg($note-color-mac-cyan)
border-color: border($note-color-mac-cyan)
background: bg($color-mac-cyan)
border-color: border($color-mac-cyan)
&::before
color: border($note-color-mac-cyan)
color: border($color-mac-cyan)
&.blue
background: bg($note-color-blue)
border-color: border($note-color-blue)
background: bg($color-md-blue)
border-color: border($color-md-blue)
&::before
color: border($note-color-blue)
color: border($color-md-blue)
55 changes: 43 additions & 12 deletions source/css/_variables/color.styl
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@ $orange-light = #ff8d5c
$yellow-dark = #f2df17
$yellow-light = #fff494

$theme-color = #44D7B6
$meta-color = #888
$card-color = #fff
$text-color = #444

// Selection ( ::selection )
$selection-bg = #8be0e1
$selection-color = #fff
Expand Down Expand Up @@ -108,10 +103,46 @@ $button-default-hover-color = #fff
$button-default-bg = $home-readmore-bg-color
$button-default-hover-bg = $home-readmore-bg-hover-color

// Note plugin
$note-color-blue = #2196f3
$note-color-mac-cyan = #1BCDFC
$note-color-mac-green = #3DC550
$note-color-mac-yellow = #FFBD2B
$note-color-mac-red = #FE5F58

// volantis plugin
$color-md-red = #f44336
$color-md-pink = #E91E63
$color-md-purple = #9c27b0
$color-md-deep-purple = #673ab7
$color-md-indigo = #3f51b5
$color-md-light-blue = #4BA7EE
$color-md-blue = #2196f3
$color-md-deep-blue = #3367d6
$color-md-teal = #009688
$color-md-green = #4caf50
$color-md-light-green = #8bc34a
$color-md-orange = #ff9800
$color-md-deep-orange = #ff5722
$color-md-brown = #795548
$color-md-blue-grey = #607d8b
$color-md-grey = #9e9e9e
$color-md-light-grey = #e0e0e0
$color-md-yellow = #FCEC60
$color-md-amber = #F6C344

$color-mac-cyan = #1BCDFC
$color-mac-green = #3DC550
$color-mac-yellow = #FFBD2B
$color-mac-red = #FE5F58

$color-google-blue = #4688F1
$color-google-green = #3AA757
$color-google-yellow = #FABB2D
$color-google-red = #E8453C

$color-read-bkg = #e0d8c8
$color-read-post = #f8f1e2

$color-theme = #44D7B6
$color-card = #fff
$color-text = #444
$color-block = #f6f6f6
$color-meta = #888
$color-p = #444

bgcolor($c, $mix = 10)
return mix($c, $color-card, $mix)
2 changes: 1 addition & 1 deletion source/css/_variables/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $z-index2 = 2
// Font, line-height
// -------------------------------------------
// Line height
$line-height-base = 2 // global line height
$line-height-base = 1.5 // global line height
$line-height-heading = 1.5 // <h1~6> line height
$line-height-codeblock = 1.7 // can`t less 1.3

Expand Down
Loading

0 comments on commit 2d39b6d

Please sign in to comment.