This commit is contained in:
haoouba 2021-02-06 20:30:38 +08:00
parent 767426a56d
commit 0ca3af693d
4 changed files with 2686 additions and 2607 deletions

File diff suppressed because one or more lines are too long

View File

@ -1311,7 +1311,7 @@ html[data-night='night'] {
margin: 0; margin: 0;
} }
} }
a:not(.joe_detail__article-anote) { a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
display: inline-block; display: inline-block;
line-height: 26px; line-height: 26px;
color: var(--theme); color: var(--theme);
@ -1700,6 +1700,41 @@ html[data-night='night'] {
background: #3498db; background: #3498db;
} }
} }
&-abtn {
display: inline-block;
color: #fff;
height: 35px;
line-height: 35px;
padding: 0 15px;
transform-origin: 100% 0;
transform: translateZ(0);
&:hover {
animation-name: wobble-bottom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.icon {
display: inline-block;
vertical-align: top;
text-align: center;
.fa {
color: #fff;
font-size: 14px;
}
[class^='fa-'] {
margin-right: 8px;
}
}
.content {
display: inline-block;
vertical-align: top;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
} }
&__agree { &__agree {
display: flex; display: flex;
@ -2344,6 +2379,32 @@ html[data-night='night'] {
animation: none; animation: none;
} }
@keyframes wobble-bottom {
16.65% {
transform: skew(-12deg);
}
33.3% {
transform: skew(10deg);
}
49.95% {
transform: skew(-6deg);
}
66.6% {
transform: skew(4deg);
}
83.25% {
transform: skew(-2deg);
}
100% {
transform: skew(0);
}
}
@keyframes showComment { @keyframes showComment {
0% { 0% {
opacity: 0; opacity: 0;

View File

@ -104,5 +104,15 @@ function _parseContent($post, $login)
$content $content
); );
} }
/* 过滤note button */
if (preg_match('/\{abtn\s{0,}icon=".{0,}"\s{0,}color=".{0,}"\s{0,}href=".{0,}"\s{0,}radius=".{0,}"\s{0,}\}.{0,}\{\/abtn\}/sSU', $content)) {
$content = preg_replace(
'/\{abtn\s{0,}icon="(.{0,})"\s{0,}color="(.{0,})"\s{0,}href="(.{0,})"\s{0,}radius="(.{0,})"\s{0,}\}(.{0,})\{\/abtn\}/sSU',
'<a class="joe_detail__article-abtn" style="background: $2; border-radius: $4" href="$3" target="_blank" rel="noopener noreferrer nofollow">
<span class="icon"><i class="$1 fa"></i></span><span class="content">$5</span>
</a>',
$content
);
}
echo $content; echo $content;
} }

View File

@ -1,8 +1,8 @@
$(function () { $(function () {
$('#wmd-editarea textarea').attr('placeholder', '请输入文章内容...(支持图片粘贴上传)'); $('#wmd-editarea textarea').attr('placeholder', '请输入文章内容...(支持图片粘贴上传)')
$('#wmd-button-bar .wmd-edittab').remove(); $('#wmd-button-bar .wmd-edittab').remove()
$('#wmd-button-row .wmd-spacer').remove(); $('#wmd-button-row .wmd-spacer').remove()
$('#wmd-button-row #wmd-code-button').remove(); $('#wmd-button-row #wmd-code-button').remove()
/* 增加自定义功能 */ /* 增加自定义功能 */
const items = [ const items = [
@ -84,70 +84,78 @@ $(function () {
{ {
title: '便条按钮', title: '便条按钮',
id: 'wmd-anote-button', id: 'wmd-anote-button',
svg: '<svg t="1612604897877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13842" width="20" height="20"><path d="M910.222222 227.555556a113.777778 113.777778 0 0 1 113.777778 113.777777v341.333334a113.777778 113.777778 0 0 1-113.777778 113.777777H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777777V341.333333a113.777778 113.777778 0 0 1 113.777778-113.777777h796.444444z m0 56.888888H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v341.333334a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889V341.333333a56.888889 56.888889 0 0 0-56.888889-56.888889zM282.225778 369.891556c25.486222 0 45.937778 5.831111 61.326222 17.521777 15.388444 11.662222 23.096889 29.326222 23.096889 52.963556 0 14.336-3.527111 26.624-10.552889 36.835555-7.025778 10.24-17.066667 18.119111-30.065778 23.694223v0.796444c17.521778 3.697778 30.805333 12.003556 39.822222 24.888889 9.016889 12.885333 13.539556 29.013333 13.539556 48.384 0 11.150222-1.991111 21.560889-5.973333 31.260444-3.982222 9.671111-10.24 18.062222-18.716445 25.088-8.504889 7.025778-19.370667 12.600889-32.654222 16.725334-13.283556 4.124444-29.070222 6.172444-47.388444 6.172444H144.042667v-284.330666h138.183111z m345.258666 0v43.008h-90.396444V654.222222h-49.777778v-241.322666h-89.998222v-43.008h230.172444z m83.626667 0l129.820445 209.464888h0.796444v-209.464888h47.388444V654.222222H836.551111l-129.422222-209.066666h-1.194667V654.222222h-47.388444v-284.330666H711.111111zM281.827556 524.8H193.820444v88.803556h88.007112c15.132444 0 26.88-3.925333 35.242666-11.747556 8.362667-7.822222 12.544-18.915556 12.544-33.251556 0-14.08-4.181333-24.888889-12.544-32.455111-8.362667-7.566222-20.110222-11.349333-35.242666-11.349333z m-6.769778-114.289778H193.820444v78.449778H275.057778c11.946667 0 21.902222-3.384889 29.866666-10.154667s11.946667-16.526222 11.946667-29.269333c0-14.336-3.584-24.433778-10.752-30.264889-7.168-5.831111-17.521778-8.760889-31.061333-8.760889z" p-id="13843" fill="#9b9b9b"></path></svg>' svg: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M910.222222 227.555556a113.777778 113.777778 0 0 1 113.777778 113.777777v341.333334a113.777778 113.777778 0 0 1-113.777778 113.777777H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777777V341.333333a113.777778 113.777778 0 0 1 113.777778-113.777777h796.444444z m0 56.888888H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v341.333334a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889V341.333333a56.888889 56.888889 0 0 0-56.888889-56.888889zM282.225778 369.891556c25.486222 0 45.937778 5.831111 61.326222 17.521777 15.388444 11.662222 23.096889 29.326222 23.096889 52.963556 0 14.336-3.527111 26.624-10.552889 36.835555-7.025778 10.24-17.066667 18.119111-30.065778 23.694223v0.796444c17.521778 3.697778 30.805333 12.003556 39.822222 24.888889 9.016889 12.885333 13.539556 29.013333 13.539556 48.384 0 11.150222-1.991111 21.560889-5.973333 31.260444-3.982222 9.671111-10.24 18.062222-18.716445 25.088-8.504889 7.025778-19.370667 12.600889-32.654222 16.725334-13.283556 4.124444-29.070222 6.172444-47.388444 6.172444H144.042667v-284.330666h138.183111z m345.258666 0v43.008h-90.396444V654.222222h-49.777778v-241.322666h-89.998222v-43.008h230.172444z m83.626667 0l129.820445 209.464888h0.796444v-209.464888h47.388444V654.222222H836.551111l-129.422222-209.066666h-1.194667V654.222222h-47.388444v-284.330666H711.111111zM281.827556 524.8H193.820444v88.803556h88.007112c15.132444 0 26.88-3.925333 35.242666-11.747556 8.362667-7.822222 12.544-18.915556 12.544-33.251556 0-14.08-4.181333-24.888889-12.544-32.455111-8.362667-7.566222-20.110222-11.349333-35.242666-11.349333z m-6.769778-114.289778H193.820444v78.449778H275.057778c11.946667 0 21.902222-3.384889 29.866666-10.154667s11.946667-16.526222 11.946667-29.269333c0-14.336-3.584-24.433778-10.752-30.264889-7.168-5.831111-17.521778-8.760889-31.061333-8.760889z" p-id="13843" fill="#9b9b9b"></path></svg>'
},
{
title: '多彩按钮',
id: 'wmd-abtn-button',
svg: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M360 651c-74.1 0-134.3-60.3-134.3-134.3 0-74.1 60.3-134.3 134.3-134.3s134.3 60.3 134.3 134.3c0 74-60.2 134.3-134.3 134.3z m0-204.6c-38.8 0-70.3 31.5-70.3 70.3S321.2 587 360 587s70.3-31.5 70.3-70.3-31.5-70.3-70.3-70.3z" p-id="5116" fill="#9b9b9b"></path><path d="M666.9 778.9H360c-70 0-135.9-27.3-185.4-76.8S97.8 586.7 97.8 516.7s27.3-135.9 76.8-185.4S290 254.5 360 254.5h306.9c70 0 135.9 27.3 185.4 76.8s76.8 115.4 76.8 185.4-27.3 135.9-76.8 185.4-115.3 76.8-185.4 76.8zM360 318.5c-109.3 0-198.2 88.9-198.2 198.2S250.7 714.9 360 714.9h306.9c109.3 0 198.2-88.9 198.2-198.2s-88.9-198.2-198.2-198.2H360z" p-id="5117" fill="#9b9b9b"></path></svg>'
} }
]; ]
/* 用于设置插入到文章的短代码内容 */ /* 用于设置插入到文章的短代码内容 */
function getInsertTextById(id) { function getInsertTextById(id) {
let str = ''; let str = ''
switch (id) { switch (id) {
case 'wmd-hide-button': case 'wmd-hide-button':
str = `\n\n{hide}${$('#text').selectionRange() ? $('#text').selectionRange() : '回复可见'}{/hide}\n\n`; str = `\n\n{hide}${$('#text').selectionRange() ? $('#text').selectionRange() : '回复可见'}{/hide}\n\n`
break; break
case 'wmd-mlist-button': case 'wmd-mlist-button':
str = `\n\n{music-list id="网易云歌单ID" /}\n\n`; str = `\n\n{music-list id="网易云歌单ID" /}\n\n`
break; break
case 'wmd-music-button': case 'wmd-music-button':
str = `\n\n{music id="网易云音乐ID" /}\n\n`; str = `\n\n{music id="网易云音乐ID" /}\n\n`
break; break
case 'wmd-bili-button': case 'wmd-bili-button':
str = `\n\n{bilibili bvid="哔哩哔哩的Bvid" /}\n\n`; str = `\n\n{bilibili bvid="哔哩哔哩的Bvid" /}\n\n`
break; break
case 'wmd-dplayer-button': case 'wmd-dplayer-button':
str = `\n\n{dplayer src="M3U8或MP4地址" /}\n\n`; str = `\n\n{dplayer src="M3U8或MP4地址" /}\n\n`
break; break
case 'wmd-html-button': case 'wmd-html-button':
str = `\n\n!!!\n<span class="test">Hello Joe</span>\n<style>\n .test { color: #ff6800 }\n</style>\n!!!\n\n`; str = `\n\n!!!\n<span class="test">Hello Joe</span>\n<style>\n .test { color: #ff6800 }\n</style>\n!!!\n\n`
break; break
case 'wmd-title-button': case 'wmd-title-button':
str = `\n\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n`; str = `\n\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n`
break; break
case 'wmd-table-button': case 'wmd-table-button':
str = `\n\n| 左对齐 | 右对齐 | 居中对齐 |\n| :-----| ----: | :----: |\n| 单元格 | 单元格 | 单元格 |\n\n`; str = `\n\n| 左对齐 | 右对齐 | 居中对齐 |\n| :-----| ----: | :----: |\n| 单元格 | 单元格 | 单元格 |\n\n`
break; break
case 'wmd-delete-button': case 'wmd-delete-button':
str = `~~${$('#text').selectionRange() ? $('#text').selectionRange() : '删除线'}~~`; str = `~~${$('#text').selectionRange() ? $('#text').selectionRange() : '删除线'}~~`
break; break
case 'wmd-snippet-button': case 'wmd-snippet-button':
str = `\n\n\`\`\`php\necho 'Hello Joe';\n\`\`\`\n\n`; str = `\n\n\`\`\`php\necho 'Hello Joe';\n\`\`\`\n\n`
break; break
case 'wmd-code-button': case 'wmd-code-button':
str = ` \`${$('#text').selectionRange() ? $('#text').selectionRange() : '行内代码'}\` `; str = ` \`${$('#text').selectionRange() ? $('#text').selectionRange() : '行内代码'}\` `
break; break
case 'wmd-task-button': case 'wmd-task-button':
str = `{x} 任务已完成\n{ } 任务未完成`; str = `{x} 任务已完成\n{ } 任务未完成`
break; break
case 'wmd-card-button': case 'wmd-card-button':
str = `\n\n{card-default width="100%" label="卡片标题"}${$('#text').selectionRange() ? $('#text').selectionRange() : '卡片内容'}{/card-default}\n\n`; str = `\n\n{card-default width="100%" label="卡片标题"}${$('#text').selectionRange() ? $('#text').selectionRange() : '卡片内容'}{/card-default}\n\n`
break; break
case 'wmd-message-button': case 'wmd-message-button':
str = `\n\n{message type="success|info|warning|error"}${$('#text').selectionRange() ? $('#text').selectionRange() : '提示内容'}{/message}\n\n`; str = `\n\n{message type="success|info|warning|error"}${$('#text').selectionRange() ? $('#text').selectionRange() : '提示内容'}{/message}\n\n`
break; break
case 'wmd-mtitle-button': case 'wmd-mtitle-button':
str = `\n\n{mtitle}${$('#text').selectionRange() ? $('#text').selectionRange() : '居中标题'}{/mtitle}\n\n`; str = `\n\n{mtitle}${$('#text').selectionRange() ? $('#text').selectionRange() : '居中标题'}{/mtitle}\n\n`
break; break
case 'wmd-anote-button': case 'wmd-anote-button':
str = `{anote icon="Font Awesome图标" href="跳转地址" type="secondary|success|warning|error|info"}${$('#text').selectionRange() ? $('#text').selectionRange() : '便条按钮'}{/anote}`; str = `{anote icon="Font Awesome图标" href="跳转地址" type="secondary|success|warning|error|info"}${$('#text').selectionRange() ? $('#text').selectionRange() : '便条按钮'}{/anote}`
break; break
case 'wmd-abtn-button':
str = `{abtn icon="Font Awesome图标" color="颜色值" href="跳转地址" radius="圆角半圆17.5px"}${$('#text').selectionRange() ? $('#text').selectionRange() : '多彩按钮'}{/abtn}`
break
} }
return str; return str
} }
/* 此处无需修改 */ /* 此处无需修改 */
items.forEach(_ => { items.forEach(_ => {
let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`); let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`)
item.on('mousedown touchstart', () => $('#text').insertContent(getInsertTextById(_.id))); item.on('mousedown touchstart', () => $('#text').insertContent(getInsertTextById(_.id)))
$('#wmd-button-row').append(item); $('#wmd-button-row').append(item)
}); })
}); })