点击查看更新记录

更新记录

2022-12-24:新增聊天框

  1. 仿照QQ样式写了个外框

2022-12-21:编写外挂标签

  1. 完成基本配置，电脑端样式适配
  2. 手机端样式适配

对话框 msgbox

1
2
3
4
5
6
7
8
{% msgbox title %}
{% msgguest name,avatar %}
对话内容
{% endmsgguest %}
{% msgadmin name,avatar %}
对话内容
{% endmsgadmin %}
{% endmsgbox %}
  1. title: 聊天窗标题
  2. name:对话框姓名，访客方块默认为”noname”,博主方块默认为读取hexo站点配置文件中的author作为博主名称。
  3. avatar：对话框头像，访客方块默认读取butterfly主题配置文件中的error_img.flink作为图片链接。博主方块默认读取butterfly主题配置文件中的avatar.img作为图片链接

本案例改编自真实事件，如有雷同，纯属巧合。

🧊测试の资源宝🍭
waha|blog.raiseme.net

markdown还有比typora更好用的吗?

测试

Atom党加一

xl

markdown我用typora

青葱|ciraosindex.top

我顶vscode

冰卡诺|zfe.one

我用石墨

冰卡诺|zfe.one

测试

我就知道会有这个

陈殇|blog.chen-shang.top

冰老师用铅笔？

青葱|ciraosindex.top

大佬，就是不一样

xl

大佬，就是不一样

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
{% msgbox "🧊测试の资源宝🍭" %}
{% msgguest "waha|blog.raiseme.net" %}
markdown还有比typora更好用的吗?
{% endmsgguest %}
{% msgadmin %}
Atom党加一
{% endmsgadmin %}
{% msgguest "xl","https://gcore.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/avatar.png" %}
markdown我用typora
{% endmsgguest %}
{% msgguest "青葱|ciraosindex.top","https://npm.elemecdn.com/测试-friends@latest/avatar/www.itciraos.cn.jpg" %}
我顶vscode
{% endmsgguest %}
{% msgguest "冰卡诺|zfe.one","https://npm.elemecdn.com/测试-friends@latest/avatar/zfe.space.jpg" %}
我用石墨
{% endmsgguest %}
{% msgguest "冰卡诺|zfe.one","https://npm.elemecdn.com/测试-friends@latest/avatar/zfe.space.jpg" %}
![](/assets/1671589422883.png)
{% endmsgguest %}
{% msgadmin %}
我就知道会有这个
{% endmsgadmin %}
{% msgguest "陈殇|blog.chen-shang.top","https://npm.elemecdn.com/测试-friends@latest/avatar/weikecc.top.jpg" %}  
冰老师用铅笔？
{% endmsgguest %}
{% msgguest "青葱|ciraosindex.top","https://npm.elemecdn.com/测试-friends@latest/avatar/www.itciraos.cn.jpg" %}
大佬，就是不一样
{% endmsgguest %}
{% msgguest "xl","https://gcore.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/avatar.png" %}
大佬，就是不一样
{% endmsgguest %}
{% endmsgbox %}

魔改步骤

  1. 新建[Blogroot]\themes\butterfly\scripts\tag\msgbox.js,注意外挂标签是内部函数，必须放在scripts目录下才会生效，不要自作聪明放到别的目录去再inject。
    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
    /**
    {% msgbox title %}
    {% msgguest name,avatar %}
    对话内容
    {% endmsgguest %}
    {% msgadmin name,avatar %}
    对话内容
    {% endmsgadmin %}
    {% endmsgbox %}
    */

    'use strict'

    const urlFor = require('hexo-util').url_for.bind(hexo)
      
    function msgbox (args, content) {
      return `<div class="msgbox"><div class="mag-box-title">${args}</div><div class="msgbox-chat-content">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div>
      <div class="mag-box-input-main"><i class="fa-solid fa-microphone"></i><input class="mag-box-input" type="text" name="fname" /><i class="fa-solid fa-face-smile"></i><i class="fa-solid fa-circle-plus"></i></div></div>`
    }

    function msgguest (args, content) {
      args = args.join(' ').split(',')
      let guestname = args[0]?args[0].trim():'noname' //默认无名
      let guestavatar = args[1]?args[1].trim():hexo.theme.config.error_img.flink //默认友链错误头像

      return `<div class="msgguest msg-main"><div class="msg-avatar-box"><img class="msg-avatar no-lightbox" title="${guestname}" src="${guestavatar}"/></div><div class="msg-content"><div class="msg-name">${guestname}</div><div class="msg-content-text">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div></div></div>`
    }
    function msgadmin (args, content) {
      args = args.join(' ').split(',')
      let adminname = args[0]?args[0].trim():hexo.config.author //默认作者
      let adminavatar = args[1]?args[1].trim():hexo.theme.config.avatar.img //默认作者头像

      return `<div class="msgadmin msg-main"><div class="msg-avatar-box"><img class="msg-avatar no-lightbox" title="${adminname}" src="${adminavatar}"/></div><div class="msg-content"><div class="msg-name">${adminname}</div><div class="msg-content-text">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}</div></div></div>`
    }


    hexo.extend.tag.register('msgbox', msgbox, { ends: true })
    hexo.extend.tag.register('msgguest', msgguest, { ends: true })
    hexo.extend.tag.register('msgadmin', msgadmin, { ends: true })
  2. 新建文件[Blogroot]\themes\butterfly\source\css\_tags\msgbox.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
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    //default color:
    :root
      --msgbox-border-color: #888888
      --msgbox-border-background: #ffffff
      --msgbox-chat-background: rgba(255,255,255,0.7)
      --msgbox-name-color: #888888
      --guest-font-color: #000000
      --guest-background-color: #cbcbcb
      --admin-font-color: #ffffff
      --admin-background-color: #12b7f5
    [data-theme="dark"]
      --msgbox-border-color: #ffffff
      --msgbox-border-background: #000000
      --msgbox-chat-background: rgba(22,22,22,0.5)
      --msgbox-name-color: #888888
      --guest-font-color: #e3e8e9
      --guest-background-color: #303646
      --admin-font-color: #ffffff
      --admin-background-color: darken(#12b7f5,0.8)

    .msgbox
      display: flex
      flex-direction: column
      border-radius: 10px;
      overflow: hidden;
      position: relative
      flex-wrap: nowrap
      width: 100%
      height: auto
      .mag-box-title
        color: var(--msgbox-border-color)
        width: 100%;
        height: 50px;
        background: var(--msgbox-border-background)
        display: flex;
        align-items: center;
        justify-content: center;
      .mag-box-input-main
        width: 100%;
        height: 50px;
        color: var(--msgbox-border-color)
        background: var(--msgbox-border-background);   
        display: flex;
        align-items: center;
        flex-direction: row;
        input.mag-box-input
          border-radius: 15px;
          height: 30px;
          width: calc(100% - 90px);
          padding: 0px 20px;
          &:focus-visible
            outline: none
        i.fa-solid
          width: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
      .msgbox-chat-content
        padding: 20px 20px
        box-shadow: 0px 0px 0.5px var(--msgbox-border-color) inset
        max-height: 50vh
        overflow-y: scroll
        background: var(--msgbox-chat-background)
        &::-webkit-scrollbar
          width: 0
        .msg-main
          width: 100%
          height: auto
          display: flex
          flex-direction: row
          flex-wrap: nowrap
          margin: 0 0 25px 0
          .msg-avatar-box
            width: 30px
            min-width: 30px
            img.msg-avatar
              border-radius: 50%
              width: 30px    
              height: 30px
              position: relative
            .img-alt
              display: none
          .msg-content
            width: 90%
            display: flex
            flex-direction: column
            flex-wrap: nowrap
            .msg-name
              font-size: 12px
              color: var(--msgbox-name-color)
              line-height: 1em
              height: 1.5em
            .msg-content-text
              border-radius: 8px
              width: auto
              max-width: calc(100% - 30px)
              padding: 5px 5px 0px 20px
              clip-path: polygon(0 15px,10px 16px,10px 5px,15px 0,100% 0,100% 100%,15px 100%,10px calc(100% - 5px),10px 25px)   
              &>p
                margin: 0 0 0!important
                img
                  border-radius: 6px
          &.msgguest
            .msg-avatar-box
              img.msg-avatar
                top: 0
                right: 0
            .msg-content
              align-items: flex-start
              .msg-name
                margin-left: 15px
              .msg-content-text
                background: var(--guest-background-color)
                color: var(--guest-font-color)
          &.msgadmin
            flex-direction: row-reverse
            .msg-avatar-box
              img.msg-avatar
                top: 0
                left: 0
            .msg-content
              align-items: flex-end
              .msg-name
                margin-right: 15px
              .msg-content-text
                background: var(--admin-background-color)
                color: var(--admin-font-color)
                padding: 5px 20px 0px 5px
                clip-path: polygon(100% 15px,calc(100% - 10px) 16px,calc(100% - 10px) 5px,calc(100% - 15px) 0,0 0,0 100%,calc(100% - 15px) 100%,calc(100% - 10px) calc(100% - 5px),calc(100% - 10px) 25px)
                max-width: calc(100% - 30px)
    @media screen and (max-width:496px)
      .msgbox
        .msgbox-chat-content
          .msg-main
            &.msgadmin
              flex-direction: row
              .msg-avatar-box
                img.msg-avatar
                  top: 0
                  right: 0
              .msg-content
                align-items: flex-start
                .msg-name
                  margin-left: 15px
                .msg-content-text
                  padding: 5px 5px 0px 20px
                  clip-path: polygon(0 15px,10px 16px,10px 5px,15px 0,100% 0,100% 100%,15px 100%,10px calc(100% - 5px),10px 25px)
                  max-width: calc(100% - 30px)