kub80af6.png

闲着无聊翻翻自己的博客,不翻还好,一翻就有事情做了。突然发现一个比较严重的问题,那就是高清图片占用的页面面积比较大,一张图片要用滚轮滚好多次,导致文章内容割裂感极强,缺少整体感,读者对图片后面的内容缺少预知感,让人感到无趣甚至想关掉页面。而在手机上,得益于手机普遍修长的先天优势,这种糟糕的体验并不存在。

kub8c9g7.png

我也不知道这是Typecho的锅还是Joe主题的锅,咱也不敢查,咱也不敢问,总之把它解决掉就好了。

解决办法

打开网站根目录下的 /var/HyperDown.php 文件

搜索

"<img src={$url} alt={$escaped} title={$escaped}>"

替换为:

"<img src={$url} alt={$escaped} title={$escaped} style=max-width:300px;max-height:600px >"

再次搜索

"<img src={$self->_definitions[$matches[2]]} alt={$escaped} title={$escaped}>"

替换为:

"<img src={$self->_definitions[$matches[2]]} alt={$escaped} title={$escaped} style=max-width:300px;max-height:600px >"

上面的代码,设置的是限制图片最大高度为600px,最大宽度为300px,你可以根据自己的需要来修改,然后保存覆盖这个文件即可。已知的问题是,如果你的宽度设置得太大,移动端页面显示的图片宽度可能会溢出。暂时不知道怎么解决,也许可以通过修改主题文件的某些代码来解决,还没空研究,先凑合着用吧。

修改前后对比

kub8c9g7.png

kub98vsg.png

值得注意的是,Joe主题自带图片灯箱,点击图片即可放大,避免了图片过小导致看不清的问题。