前言

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

第一步 先安装插件

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: #1050px，信封划出的高度
  path: message #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 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
    # Extend
    # 扩展
    extends:
      # Insert in head
      # 插入到 head
      head:
        - <link rel="stylesheet" href="/custom/css/custom.css"> #插入这一行

第五步 Hexo三连击

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

总结

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

本文参考

⚠️ 引用站外地址，不保证站点的可用性和安全性，慎重点
🍭Akilarの糖果屋
信笺样式留言板