Pixiv ID：91205404

  • 事前提要：此方法无法用于带有PJAX加载的网站，handsome需要取消使用PJAX。
  • 因为文章有些杂乱，在2022.02.24对本文进行了重构，你可以在“文章历史记录”中查看之前的版本，虽然已经失去了大部分参考价值。

（更新）一种支持PJAX的方法

这篇文章实在是太长了，就新开一篇文章来写这个东西吧。大致方法如下：

  • 将pup.js里的代码封装成一个函数function chevereto()。
  • 在自定义 JavaScript中调用这个函数chevereto()。
  • 将chevereto()加入PJAX的回调函数中。

本站使用的就是这种方法。嗯，怎么说呢，能用，但是看起来好low！虽然也没人看文章源代码就是了。

算了，又不是不能用，哪天有时间再仔细研究一下吧。（应该不会再研究了） 各位大佬如果有什么好方法，记得评论区留言一下，我先谢谢您。

新文章写好了，如下
https://kanochan.net/archives/1141.html

（更新）一种更简单的办法

经过测试，摸索出了一种比较简单的办法，不用修改js文件。略微遗憾的是，该方法还是不能支持PJAX，使用的话需要关闭主题的PJAX功能。实现方法如下：

关闭PJAX

handsome后台-主题增强功能-增强功能开关里取消勾选启用pjax

放行HTML标签

在后台-设置-评论-允许使用的HTML标签和属性中添加下列内容，并保存，否则会评论失败。

<img src="">

修改handsome源码（8.3.0版本）

文件路径：/usr/themes/handsome/libs/Content.php第2324行
将

echo '<textarea id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</textarea>';

修改为

echo '<div id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</div>';

引入Chevereto上传插件

在handsome后台-开发者设置-自定义输出head 头部的HTML代码中写入以下内容：

<script async src="//pic.6zs.cn/sdk/pup.js" data-url="https://pic.6zs.cn/upload" data-palette="black" data-auto-insert="html-embed"></script>

完成。刷新看一下，在评论输入框下方应该出现了一个上传按钮。如果你想知道具体的原理，可以看看后续的内容。

先上总结

测试发现，通过HTML **data-** 属性引入js的方式，仍然会与本地缓存的js冲突，我觉得这是chevereto的锅。所以采用的方法是直接修改js，放弃使用HTML data-属性。

  1. 开始
  2. 放行Typecho评论的HTML标签
  3. 修改chevereto的上传插件pup.js
  4. 在评论区新建一个上传图片按钮
  5. 完成

一、前言

在评论时，我们往往需要附上图片以更明确地表达自己的想法，Typecho中虽然没有原生的评论区图片上传功能，但是也可以通过HTML的img标签在评论中附加图片。不过，这其中有一个大麻烦：图片需要上传到图床，才能获得图片链接，进而插入img标签。这是一个很麻烦的过程，也正因为如此，除非迫不得已，没有人愿意选择在评论中添加图片。
现在，我们就来解决这个问题。先附上效果图，如下,你也可以在下方的评论区中验证效果。（[font color="#FFFF00"]注意：部分图床会被qq、微信内置浏览器拦截，想要获得完整的演示，请在系统浏览器中打开网页。[/font]）
效果图

二、为Handsome增加评论图片上传

此方案不兼容手机应用内置的浏览器，如QQ、微信等自带的浏览器。内置浏览器就是逊啦。因为实现上传操作需要同时打开两个窗口，而内置浏览器往往没有多窗口支持。

放行HTML标签和属性

在后台-设置-评论-允许使用的HTML标签和属性中添加下列内容，并保存，否则会评论失败。

<img src="">

修改chevereto的上传插件pup.js

此方案是基于Chevereto的上传插件来实现，所有通过Chevereto部署的图床都可以应用到此方案。

chevereto是什么

关于Chevereto，你可以看看我之前写的文章：
[post cid="997" cover="" size=""/]

认识Chevereto的上传插件

Popup Upload Plugin上传插件，可谓是Chevereto的重要功能之一。PUP 将用户可编辑的内容与将触发图像上传对话框的上传按钮绑定，并自动处理图像插入所需的代码。最终用户无需离开原始网站即可体验流畅而整洁的流程。关于上传插件的更多信息，你可以查看官方文档的说明，这里不再详细介绍。说一下有几个值得我们关注的东西：

  • mode
    即插件的模式。在默认情况下，插件绑定到任何匹配的编辑器框。
  • auto-insert
    嵌入图片代码自动插入到输入框。

获取插件链接

随便找一个基于Chevereto搭建的图床，如：https://www.picb.cc/
点击图示的问号
点击插件
点击选项，嵌入代码选择HTML图像
复制得插件链接如下

<script async src="//www.picb.cc/sdk/pup.js" data-url="https://www.picb.cc/upload" data-auto-insert="html-embed"></script>

前面也提到了，通过data-*属性控制pup.js效果不尽人意，故要想得到好的体验（不出bug），需要修改js后重新引入。

修改pup.js

下载pup.js

pup.js的下载链接可以在上面的插件链接中找到，即https://www.picb.cc/sdk/pup.js，将该链接复制到下载器中下载。没有下载器的话，就打开链接，右键另存为...进行下载。

格式化pup.js

打开下载好的js，如下，可以看到代码是被压缩过的，为了便于修改，我们需要格式化它。推荐使用在线代码格式化工具：JavaScript格式化。

pup.js

修改pup.js代码

格式化后的js代码如下，我们需要修改三个地方。
需要修改的地方
将

url: "https://demo.chevereto.com/upload"

修改为目标图床的上传链接，如

url: "https://www.picb.cc/upload"

将mode: "auto"改为mode: "manual"，即让js默认不自动放置上传按钮。
将autoInsert: "bbcode-embed-medium"修改为autoInsert: "html-embed"，即让js自动返回HTML格式的图片链接。
修改完成后的js部分代码如下:

(function() {
    for (var t = {
        defaultSettings: {
            url: "https://www.picb.cc/upload",
            vendor: "auto",
            mode: "manual",
            lang: "auto",
            autoInsert: "html-embed",
            palette: "default",
            init: "onload",
            containerClass: 1,
                        ...
                        ...

图片示意如下：

[hide]
修改完成后

[/hide]

重新引入修改后的pup.js

  1. 将修改后的pup.js上传到目录/usr/themes/handsome/assets/js/下。
  2. 在handsome后台-开发者设置-自定义输出head 头部的HTML代码中写入以下内容：
<script async src="/usr/themes/handsome/assets/js/pup.js"></script>

新建图片上传按钮

在主题的评论区配置文件中加入以下代码

<button data-chevereto-pup-trigger data-target="#comment">上传图片</button>
  • 代码解析： data-target="#comment"是文本框的ID，每个主题的ID不同，你可以在PHP源码中找到ID。如下图，文本框的ID为：comment。
    文本框ID
    这个ID用于Chevereto上传插件的回调，即插件上传完图片后，将嵌入代码输入到文本框中。根据主题的不同，你也许需要进行相应修改。
  • 按钮添加的位置：
    根据不同的需要，你可以将按钮添加到任何地方。你可以通过Chrome控制台的元素指示来确定添加的位置。
    元素指示
    对于Handsome(8.3.0版本)主题，添加的位置为/handsome/component/comments.php中的第137行附近，如下:
<div class="comment-form-comment form-group">
                        <label class="padder-v-sm" for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        代码在这里添加
                        <div class="OwO padder-v-sm"></div>
                        <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>

图片示意如下：

[hide]
代码插入位置

[/hide]

  • 给按钮加个CSS样式

经过上面的配置，理论上图片上传按钮已经处于可用的状态。但相信你也发现了，按钮挺丑的...如果你要给按钮加CSS，在<button中调用CSS样式即可，如下：

<button class="你的样式" data-chevereto-pup-trigger data-target="#comment">上传图片</button>

对于Handsome主题，直接调用主题的按钮样式即可，适用于夜间模式界面，如下：

<button class="btn m-b-xs btn-dark" data-chevereto-pup-trigger data-target="#comment">上传图片</button>

三、Q&A

  1. 要更换图床怎么办？
    答：修改pup.js里的url: "https://www.picb.cc/upload"，更改图床的链接即可。

四、图床分享

最后，分享一些使用Chevereto搭建的图床（注意：本站不对图床的稳定性负责，仅供分享）

本站图床由：https://pic.6zs.cn/提供。

本文<完！>，感谢你的阅览，如果觉得还不错，请随意点赞。

   "文章历史记录"  ==>  展开 / 收起