对话框外挂标签
2023-02-26 09:46:35 时间
更新记录
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" %}
![](/assets/1671589422883.png)
{% 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)
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023