消失这一个月?

恍恍惚惚转瞬间快来到11月份,想起国庆节那会我还穿着短袖,时不时开着空调玩着游戏,现在一转眼就到了加上一件外套的日子了,再过几天又到子........当然想到国庆节那就是某人这七天晚上几乎把把都在打着“恐怖游戏”寂静岭:F

paste-1786179540613

想不到这个游戏这么难玩,打了四个结局居然让我玩到了这个月某,也是在上周星期日终于打出了第四个好结局(我想学着认真听取他人的话语。当然,具体要听谁的,必须由我决定。),以下是三周目自己打倒众神的的视频(节余宽带与存储压缩了)

4K+120超分画质【制造中】

前言与部署

好了好了,闲话就到这里 说一下正事,实现教程开始前先感谢友链朋友,也就是这个教程的原作者:陶小桃大佬,其实本站从23年就短期使用了这个,但是,可能是大佬并没有经常用手机来访问自己博客(纯属猜测),他并没有发现手机版有个非常大的BUG,也就是当加上图片按钮后,手机用户打开表情按钮就会........一言难尽

paste-1786179564412

而且这个并没有适配深色模式用户(当然大佬的博客是没有深色的所以很正常),这两个问题对于当时的我来问一言难尽却又无可奈何,只能去除这个功能。

paste-1786179574412

到25年的这个时候,因为工作的繁忙网站最近在更新优化,对于上传图片这个功能我又希望拥有(即便这个功能可能只有不到5%的人使用,但还是希望加回来。所以就有了这个教程(花费孩子一个星期日的时间来摸鱼般的研究

修复说明与效果
虽说这个图片上传是基于chevereto图床插件实现,但修复功能是基于主题handsome与本站情况来的,不一定适用于全部人哦
  • 修复手机端展开表情无法展开全部内容
  • 修复handsome主题切换为深色模式但图片按钮未同步
  • 修复上传图片会自动返回两个HTML图片链接的BUG(未确认是否是本站的问题才导致)
  • 优化评论图片失效自动切换自定义失效图(beta版未经测试)

paste-1786179589177

paste-1786179600371

部署

这里不多说原理与教程(想看可去原作者那边查看),这里教程以handsome主题进行,在你的服务器上创建一个js文件(名字随便可以按我的pup.js来)并打开,复制下面这段本站修复的js代码到这个文件,然后保存如果使用本站修复的js代码出现问题,请用原作者的js代码替换即可)

此处内容需要评论回复后(审核通过)方可阅读。

原作者js代码

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="%cClass"><button %x class="%bClass"><span class="%iClass">%iconSvg</span><span class="%tClass">%text</span></button></div>',
                    css: ".%cClass{display:inline-block;margin-top:5px;margin-bottom:5px}.%bClass{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}.%bClass: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;"></path></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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """)), 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 = [{
                                    "%cClass": this.settings.containerClass || this.ns.plugin + "-container"
                            },
                            {
                                    "%bClass": 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("%defaultCSS", 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代码太长了所以保存成文件再引入比较简洁,保存文件后打开在主题外观——开发者设置——自定义 JavaScript,将下面这个代码放进去,将圆括号替换成你保存js 的位置(如文件在网站的首先,那就是https://xxxx.com/xxx.js

// 引入chevereto图床插件
$.getScript("替换成你保存js文件的位置");

如果你的站点开启了PJAX(在主题外观——主题增强功能——启用PJAX),则需要在主题外观——PJAX——PJAX回调函数中加上chevereto();

paste-1786179613579

上面的都设置好后返回服务器,依次打开主题文件——component文件夹——comments.php,找到<div class="OwO padder-v-sm"></div>,将这段替换成下面的HTML代码

<div class="padder-v-sm smallscreen">
                                    <span style="display: inline-block;padding: 0;width: 66px;height: 24px;color: #99a2aa;border-radius: 4px;position: relative;z-index: 101;font-size: 12px;text-align: center;line-height: 23px;margin-top: 3px;background: #fff;">
                                    <a data-chevereto-pup-trigger  data-target="#comment" title="图片">
                                        <span class="smile-icons">
                                        <i class="fontello fontello-picture text-muted"></i>
                                        </span>
                                        <span class="OwOlogotext">图片</span>  
                                    </a></span>

                                    <span class="OwO" title="表情"></span>
                             </div>

再刷新你的网站你就会发现多了个图片按钮了,然后呢这些BUG也会一一发生 ,接下来就是本站存在内容,修复这些问题

修复手机端表情包无法展开问题

为什么会这样呢,由GPT-5 high来解释就是.....

因为插件默认把面板 .OwO-body 绝对定位到触发器 .OwO 上,而评论区的某个祖先容器在移动端有较小的宽度并带着 overflow: hidden/auto(或由 transform 创建层叠上下文),当面板超出该容器边界时就被裁剪,z-index 再高也出不来;

所以我们在移动端用媒体查询把评论区小容器设为定位上下文(position: relative; overflow: visible),再将 .OwO-body 绝对定位到该容器上(left/right:0、合适的 top、较高 z-index 和 max-height),从而避开父级裁剪并完整显示面板

paste-1786179626046

咳咳,让我们继续,同样打开 主题外观——开发者设置——自定义 CSS,将一下CSS代码复制粘贴过去然后再保存,之后掏出各位的手机再打开,就会发现,可以正常显示了。

此处内容需要评论回复后(审核通过)方可阅读。

本站目前测试了iQOO 7、小米14 Pro以及苹果12 Pro MAX以及电脑模拟手机尺寸苹果XR、SE以及ipa mini均已修复,如果你恰巧是那个幸运儿发现你的手机还是老样子无法展开,你可以将第二行的@media (max-width: 768px){768降低一些来尝试(这里的数值是指css应用,超过这个或是这个就不会生效)

修复切换深色模式未同步

关于为什么未同步是因为原作者在HTML代码使用内联的固定颜色,写死了按钮的前景和背景所以才不同步,本站采用的修复方法就是不动HTML代码,用CSS代码覆盖(主要是修改HTML代码也要加CSS代码,而且修改HTML好几次导致出现表情按钮文字错乱、颜色变来变去等等.....)

与上面一样打开 主题外观——开发者设置——自定义 CSS,将一下CSS代码复制粘贴过去然后再保存,然后刷新一下,再切换就搞定啦~

此处内容需要评论回复后(审核通过)方可阅读。

如果你的主题与我不是一种色调/颜色,你可以先打开F12,打开粉红色框的选择网页中的相应元素即可进行检查(为什么这么长名字) 或快捷键 Ctrl+Shift+C打开,然后用鼠标拉到表情按钮上,不用左右击鼠标滑动按钮就会自动显示这个按钮的颜色,然后记下来替换掉上面的#171718即可。你问我浅色也不一样?修改HTML的#99a2aa尝试?因为本站的浅色模式是正常的所以没有测试

paste-1786179637167

到这里其实你已经解决掉了难题,但图床是部署别人的,谁知道有没有一天就挂掉导致图片失效,看起来极奇的难看,如大佬的博客展示的

paste-1786179648872

我是看不习惯的,所以本站额外加多一个js用来检测,设置好图床域名(也就是白名单),如果检测到这个图片链接失效的话自动替换成设置好的图片,这里本站在京东那边上传的一个失效的图片,如果喜欢可以不用改下方的代码可直接使用(当然你也可以放到自己的服务器或对象存储上等等都可以)

paste-1786179659305

优化图片失效切换失效图Beta(可选)

Chrome与Edge测试成功,不保证全部浏览器适配

与前面部署一样,在服务器创建一个js文件(你也可以和我设置一样为img-fallback.js),打开将下面的js代码复制粘贴进去并保存( 这里默认白名单就是上面js插件的图片链接,如果你使用了其他图床请设置相当于的白名单【注意白名单要设置图片链接域名而不是图床的域名,两者不一样】

此处内容需要评论回复后(审核通过)方可阅读。

然后老样子保存文件后打开在主题外观——开发者设置——自定义 JavaScript,将下面这个代码放进去,将圆括号替换成你保存js 的位置(如文件在网站的首先,那就是https://xxxx.com/xxx.js

// 引入chevereto图床插件
$.getScript("替换成你保存js文件的位置");

最后如果评论哪一天失效了,就会如下面图片这样,看上去是一张平平无奇的图片点开其实它早离去~

图片失效切换失效图(手机电脑同理)

自我感叹

时光过的很快,但幸运的是我并没有嘲笑那时候手足无措的自己,而是去完成那时候没办法完成的事情,帮助与曾经相同他人同时也能那时的自己对现在的我刮目相看。

paste-1786180202729

最后修改:2026 年 08 月 08 日
世界上每个人一人赞助我一块钱,我会不会就成为世界首富了!