From 2d39b6d08fe0c4dbea8121db77c533cfd6080031 Mon Sep 17 00:00:00 2001 From: liuyihui Date: Sat, 8 Oct 2022 01:22:24 +0800 Subject: [PATCH] update: waline 2.X;add: folding tags;change: volantis plugin style --- _config.yml | 2 + layout/_third-party/comments/waline.pug | 3 +- scripts/tags/folding.js | 38 +++++++ .../_common/components/plugins/folding.styl | 102 ++++++++++++++++++ .../css/_common/components/plugins/index.styl | 3 +- .../css/_common/components/plugins/note.styl | 88 +++++++-------- source/css/_variables/color.styl | 55 +++++++--- source/css/_variables/index.styl | 2 +- source/css/_variables/layout.styl | 13 ++- 9 files changed, 244 insertions(+), 62 deletions(-) create mode 100644 scripts/tags/folding.js create mode 100644 source/css/_common/components/plugins/folding.styl diff --git a/_config.yml b/_config.yml index fae1661e..b7777613 100644 --- a/_config.yml +++ b/_config.yml @@ -542,6 +542,8 @@ waline: emoji: - https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili - https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq + # reaction + reaction: false # Valine # See: https://valine.js.org/quickstart.html diff --git a/layout/_third-party/comments/waline.pug b/layout/_third-party/comments/waline.pug index ba4a775d..1757a9e7 100644 --- a/layout/_third-party/comments/waline.pug +++ b/layout/_third-party/comments/waline.pug @@ -45,7 +45,8 @@ script&attributes(dataPjax). locale: { admin: '!{theme.waline.locale.admin}', placeholder: '!{theme.waline.locale.placeholder}' - } + }, + reaction: !{theme.waline.reaction} }); } diff --git a/scripts/tags/folding.js b/scripts/tags/folding.js new file mode 100644 index 00000000..caa10204 --- /dev/null +++ b/scripts/tags/folding.js @@ -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 `
${title} +
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} +
+
`; + } + return `
${title} +
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} +
+
`; + + + } + + hexo.extend.tag.register('folding', postFolding, {ends: true}); \ No newline at end of file diff --git a/source/css/_common/components/plugins/folding.styl b/source/css/_common/components/plugins/folding.styl new file mode 100644 index 00000000..9348021b --- /dev/null +++ b/source/css/_common/components/plugins/folding.styl @@ -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 \ No newline at end of file diff --git a/source/css/_common/components/plugins/index.styl b/source/css/_common/components/plugins/index.styl index cd61903d..d42c46cf 100644 --- a/source/css/_common/components/plugins/index.styl +++ b/source/css/_common/components/plugins/index.styl @@ -2,4 +2,5 @@ @import './table.styl'; @import './image.styl'; @import './note.styl'; -@import './friends.styl'; \ No newline at end of file +@import './friends.styl'; +@import './folding.styl'; diff --git a/source/css/_common/components/plugins/note.styl b/source/css/_common/components/plugins/note.styl index 6a022c22..9392ad6a 100644 --- a/source/css/_common/components/plugins/note.styl +++ b/source/css/_common/components/plugins/note.styl @@ -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 @@ -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) @@ -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' @@ -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) \ No newline at end of file + color: border($color-md-blue) \ No newline at end of file diff --git a/source/css/_variables/color.styl b/source/css/_variables/color.styl index 8fc5d7d4..0d8dab22 100644 --- a/source/css/_variables/color.styl +++ b/source/css/_variables/color.styl @@ -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 @@ -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) \ No newline at end of file diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl index daef85a8..a36cc46a 100644 --- a/source/css/_variables/index.styl +++ b/source/css/_variables/index.styl @@ -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 // line height $line-height-codeblock = 1.7 // can`t less 1.3 diff --git a/source/css/_variables/layout.styl b/source/css/_variables/layout.styl index f9c3d94e..1e400288 100644 --- a/source/css/_variables/layout.styl +++ b/source/css/_variables/layout.styl @@ -8,8 +8,6 @@ $sm-width = 768px - 0.02px $md-width = 992px - 0.02px $lg-width = 1200px - 0.02px -$gap = 16px -$gap-p = 1em get-main-padding() { $main-padding = convert(hexo-config('layout.main_padding.default')); $gap-left = 0; @@ -39,4 +37,13 @@ if (hexo-config('sidebar.enable')) { $main-width = $content-width + $sidebar-width + $content-sidebar-gap + $main-padding-width } else { $main-width = $content-width + $main-padding-width -} \ No newline at end of file +} + +// volantis plugin +$border-card = 12px +$border-codeblock = 4px +$border-searchbar = 8px +$border-button = 2px + +$gap = 16px +$gap-p = 1em \ No newline at end of file