更新

assets/js/joe.short.js

@@ -91,12 +91,6 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-abtn', JoeAbtn);
-
-	/* 
-	------------------------以下未测试------------------------------------------
-	*/
-
-	/* 便条按钮 */
 	class JoeAnote extends HTMLElement {
 		constructor() {
 			super();
@@ -104,22 +98,21 @@ document.addEventListener('DOMContentLoaded', () => {
 				icon: this.getAttribute('icon') || 'fa-download',
 				href: this.getAttribute('href') || '#',
 				type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary',
-				content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标签按钮'
+				content: this.getAttribute('content') || '标签按钮'
 			};
-			this.render();
+			this.innerHTML =  `
-		}
-		get template() {
-			return `
 				<a class="joe_detail__article-anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
 					<span class="icon"><i class="fa ${this.options.icon}"></i></span><span class="content">${this.options.content}</span>
 				</a>
 			`;
 		}
-		render() {
-			this.innerHTML = this.template;
-		}
 	}
 	window.customElements.define('joe-anote', JoeAnote);
+
+	/* 
+	------------------------以下未测试------------------------------------------
+	*/
+
 	/* 点击复制 */
 	class JoeCopy extends HTMLElement {
 		constructor() {

core/factory.php

@@ -43,7 +43,7 @@ class Editor
 ?>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.min.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=20210416') ?>">
+        <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=202104161759') ?>">
         <script>
             window.JoeConfig = {
                 uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>',
@@ -56,9 +56,9 @@ class Editor
             }
         </script>
         <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.2.4/plugin/prism/prism.min.js"></script>
-        <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=20210416') ?>"></script>
+        <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=202104161759') ?>"></script>
-        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=20210416') ?>"></script>
+        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=202104161759') ?>"></script>
-        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=20210416') ?>"></script>
+        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=202104161759') ?>"></script>
 <?php
     }
 }

core/function.php

@@ -2,7 +2,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-	return "6.4.0";
+	return "6.4.2";
 };
 
 /* 判断是否是手机 */

core/short.php

@@ -28,6 +28,9 @@ function _parseContent($post, $login)
     if (strpos($content, '{abtn') !== false) {
         $content = preg_replace('/{abtn([^}]*)\/}/SU', '<joe-abtn $1></joe-abtn>', $content);
     }
+    if (strpos($content, '{anote') !== false) {
+        $content = preg_replace('/{anote([^}]*)\/}/SU', '<joe-anote $1></joe-anote>', $content);
+    }
 
 
 
@@ -52,19 +55,12 @@ function _parseContent($post, $login)
         $content = preg_replace('/{copy(.*)}/SU', '<joe-copy $1>', $content);
         $content = preg_replace('/{\/copy}/SU', '</joe-copy>', $content);
     }
-
     /* 过滤消息提示 */
     if (strpos($content, '{message') !== false) {
         $content = preg_replace('/{message(.*)}/SU', '<joe-message $1>', $content);
         $content = preg_replace('/{\/message}/SU', '</joe-message>', $content);
     }
-    /* 标签按钮 */
+    /* 时间线 */
-    if (strpos($content, '{anote') !== false) {
-        $content = preg_replace('/{anote(.*)}/SU', '<joe-anote $1>', $content);
-        $content = preg_replace('/{\/anote}/SU', '</joe-anote>', $content);
-    }
-
-    /* 多彩按钮 */
     if (strpos($content, '{timeline') !== false) {
         $content = strtr($content, array("{timeline}" => '<joe-timeline>', "{/timeline}" => '</joe-timeline>'));
         $content = strtr($content, array("{timeline-item}" => '<joe-timeline-item>', "{/timeline-item}" => '</joe-timeline-item>'));

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "typecho-joe-next",
-	"version": "6.4.0",
+	"version": "6.4.2",
 	"description": "A Theme Of Typecho",
 	"main": "index.php",
 	"keywords": [

public/include.php

@@ -38,6 +38,6 @@
 <?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?>
 	<script src="<?php $this->options->themeUrl('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script>
 <?php endif; ?>
-<script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=202104141445'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=202104161759'); ?>"></script>
-<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=20210416'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=202104161759'); ?>"></script>
 <?php $this->options->JCustomHeadEnd() ?>

typecho/write/css/joe.write.min.scss

@@ -716,6 +716,52 @@ body.fullscreen {
 	}
 }
 
+.joe_detail__article-anote {
+	position: relative;
+	display: inline-block;
+	color: #fff;
+	height: 35px;
+	line-height: 35px;
+	.icon {
+		display: inline-block;
+		vertical-align: top;
+		width: 35px;
+		height: 35px;
+		text-align: center;
+		background: rgba(0, 0, 0, 0.2);
+		.fa {
+			color: #fff;
+		}
+	}
+	.content {
+		display: inline-block;
+		vertical-align: top;
+		padding: 0 12px;
+		max-width: 200px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	&.secondary {
+		background: #34495e;
+	}
+	&.success {
+		background: #27ae60;
+	}
+	&.warning {
+		background: #f39c12;
+	}
+	&.error {
+		background: #e74c3c;
+	}
+	&.info {
+		background: #3498db;
+	}
+	&:hover {
+		color: #fff;
+	}
+}
+
 @media (max-width: 768px) {
 	.cm-modal__wrapper {
 		width: 90%;

typecho/write/js/_actions.js

@@ -513,4 +513,42 @@ export default class JoeAction {
 			}
 		});
 	}
+	handleAnote(cm) {
+		this._openModal({
+			title: '便条按钮',
+			innerHtml: `
+				<div class="fitem">
+					<label>按钮图标</label>
+					<input autocomplete="off" name="icon" placeholder="请输入fa图标，例：fa-download"/>
+				</div>
+				<div class="fitem">
+					<label>跳转链接</label>
+					<input autocomplete="off" name="href" placeholder="请输入跳转链接"/>
+				</div>
+				<div class="fitem">
+					<label>按钮类型</label>
+					<select name="type">
+						<option value="secondary" selected>secondary</option>
+						<option value="success">success</option>
+						<option value="warning">warning</option>
+						<option value="error">error</option>
+						<option value="info">info</option>
+					</select>
+				</div>
+				<div class="fitem">
+					<label>按钮内容</label>
+					<input autocomplete="off" name="content" placeholder="请输入按钮内容"/>
+				</div>
+            `,
+			confirm: () => {
+				const icon = $(".cm-modal input[name='icon']").val();
+				const href = $(".cm-modal input[name='href']").val();
+				const type = $(".cm-modal select[name='type']").val();
+				const content = $(".cm-modal input[name='content']").val();
+				const str = ` {anote icon="${icon}" href="${href}" type="${type}" content="${content}"/} `;
+				this._replaceSelection(cm, str);
+				cm.focus();
+			}
+		});
+	}
 }

typecho/write/js/_create.js

@@ -22,6 +22,7 @@ export default function createPreviewHtml(str) {
 	str = str.replace(/{music-list([^}]*)\/}/g, '<joe-mlist $1></joe-mlist>');
 	str = str.replace(/{music([^}]*)\/}/g, '<joe-music $1></joe-music>');
 	str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
+	str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
 
 	$('.cm-preview-content').html(str);
 	$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));

typecho/write/js/_tools.js

@@ -143,6 +143,11 @@ export default [
 	{
 		type: 'abtn',
 		title: '多彩按钮',
+		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M839.68 163.84a163.84 163.84 0 0 1 163.84 163.84v327.68A163.84 163.84 0 0 1 839.68 819.2H184.32A163.84 163.84 0 0 1 20.48 655.36V327.68a163.84 163.84 0 0 1 163.84-163.84h655.36zm0 81.92H184.32a81.92 81.92 0 0 0-81.715 75.776l-.205 6.144v327.68a81.92 81.92 0 0 0 75.776 81.715l6.144.205h655.36a81.92 81.92 0 0 0 81.715-75.776l.205-6.144V327.68a81.92 81.92 0 0 0-75.776-81.715l-6.144-.205z"/><path d="M347.013 483.574c1.639-1.925 3.236-4.014 4.792-6.185 6.759-11.141 10.322-24.371 10.322-39.199 0-20.808-6.799-37.806-20.111-50.463-13.435-12.656-31.785-18.964-54.6-18.964H197.96c-7.619 0-13.64 6.758-13.64 15.032v215.532c0 8.397 6.144 15.073 13.64 15.073h89.702c23.634 0 42.476-5.038 56.443-15.278 17.367-13.23 26.132-33.587 26.132-60.457 0-17.94-4.26-32.89-12.697-44.237a54.682 54.682 0 0 0-10.527-10.854zm-47.39-28.836c-1.557 1.393-6.882 4.506-20.726 4.506h-35.308v-31.417h35.84c13.025 0 18.31 2.785 20.316 4.26.697.573 2.867 2.417 2.867 10.24 0 6.308-1.228 10.65-2.99 12.41zm-56.034 63.693h40.182c14.582 0 20.644 3.195 22.815 5.038 2.826 2.457 4.3 7.373 4.3 14.623 0 7.454-2.498 10.444-6.266 12.861-3.236 1.966-9.462 4.383-21.668 4.383h-39.363V518.43zM586.26 368.64H426.27c-7.577 0-13.639 6.8-13.639 15.073v30.229c0 8.397 6.144 15.032 13.64 15.032h50.299v170.27c0 8.357 6.144 15.033 13.68 15.033H522.2c7.619 0 13.64-6.758 13.64-15.032V429.097h50.34c7.577 0 13.64-6.758 13.64-15.032v-30.27c.081-8.356-6.063-15.155-13.518-15.155zm239.862 0h-32.276c-7.619 0-13.64 6.8-13.64 15.073v108.503l-72.704-117.022a13.19 13.19 0 0 0-11.264-6.554H664.29c-7.618 0-13.64 6.8-13.64 15.073v215.532c0 8.356 6.145 15.032 13.64 15.032h31.95c7.618 0 13.639-6.758 13.639-15.032v-110.47l73.728 119.071c2.54 4.137 6.8 6.554 11.264 6.554H826c7.618 0 13.68-6.8 13.68-15.073V383.795c.082-8.356-6.062-15.155-13.517-15.155z"/></svg>'
+	},
+	{
+		type: 'anote',
+		title: '便条按钮',
 		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M856.73 796.7h-690c-57.9 0-105-47.1-105-105v-360c0-57.9 47.1-105 105-105h690c57.9 0 105 47.1 105 105v360c0 57.89-47.1 105-105 105zm-690-500.01c-19.3 0-35 15.7-35 35v360c0 19.3 15.7 35 35 35h690c19.3 0 35-15.7 35-35v-360c0-19.3-15.7-35-35-35h-690z"/><path d="M233.16 431.69H790.3v160H233.16z"/></svg>'
 	},
 	/* --------------------------- 短代码结束 --------------------------- */

typecho/write/js/joe.write.js

@@ -283,6 +283,9 @@ class Joe extends JoeAction {
 						case 'abtn':
 							super.handleAbtn(this.cm);
 							break;
+						case 'anote':
+							super.handleAnote(this.cm);
+							break;
 					}
 				});
 				$('.cm-tools').append(el);