旧版

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

博客根目录右键 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

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

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