Hexo+Next7.8.0 引入 Folding 容器

Mr. X

发布于：2020-04-27

Hexo
0  条评论

字数统计：1.3k字

阅读时长≈ 6分钟

偶然间看到了html5的 <summary> 标签，可以将内容展开折叠，感觉很棒，就将其封装到 Next 主题中使用。

本文介绍的文件路径及方法都是基于 Next7.8.0 版本实现的，小伙伴采用且考虑兼容性。

🌞 使用方法

1
2
3
4
5
{% folding 参数（可选）, 标题 %}

![](https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/resume/resumeBg.jpg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

1
blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/resume/resumeBg.jpg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
1
查看代码测试
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

吼吼 ✌️

🌞 配置

🎉 引入js

在 \next\scripts\tags 目录下新建文件 folding.js，并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
'use strict';

/**
 * Usage:
 * {% folding [args], title %}
 * content
 * {% endfolding %}
 *
 * args:
 *   - color: blue, cyan, green, yellow, red
 *   - status: open # means open by default
 *
 * example:
 * {% folding cyan open, view the default folding box %}
 * This is a folding box that opens by default
 * {% endfolding %}
 */
function postFolding(args, content) {
  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> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  } else {
    return `<details><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  }

}

hexo.extend.tag.register('folding', postFolding, {ends: true});

🎉 引入css

在 \next\source\css\_common\scaffolding\tags 目录下新建文件 folding.styl,并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
// gap
$fd-gap = 16px // base gap
$fd-gap-paragraph = 1rem // block spacing
$fd-gap-row = .5rem // line spacing
$fd-gap-card = $fd-gap
// border radius
$fd-border-codeblock = 4px
// common
$fd-color-card = white
$fd-color-block =  #f6f6f6
// font size
$fd-fontsize-meta = .875rem   // 14px
$fd-fontsize-list = .9375rem // 15px
//color
$fd-color-p = #555
$fd-color-md-blue = #e8f4fd
$fd-color-md-blue1 = rgba(33,150,243,0.3)

$fd-color-mac-cyan = #e8fafe
$fd-color-mac-cyan1 = rgba(27,205,252,0.3)
$fd-color-mac-green = #ebf9ed
$fd-color-mac-green1 =rgba(61,197,80,.3)
$fd-color-mac-yellow = #fff8e9
$fd-color-mac-yellow1 = rgba(255,189,43,0.3)
$fd-color-mac-red = #feefee
$fd-color-mac-red1 = rgba(254,95,88,0.3)
// transition time
$fd-time = 0.28s

details
  display: block
  padding: $fd-gap
  margin: $fd-gap-row 0
  border-radius: $fd-border-codeblock
  background: $fd-color-card
  font-size: $fd-fontsize-list
  transition: all $fd-time ease
  -moz-transition: all $fd-time ease
  -webkit-transition: all $fd-time ease
  -o-transition: all $fd-time ease

  summary
    cursor: pointer;
    padding: $fd-gap
    outline:none;
    margin: 0 - $fd-gap
    border-radius: $fd-border-codeblock
    color: alpha($fd-color-p, .7)
    font-size: $fd-fontsize-meta
    font-weight: bold
    position: relative
    line-height: normal


    >p, h1, h2, h3, h4, h5, h6
      display: inline !important
      border-bottom: none !important
      cursor: pointer;

    &:hover
      color: $fd-color-p

      &:after
        position: absolute
        content: '+'
        text-align: center
        top: 50%
        transform: translateY(-50%)
        right: $fd-gap

  border: 1px solid $fd-color-block

  > summary
    background: $fd-color-block

  &[blue]
    border-color: $fd-color-md-blue

    > summary
      background:$fd-color-md-blue

  &[cyan]
    border-color:$fd-color-mac-cyan

    > summary
      background:$fd-color-mac-cyan

  &[green]
    border-color:$fd-color-mac-green

    > summary
      background:$fd-color-mac-green

  &[yellow]
    border-color:$fd-color-mac-yellow

    > summary
      background:$fd-color-mac-yellow

  &[red]
    border-color:$fd-color-mac-red

    > summary
      background:$fd-color-mac-red

details[open]
  border-color: alpha($fd-color-p, .2)

  > summary
    border-bottom: 1px solid alpha($fd-color-p, .2)
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

  &[blue]
    border-color: alpha($fd-color-md-blue1, .3)

    > summary
      border-bottom-color: alpha($fd-color-md-blue1, .3)

  &[cyan]
    border-color: alpha($fd-color-mac-cyan1, .3)

    > summary
      border-bottom-color: alpha($fd-color-mac-cyan1, .3)

  &[green]
    border-color: alpha($fd-color-mac-green1, .3)

    > summary
      border-bottom-color: alpha($fd-color-mac-green1, .3)

  &[yellow]
    border-color: alpha($fd-color-mac-yellow1, .3)

    > summary
      border-bottom-color: alpha($fd-color-mac-yellow1, .3)

  &[red]
    border-color: alpha($fd-color-mac-red1, .3)

    > summary
      border-bottom-color: alpha($fd-color-mac-red1, .3)

  > summary
    color: $fd-color-p
    margin-bottom: 0

    &:hover
      &:after
        content: '-'

  > div.content
    padding: $fd-gap
    margin: 0 - $fd-gap
    margin-top: 0

    p > a:hover
      text-decoration: underline

    >
    p, .tabs, ul, ol, .highlight, .note, .fancybox, details
      &:first-child
        margin-top: 0

      &:last-child
        margin-bottom: 0

最后在目录 \next\source\css\_common\scaffolding\tags 下有一个文件 tags.styl，添加以下内容：

1
@import 'folding';

配上完以上内容，素质三连 hexo clean && hexo g && hexo s 就可以在 Markdown 中使用啦！

相关文章
Hexo博客中加入豆瓣读书页面在Hexo博客个性化定制中，加入豆瓣读书界面是一个很不错的功能，可以进入我的个人阅读界面查看效果，那么我是怎么做到的呢？其...Hexo中使用emoji表情Hexo 开启欢乐的 emoji 之旅 💛本站已开通订阅功能小站新开通订阅功能，欢迎大家体验。Hexo优化之lazyload图片懒加载Hexo 博客虽然功能很强大，但也越来越繁重了，访问速度上有了一些问题，这里我也考虑了许多，例如加 cdn，将国外的资源引...为Hexo添加RSS订阅本篇介绍一下自己的博客如何添加 RSS 订阅功能。

本文由 ·银河小徐 创作，如果您觉得本文不错，请随意赞赏

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://hasaik.com/posts/d0bc4f5d.html

您的喜欢是作者写作最大的动力！❤️
  • AliPay
  • WeChatPay
  • QQPay
Donate

更新于：2020-10-29

Hexo

Folding容器

用户交流区

温馨提示: 遵纪守法, 友善评论!





京ICP备2020040230号
Copyright 2019-2020 XU'S BLOG 丨 载入天数...载入时分秒...

PoweredHexo
HostedGitHub & Coding
DNSAliyun
CDNjsDelivr
ThemeVolantis
BY-NC-SA 4.0
WordCount83.6k