前言

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

第一步 先安装插件

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%;
}
  1. 打开主题的配置文件 _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の糖果屋
信笺样式留言板