handsome增加图片上传按钮实现图片评论功能

发布于 2022-02-09  697 次阅读


Pixiv ID:91205404

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

(更新)一种支持PJAX的方法

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

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

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

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

新文章写好了,如下

(续)handsome增加图片上传按钮实现图片评论功能——支持PJAX加载

(更新)一种更简单的办法

经过测试,摸索出了一种比较简单的办法,不用修改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搭建的图床(注意:本站不对图床的稳定性负责,仅供分享)

  • PICBCC:https://www.picb.cc/
  • 路过图床:https://imgtu.com/
  • 知晓图床:https://tu.jilu.info/
  • SM图床:https://www.imgsm.com/
  • 鸡霸图床(老王图床):https://img.gejiba.com/
  • 靠谱图床:https://img.bqe.cc/
  • 伏名图床:https://ccsyn.org/
  • 安享图床:https://img.ax/

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


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

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

间接性发奋图强,持续性混吃等死