关于Typecho的Joe主题图片显示过大导致整个页面都是图这件事

发布于 2021-10-03  62 次阅读


kub80af6.png

{mtitle title="ID85566531"/}

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

{mtitle title="一张图片占据很多面积"/}

  我也不知道这是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
{mtitle title="修改前"/}
kub98vsg.png
{mtitle title="修改后"/}
  值得注意的是,Joe主题自带图片灯箱,点击图片即可放大,避免了图片过小导致看不清的问题。


间接性发奋图强,持续性混吃等死