"前车之鉴"-再造车轮Typecho_Plugin

PHP,Typecho 2020-02-22 77 次浏览 次点赞

前言

这是基于SweetAlert2伪实现的typecho图片放大效果的插件,因为之前发现博客里插入图片之后,它默认不能放大,而我虽然用的是笔记本电脑,但是电脑显示里的缩放与布局我不习惯用它推荐的125%,而是用了传统的100%,这就在浏览一些博客的时候显得主体内容比较小巧。我看了其他的一些博客平台,但凡是插入图片的,双击一下图片就会增大显示,这也算是个基本功能吧,但不知道是因为主题原因还是啥,我的博客就不行,自己先前在网上找过类似的插件,比如说梁先生制作的pScaleUp插件,能应对大多数typecho主题,但是我使用的这一款GreenGrapes主题却不是那么的理想,在启用这款插件时,在文章里试了下,发现图片确实被放大了,但是却被局限在容器里,因为在当前主题设定的文章内容主题容器有一个css属性 overflow: hidden;,这就导致了上述问题,本着不影响原先主题源代码并适当增加效果的选择性与美观性,就想着要不在尝试着再写一个简单的插件?因为之前写过一个,这次就是把轮子拿过来直接照葫芦画瓢就行,也不怎么麻烦。说干就干……

实现功能

  • 启用后进入的设置页面(因为我的主题配绿色会比较协调,所以选择了纯净绿)

设置页面.png

  • 按照上示设置后的页面效果(以我上一篇博客内的图片为例)

放大效果示例.png

  • 启用方法

git clone至plugins文件夹下并修改文件名为ExImg,后台启用并进入设置打开即可。
单击放大后图片的外部即可取消放大效果
git地址

过程

如何实现放大的效果我想了一下,之前基于SweetAlert实现过表白的弹窗效果,感觉效果还不错,以前用的是是这个官网的,但是相比起来SweetAlert2中的功能要更加完善一点(但我个人觉得从弹窗的美观性上来讲不如上一个)。后者可以自定义弹窗(alert)的图标和大小,并且只传入一个url即可,原先我暂定是使用向弹窗中插入HTML代码块实现显示image的功能,但是实际做了一下发现效果并不怎么样,索性还是直接用它的图标属性吧,还可以设置自定义图标的CSS类,对于这一句我开始以为能直接在里面写CSS属性,结果最后发现是能够指定类名,汗……然后他那个弹窗的宽高和边框的大小可以自己设定,然后我就根据给图片设置的大小来设定了,保证其美观性。还有背景颜色(themes)这一功能非常讨人喜欢,然后我就简单加了三种可以选项的颜色,分别是幻影紫、纯净绿和暖心红(后续还会添加令人愉悦的颜色选择)。名字当然是我自己瞎起的……然后图片的选择用了jQuery的双击监听事件,确保了双击的标签是img后才显示放大效果。目前看来所有的一切顺利进行。但是我这个憨憨在仿制车轮的时候又翻车了,反正开始以为遇到玄学问题了,实在忍不住了还反问它:我与阁下无冤无仇,为何你却要把我的智商按在地上摩擦?……我先简单说一下这个伪玄学~

当时表单正常传过来值之后我便在下边判断了值的类型与value,确保准确无误后以传参的形式传给了handleImgExType()

$expandImgType = Typecho_Widget::widget('Widget_Options')->plugin('ExImg')->expandImgType;
$expandImgBgType = Typecho_Widget::widget('Widget_Options')->plugin('ExImg')->expandImgBgType;
if ($expandImgType != 'default') {
    self::handleImgExType($expandImgType, $expandImgBgType);
}

这没错吧?看下边……

private static function handleImgExType($$expandImgType, $$expandImgBgType){}

我也想不起哪里多打了个$符,导致传过来的是null,而swal({})接收到的参数如果有Null的时候,他不执行,而且还不给你报错?具体也忘了什么情况的时候不报错但也不运行来着……害的我一点点的调试,看看click事件能否监听正常,dblclick事件能否监听正常,那还用说么?当然得正常了,但是我一加入下方的其他有关调控alertJS代码后就完全没反应了,WDFK!!!玄学???在本地运行的好好的,肿么又不行了……最后还是没发现问题,将属性值写死后才发现正常运行,终于出现了久违的alert当即发现传参的问题,但是传参在第一步就已经检查过了没问题呀?然后在传进参数的函数里又var_dump()了一下参数,双双Null……仔细一看形参我写的是:

self::handleImgExType($$expandImgType, $$expandImgBgType);
private static function handleImgExType($$expandImgType, $$expandImgBgType){}

因为记不大清了哪写的多了$了,不是第一个就是第二个……

所谓玄学,云尔已矣,但确实挺刺激的……
于昨夜完成
其实吧,写这些东西主要是方便自己使用的,如果有幸入得了使用者的法眼,我也是蛮开心的(●'◡'●)


本文由 fmujie 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

召唤看板娘