51工具盒子旧版 {#旧版}
首先最起码你得要有一个留言的页面
博客根目录右键 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/
