旧版

首先最起码你得要有一个留言的页面

博客根目录右键 Git Bash 输入如下命令

1
hexo new page "message"

接着在博客根目录的 source 下就会发现刚刚新建的文件,我们点进去打开 index.md

复制如下代码,即可完事

1
2
3
<link rel="stylesheet" href="https://npm.elemecdn.com/nanshen/css/blog/messagebar.css"/>

<div id="computer"><div id="maincontent"><br><div id="form-wrap"><img src="https://npm.elemecdn.com/cover_img/msg/before.webp"id="beforeimg"><div id="envelope"><form><div class="formmain"><img class="headerimg"src="https://npm.elemecdn.com/cover_img/msg/U5bb04af32be544c4b41206d9a42fcacfd.webp"/><div style="padding: 5px 20px;"><center><h3 calss="title3">来自小嘉的留言:</h3></center><center class="comments">有什么想问的?<br>有什么想说的?<br>有什么想吐槽的?<br></center><div class="bottomcontent"><img class="bottomimg"src="https://npm.elemecdn.com/cover_img/msg/U0968ee80fd5c4f05a02bdda9709b041eE.webp"/></div><p class="bottomhr">自动书记人偶竭诚为您服务!</p></div></div></form></div><img id="afterimg"src="https://npm.elemecdn.com/cover_img/msg/after.webp"></div></div></div><div id="mobile"><form><div class="formmain"><img class="headerimg"src="https://npm.elemecdn.com/cover_img/msg/U5bb04af32be544c4b41206d9a42fcacfd.webp"/><div style="padding: 5px 20px;"><center><h3 class="title3">来自小嘉的留言:</h3></center><center class="comments">有什么想问的?<br>有什么想说的?<br>有什么想吐槽的?<br></center><div class="bottomcontent"><img src="https://npm.elemecdn.com/cover_img/msg/U0968ee80fd5c4f05a02bdda9709b041eE.webp"class="bottomhr"></div><p class="bottomhr"">自动书记人偶竭诚为您服务!</p></div></div></form></div>

然后按照自己的需求进行修改

新版(推荐)

新版使用的是 npm 插件的方式,作者:Akilar

在站点根目录执行以下命令:

1
npm install hexo-butterfly-envelope --save

安装完成之后打开站点的配置文件或主题的配置文件,添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
envelope_comment:
enable: true
cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg # 信笺封面图
message: # 信笺内容,支持多行
- 有什么想问的?
- 有什么想说的?
- 有什么想吐槽的?
bottom: 自动书记人偶竭诚为您服务! # 信笺结束语,只能单行
height: # 调整信笺划出高度,默认1050px
path: # 【可选】comments 的路径名称。默认为 comments , 生成的页面为 comments/index.html
front_matter: # 【可选】comments页面的 front_matter 配置
title: 留言板
comments: false
aside: false

最后使用hexo 三连查看效果:

1
2
3
hexo cl
hexo g
hexo s

参考链接:https://blog.imzjw.cn/posts/b74f504f/