优化网站与随机图片API搭建

发布于 2021-10-31  2605 次阅读


一、网站优化

这两天由于谷歌字体反代域名(fonts.maho.cc)出现了一些问题,使得网站前端长期卡在加载字体CSS文件上,导致网站响应速度飙到了15秒+,这是一个亟待解决的问题。

(一)修改谷歌字体API地址

如果你使用的也是Theme Sakurairo by Fuukei的话,请直接打开后台的设置按钮,然后搜索“字体”,将Google字体API的默认设置(fonts.maho.cc)替换为原生的谷歌字体地址(fonts.googleapis.com)。说实话反代的速度不见得比原生的快多少,主要是Google官方老抽风,不然谁愿意花那个闲工夫反代。

(二)修改特效字体链接地址

第二个要修改的是白猫特效字体。在后台搜索“LOGO”,然后修改“字体链接”项目中的(fonts.maho.cc)替换为原生的谷歌字体地址(fonts.googleapis.com)。如下图所示啦。

优化之后的响应速度大概可以快10秒左右,有时候随机图片大小给力的话甚至会在毫秒级别完成加载。现在看似解决起来老简单了,实际上倒腾了一整天,因为第2点步骤的修改路径我一直没有找到,所以就去了源代码,甚至去了数据库里面更改了,但结果都是没用。我在改数据库的时候还把前台的JS弄乱了,我也不知道是什么鬼,反正就是改完了以后前台效果直接炸了,听起来挺魔幻的。

二、搭建随机图片API

说实话,这玩意是真的老简单了。主要是原生的随机图片有点花哨且不再适合我奔三之人了,自然想改,加上最近把大学三年拍的一些照片整理出来了,索性就用这些照片做一个随机图片API来给我博客润色一下,等毕业了自己打开网站也能玩味一番。

(一)创建index.php

1.在本地创建“index.txt”文件

将下面代码输入并保存修改文件格式为index.php。(前缀名称用pc.php或者mobile.php都行)

<?php
//存有美图链接的文件名img.txt
//和创建的含有图片地址的txt文件同名,且一定要放在和PHP文件同目录下
$filename = "randimgs.txt";
if(!file_exists($filename)){
    die('文件不存在');
}
//从文本获取链接
$pics = [];
$fs = fopen($filename, "r");
while(!feof($fs)){
    $line=trim(fgets($fs));
    if($line!=''){
        array_push($pics, $line);
    }
}
//从数组随机获取链接
$pic = $pics[array_rand($pics)];
//返回指定格式
$type=$_GET['type'];
switch($type){
//JSON返回
case 'json':
    header('Content-type:text/json');
    die(json_encode(['pic'=>$pic]));
default:
    die(header("Location: $pic"));
}
?>

2.将PHP文件上传二级域名根目录或者主站二级目录

(二)创建一个imgs.txt文件

2.1将图片链接以一行一个的顺序填入之后保存,比如如下图片链接。(前缀随便咋起)

图片可以托管在Github或者Gitee,也可以是自己的服务器上面,我这个是在自己的服务器主站根目录下托管的图片。

https://caoyongzhuo.cn/randimgs/pcimgs/1.webp
https://caoyongzhuo.cn/randimgs/pcimgs/2.webp
https://caoyongzhuo.cn/randimgs/pcimgs/3.webp
https://caoyongzhuo.cn/randimgs/pcimgs/4.webp
https://caoyongzhuo.cn/randimgs/pcimgs/5.webp
https://caoyongzhuo.cn/randimgs/pcimgs/6.webp
https://caoyongzhuo.cn/randimgs/pcimgs/7.webp
https://caoyongzhuo.cn/randimgs/pcimgs/8.webp
https://caoyongzhuo.cn/randimgs/pcimgs/9.webp
https://caoyongzhuo.cn/randimgs/pcimgs/10.webp

2.2一个一个添加链接很麻烦,所以可以用Python自动完成

//不要什么都抄,自己看着抄
filename="D:\\常用软件\\阿里云盘\\webp\\randimgs.txt"
randimgs=open(filename,"a")
for numbers in range(1,154):
    randimgs.write("https://caoyongzhuo.cn/randimgs/pcimgs/"+str(numbers)+".webp\n")
randimgs.close()

(三)图片的优化

最好的建议就是使用webp格式压缩JPG与PNG甚至是BMP图片文件的大小,因为这几个格式的图片小则3、5M,大则10M左右,前台网页会一直发起请求直至图片响应,所以拖垮速度是必然。

3.1批量更改文件名
使用Utools的文件批量命名工具,改换所有文件前缀,方便统一管理。

3.2批量更改WEBP格式
使用XnCovernt的文件批量命名工具,改换所有文件后缀,大规模缩小体积。

(四)测试环节

将PHP和含有图片链接的TXT文件放在服务器同一目录下,输入PHP所在网址,出现图片就成功了,我这里的地址是(https://caoyongzhuo.cn/randimgs/pc.php

三、欣赏环节


山东财经大学曹永卓,热爱编程,热爱金融。考研加油,一定要上岸!!!