对话框外挂标签
更新记录
2022-12-21:编写外挂标签
- 完成基本配置，电脑端样式适配
- 手机端样式适配
对话框 msgbox
- 标签语法
- 配置参数
- 样式预览
- 示例源码
{% msgbox %}
{% msgguest name,avatar %}
对话内容
{% endmsgguest %}
{% msgadmin name,avatar %}
对话内容
{% endmsgadmin %}
{% endmsgbox %}- name:对话框姓名，访客方块默认为”noname”,博主方块默认为读取hexo站点配置文件中的author作为博主名称。
- avatar：对话框头像，访客方块默认读取butterfly主题配置文件中的error_img.flink作为图片链接。博主方块默认读取butterfly主题配置文件中的avatar.img作为图片链接
本案例改编自真实事件，如有雷同，纯属巧合。
waha|blog.raiseme.net
markdown还有比typora更好用的吗?
Akilar
Atom党加一
xl
markdown我用typora
青葱|ciraosindex.top
我顶vscode
冰卡诺|zfe.one
我用石墨
冰卡诺|zfe.one
Akilar
我就知道会有这个
陈殇|blog.chen-shang.top
冰老师用铅笔？
青葱|ciraosindex.top
大佬，就是不一样
xl
大佬，就是不一样
{% 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/akilar-friends@latest/avatar/www.itciraos.cn.jpg" %}
我顶vscode
{% endmsgguest %}
{% msgguest "冰卡诺|zfe.one","https://npm.elemecdn.com/akilar-friends@latest/avatar/zfe.space.jpg" %}
我用石墨
{% endmsgguest %}
{% msgguest "冰卡诺|zfe.one","https://npm.elemecdn.com/akilar-friends@latest/avatar/zfe.space.jpg" %}
{% endmsgguest %}
{% msgadmin %}
我就知道会有这个
{% endmsgadmin %}
{% msgguest "陈殇|blog.chen-shang.top","https://npm.elemecdn.com/akilar-friends@latest/avatar/weikecc.top.jpg" %}
冰老师用铅笔？
{% endmsgguest %}
{% msgguest "青葱|ciraosindex.top","https://npm.elemecdn.com/akilar-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 %}魔改步骤
新建[Blogroot]\themes\butterfly\scripts\tag\msgbox.js,注意外挂标签是内部函数，必须放在scripts目录下才会生效，不要自作聪明放到别的目录去再inject。
/**
{% msgbox %}
{% 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">${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
</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 })
新建文件[Blogroot]\themes\butterfly\source\css\_tags\msgbox.styl:
//default color:
:root
--msgbox-name-color: #888888
--guest-font-color: #000000
--guest-background-color: #cbcbcb
--admin-font-color: #ffffff
--admin-background-color: #12b7f5
[data-theme="dark"]
--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
flex-wrap: nowrap
width: 100%
height: auto
.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
.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)本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-12-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录