MyDiary主题教程——相册类型文章使用缩略图

在使用MyDiary主题创建相册类型文章时，当图片过多或图片容量过大，会导致此页面在访问的时候出现严重的卡顿，而且过大的图片加载不仅会影响网站的加载速度，也会影响服务器的响应。因此最好的解决办法就是使用缩略图来替换显示封面图片，并在点开灯箱图片时再加载原图。

本地图片附件

因为上传的图片附件，typecho并不会生成缩略图，可以配合尝试使用TimThumb.php插件自动对图片附件生成缩略图。

TimThumb 是一个非常简洁方便的、用于裁图的 PHP 程序。只要给它设置一些参数，它就可以生成指定图片的缩略图甚至是直接给指定的网站截图。现在很多 WordPress 主题中，都使用的是 TimThumb 这个 PHP 类库进行缩略图处理。

具体使用方法步骤：

1. 下载TimThumb.php文件到站点的根目录。
   {cat_download name="TimThumb" url="https://dorcandy.lanzouw.com/iAgio0twhobe" password=""}

2. 在MyDiary主题后台--个性--自定义全局js处填写：

   ♾️ js 代码:

   function img_src_change() {
       if ($(".cat_post_album_out_grid").length!=0){
           $(".cat_post_album_out_grid img").each(
               function(){
                  var str = $(this).attr("data-src");
                  $(this).attr("data-src","/timthumb.php?src="+str+"&w=200&h=200");
               }
           );
       }
       if ($(".cat_post_album_out_column").length!=0){
           $(".cat_post_album_out_column img").each(
               function(){
                  var str = $(this).attr("data-src");
                  $(this).attr("data-src","/timthumb.php?src="+str+"&w=200&h=200");
               }
           );
       }
   }

3. 在MyDiary主题后台--扩展--pjax回调函数处填写：

   ♾️ js 代码:

   img_src_change();

第三方图床

现在大多数用户会选择使用第三方图床服务来储存图片附件，因此这里以喵喵使用的七牛云作为案例，其他的阿里腾讯都是类似的步骤。

1. 进入七牛云的空间管理，点击进入图片样式，在此处添加一种新图片样式，并在此新样式中确定缩略图的裁切方式，并确定好图片处理样式名称。

2. 在MyDiary主题后台--个性--自定义全局js处，使用js替换原图的样式名称为新的缩略图的样式名称。
   此处假定原图为_full，新的缩略图为_thumb，其中下划线是连接符，英文是上一步的图片处理样式名称：

   ♾️ js 代码:

    function img_src_change() {
    if ($(".cat_post_album_out_grid").length!=0){
        $(".cat_post_album_out_grid img").each(
            function(){
               var str = $(this).attr("data-src").replace("_full", "_thumb");
               $(this).attr("data-src",str);
            }
        );
    }
    if ($(".cat_post_album_out_column").length!=0){
        $(".cat_post_album_out_column img").each(
            function(){
               var str = $(this).attr("data-src").replace("_full", "_thumb");
               $(this).attr("data-src",str);
            }
        );
    }
    }

3. 在MyDiary主题后台--扩展--`pjax回调函数：

   ♾️ js 代码:

   img_src_change();