Skip to content

Commit 00b0617

Browse files
MHuiGMHuiG
authored
feat: quot blockquote (#1020)
1 parent 00236e9 commit 00b0617

7 files changed

Lines changed: 236 additions & 0 deletions

File tree

‎_config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -701,6 +701,15 @@ tag_plugins:
701701
Note:
702702
default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
703703
border: true # true / false
704+
# {% quot %}
705+
quot:
706+
default: # 可以自行配置多种图标方案，支持icons.yml中配置的图片key，也支持直接设置svg/png等文件链接
707+
prefix: bxs:quote-left
708+
suffix: bxs:quote-right
709+
hashtag:
710+
prefix: solar:hashtag-square-bold
711+
question:
712+
prefix: ph:seal-question-fill
704713
############################### Tag Plugins ############################### > end
705714

706715

‎scripts/tags/blockquote.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* 上次修改更新：6.7.0 | https://github.com/volantis-x/hexo-theme-volantis
3+
*
4+
*/
5+
/**
6+
* blockquote.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
7+
* 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
8+
*
9+
* blockquote:
10+
* {% blockquote [indent:true/false] %}
11+
* body
12+
* {% endblockquote %}
13+
*
14+
*/
15+
16+
'use strict'
17+
18+
function blockquote(args, content) {
19+
const ctx = hexo;
20+
var el = ''
21+
args = ctx.args.map(args, ['indent'], [])
22+
23+
el += `<div class="tag-plugin blockquote" indent="${args.indent}">`
24+
el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
25+
el += `</div>`
26+
return el
27+
}
28+
hexo.extend.tag.register('blockquote', blockquote, true)

‎scripts/tags/quot.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* 上次修改更新：6.7.0 | https://github.com/volantis-x/hexo-theme-volantis
3+
*
4+
*/
5+
/**
6+
* quot.js v1.2 | https://github.com/xaoxuu/hexo-theme-stellar/
7+
* 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
8+
*
9+
* quot:
10+
* {% quot [el:h2] [icon:default] [prefix:icon] text [suffix:icon] %}
11+
*
12+
*/
13+
14+
'use strict'
15+
16+
function quot(args) {
17+
const ctx = hexo;
18+
var el = ''
19+
args = ctx.args.map(args, ['el', 'icon', 'prefix', 'suffix'], ['text'])
20+
if (!args.el) {
21+
args.el = 'p'
22+
}
23+
24+
function content() {
25+
const cfg = ctx.theme.config.tag_plugins.quot[args.icon || 'default']
26+
var el = ''
27+
var prefix = null
28+
var suffix = null
29+
if (args.prefix || args.suffix) {
30+
// 临时设定的样式
31+
prefix = args.prefix
32+
suffix = args.suffix
33+
} else {
34+
// yml中配置的样式
35+
prefix = cfg?.prefix
36+
suffix = cfg?.suffix
37+
}
38+
if (prefix) {
39+
el += ctx.utils.icon(prefix, 'class="icon prefix"')
40+
} else {
41+
el += `<span class="empty"></span>`
42+
}
43+
el += `<span class="text">${args.text}</span>`
44+
if (suffix) {
45+
el += ctx.utils.icon(suffix, 'class="icon prefix"')
46+
} else {
47+
el += `<span class="empty"></span>`
48+
}
49+
return el
50+
}
51+
el += `<div class="tag-plugin quot ${args.el}">`
52+
if (args.el.includes('h')) {
53+
el += `<${args.el} class="content" id="${args.text}">`
54+
el += content()
55+
el += '</' + args.el + '>'
56+
} else {
57+
el += `<${args.el} class="content">`
58+
el += content()
59+
el += '</' + args.el + '>'
60+
}
61+
el += '</div>'
62+
return el
63+
}
64+
65+
hexo.extend.tag.register('quot', quot)
66+
67+

‎source/css/_defines/stellar.styl‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ $fsp1 = 'calc(%s - 1px)' % $fs-body
4646
$fsp2 = 'calc(%s - 2px)' % $fs-body
4747
$fsp3 = 'calc(%s - 3px)' % $fs-body
4848

49+
svg-mask-icon($svg)
50+
-webkit-mask-image: url($svg)
51+
-webkit-mask-repeat: no-repeat
52+
-webkit-mask-position: center
53+
-webkit-mask-size: contain
54+
mask-image: url($svg)
55+
mask-repeat: no-repeat
56+
mask-position: center
57+
mask-size: contain
58+
4959
// 通用 hsla 函数
5060
x-hsla(h = var(--hue), s = var(--sat), l = var(--light), a = var(--alpha))
5161
return unquote('hsla(%s %s %s / %s)' % (h s l a))
@@ -314,3 +324,13 @@ stellar-root-async()
314324
// 元素文本内容到容器边缘的间距
315325
--gap-max: calc(var(--gap-margin) + var(--gap-padding))
316326

327+
328+
// icons
329+
330+
$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
331+
$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
332+
333+
334+
//
335+
336+

‎source/css/_style/_tag-plugins/blockquote.styl‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.tag-plugin.blockquote
2+
position: relative
3+
p:not([class])
4+
text-indent: 0 !important
5+
&[indent='true']
6+
p:not([class])
7+
text-indent: 'calc(%s * 2)' % var(--fsp) !important
8+
text-align: center
9+
--inset: calc(var(--fsp) * 2)
10+
margin-left: var(--inset)
11+
margin-right: var(--inset)
12+
background: var(--block)
13+
padding: 1rem 2rem
14+
border-radius: $border-card
15+
&:before,&:after
16+
position: absolute
17+
font-size: 2rem
18+
background-color: x-theme-alpha(0.25)
19+
top: -0.3em
20+
width: 1em
21+
height: 1em
22+
content: ''
23+
opacity 1
24+
trans1 all
25+
&:before
26+
left: -0.3em
27+
svg-mask-icon($iQuoteLeft)
28+
&:after
29+
right: -0.3em
30+
svg-mask-icon($iQuoteRight)
31+
p:not([class])
32+
color: var(--text-p2)
33+
font-size: $fs-body
34+
text-indent: 2em
35+
&:hover
36+
&:before,&:after
37+
background-color: x-theme-alpha(0.5)

‎source/css/_style/_tag-plugins/quot.styl‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.md .tag-plugin.quot
2+
text-align: center
3+
align-items: center
4+
display: flex
5+
flex-direction: column
6+
--gap-p: 2rem
7+
margin: var(--gap-p) 1rem
8+
.content
9+
display: flex
10+
align-items: center
11+
border-bottom: none
12+
font-weight: 700
13+
padding: 0 24px
14+
@media screen and (max-width: $device-mobile)
15+
padding: 0 20px
16+
line-height: 1.2
17+
18+
.md .tag-plugin.quot .content
19+
position: relative
20+
// override
21+
.md.content .tag-plugin.quot
22+
text-wrap: balance
23+
h1,h2
24+
font-size: $fsh2
25+
font-weight: 900
26+
padding: 4px 32px 0
27+
@media screen and (max-width: $device-mobile)
28+
padding: 4px 24px 0
29+
h3,h4,h5,h6
30+
font-size: $fsh3
31+
p
32+
font-size: calc(var(--fsp) + 2px)
33+
color: var(--text)
34+
35+
// type=icon
36+
.md .tag-plugin.quot
37+
img,svg
38+
height: 1.5em
39+
display: inline-block
40+
color: var(--accent)
41+
border-radius: 0
42+
flex-shrink: 0
43+
span.text
44+
margin: 0 .5rem
45+
padding-top: 1px
46+
span.empty
47+
padding: 0 8px
48+
49+
.md .tag-plugin.quot.p
50+
.content
51+
trans1 all
52+
.content .text
53+
position: relative
54+
.content .text:after
55+
content: ""
56+
position: absolute
57+
--width: 90%
58+
width: var(--width)
59+
height: 4px
60+
left: calc(50% - var(--width) / 2)
61+
bottom: -8px
62+
border-radius: 100%
63+
background: var(--text)
64+
opacity: 0.1
65+
filter: blur(2px)
66+
trans1 all
67+
&:hover
68+
.content
69+
transform: translateY(-4px) scale(1.05)
70+
.text:after
71+
opacity: 0.2
72+
filter: blur(8px)
73+
transform: translateY(4px) scale(1.2, 1.5)

‎source/css/_style/_tag-plugins/tag.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"audio": ["media.styl"],
3+
"blockquote": ["blockquote.styl"],
34
"blur": ["text.styl"],
45
"box": ["note.styl"],
56
"btn": ["btns.styl"],
@@ -32,6 +33,7 @@
3233
"noteblock": ["note.styl"],
3334
"p": ["span.styl"],
3435
"psw": ["text.styl"],
36+
"quot": ["quot.styl"],
3537
"radio": ["checkbox.styl"],
3638
"sites": ["sites.styl"],
3739
"span": ["span.styl"],

0 commit comments

Comments
 (0)