『转载』『教程』Joe主题实现评论图片功能
Brains - 灵感乌托邦

『转载』『教程』Joe主题实现评论图片功能

六六丶
2021-10-23 / 29 评论 / 3,009 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2022年07月28日,已超过58天没有更新,若内容或图片失效,请留言反馈。

前言

前几天在执念博客看到的功能,觉得有点用,就扒过来做个备份

成品效果

修改教程

一、修改 comment.php 文件

修改 Joe/public/comment.php ,修改如下代码:

二、修改 functions.php 文件

修改 Joe/functions.php 文件,底部添加如下代码:


 // 评论图片
$CommentImg = new Typecho_Widget_Helper_Form_Element_Select(
    'CommentImg',
    array('on' => '开启(默认)', 'off' => '关闭'),
    'on',
    '是否开启评论图片功能',
    '介绍:开启后,评论区域可以选择图片进行评论'
);
$CommentImg->setAttribute('class', 'joe_content joe_custom'); // joe_custom可改为joe_other
$form->addInput($CommentImg);

三、添加 custom.js 文件

Joe/assets/js 文件夹内新建 custom.js 文件,将以下代码复制进去

四、修改 joe.global.min.js 文件

修改 Joe/assets/js/joe.global.min.js 文件

将原先的 .joe_comment__respond-form .body .text 换成 .joe_comment__respond-form .body .imgUpload ,自行根据图片关键字找到位置

image.png

五、引入 custom.js 文件

打开 Joe/public/include.php 文件,添加以下代码

<!--引入自定义模块JS-->
<script src="<?php $this->options->themeUrl('assets/js/custom.js'); ?>"></script>

image.png

六、修改样式

在第五部的位置再加入以下代码,引入自定义样式表

<!--引入自定义模块CSS-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.css'); ?>">

然后在 Joe/assets/css 文件夹内新建 custom.css 文件,将以下代码复制进去

.imgUpload .imgUpload_btn {
    text-align:right;
    margin: -10px 0 10px 0;
}

.imgUpload .imgUpload_btn span {
    cursor: pointer;
    margin-left: 5px;
}

结束

大功告成,返回文章页面刷新试试看吧!

15
打赏
gzh

评论 (29)

取消
  1. 头像
    boss
    Windows 10 · QQ Browser

    忌妒别人,不会给自己增加任何的好处。忌妒别人,也不可能减少别人的成就。

    回复 待审 垃圾
  2. 头像
    黎听OvO
    Android · Google Chrome

    不是为了要求你做些什么才生下你,而是想为你做些什么才生下了你。

    回复 待审 垃圾
  3. 头像
    shu
    Android Oreo · QQ Browser

    男人许下的诺言就一定要遵守。

    回复 待审 垃圾
  4. 头像
    11
    Android Oreo · Google Chrome

    流萤漫天花共舞,闲蝉栖柳风奏湖。十年一梦不觉醒,夏祭花火终成空。

    回复 待审 垃圾
  5. 头像
    1
    Windows 10 · Google Chrome

    越是拼命争扎,我们的处境越是狼狈。

    回复 待审 垃圾
  6. 头像
    666
    Android · UC Browser

    这样啊,这就是……恋爱啊。

    回复 待审 垃圾
  7. 头像
    天天
    Windows 10 · QQ Browser

    犹豫不决的人闪边去,不要说什么为了谁,那只是软弱的人乱找的借口,重要的是你想怎么样。QQ

    回复 待审 垃圾
  8. 头像
    阿浩
    Windows 10 · Google Chrome

    画图

    回复 待审 垃圾
  9. 头像
    无聊の人
    Android · Google Chrome

    完蛋忘记搞备份直接来弄代码了,博客搞废了

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Android · Google Chrome
      @ 无聊の人

      按照教程一步步回退就好了

      回复 待审 垃圾
    2. 头像
      无聊の人
      Android · Google Chrome
      @ 无聊の人

      文章也加载不出来了QQ

      回复 待审 垃圾
  10. 头像
    无聊の人
    Android · Google Chrome

    回复 待审 垃圾
  11. 头像
    23
    Windows 10 · Google Chrome

    的绯闻否认

    回复 待审 垃圾
  12. 头像
    云志
    Windows 10 · Google Chrome

    画图

    回复 待审 垃圾
  13. 头像
    tc
    Android Oreo · Google Chrome

    画图

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Android · Google Chrome
      @ tc

      尺度不够呀

      回复 待审 垃圾
  14. 头像
    tc
    Android Oreo · Google Chrome

    画图

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Android · Google Chrome
      @ tc

      还有吗,再来点,这不够表情

      回复 待审 垃圾
  15. 头像
    你猜
    iPhone · QQ Browser

    画图

    回复 待审 垃圾
  16. 头像
    六六丶 作者
    Windows 10 · Google Chrome

    画图

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ 六六丶

      高清大图,教程空了更新

      回复 待审 垃圾
      1. 头像
        六六丶 作者
        Windows 10 · Google Chrome
        @ 六六丶

        因为图片更加清晰了,所以添加了开启上传图片自动为审核状态,防止有人上传小黄图

        回复 待审 垃圾
        1. 头像
          六六丶 作者
          Windows 10 · Google Chrome
          @ 六六丶

          画图

          回复 待审 垃圾
  17. 头像
    疯子
    Android · QQ Browser

    看看

    回复 待审 垃圾
  18. 头像
    sayhello
    Windows 10 · Google Chrome

    thanks

    回复 待审 垃圾
  19. 头像
    chenmo
    Windows 7 · Google Chrome

    画图

    回复 待审 垃圾
  20. 头像
    孤星博客
    Linux · Google Chrome

    画图

    回复 待审 垃圾
文章目录