效果预览

魔改步骤

npm插件安装(推荐)

1. 终端运行命令

   npm install hexo-butterfly-envelope --save

2. 主题配置文件中，添加以下配置

   # envelope_comment
   # see https://akilar.top/posts/e2d3c450/
   envelope_comment:
   enable: true #控制开关
   custom_pic:
   cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
   line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
   beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
   afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
   message: #信笺正文，多行文本，写法如下
   - 有什么想问的？
   - 有什么想说的？
   - 有什么想吐槽的？
   - 哪怕是有什么想吃的，都可以告诉我哦~
   bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
   height: #1050px，信封划出的高度
   path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
   front_matter: #【可选】comments页面的 front_matter 配置
   title: 留言板
   comments: true

修改源码

1. [新建]\butterfly\layout\includes\page\envelope.pug

   #article-container
   if top_img === false
   h1.page-title= page.title
   #maincontent
   #form-wrap
     img#beforeimg(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png')
     #envelope
       form
         .formmain
           img.headerimg(src=url_for(theme.envelope_comment.cover))
           .comments-main
             h3.title3=`来自` + config.author + `的留言:`
             .comments
               each i in theme.envelope_comment.message
                 div=`${i}`
             .bottomcontent
               img.bottomimg(src='https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png')
             p.bottomhr=`${theme.envelope_comment.bottom}`
     img#afterimg(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png')
   != page.content

2. [新建]\themes\butterfly\source\css_layout\commentsbar.styl

   if hexo-config('envelope_comment.enable')
   $hoverHeight = hexo-config('envelope_comment.height') ? convert(hexo-config('envelope_comment.height')) : 1050px
   @media screen and (max-width: 600px)
   #beforeimg,
   #afterimg
     display none !important
   
   @media screen and (min-width: 600px)
   #article-container
     img
       margin 0 auto 0rem
   #form-wrap
     overflow hidden
     height 447px
     position relative
     top 0px
     transition all 1s ease-in-out .3s
     z-index 0
     &:hover
       height $hoverHeight
       top -200px
   #maincontent
     width 530px
     margin 20px auto 0
   #beforeimg
     position absolute
     bottom 126px
     left 0px
     background-repeat no-repeat
     width 530px
     height 317px
     z-index -100
     pointer-events none
   #afterimg
     position absolute
     bottom -2px
     left 0
     background-repeat no-repeat
     width 530px
     height 259px
     z-index 100
     pointer-events none
   #envelope
     position relative
     overflow visible
     width 500px
     margin 0px auto
     transition all 1s ease-in-out .3s
     padding-top 200px
   
   .headerimg
   width 100%
   overflow hidden
   pointer-events none
   
   .formmain
   background white
   width 95%
   max-width 800px
   margin auto auto
   border-radius 5px
   border 1px solid
   overflow hidden
   -webkit-box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.12)
   box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.18)
   .comments-main
   padding 5px 20px
   .title3
   text-decoration none
   color $theme-color
   text-align center
   .comments
   text-align center
   border-bottom #ddd 1px solid
   border-left #ddd 1px solid
   padding-bottom 20px
   background-color #eee
   margin 15px 0px
   padding-left 20px
   padding-right 20px
   border-top #ddd 1px solid
   border-right #ddd 1px solid
   padding-top 20px
   
   .bottomcontent
   text-align center
   margin-top 40px
   
   .bottomimg
   width 100%
   margin 5px auto 5px auto
   display block
   pointer-events none
   
   .bottomhr
   font-size 12px
   text-align center
   color #999
   
   [data-theme='dark']
   .formmain
     background rgb(50, 50, 50)
   .comments
     background rgba(90, 90, 90, 0.8)

3. [修改]\themes\butterfly\layout\page.pug

   block content
   #page
   case page.type
     when 'tags'
       include includes/page/tags.pug
     when 'link'
       include includes/page/flink.pug
     when 'categories'
       include includes/page/categories.pug
     when 'artitalk'
       include includes/page/artitalk.pug
   +     when 'envelope'
   +       include includes/page/envelope.pug
   default
     include includes/page/default-page.pug

4. [修改]_config.butterfly.yml，新增配置项

   envelope_comment:
   enable: true #开关
   cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
   message: #信笺内容，支持多行
   - 有什么想问的？
   - 有什么想说的？
   - 有什么想吐槽的？
   - 哪怕是有什么想吃的，都可以告诉我哦~
   bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
   height: #调整信笺划出高度，默认1050px

5. [新建]留言板页面（已有的不用重复操作。）

   hexo new page comments

6. 打开\source\comments\index.md

   ---
   title: 留言板
   top_img:
   type: 'envelope'
   ---