《优化》Typecho-handsome主题下实现评论一键打卡、赞、踩功能并集成图片上传功能

2023-07-29 01:11:03 浏览数 (4)

注意:本教程仅在 handsome 主题下通过测试,其它平台请自行 DIY 。

根据网友教程基础进行修改

网友版本bug/不足点

  1. 按钮不是固定的,点击后按钮消失
  2. 固定输出语句,不能自定义

修改内容:

  1. 增加随机语录
  2. 随机输出文字,不是固定语句
  3. 固定按钮始终在页面上显示,不会因点击后消失
  4. 增加图片上传链接、插入图片自动返回img链接到评论框(方法来自陶小桃),文章了做整合。
  • 效果展示

在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:

代码语言:txt复制
<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED,用于存放编辑器功能

// ... (existing code)

// 定义一个函数 a,用于在文本框中插入文字
function a(a, b, c) {
  if (document.selection) {
    a.focus();
    sel = document.selection.createRange();
    c ? (sel.text = b   sel.text   c) : (sel.text = b);
    a.focus();
  } else if (a.selectionStart || "0" == a.selectionStart) {
    var l = a.selectionStart;
    var m = a.selectionEnd;
    var n = m;
    c
      ? (a.value =
          a.value.substring(0, l)   b   a.value.substring(l, m)   c   a.value.substring(m, a.value.length))
      : (a.value = a.value.substring(0, l)   b   a.value.substring(m, a.value.length));
    c ? (n  = b.length   c.length) : (n  = b.length - m   l);
    l == m && c && (n -= c.length);
    a.focus();
    a.selectionStart = n;
    a.selectionEnd = n;
  } else {
    a.value  = b   c;
    a.focus();
  }
}

window.SIMPALED.Editor = {
 daka: function() {
    var b = new Date().toLocaleTimeString();
    var c = document.getElementById("comment") || 0;
    a(c, "滴!学生卡!打卡时间:"   b, ",请上车的乘客系好安全带~<br>");

    // 将光标移到文本最后
    if (c.setSelectionRange) {
      var len = c.value.length;
      c.setSelectionRange(len, len);
      c.focus();
    } else if (c.createTextRange) {
      var range = c.createTextRange();
      range.collapse(false);
      range.select();
      c.focus();
    }
  },

  zan: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 这篇文章展现了作者深邃的思想和独特的观点,令人赞叹不已。 ::coolapk:96:: <br>",
      " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动,实在值得赞美。 ::coolapk:96:: <br>",
      " 作者以敏锐的洞察力和真挚的情感,将文字融为一体,这种写作技巧令人赞赏。 ::coolapk:96:: <br>",
      " 这篇文章展现了作者的才华和学识,无不让人对其赞美有加。 ::coolapk:96:: <br>",
      " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ::coolapk:96:: <br> ",
      " 作者的文字流畅而富有节奏感,令人为之倾倒,实在是一篇令人赞美的佳作。 ::coolapk:96:: <br>",
      " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::coolapk:96:: <br>",
      " 这篇文章的独到见解和新颖观点,让人对作者的创意赞美有加。 ::coolapk:96:: <br>",
      " 作者运用生动的比喻和细腻的描写,让读者仿佛身临其境,实在是一种令人赞美的写作艺术。 ::coolapk:96:: <br>",
      " 这篇文章的深情笔触和真挚感受让人深深感叹,实在是一篇值得赞美的美文。 ::coolapk:96:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  cai: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 我是来替大家批评博主的,我是来批评的,这篇文章的结构有点混乱,需要更好地组织和展开内容。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,作者的表达能力有待提高,有些地方表述不够清晰,读者可能会感到困惑。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,文章的语法错误较多,建议仔细检查并进行修改。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,内容有些空洞,需要更多具体的例子或细节来支撑观点。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,文章缺乏逻辑,有些段落之间的衔接不够自然。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,作者的观点没有充分论证,需要更多的证据和理由来支持主张。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,文章中出现了一些拼写错误和用词不当的情况,建议进行仔细校对。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,语言表达过于简单,可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,这篇文章的主题不够突出,需要更好地明确中心思想。博主多多像我学习啊! ::dunjiao:315:: <br>",
      " 我是来替大家批评博主的,文章缺乏吸引人的开头,建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊! ::dunjiao:315:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  yulu: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 有你在的日子才是我的日常。 ::dunjiao:302:: <br>",
      " 夹在我女友与前女友与青梅竹马间的果然是修罗场! ::dunjiao:302:: <br>",
      " 既然如此,就再努力一次吧。别在这里愁眉不展,也不要再自欺欺人,重新来过! ::dunjiao:302:: <br>",
      " 比自己,比梦想更重要的东西永远都存在着... ::dunjiao:302:: <br>",
      " 嘛,那又怎么样呢? ::dunjiao:302:: <br>",
      " 自身不先改变的话,一切都不会改变。 ::dunjiao:302:: <br>",
      " 比起有一百个朋友,不如有个比一百人还要重要的真心朋友。 ::dunjiao:302:: <br>",
      " 我有在反省,但我不后悔。 ::dunjiao:302:: <br>",
      " 要超越过去与悲伤,用坚强和笑容去开拓明天。 ::dunjiao:302:: <br>",
      " 男人许下的诺言就一定要遵守。 ::dunjiao:302:: <br>",
      " 没有回忆就去创造回忆,没有道路就去开辟道路。 ::dunjiao:302:: <br>",
      " 我敬你是条汉子! ::dunjiao:302:: <br>",
      " 不相信自己的人,连努力的价值都没有。 ::dunjiao:302:: <br>",
      " 微风摇曳着窗帘,夕阳斜射入教室,在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友,不行吗?」 ::dunjiao:302:: <br>",
      " 就算是沉落地面的太阳,只要夜晚过了一定会再度升起,不管有什么痛苦或难过的事,跟今天截然不同的明天也一定会到来。 ::dunjiao:302:: <br>",
      " 我的腿让我停下,可是心却不允许我那么做。 ::dunjiao:302:: <br>",
      " 生活就像超级女生,走到最后的都是纯爷们。 ::dunjiao:302:: <br>",
      " 我要拼,装上假牙也要拼! ::dunjiao:302:: <br>",
      " 想要成为无论多么悲伤的时候,也能够漂亮微笑的人吧。 ::dunjiao:302:: <br>",
      " 人们只是用好人来称呼对自己有用的人而以,不存在对所有人都有用的人。 ::dunjiao:302:: <br>",
      " 烈焰中舞动的火花,将赐予邪恶异性交往以天罚。 ::dunjiao:302:: <br>",
      " 无论乌云有多浓厚,星星也一定还在,只是暂时看不到了而已。 ::dunjiao:302:: <br>",
      " 不相信人咬不到肚脐的,咬破肚脐去死如何? ::dunjiao:302:: <br>",
      " 人一生会遇到约万人,两个人相爱的概率是.。所以你不爱我,我不怪你。 ::dunjiao:302:: <br>",
      " 不管看到什么样的过去,都请不要迷失自己,不管你变成什么样子,我都是你的同伴。 ::dunjiao:302:: <br>",
      " 心,可是很重的。 ::dunjiao:302:: <br>",
      " 我爱上的人,称我为怪叔叔 ::dunjiao:302:: <br>",
      " 慕君之心,至死方休。 ::dunjiao:302:: <br>",
      " 虚伪的眼泪,会伤害别人,虚伪的笑容,会伤害自己。 ::dunjiao:302:: <br>",
      " 若隐若现才是艺术! ::dunjiao:302:: <br>",
      " 生我何用?不能欢笑。灭我何用?不减狂骄。 ::dunjiao:302:: <br>",
      " 就是因为你不好,才要留在你身边,给你幸福。 ::dunjiao:302:: <br>",
      " 呐,我们好像是,被宇宙和地球拆散的恋人似的。 ::dunjiao:302:: <br>",
      " 你会梦游,我会磨牙,我们晚上一起去吓人吧! ::dunjiao:302:: <br>",
      " 或许只需一滴露水,便能守护这绽放的花朵。 ::dunjiao:302:: <br>",
      " 自己永远是孤单的,但你可以让其他人变得不孤单。 ::dunjiao:302:: <br>",
      " 和哥哥的便当比起来夜空的薯片就像大便一样!只会给我大便的大便夜空是笨蛋~笨蛋~ ::dunjiao:302:: <br>",
      " 我手中的魔法,是守护挚爱的力量,是坚定这个信念所必须的力量,我一定会拯救你的,无论在何时、何地。 ::dunjiao:302:: <br>",
      " 要改变别人的心真是件很难办的事,不过改变自己要容易一点。 ::dunjiao:302:: <br>",
      " 风筝的线你随时可以放开,只是别盼望我会回来。 ::dunjiao:302:: <br>",
      " 与你的生命等价的东西,这个世界上根本没有。 ::dunjiao:302:: <br>",
      " 君子可寓意于物,但不可留意于物。 ::dunjiao:302:: <br>",
      " 最好的感觉,是有人懂你的欲言又止。 ::dunjiao:302:: <br>",
      " 看似美好的东西,往往藏着陷阱。 ::dunjiao:302:: <br>",
      " 爱,其实很简单,困难的是去接受它。 ::dunjiao:302:: <br>",
      " 喜欢大胸只是本能,喜欢贫乳才是审美。 ::dunjiao:302:: <br>",
      " 二次元什么的我本来是不感冒的,直到我的膝盖中了一箭。 ::dunjiao:302:: <br>",
      " 你才是⑨!你全家都是⑨! ::dunjiao:302:: <br>",
      " 努力是不会背叛自己的,虽然梦想有时会背叛自己。 ::dunjiao:302:: <br>",
      " 面对就好,去经历就好。 ::dunjiao:302:: <br>",
      " 我从小就害怕虫子 ::dunjiao:302:: <br>",
      " 做不到的话,不过就是一死 。但是,赢了就能活下去,要是不战斗就赢不了。 ::dunjiao:302:: <br>",
      " 既然认准这条路,何必去打听要走多久。 ::dunjiao:302:: <br>",
      " 研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。 ::dunjiao:302:: <br>",
      " 少年心意,一如明月松间的青石流水,那些年里看到了,却不懂。 ::dunjiao:302:: <br>",
      " 明明只是活着,哀伤却无处不在⋯⋯ ::dunjiao:302:: <br>",
      " 少罗嗦,你还不如虫子呢! ::dunjiao:302:: <br>",
      " 天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。 ::dunjiao:302:: <br>",
      " 别人恋爱不成功,你连暗恋都不成功! ::dunjiao:302:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
};

代码内::dunjiao:302:: ::coolapk:96:: ::dunjiao:315::等是表情文件,根据自己的表情内容修改,文字内容是随机输出的,也可以根据自己喜欢更改。

增加上传图片功能

基于chevereto图床插件

关于什么是chevereto,其实就是一个图床系统,路过图床、遇见图床都是基于这个框架。

相关插件的使用说明可以阅读官方使用文档:Popup Upload Plugin-官方说明文档

如果是handsome主题,你可以直接在主题的开发者设置——>自定义 JavaScript里面插入以下代码:

(需要注意的是,这段代码是经过优化的,而不是原生的pup.js代码。当然封装这段代码是更加正确的做法!)

代码下面提供已封装的js文件

代码语言:txt复制
chevereto();
var isTrigger = false;
function chevereto(){
    (function() {
        for (var t = {
            defaultSettings: {
                    url: "https://imgloc.com/upload",
                    vendor: "auto",
                    mode: "manual",
                    lang: "auto",
                    autoInsert: "html-embed",
                    palette: "clear",
                    init: "onload",
                    containerClass: 1,
                    buttonClass: 1,
                    sibling: 0,
                    siblingPos: "after",
                    fitEditor: 0,
                    observe: 0,
                    observeCache: 1,
                    html: '<div class="�lass"><button %x class="�lass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button></div>',
                    css: ".�lass{display:inline-block;margin-top:5px;margin-bottom:5px}.�lass{line-height:normal;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;outline:0;color:%2;border:none;cursor:pointer;border:1px solid rgba(0,0,0,.15);background:%1;border-radius:.2em;padding:.5em 1em;font-size:12px;font-weight:700;text-shadow:none}.�lass:hover{background:%3;color:%4;border-color:rgba(0,0,0,.1)}.%iClass,.%tClass{display:inline-block;vertical-align:middle}.%iClass svg{display:block;width:1em;height:1em;fill:currentColor}.%tClass{margin-left:.25em}"
            },
            ns: {
                    plugin: "chevereto-pup"
            },
            palettes: {
            default:
                    ["#ececec", "#333", "#2980b9", "#fff"],
                    clear: ["inherit", "inherit", "inherit", "#2980b9"],
                    turquoise: ["#16a085", "#fff", "#1abc9c", "#fff"],
                    green: ["#27ae60", "#fff", "#2ecc71", "#fff"],
                    blue: ["#2980b9", "#fff", "#3498db", "#fff"],
                    purple: ["#8e44ad", "#fff", "#9b59b6", "#fff"],
                    darkblue: ["#2c3e50", "#fff", "#34495e", "#fff"],
                    yellow: ["#f39c12", "#fff", "#f1c40f", "#fff"],
                    orange: ["#d35400", "#fff", "#e67e22", "#fff"],
                    red: ["#c0392b", "#fff", "#e74c3c", "#fff"],
                    grey: ["#ececec", "#000", "#e0e0e0", "#000"],
                    black: ["#333", "#fff", "#666", "#fff"]
            },
            classProps: ["button", "container"],
            iconSvg: '<svg class="%iClass" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M76.7 87.5c12.8 0 23.3-13.3 23.3-29.4 0-13.6-5.2-25.7-15.4-27.5 0 0-3.5-0.7-5.6 1.7 0 0 0.6 9.4-2.9 12.6 0 0 8.7-32.4-23.7-32.4 -29.3 0-22.5 34.5-22.5 34.5 -5-6.4-0.6-19.6-0.6-19.6 -2.5-2.6-6.1-2.5-6.1-2.5C10.9 25 0 39.1 0 54.6c0 15.5 9.3 32.7 29.3 32.7 2 0 6.4 0 11.7 0V68.5h-13l22-22 22 22H59v18.8C68.6 87.4 76.7 87.5 76.7 87.5z" style="fill: currentcolor;"/></svg>',
            l10n: {
                    ar: "تحميل الصور",
                    cs: "Nahrát obrázky",
                    da: "Upload billeder",
                    de: "Bilder hochladen",
                    es: "Subir imágenes",
                    fi: "Lataa kuvia",
                    fr: "Importer des images",
                    id: "Unggah gambar",
                    it: "Carica immagini",
                    ja: "画像をアップロード",
                    nb: "Last opp bilder",
                    nl: "Upload afbeeldingen",
                    pl: "Wyślij obrazy",
                    pt_BR: "Enviar imagens",
                    ru: "Загрузить изображения",
                    tr: "Resim Yukle",
                    uk: "Завантажити зображення",
                    zh_CN: "上传图片",
                    zh_TW: "上傳圖片"
            },
            vendors: {
            default:
                    {
                            check:
                            function() {
                                    return 1
                            },
                            getEditor: function() {
                                    var t = {
                                            textarea: {
                                                    name: ["recaptcha", "search", "recipients", "coppa", "^comment_list", "username_list", "add"]
                                            },
                                            ce: {
                                                    dataset: ["gramm"]
                                            }
                                    },
                                    e = ["~", "|", "^", "$", "*"],
                                    i = {};
                                    for (var s in t) {
                                            i[s] = "";
                                            var n = t[s];
                                            for (var r in n) for (var o = 0; o < n[r].length; o  ) {
                                                    var a = "",
                                                    l = n[r][o],
                                                    d = l.charAt(0);
                                                    e.indexOf(d) > -1 && (a = d, l = l.substring(1)),
                                                    i[s]  = ":not(["   ("dataset" == r ? "data-"   l: r   a   '="'   l   '"')   "])"
                                            }
                                    }
                                    return document.querySelectorAll('[contenteditable=""]'   i.ce   ',[contenteditable="true"]'   i.ce   ",textarea:not([readonly])"   i.textarea)
                            }
                    }     
            },
            generateGuid: function() {
                    var t = (new Date).getTime();
                    return "undefined" != typeof performance && "function" == typeof performance.now && (t  = performance.now()),
                    "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,
                    function(e) {
                            var i = (t   16 * Math.random()) % 16 | 0;
                            return t = Math.floor(t / 16),
                            ("x" === e ? i: 3 & i | 8).toString(16)
                    })
            },
            getNewValue: function(t, e) {
                    var i = "string" != typeof t.getAttribute("contenteditable") ? "value": "innerHTML",
                    s = "value" == i ? "n": "<br>",
                    n = t[i],
                    r = e,
                    o = !1;
                    if (o && (r = String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")), 0 == n.length) return r;
                    var a = "",
                    l = n.match(/n $/g),
                    d = l ? l[0].split("n").length: 0;
                    if (d <= 2) {
                            var u = 0 == d ? 2 : 1;
                            a  = s.repeat(u)
                    }
                    return a   r
            },
            insertTrigger: function() {
                    var t, e = this.vendors[this.settings.vendor],
                    i = this.settings.sibling ? document.querySelectorAll(this.settings.sibling   ":not(["   this.ns.dataPlugin   "])")[0] : 0;
                    if ("auto" == this.settings.mode) t = this.vendors[e.hasOwnProperty("getEditor") ? this.settings.vendor: "default"].getEditor();
                    else {
                            for (var s = document.querySelectorAll("["   this.ns.dataPluginTrigger   "][data-target]:not(["   this.ns.dataPluginId   "])"), n = [], r = 0; r < s.length; r  ) n.push(s[r].dataset.target);
                            n.length > 0 && (t = document.querySelectorAll(n.join(",")))
                    }
                    if (t) {
                            if (!document.getElementById(this.ns.pluginStyle) && this.settings.css) {
                                    var o = document.createElement("style"),
                                    a = this.settings.css;
                                    a = this.appyTemplate(a),
                                    o.type = "text/css",
                                    o.innerHTML = a.replace(/%p/g, "."   this.ns.plugin),
                                    o.setAttribute("id", this.ns.pluginStyle),
                                    document.body.appendChild(o)
                            }
                            t instanceof NodeList || (t = [t]);
                            var l = 0;
                            for (r = 0; r < t.length; r  ) if (!t[r].getAttribute(this.ns.dataPluginTarget)) {
                                    var d = i || t[r];
                                    d.setAttribute(this.ns.dataPlugin, "sibling"),
                                    d.insertAdjacentHTML({
                                            before: "beforebegin",
                                            after: "afterend"
                                    } [this.settings.siblingPos], this.appyTemplate(this.settings.html));
                                    var u = d.parentElement.querySelector("["   this.ns.dataPluginTrigger   "]");
                                    this.setBoundId(u, t[r]),
                                    l  
                            }
                            this.triggerCounter = l,
                            "function" == typeof e.callback && e.callback.call()
                    }
                    isTrigger = true;
            },
            appyTemplate: function(t) {
                    if (!this.cacheTable) {
                            var e = [{
                                    "%iconSvg": this.iconSvg
                            },
                            {
                                    "%text": this.settings.langString
                            }];
                            if (this.palette) {
                                    for (var i = /%(d )/g,
                                    s = i.exec(t), n = []; null !== s;) - 1 == n.indexOf(s[1]) && n.push(s[1]),
                                    s = i.exec(t);
                                    if (n) {
                                            n.sort(function(t, e) {
                                                    return e - t
                                            });
                                            this.vendors[this.settings.vendor];
                                            for (var r = 0; r < n.length; r  ) {
                                                    var o = n[r] - 1,
                                                    a = this.palette[o] || "";
                                                    a || "default" === this.settings.vendor || "default" === this.settings.palette || (a = this.palette[o - 2]);
                                                    var l = {};
                                                    l["%"   n[r]] = a,
                                                    e.push(l)
                                            }
                                    }
                            }
                            var d = this.settings.buttonClass || this.ns.plugin   "-button",
                            u = [{
                                    "�lass": this.settings.containerClass || this.ns.plugin   "-container"
                            },
                            {
                                    "�lass": d
                            },
                            {
                                    "%iClass": d   "-icon"
                            },
                            {
                                    "%tClass": d   "-text"
                            },
                            {
                                    "%x": this.ns.dataPluginTrigger
                            },
                            {
                                    "%p": this.ns.plugin
                            }];
                            for (r = 0; r < u.length; r  ) e.push(u[r]);
                            this.cacheTable = e
                    }
                    return this.strtr(t, this.cacheTable)
            },
            strtr: function(t, e) {
                    t = t.toString();
                    if (!t || void 0 === e) return t;
                    for (var i = 0; i < e.length; i  ) {
                            var s = e[i];
                            for (var n in s) void 0 !== s[n] && (re = new RegExp(n, "g"), t = t.replace(re, s[n]))
                    }
                    return t
            },
            setBoundId: function(t, e) {
                    var i = this.generateGuid();
                    t.setAttribute(this.ns.dataPluginId, i),
                    e.setAttribute(this.ns.dataPluginTarget, i)
            },
            openPopup: function(t) {
                    if ("string" == typeof t) {
                            var e = this;
                            if (void 0 === this.popups && (this.popups = {}), void 0 === this.popups[t]) {
                                    this.popups[t] = {};
                                    var i = {
                                            l: null != window.screenLeft ? window.screenLeft: screen.left,
                                            t: null != window.screenTop ? window.screenTop: screen.top,
                                            w: window.innerWidth ? window.innerWidth: document.documentElement.clientWidth ? document.documentElement.clientWidth: screen.width,
                                            h: window.innerHeight ? window.innerHeight: document.documentElement.clientHeight ? document.documentElement.clientHeight: screen.height
                                    },
                                    s = {
                                            w: 720,
                                            h: 690
                                    },
                                    n = {
                                            w: .5,
                                            h: .85
                                    };
                                    for (var r in s) s[r] / i[r] > n[r] && (s[r] = i[r] * n[r]);
                                    var o = {
                                            l: Math.trunc(i.w / 2 - s.w / 2   i.l),
                                            t: Math.trunc(i.h / 2 - s.h / 2   i.t)
                                    };
                                    this.popups[t].window = window.open(this.settings.url, t, "width="   s.w   ",height="   s.h   ",top="   o.t   ",left="   o.l),
                                    this.popups[t].timer = window.setInterval(function() {
                                            e.popups[t].window && !1 === e.popups[t].window.closed || (window.clearInterval(e.popups[t].timer), e.popups[t] = void 0)
                                    },
                                    200)
                            } else this.popups[t].window.focus()
                    }
            },
            postSettings: function(t) {
                    this.popups[t].window.postMessage({
                            id: t,
                            settings: this.settings
                    },
                    this.settings.url)
            },
            liveBind: function(t, e, i) {
                    document.addEventListener(e,
                    function(e) {
                            var s = document.querySelectorAll(t);
                            if (s) {
                                    for (var n = e.target,
                                    r = -1; n && -1 === (r = Array.prototype.indexOf.call(s, n));) n = n.parentElement;
                                    r > -1 && (e.preventDefault(), i.call(e, n))
                            }
                    },
                    !0)
            },
            prepare: function() {
                    var t = this;
                    this.ns.dataPlugin = "data-"   this.ns.plugin,
                    this.ns.dataPluginId = this.ns.dataPlugin   "-id",
                    this.ns.dataPluginTrigger = this.ns.dataPlugin   "-trigger",
                    this.ns.dataPluginTarget = this.ns.dataPlugin   "-target",
                    this.ns.pluginStyle = this.ns.plugin   "-style",
                    this.ns.selDataPluginTrigger = "["   this.ns.dataPluginTrigger   "]";
                    var e = document.currentScript || document.getElementById(this.ns.plugin   "-src");
                    e ? e.dataset.buttonTemplate && (e.dataset.html = e.dataset.buttonTemplate) : e = {
                            dataset: {}
                    };
                    var i = 0;
                    for (var s in this.settings = {},
                    this.defaultSettings) {
                            var n = e && e.dataset[s] ? e.dataset[s] : this.defaultSettings[s];
                            "1" !== n && "0" !== n || (n = "true" == n),
                            "string" == typeof n && this.classProps.indexOf(s.replace(/Class$/, "")) > -1 && (i = 1),
                            this.settings[s] = n
                    }
                    if ("auto" == this.settings.vendor) for (var s in this.settings.vendor = "default",
                    this.settings.fitEditor = 0,
                    this.vendors) if ("default" != s && void 0 !== window[this.vendors[s].check]) {
                            this.settings.vendor = s;
                            break
                    }
                    var r = ["lang", "url", "vendor", "target"];
                    "default" == this.settings.vendor && (this.vendors.
            default.settings = {});
                    var o = this.vendors[this.settings.vendor];
                    if (o.settings) for (var s in o.settings) e && e.dataset.hasOwnProperty(s) || (this.settings[s] = o.settings[s]);
                    else for (var s in o.settings = {},
                    this.defaultSettings) - 1 == r.indexOf(s) && (o.settings[s] = this.defaultSettings[s]);
                    if ("default" !== this.settings.vendor) if (o.settings.hasOwnProperty("fitEditor") || e.dataset.hasOwnProperty("fitEditor") || (this.settings.fitEditor = 1), this.settings.fitEditor) i = !o.settings.css;
                    else {
                            r = ["autoInsert", "observe", "observeCache"];
                            for (var s in o.settings) - 1 != r.indexOf(s) || e.dataset.hasOwnProperty(s) || (this.settings[s] = this.defaultSettings[s])
                    }
                    if (i) this.settings.css = "";
                    else {
                            this.settings.css = this.settings.css.replace("�faultCSS", this.defaultSettings.css),
                            o.settings.extracss && this.settings.css && (this.settings.css  = o.settings.extracss);
                            var a = this.settings.palette.split(",");
                            a.length > 1 ? this.palette = a: this.palettes.hasOwnProperty(a) || (this.settings.palette = "default"),
                            this.palette || (this.palette = (this.settings.fitEditor && o.palettes && o.palettes[this.settings.palette] ? o: this).palettes[this.settings.palette])
                    }
                    for (var l = this.classProps,
                    d = 0; d < l.length; d  ) {
                            var u = l[d]   "Class";
                            "string" != typeof this.settings[u] && (this.settings[u] = this.ns.plugin   "-"   l[d], this.settings.fitEditor && (this.settings[u]  = "--"   this.settings.vendor))
                    }
                    var c = ("auto" == this.settings.lang ? navigator.language || navigator.userLanguage: this.settings.lang).replace("-", "_");
                    this.settings.langString = "Upload images";
                    var g = c in this.l10n ? c: c.substring(0, 2) in this.l10n ? c.substring(0, 2) : null;
                    g && (this.settings.langString = this.l10n[g]);
                    var h = document.createElement("a");
                    h.href = this.settings.url,
                    this.originUrlPattern = "^"   (h.protocol   "//"   h.hostname).replace(/./g, "\.").replace(///g, "\/")   "$";
                    var f = document.querySelectorAll(this.ns.selDataPluginTrigger   "[data-target]");
                    if (f.length > 0) for (d = 0; d < f.length; d  ) {
                            var p = document.querySelector(f[d].dataset.target);
                            this.setBoundId(f[d], p)
                    }
                    if (this.settings.observe) {
                            var b = this.settings.observe;
                            this.settings.observeCache && (b  = ":not(["   this.ns.dataPlugin   "])"),
                            this.liveBind(b, "click",
                            function(e) {
                                    e.setAttribute(t.ns.dataPlugin, 1),
                                    t.observe()
                            }.bind(this))
                    }
                    this.settings.sibling && !this.settings.onDemand ? this.waitForSibling() : "onload" == this.settings.init ? "loading" === document.readyState ? document.addEventListener("DOMContentLoaded",
                    function(e) {
                            t.init()
                    },
                    !1) : this.init() : this.observe()
            },
            observe: function() {
                    this.waitForSibling("observe")
            },
            waitForSibling: function(t) {
                    var e = this.initialized ? "insertTrigger": "init";
                    if (this.settings.sibling) var i = document.querySelector(this.settings.sibling   ":not(["   this.ns.dataPlugin   "])");
                    else if ("observe" == t && (this[e](), this.triggerCounter)) return;
                    if (i) this[e]();
                    else {
                            if ("complete" === document.readyState && "observe" !== t) return;
                            setTimeout(("observe" == t ? this.observe: this.waitForSibling).bind(this), 250)
                    }
            },
            init: function() {
                    if(isTrigger === true) {
                        return;
                    }
                    this.insertTrigger();
                    var t = this,
                    e = this.vendors[this.settings.vendor];
                    this.liveBind(this.ns.selDataPluginTrigger, "click",
                    function(e) {
                            var i = e.getAttribute(t.ns.dataPluginId);
                            t.openPopup(i)
                    }),
                    window.addEventListener("message",
                    function(i) {
                            var s = new RegExp(t.originUrlPattern, "i");
                            if (s.test(i.origin) || void 0 !== i.data.id && void 0 !== i.data.message) {
                                    var n = i.data.id;
                                    if (n && i.source === t.popups[n].window) if (i.data.requestAction && t.hasOwnProperty(i.data.requestAction)) t[i.data.requestAction](n);
                                    else {
                                            var r;
                                            if ("default" !== t.settings.vendor) {
                                                    if (e.hasOwnProperty("useCustomEditor") && e.useCustomEditor()) return void e.editorValue(i.data.message, n);
                                                    e.hasOwnProperty("getEditor") && (r = e.getEditor())
                                            }
                                            if (r || (r = document.querySelector("["   t.ns.dataPluginTarget   '="'   n   '"]'), r)) {
                                                    var o = null === r.getAttribute("contenteditable") ? "value": "innerHTML";
                                                    r[o]  = t.getNewValue(r, i.data.message);
                                                    for (var a = ["blur", "focus", "input", "change", "paste"], l = 0; l < a.length; l  ) {
                                                            var d = new Event(a[l]);
                                                            r.dispatchEvent(d)
                                                    }
                                            } else alert("Target not found")
                                    }
                            }
                    },
                    !1),
                    this.initialized = 1
            }
    },
    e = ["WoltLab", "XF1"], i = 0; i < e.length; i  ) t.vendors[e[i]] = Object.assign(Object.assign({},
    t.vendors.redactor2), t.vendors[e[i]]);
    t.prepare()
    })();
};

上面的js代码确实挺长,你可以封装到一个js文件,然后在head标签中引入,这样可以优化网页的格式。

提供已封装的js文件,

放到开发者设置——>自定义输出head 头部的HTML代码

代码语言:html复制
    <!--插入图片、表情包chevereto图床插件-->
<script async src="https://tuchuang.sangxuesheng.com/pup.js" data-url="https://7up.pics"></script>
<!--插入图片、表情包chevereto图床插件-->

data-url="https://7up.pics"这里的链接可以自定义修改,需在chevereto的框架下的图床才可

加入这个代码之后,如果你的站点开启了PJAX的话,需要在PJAX回调函数里面插入chevereto();

修改源文件使按钮在页面显示

  1. 打开 Handsome 主题目录下的 component/comments.php 文件,找到并删除如下内容:

修改成

代码语言:txt复制
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
    
    <div class="OwO" style="display: inline;"></div>
                             <!--图床-->                                
    <div class="OwO" title="图片" style="display: inline;"<a data-chevereto-pup-trigger  data-target="#comment" ><div class="OwO-logo "><span class="smile-icons"><i class="fontello fontello-picture text-muted"></i></span><span class="OwOlogotext">图片</span></div></div> 
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">语录</span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
刷新页面即可

1 人点赞