添加信笺留言功能

效果预览

魔改步骤

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'

4. when 'envelope'
5. include includes/page/envelope.pug
   default
   include includes/page/default-page.pug

4. [修改]\_config.butterfly.yml，新增配置项
```Yml
envelope_comment:
  enable: true #开关
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
  message: #信笺内容，支持多行
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
  height: #调整信笺划出高度，默认1050px
```
5. [新建]留言板页面（已有的不用重复操作。）
```bash
hexo new page comments
```
6. 打开\source\comments\index.md
```MARKDOWN
---
title: 留言板
top_img:
type: 'envelope'
---