『原创』『教程』博客评论框添加随机一言
Brains - 灵感乌托邦

『原创』『教程』博客评论框添加随机一言

六六丶
2022-12-27 / 28 评论 / 788 阅读 / 收录检测中...
广告
温馨提示:
本文最后更新于2022年12月27日,已超过35天没有更新,若内容或图片失效,请留言反馈。

前言

由于我的博客之前经常有人回复一些无意义的内容,导致很多垃圾评论

所以我在想既然很多游客喜欢回复一些垃圾评论,不如我直接设置一个随机一言,让他们省去了垃圾评论的打字时间,同时又能让我的评论区少一些无意义的评论

而且那些真正认真回复的人只需要一键删除即可,也不会很影响评论体验,所以就给自己的评论框添加了随机一言

前段时间有小伙伴留言让我出个评论随机一言的教程,而我这边突然爆发了疫情,前些天自己又感染了,所以一直拖到现在

63aa4ee48db93.png

效果展示

按照惯例,先来一波效果展示

63aa4f7cabf4a.gif

本教程仅以Joe主题为例,其他主题可自行发挥能力,如有技术问题,博主可提供简单的指导

教程开始

一、添加后台控制

Joe/functions.php 或者 Joe/public/custom.php(有的话) 内添加以下代码

// 评论框随机语录功能
$Comment_Citation = new Typecho_Widget_Helper_Form_Element_Select(
    'Comment_Citation',
    array('off' => '关闭(默认)', 'on' => '开启'),
    'off',
    '是否开启评论框随机语录功能',
    '介绍:开启后,评论框自动随机填充随机语录'
);
$Comment_Citation->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置,将joe_change修改为joe_other
$form->addInput($Comment_Citation->multiMode());

//评论框随机语录链接/文字 
$Comment_Citation__text = new Typecho_Widget_Helper_Form_Element_Textarea(
    'Comment_Citation__text',
    NULL,
    "https://api.vvhan.com/api/ian",
    '评论框随机语录',
    '介绍:用于修改评论框随机语录(可以为api地址) <br />
     格式:一行一个,可以为api地址,也可为文字,可以填写多个API地址<br />
     注意:必须填写JSON格式的API,API需要开启跨域权限才能调取,否则会调取失败!<br />
     如果为api地址可在前台按钮刷新内容,如果为文字只能刷新页面来刷新内容(建议使用api地址)<br />
     推荐API:https://api.vvhan.com/api/ian'
);
$Comment_Citation__text->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置,将joe_change修改为joe_other
$form->addInput($Comment_Citation__text);

二、添加刷新按钮(可省略)

Joe/public/comment.php 添加以下代码,不添加则不设置刷新按钮

三、添加内容获取

1、添加后端获取

Joe/core/function.php 添加以下代码

2、添加前端获取

Joe/public/config.php 添加以下代码

四、添加核心代码

Joe/assets/js/joe.global.min.js 或者 Joe/assets/js/custom.min.js(有的话) 添加以下代码

五、添加刷新按钮样式(可省略)

这是刷新按钮样式,如果前面没添加刷新按钮,可跳过此步骤

Joe/assets/css/joe.global.min.css 或者 Joe/assets/css/custom.min.css(如果有)添加以下代码

.joe_owo__contain {
      position: static;
      .box { 
        position: absolute;
        bottom: 100%;
        margin-bottom: 6px;
        left: 0px;
        padding-top: 5px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-color: transparent;
        box-shadow: 0 0 10px 8px rgb(116 116 116 / 8%);
      }
    }
.comment_box {
      cursor: pointer;
      text-align: center;
      color: var(--routine);
      height: 26px;
      line-height: 26px;
      background: var(--background);
      opacity: 0.85;
      border-radius: 13px;
      width: 70px;
      margin-left: 5px;
      &:hover {
        background: var(--theme);
        color: #fff;
      }}

结语

教程稍有点复杂,但其实是沿用侧栏随机一言的方法,所以如果你能看懂核心js的话,可以仅修改 第四步 中ajax的 url 来实现,那样会简单很多很多

3
打赏
gzh

评论 (28)

语录
图片
取消
  1. 头像
    胡子延
    MacOS · Google Chrome

    告诉我,神会流血吗?——神不会,但你会。

    回复
  2. 头像
    久久
    Android · Google Chrome

    咬定青山不放松,立根原在破岩中。

    回复
  3. 头像
    A
    Windows 10 · Google Chrome

    无欲无求,笑口常开。

    回复
  4. 头像
    4
    Android · Google Chrome

    君の名を 今追いかけるよ

    回复
  5. 头像
    kingkare
    Windows 10 · Google Chrome

    还是这样 点击没反应 也没有像你这样评论框显示一言

    回复
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ kingkare

      你这应该是js没生效,你试试放在其他地方试试

      回复
      1. 头像
        kingkare
        Windows 7 · Google Chrome
        @ 六六丶

        js不对 引用到7.x版本的custom.js文件里面貌似是没用

        回复
        1. 头像
          六六丶 作者
          Windows 10 · Google Chrome
          @ kingkare

          你要放在DOMContentLoaded的里面才行,意思是页面加载完成后生效

          回复
  6. 头像
    kingkare
    Windows 10 · Google Chrome

    大佬 我跟着操作来了一遍 啥都添加了 但是点击语录按钮没反应是怎么回事,评论框里面也没有显示一言

    回复
  7. 头像
    kingkare
    Windows 10 · Google Chrome

    犹豫就会败北,果断就会白给。

    回复
  8. 头像
    PePe
    Windows 10 · FireFox

    每天,似乎都一样。

    回复
  9. 头像
    额鹅鹅鹅
    Windows 7 · Google Chrome

    天流浅云,海泛清浪。

    回复
  10. 头像
    学姐
    Android · Google Chrome

    我终于发觉了自己迷茫的原因。我并不是缺少地图,我缺少的,是目的地。

    回复
  11. 头像
    wys
    Windows 10 · Google Chrome

    有意思,不愧是灵感乌托邦。这样一来,搞得想发垃圾评论的人都不好意思再发了。

    回复
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ wys

      是的,原来就是垃圾评论太多了,很影响其他人认真评论的积极性,也会打击我更文章的积极性,索性弄个一言,也省的那些垃圾评论影响我的心情QQ

      回复
  12. 头像
    我是谁
    Windows 10 · QQ Browser

    博主大大,这是怎么个回事啊?

    代码位置没问题啊

    回复
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ 我是谁

      css的问题,你添加css后强制刷新试试,另外那个框可能是因为你没有引入fonticon引起的,引入一下就可以了

      回复
      1. 头像
        我是谁
        Windows 10 · QQ Browser
        @ 六六丶

        强制刷新了,清理缓存更换浏览器还是一样的,语录那个按钮在不打开表情框的情况下不显示,打开后就是图片所示的情况

        回复
        1. 头像
          六六丶 作者
          Windows 10 · Google Chrome
          @ 我是谁

          有没有一种可能是你代码加错位置了QQ

          回复
          1. 头像
            我是谁
            Windows 10 · QQ Browser
            @ 六六丶

            应该没错吧

            回复
            1. 头像
              六六丶 作者
              Windows 10 · Google Chrome
              @ 我是谁

              不好意思,是我漏了一段css代码,已经不上了,一定要添加在css文件的最后面

              回复
  13. 头像
    空空裤兜
    MacOS · Google Chrome

    主题函数加入后提示Call to a member function addInput() on null,请问大佬哪里出问题了

    回复
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ 空空裤兜

      具体是哪一阶段的问题呢,可以具体描述一下吗

      回复
      1. 头像
        空空裤兜
        MacOS · Google Chrome
        @ 六六丶

        第一步,functions.php加入函数后就出现错误。

        回复
        1. 头像
          六六丶 作者
          Windows 10 · Google Chrome
          @ 空空裤兜

          你是不是加错位置了,可以截图看看吗

          回复
          1. 头像
            空空裤兜
            MacOS · Google Chrome
            @ 六六丶

            加错了一个括号。。。
            所有代码添加完毕,也设置了,但是没有显示效果。

            回复
  14. 头像
    空空裤兜
    MacOS · Google Chrome

    我喜欢草莓,草莓蛋糕不行,草莓软糖不行,只有草莓才行。就像我喜欢你,长得像你不行,性格像你不行,只有你才行。

    回复
  15. 头像
    我是谁
    Windows 10 · QQ Browser

    敏而好学,不耻下问。

    回复
文章目录