侧边栏——对Solitude主题的折腾

前言

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

第一步 先安装插件

npm install hexo-hexo-butterfly-envelope --save

基础教程可参考

第二步 修改配置文件

1. 修改 _config.yml 文件

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

3. 在 front_matter: 下添加 type: message

4. 开启评论 comment: true

   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页面

hexo new page message

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

第四步 修改样式

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

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

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

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel="stylesheet" href="../custom/css/custom.css"> #插入这一行

第五步 Hexo三连击

$ hexo clean && hexo generate && hexo server

总结

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

本文参考

🍭Akilarの糖果屋

信笺样式留言板