点击查看更新记录
更新记录
2022-05-07
- 调整配置项自定义内容
2021-04-28
- 发布npm插件正式版1.0.0
- 支持留言板正文多行文本
2021-04-25
- 新增npm插件化安装方式
- 暂不支持留言板换行
- 未能解决转义问题
2021-04-23
- 继承旧版方案大多数样式
- 修复和medium_zoom之间存在的兼容性bug
- 变动配置方式，使用type: ‘envelope’控制页面内容
- 新增配置项，方便读者改动信笺内容而无需读懂代码
- 暂不推荐使用fancybox，因为无法解决它强制套壳导致的偏移错位。
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
魔改步骤
- 在
[Blogroot]运行指令1
npm install hexo-butterfly-envelope --save
- 在站点配置文件或者主题配置文件添加配置项（对，两者任一均可。但不要都写）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20# envelope_comment
# see /posts/e2d3c450/
envelope_comment:
enable: true #控制开关
custom_pic:
cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
message: #信笺正文，多行文本，写法如下
- 有什么想问的？
- 有什么想说的？
- 有什么想吐槽的？
- 哪怕是有什么想吃的，都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
height: #1050px，信封划出的高度
path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
front_matter: #【可选】comments页面的 front_matter 配置
title: 留言板
comments: true
- 新建
[Blogroot]\hemes\butterfly\layout\includes\page\envelope.pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20#article-container
if top_img === false
h1.page-title= page.title
#maincontent
#form-wrap
img#beforeimg(src='https://cdn.jsdelivr.net/gh/测试lxh/Valine-Admin@v1.0/source/img/before.png')
#envelope
form
.formmain
img.headerimg(src=url_for(theme.envelope_comment.cover))
.comments-main
h3.title3=`来自` + config.author + `的留言:`
.comments
each i in theme.envelope_comment.message
div=`${i}`
.bottomcontent
img.bottomimg(src='https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png')
p.bottomhr=`${theme.envelope_comment.bottom}`
img#afterimg(src='https://cdn.jsdelivr.net/gh/测试lxh/Valine-Admin@v1.0/source/img/after.png')
!= page.content - 新建
[Blogroot]\themes\butterfly\source\css\_layout\commentsbar.styl1
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
104if hexo-config('envelope_comment.enable')
$hoverHeight = hexo-config('envelope_comment.height') ? convert(hexo-config('envelope_comment.height')) : 1050px
@media screen and (max-width: 600px)
#beforeimg,
#afterimg
display none !important
@media screen and (min-width: 600px)
#article-container
img
margin 0 auto 0rem
#form-wrap
overflow hidden
height 447px
position relative
top 0px
transition all 1s ease-in-out .3s
z-index 0
&:hover
height $hoverHeight
top -200px
#maincontent
width 530px
margin 20px auto 0
#beforeimg
position absolute
bottom 126px
left 0px
background-repeat no-repeat
width 530px
height 317px
z-index -100
pointer-events none
#afterimg
position absolute
bottom -2px
left 0
background-repeat no-repeat
width 530px
height 259px
z-index 100
pointer-events none
#envelope
position relative
overflow visible
width 500px
margin 0px auto
transition all 1s ease-in-out .3s
padding-top 200px
.headerimg
width 100%
overflow hidden
pointer-events none
.formmain
background white
width 95%
max-width 800px
margin auto auto
border-radius 5px
border 1px solid
overflow hidden
-webkit-box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.12)
box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.18)
.comments-main
padding 5px 20px
.title3
text-decoration none
color $theme-color
text-align center
.comments
text-align center
border-bottom #ddd 1px solid
border-left #ddd 1px solid
padding-bottom 20px
background-color #eee
margin 15px 0px
padding-left 20px
padding-right 20px
border-top #ddd 1px solid
border-right #ddd 1px solid
padding-top 20px
.bottomcontent
text-align center
margin-top 40px
.bottomimg
width 100%
margin 5px auto 5px auto
display block
pointer-events none
.bottomhr
font-size 12px
text-align center
color #999
[data-theme='dark']
.formmain
background rgb(50, 50, 50)
.comments
background rgba(90, 90, 90, 0.8) - 修改
[Blogroot]\themes\butterfly\layout\page.pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15block content
#page
case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
when 'artitalk'
include includes/page/artitalk.pug
+ when 'envelope'
+ include includes/page/envelope.pug
default
include includes/page/default-page.pug 修改
[Blogroot]\_config.butterfly.yml,新增配置项1
2
3
4
5
6
7
8
9
10envelope_comment:
enable: true #开关
cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
message: #信笺内容，支持多行
- 有什么想问的？
- 有什么想说的？
- 有什么想吐槽的？
- 哪怕是有什么想吃的，都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
height: #调整信笺划出高度，默认1050px新建留言板页面（已有的不用重复操作。）
在[Blogroot]打开终端，输入1
hexo new page comments
- 打开
[Blogroot]\source\comments\index.md
将其内容修改为：1
2
3
4
5---
title: 留言板
top_img:
type: 'envelope'
---
TO DO
重构代码结构
配置项提取
npm插件化
点击查看旧版方案
此方案为旧版方案，代码结构较为混乱，且与fancybox、medium_zoom之间存在较多兼容性bug，不推荐使用。
留言板动态弹出信封样式
- 原本是我为Valine-Admin写的邮件样式，看到留言板光秃秃的不好看，就拿过来用了。
- 纯CSS3实现。理论上适用于任何主题。
- 信笺样式取材自小康大佬修改的Valine-admin中的薇尔莉特邮件样式。
- 可以自定义在页面中自定义头图，并修改css中的图片上升高度。
- 由于使用了盒子绝对定位。宽度过低时信封会疯狂错位，故写了两个样式。设置为低于一定宽度后自动隐藏信封。
修改步骤
新建留言板页面（已有的不用重复操作。）
在[Blogroot]打开终端，输入1
hexo new page comments
打开
[Blogroot]\source\comments\index.md
将其内容修改为：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---
title: 留言板
top_img:
---
<link rel="stylesheet" href="/css/commentsbar.css"/>
<div id="computer">
<div id="maincontent"><br>
<div id="form-wrap"><img src="https://cdn.jsdelivr.net/gh/测试lxh/Valine-Admin@v1.0/source/img/before.png" id="beforeimg">
<div id="envelope">
<form>
<div class="formmain">
<img class="headerimg" src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/>
<div style="padding: 5px 20px;">
<center>
<h3 calss="title3">来自测试的留言:</h3>
</center>
<center class="comments">
有什么想问的？<br>
有什么想说的？<br>
有什么想吐槽的？<br>
哪怕是有什么想吃的，都可以告诉我哦~<br>
</center>
<div class="bottomcontent">
<img class="bottomimg" src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"/>
</div>
<p class="bottomhr">自动书记人偶竭诚为您服务！</p>
</div>
</div>
</form>
</div><img id="afterimg" src="https://cdn.jsdelivr.net/gh/测试lxh/Valine-Admin@v1.0/source/img/after.png">
</div>
</div>
</div>
<div id="mobile">
<form>
<div class="formmain"><img class="headerimg" src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg" />
<div style="padding: 5px 20px;">
<center>
<h3 class="title3">来自测试的留言:</h3>
</center>
<center class="comments">
有什么想问的？<br>
有什么想说的？<br>
有什么想吐槽的？<br>
哪怕是有什么想吃的，都可以告诉我哦~<br>
</center>
<div class="bottomcontent"><img src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png" class="bottomhr"></div>
<p class="bottomhr"">自动书记人偶竭诚为您服务！</p>
</div>
</div>
</form>
</div>- 在
[Blogroot]\themes\butterfly\source\css\目录下新建commentsbar.css1
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/* 滚动条隐藏 */
::-webkit-scrollbar {
display: none;
}
/* 禁用图片点击,butterfly渲染后会给图片套上fancybox，点开后会造成信笺偏移*/
.formmain{
pointer-events: none ;
}
/* top-img隐藏 */
#page-header {
background: transparent ;
}
/* 宽度小于530px隐藏信封 */
@media screen and (max-width: 530px) {
#computer {
display: none ;
}
}
@media screen and (min-width: 530px) {
#mobile {
display: none ;
}
}
#article-container img {
margin: 0 auto 0rem;
}
#form-wrap {
overflow: hidden;
height: 447px;
position: relative;
top: 0px;
transition: all 1s ease-in-out .3s;
z-index: 0;
}
/* 调整信封划出高度，换信笺内容以后可在此设置height */
#form-wrap:hover {
height: 1050px;
top: -200px;
}
#beforeimg {
position: absolute;
bottom: 126px;
left: 0px;
background-repeat: no-repeat;
width: 530px;
height: 317px;
z-index: -100;
pointer-events: none;
}
#afterimg {
position: absolute;
bottom: -2px;
left: 0;
background-repeat: no-repeat;
width: 530px;
height: 259px;
z-index: 100;
pointer-events: none;
}
#envelope {
position: relative;
overflow: visible;
width: 500px;
margin: 0px auto;
transition: all 1s ease-in-out .3s;
padding-top: 200px;
}
#maincontent {
width: 530px;
margin: 20px auto 0;
}
.headerimg {
width: 100%;
overflow: hidden;
pointer-events: none;
}
.formmain {
background: white;
width: 95%;
max-width: 800px;
margin: auto auto;
border-radius: 5px;
border: 1px solid;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);
}
.title3 {
text-decoration: none;
color: rgb(246, 214, 175);
}
.comments {
border-bottom: #ddd 1px solid;
border-left: #ddd 1px solid;
padding-bottom: 20px;
background-color: #eee;
margin: 15px 0px;
padding-left: 20px;
padding-right: 20px;
border-top: #ddd 1px solid;
border-right: #ddd 1px solid;
padding-top: 20px;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
.bottomcontent {
text-align: center;
margin-top: 40px;
}
.bottomimg {
width: 100%;
margin: 5px auto 5px auto;
display: block;
pointer-events: none;
}
.bottomhr {
font-size: 12px;
text-align: center;
color: #999;
}
/* 夜间模式 */
[data-theme='dark']
.formmain {
background: rgb(50, 50, 50);
}
[data-theme='dark']
.comments {
background: rgba(90, 90, 90, 0.8)
}
bug归纳
- 使用gulp的情况下可能会在压缩html时报错。
- 遇到了可以通过在
gulpfile.js里设置跳过压缩comments/index.html来避开bug。1
2
3
4
5gulp.task('minify-html', () => {
- return gulp.src('./public/**/*.html')
+ return gulp.src(['./public/**/*.html','!./public/comments/index.html'])
.pipe(htmlclean())
.pipe(htmlmin({
Invitation
测试
created:14/10/2022
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to 测试's candyhome,wish you a nice day .
评论
