引用站外地址，不保证站点的可用性和安全性
信笺样式留言板
Akilar

效果预览

魔改步骤

npm插件安装(推荐)

  1. 终端运行命令
    1
    npm install hexo-butterfly-envelope --save
  2. 主题配置文件中，添加以下配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    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
    ```DIFF
    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，新增配置项
    ```Yml
    envelope_comment:
      enable: true #开关
      cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
      message: #信笺内容，支持多行
        - 有什么想问的？
        - 有什么想说的？
        - 有什么想吐槽的？
        - 哪怕是有什么想吃的，都可以告诉我哦~
      bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
      height: #调整信笺划出高度，默认1050px
  3. [新建]留言板页面（已有的不用重复操作。）
    1
    hexo new page comments
  4. 打开\source\comments\index.md
    1
    2
    3
    4
    5
    ---
    title: 留言板
    top_img:
    type: 'envelope'
    ---