TypechoJoeTheme

日志随记

统计
登录
用户名
密码

扫码登录
/
注册
用户名

此用户名将作为登录时所用的账号

邮箱

XG.孤梦

随风而动,随遇而安......

Typecho-Joe主题实现图片评论功能

XG.孤梦博 主大佬
2022-08-10
/
22 评论
/
5,457 阅读
/
903 个字
/
百度已收录
08/10
本文最后更新于 2022年08月28日,已超过 767天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

实现效果

实际使用效果见本站,主题将在1.1.7版本中嵌入此功能,但是在开启前需要配置一些东西。
使用我的主题模板搭建好图床直接把js里的图床API改成自己的就可以了

效果图

默认状态

已选择文件

点击插入 上传图片
  • 默认插入Markdown语法链接,目的方便实现评论点击图片大图预览效果

开启判断文件类型
  • 在js中加入后缀判断文件类型,选择非图片类型时,会提示


视频教程

此处内容 回复 可见


准备

修改后台设置

1.首先进入Typecho后台,找到评论设置开启评论Markdown语法。

2.只开启Markdown语法是不够的,因为评论区默认禁用HTML标签,所以要添加允许的HTML标签。
在评论设置的最下方找到允许使用的HTML标签和属性,插入以下代码。

<img src="" data-original="" width="">
<a href="" data-fancybox="">

如果还想在评论区播放视频,自行查看网站的video标签和属性值一同加入进去。

注意
  • 因为解除了a标签后可以写入JS脚本语句,造成安全隐患,强烈建议开启主题设置里的禁止使用JS脚本评论。

3.图床API接口,推荐自己搭建。
可以使用我源码库中的外链网盘源码搭建,我的博客使用的也是这个源码的API,为了减轻服务器负担我加了域名验证,我的接口只允许了本站,要是实在不会动手可以打赏,请我喝一杯奶茶,我开放你的域名授权,不过还是建议自己搭建,因为方便自己管理上传上来的文件。

使用本主题1.1.7之后版本只需要在主题文件夹的根目录下的js文件夹里找到img.js,打开找到图床API把链接换成自己的接口链接就可以正常使用了。

准备阶段完成

实现

修改functions.php

在合适位置插入以下代码,其他的joe主题自行修改 setAttribute(); 中加入的属性。

    $JCommentImg = new Typecho_Widget_Helper_Form_Element_Select(
        'JCommentImg',
        array('off' => '关闭(默认)', 'on' => '开启'),
        'off',
        '是否开启评论图片功能',
        '介绍:开启后,评论区域可以选择图片进行评论'
    );
    $JCommentImg->setAttribute('class', 'j-setting-content j-setting-other');
    $form->addInput($JCommentImg->multiMode());

修改评论区文件 comment.php

找到评论区文件,我的主题是在主题文件根目录下的 pblic/comment.php

插入以下代码到图片位置,或者合适位置。

此处内容 回复 可见

找到输出评论的div标签,添加 id=markdown 的属性,不同的主题markdown解析的id可能不同,可以进入文章按f12,找到文章的父标签查看。


添加css文件 btn.css

美化上传和插入按钮,可根据喜好自己修改或者加入样式,创建好文件后复制下方代码粘贴保存即可,并在head.php或者header.php中引入文件。

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 5px;
    overflow: hidden;
    height: 32px;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 18px;
}
.file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
}
.file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
}
.xgimg{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.xgimg button {
    background: var(--classD);
    padding: 0 15px;
    height: 32px;
    border: none;
    font-size: 13px;
    transition: all 0.35s;
    color: var(--main);
}
.xgimg button:active {
    color: #fff;
    background: var(--theme);
}
.showFileName{
    width:40%;
    font-size: 12px;
    text-align: right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
@media screen and (max-width: 768px){
    .showFileName{
    width:0px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
}

创建js文件 img.js

创建文件,复制下方代码粘贴,然后把图床API接口改成自己的,如果使用其他的图床接口,请根据接口的开发文档,使用
formData.append(); 方法添加需要的参数即可,修改好后,在footer.php中引入文件,并且在它的上方 axios.min.js 因为上传使用的是axios方式请求。

<script type="text/javascript" src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>

此处内容 回复 可见

最后,再后台开启评论图片功能,清除缓存刷新页面,图片上传按钮就出现了,附一张评论图片成功的评论截图

教程结束

typecho
朗读
赞(9)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

日志随记

本文链接:

https://www.xggm.top/archives/1115.html(转载时请注明本文出处及文章链接)

评论 (22)
 
  1. 火喵 打酱油
    Windows 10 · 谷歌浏览器 Chrome102 · 中国–辽宁–大连 鹏博士宽带

    呜呜呜,要是网盘支持七牛就好了

    2022-10-16 回复
    1. XG.孤梦 博 主江湖大侠
      Android · 谷歌浏览器 Chrome88 · 中国–湖南–长沙 联通
      @火喵

      可以自己改下接口和参数就行,其他网盘不稳定,图片容易失效,不如自己搭的所以没搞

      2022-10-16 回复
      1. 看看 打酱油
        iPhone · Safari 16 · 中国–广东–深圳 电信
        @XG.孤梦

        2022-10-27 回复
  2. 打酱油
    Windows 10 · 谷歌浏览器 Chrome105 · 中国–四川–成都 电信

    2022-09-21 回复
  3. s1240 打酱油
    Windows 7 · 谷歌浏览器 Chrome104 · 中国–重庆–重庆 联通

    看视频来了

    2022-08-29 回复
  4. s1240 打酱油
    Windows 7 · 谷歌浏览器 Chrome104 · 中国–重庆–重庆 联通

    安装主题后,有插入图片按钮,但是图片评论不成功,是要按照大佬的这篇文章修改啊 ?

    2022-08-22 回复
    1. XG.孤梦 博 主江湖大侠
      Android · 谷歌浏览器 Chrome88 · 中国–湖南–长沙 联通
      @s1240

      是的,因为默认用的我的图床接口,我限制了域名,所以需要自己搭一个图床网盘,设置完Typecho评论,把img.js文件里的API接口换掉就行

      2022-08-22 回复
      1. lifetech 小有名气
        Android · 谷歌浏览器 Chrome61 · 中国–福建–厦门 移动
        @XG.孤梦

        有些复杂

        2024-07-22 回复
      2. s1240 打酱油
        Windows 7 · 谷歌浏览器 Chrome104 · 中国–重庆–重庆 联通
        @XG.孤梦

        谢谢,大佬,摸索中

        2022-08-22 回复
  5. 天宇 打酱油
    Android · 夸克浏览器 · 中国–湖南–长沙 联通

    向大佬学习

    2022-08-11 回复
登录
X
用户名
密码