# 前言与展示

时隔两月不见，随着自己的日常被工作与各种各样的琐事（~~指最近玩黑神话：悟空~~）填满，我也开始理解了几年前刚创建网站时思考的问题**为什么那些活了很久的博客每发布文章都是隔很久呢**，当重心投入到更值得更需要的事情时，这一个曾经因梦想而创建的网站就会像因长大就把小时的玩具收好一般放在了不起眼的地方。当然，回到正题，这一次闲来无事弄图床就顺手和GPT琢磨之前就一直不管的BUG，就是在时光机（网站是”动态“）页面编辑内容，之前的表情就会直接变成**表情短代码**，听不懂？看图~

如图一样，一开始傲娇的表情::QQ:Y.qq2::变成了没感情的:QQ:Y.qq2:：，当然，以前解决的方法是直接在后台——评论，找到这条内容（没错，时光机其实就是调用评论的内容的）然后在后台直接编辑啥也不改直接提交就恢复了，但......如果要改很多呢，显然不太方便~所以，空闲这一次直接解决这个问题，[font color="#FFB6C1"]如果你也有这个问题，那你可算是捡到宝了！[/font]

## 原因与添加补丁文件

原因嘛，简单点就是数据库不会保存图片，只会保存段代码`QQ:Y.qq2`，主题会把代码渲染成表情图片，但时光机的接口返回是评论嘛（前面也说了），编辑时会直接返回评论的原内容，前端脚本直接返回并插入以下的页面

```javascript
d.html(a.comment.content)
```

这样就导致直接跳过主题的原来的表情解析逻辑，导致没办法转换成表情图片的`<img>` 标签，逻辑不一样导致渲染不了，这里我是根据GPT的说明最好还是直接加一个补丁文件，方便管理

### 添加补丁文件

依次打开`usr/themes/handsome/assets/js/`的文件夹，创建一个`time-machine-emoji-fix.js`的文件，将下方代入复制粘贴并且保存

[hide]

[collapse status="false" title="因为太长就缩着了"]

```javascript
(function ($) {
    'use strict';

var emojiPackages = {
        bilibili: true,
        luoxiaohei: true,
        QQ: true,
        quyin: true,
        xiaohuangdou: true
    };

function renderEmojiTokens(container) {
        var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false);
        var textNodes = [];
        var node;

while ((node = walker.nextNode())) {
            if (node.nodeValue.indexOf('::') !== -1) {
                textNodes.push(node);
            }
        }

textNodes.forEach(function (textNode) {
            var pattern = /::([^:\s]+):([^:\s]+)::/g;
            var value = textNode.nodeValue;
            var fragment = document.createDocumentFragment();
            var lastIndex = 0;
            var match;

while ((match = pattern.exec(value))) {
                if (!emojiPackages[match[1]]) {
                    continue;
                }

fragment.appendChild(document.createTextNode(value.slice(lastIndex, match.index)));

var image = document.createElement('img');
                image.src = LocalConst.STATIC_PATH + 'img/emotion/' + match[1] + '/' + match[2] + '.png';
                image.className = 'emotion-' + match[1];
                image.dataset.token = match[0];

image.onerror = function () {
                    this.parentNode.replaceChild(document.createTextNode(this.dataset.token), this);
                };

fragment.appendChild(image);
                lastIndex = pattern.lastIndex;
            }

if (lastIndex) {
                fragment.appendChild(document.createTextNode(value.slice(lastIndex)));
                textNode.parentNode.replaceChild(fragment, textNode);
            }
        });
    }

$(document).on('ajaxSuccess', function (event, xhr, settings) {
        var url = settings.url || '';
        var match = /[?&]coid=(\d+)/.exec(url);

if (!/\/action\/cross-edit(?:\?|$)/.test(url) ||
            !/[?&]do=edit(?:&|$)/.test(url) ||
            !match) {
            return;
        }

window.setTimeout(function () {
            var container = document.getElementById('comment-' + match[1] + '-body');

if (container) {
                renderEmojiTokens(container);
            }
        }, 0);
    });
})(jQuery);
```

[/collapse]

[/hide]

## 加载补丁文件

随后找到`usr/themes/handsome/component/`文件夹中的`say.php`文件，双击打开，大约在258行左右找到图片和下面这一行代码，可以直接搜索**outputCommentJS**

```php
Content::outputCommentJS($this, $this->security,$this->request->getRequestUrl());
```

在代码的下添加：

```php
?>
<script src="<?php echo STATIC_PATH ?>js/time-machine-emoji-fix.js?v=<?php echo Handsome::version.Handsome::$versionTag; ?>"></script>
<?php
```

实际代码就变成了

```php
    Content::outputCommentJS($this, $this->security,$this->request->getRequestUrl());
    ?>
    <script src="<?php echo STATIC_PATH ?>js/time-machine-emoji-fix.js?v=<?php echo Handsome::version.Handsome::$versionTag; ?>"></script>
```

然后保存，就完成啦，就是这么简单~再回到时光机，你将得到如图展示

好了，结束，我也该继续去~~玩黑神话悟空~~迁移图片到图床啦~

前言与展示

时隔两月不见，随着自己的日常被工作与各种各样的琐事（~~指最近玩黑神话：悟空~~）填满，我也开始理解了几年前刚创建网站时思考的问题为什么那些活了很久的博客每发布文章都是隔很久呢，当重心投入到更值得更需要的事情时，这一个曾经因梦想而创建的网站就会像因长大就把小时的玩具收好一般放在了不起眼的地方。当然，回到正题，这一次闲来无事弄图床就顺手和GPT琢磨之前就一直不管的BUG，就是在时光机（网站是”动态“）页面编辑内容，之前的表情就会直接变成表情短代码，听不懂？看图~

我只是个测试的

如图一样，一开始傲娇的表情变成了没感情的:QQ:Y.qq2:：，当然，以前解决的方法是直接在后台——评论，找到这条内容（没错，时光机其实就是调用评论的内容的）然后在后台直接编辑啥也不改直接提交就恢复了，但......如果要改很多呢，显然不太方便~所以，空闲这一次直接解决这个问题，如果你也有这个问题，那你可算是捡到宝了！

原因与添加补丁文件

原因嘛，简单点就是数据库不会保存图片，只会保存段代码QQ:Y.qq2，主题会把代码渲染成表情图片，但时光机的接口返回是评论嘛（前面也说了），编辑时会直接返回评论的原内容，前端脚本直接返回并插入以下的页面

d.html(a.comment.content)

这样就导致直接跳过主题的原来的表情解析逻辑，导致没办法转换成表情图片的<img> 标签，逻辑不一样导致渲染不了，这里我是根据GPT的说明最好还是直接加一个补丁文件，方便管理

添加补丁文件

依次打开usr/themes/handsome/assets/js/的文件夹，创建一个time-machine-emoji-fix.js的文件，将下方代入复制粘贴并且保存

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

加载补丁文件

随后找到usr/themes/handsome/component/文件夹中的say.php文件，双击打开，大约在258行左右找到图片和下面这一行代码，可以直接搜索outputCommentJS

不一定在258行哦

Content::outputCommentJS($this, $this->security,$this->request->getRequestUrl());

在代码的下添加：

?>
<script src="<?php echo STATIC_PATH ?>js/time-machine-emoji-fix.js?v=<?php echo Handsome::version.Handsome::$versionTag; ?>"></script>
<?php

一个回车复制粘贴~

实际代码就变成了

    Content::outputCommentJS($this, $this->security,$this->request->getRequestUrl());
    ?>
    <script src="<?php echo STATIC_PATH ?>js/time-machine-emoji-fix.js?v=<?php echo Handsome::version.Handsome::$versionTag; ?>"></script>

然后保存，就完成啦，就是这么简单~再回到时光机，你将得到如图展示

请无视那没啥用的时间