更新

assets/css/joe.global.min.scss

@@ -2220,6 +2220,11 @@
 				}
 			}
 		}
+		&-dotted {
+			width: 100%;
+			height: 2px;
+			background-size: 80px;
+		}
 	}
 	&__agree {
 		display: flex;

assets/js/joe.short.js

@@ -108,6 +108,17 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
     window.customElements.define('joe-anote', JoeAnote);
+    class JoeDotted extends HTMLElement {
+        constructor() {
+            super();
+            this.startColor = this.getAttribute('startColor') || '#ff6c6c';
+            this.endColor = this.getAttribute('endColor') || '#1989fa';
+            this.innerHTML = `
+				<div class="joe_detail__article-dotted" style="background-image: repeating-linear-gradient(-45deg, ${this.startColor} 0, ${this.startColor} 20%, transparent 0, transparent 25%, ${this.endColor} 0, ${this.endColor} 45%, transparent 0, transparent 50%)"></div>
+			`;
+        }
+    }
+    window.customElements.define('joe-dotted', JoeDotted);
 
     /* 
 	------------------------以下未测试------------------------------------------

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=202104161759') ?>">
+        <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=20200417') ?>">
         <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=202104161759') ?>"></script>
+        <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=20200417') ?>"></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.parse.min.js?v=20200417') ?>"></script>
-        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=202104161759') ?>"></script>
+        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=20200417') ?>"></script>
 <?php
     }
 }

core/function.php

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

core/short.php

@@ -31,6 +31,9 @@ function _parseContent($post, $login)
     if (strpos($content, '{anote') !== false) {
         $content = preg_replace('/{anote([^}]*)\/}/SU', '<joe-anote $1></joe-anote>', $content);
     }
+    if (strpos($content, '{dotted') !== false) {
+        $content = preg_replace('/{dotted([^}]*)\/}/SU', '<joe-dotted $1></joe-dotted>', $content);
+    }
 
 
 

package.json

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

public/include.php

@@ -18,7 +18,7 @@
 <?php endif; ?>
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.mode.min.css'); ?>">
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.min.css'); ?>">
-<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=20210414'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=20200417'); ?>">
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.min.css'); ?>">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/qmsg/qmsg.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@@ -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=202104161759'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=20200417'); ?>"></script>
-<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=202104161759'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=20200417'); ?>"></script>
 <?php $this->options->JCustomHeadEnd() ?>

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

@@ -762,6 +762,12 @@ body.fullscreen {
     }
 }
 
+.joe_detail__article-dotted {
+    width: 100%;
+    height: 2px;
+    background-size: 80px;
+}
+
 @media (max-width: 768px) {
     .cm-modal__wrapper {
         width: 90%;

typecho/write/js/_actions.js

@@ -484,6 +484,10 @@ export default class JoeAction {
 					<label>按钮图标</label>
 					<input autocomplete="off" name="icon" placeholder="请输入fa图标，例：fa-download"/>
 				</div>
+				<div class="fitem">
+					<label>图标大全</label>
+					<a href="https://fontawesome.dashgame.com" target="_blank">fontawesome.dashgame.com</a>
+				</div>
 				<div class="fitem">
 					<label>按钮颜色</label>
 					<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#ff6800" name="color" type="color"/>
@@ -521,6 +525,10 @@ export default class JoeAction {
 					<label>按钮图标</label>
 					<input autocomplete="off" name="icon" placeholder="请输入fa图标，例：fa-download"/>
 				</div>
+				<div class="fitem">
+					<label>图标大全</label>
+					<a href="https://fontawesome.dashgame.com" target="_blank">fontawesome.dashgame.com</a>
+				</div>
 				<div class="fitem">
 					<label>跳转链接</label>
 					<input autocomplete="off" name="href" placeholder="请输入跳转链接"/>
@@ -551,4 +559,27 @@ export default class JoeAction {
             }
         });
     }
+    handleDotted(cm) {
+        this._openModal({
+            title: '彩色虚线',
+            innerHtml: `
+				<div class="fitem">
+					<label>开始颜色</label>
+					<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#ff6c6c" name="startColor" type="color"/>
+				</div>
+				<div class="fitem">
+					<label>结束颜色</label>
+					<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#1989fa" name="endColor" type="color"/>
+				</div>
+            `,
+            confirm: () => {
+                const startColor = $(".cm-modal input[name='startColor']").val();
+                const endColor = $(".cm-modal input[name='endColor']").val();
+                const str = `\n{dotted startColor="${startColor}" endColor="${endColor}"/}\n\n`;
+                if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
+                else this._replaceSelection(cm, str);
+                cm.focus();
+            }
+        });
+    }
 }

typecho/write/js/_create.js

@@ -23,6 +23,7 @@ export default function createPreviewHtml(str) {
 	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>');
+	str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
 
 	$('.cm-preview-content').html(str);
 	$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));

typecho/write/js/_tools.js

@@ -150,6 +150,11 @@ export default [
 		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>'
 	},
+	{
+		type: 'dotted',
+		title: '彩色虚线',
+		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M111.09 562.26a42.6 42.6 0 1 1 0-85.19h127.78a42.6 42.6 0 0 1 0 85.19zm340.75-3a42.59 42.59 0 1 1 0-85.18h127.78a42.59 42.59 0 1 1 0 85.18zm340.75 0a42.59 42.59 0 0 1 0-85.18h127.79a42.59 42.59 0 1 1 0 85.18zm0 0"/></svg>'
+	},
 	/* --------------------------- 短代码结束 --------------------------- */
 	{
 		type: 'clean',

typecho/write/js/joe.write.js

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