前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >优化网站与随机图片API搭建 – 学金融的文史哲小生

优化网站与随机图片API搭建 – 学金融的文史哲小生

作者头像
去海边整点薯条
发布2022-11-01 13:58:56
7160
发布2022-11-01 13:58:56
举报
文章被收录于专栏:数模计量

一、网站优化

这两天由于谷歌字体反代域名(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都行)

代码语言:javascript
复制
<?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,也可以是自己的服务器上面,我这个是在自己的服务器主站根目录下托管的图片。

代码语言:javascript
复制
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自动完成

代码语言:javascript
复制
//不要什么都抄,自己看着抄
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

三、欣赏环节

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-10-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、网站优化
    • (一)修改谷歌字体API地址
      • (二)修改特效字体链接地址
      • 二、搭建随机图片API
        • (一)创建index.php
          • 1.在本地创建“index.txt”文件
          • 2.将PHP文件上传二级域名根目录或者主站二级目录
        • (二)创建一个imgs.txt文件
          • (三)图片的优化
            • (四)测试环节
            • 三、欣赏环节
            相关产品与服务
            数据库
            云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档