前言

换了主题以后发现之前留言板的插件好像有点问题，我稍微改了一下，所以有了这一篇文章。效果请单击此处观看

第一步 先安装插件

1

npm install hexo-butterfly-envelope --save

基础教程可参考

第二步 修改配置文件

1. 修改 _config.yml 文件

2. 将 path 改成弹幕留言的页面名称 message

3. 在 front_matter: 下添加 type: message

4. 开启评论 comment: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

envelope_comment:
  enable: true 
  custom_pic:
    cover: /images/violet.jpg 
    line: /images/line.png 
    beforeimg: /images/before.png 
    afterimg: /images/after.png 
  message: 
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ 
  height: 
  path: message 
  front_matter: 
    title: 留言板
    comment: true
    type: message

第三步 创建message页面

1

hexo new page message

1
2
3
4
5
6
7
8

---
title: 留言板
comment: true
type: message
desc: 留言板
date: 2024-11-20 20:55:50
---

效果是这样的，应该是样式有问题，修改一下。

第四步 修改样式

1. 在 source 下新建一个 custom 文件夹，再文件夹里新建 css 文件夹，在新建 custom.css 样式文件，在里面添加以下内容。（不一定要以我为准，在 source 新建就可以了， head 路径记得改就行）。

   1 2 3 4

   #form-wrap .no-lightbox.entered.loaded{ margin: 0 auto; max-width:100%; }

2. 打开主题的配置文件 _config.solitude.yml ,在 head: 后插入你的用户css样式文件，以我的为例。

   1 2 3 4 5 6 7

   extends: head: - <link rel="stylesheet" href="/custom/css/custom.css">

第五步 Hexo三连击

1
$ hexo clean && hexo generate && hexo server

总结

至此，教程结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的 公众号以及订阅我的文章 ，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。

本文参考