Docker系列 WordPress系列 自建随机图API

发布于 2022-07-02  43 次阅读


前言

今天偶然看到likepoems的教程《免费随机图片api接口》,感觉自己可以做一下自建随机API。我之前就有一个需求,就是希望自己的博客背景图片可以随机切换为指定的某些图片。我知道有一些定制API,但上面的图不一定是我喜欢的,所以可以自建API是最好的。

测试了一下likepoems的方法,发现非常简单且可行。大致的原理就是建一个index.php文件,它定义了一些规则,并且调用和它在同一目录下的img.txt文件里的图片链接。所以理论上,只要这个index.php文件和img.txt文件在同一个目录下并且可以被Web访问,那就可以实现随机切换图片的效果:

chrome_n7mieY9473.gif

下面,我们就讲(shui)一下如何在WordPress个人博客里自建随机图API (~ ̄▽ ̄)~

准备工作

首先,你需要安装一个插件,叫Add From Server。如果你看过我的看板娘教程,那应该安装过这个插件了。Add From Server的作用是让你的WordPress根目录以下的文件可以通过Web的方式进行访问。

然后,我们在Linux Shell里定义一下api目录:

# WordPress根目录。请按需改动
work=~/docker/wordpress/app/

# 创建API目录
mkdir -p $work/imgapi

这个目录的内容大致如下,每个人的可能略有不同:

drwxr-xr-x  2 www-data www-data 4.0K Jun  7 05:24 imgapi (这是我们的自建随机图API目录)
-rw-r--r--  1 www-data www-data  405 Feb  6  2020 index.php
-rw-r--r--  1 www-data www-data  20K May 25 01:35 license.txt
-rw-r--r--  1 www-data www-data   68 Apr 10 11:06 php.ini
-rw-r--r--  1 www-data www-data 7.3K May 25 01:35 readme.html
-rw-r--r--  1 www-data www-data  325 Apr 26 11:49 wordfence-waf.php
-rw-r--r--  1 www-data www-data 7.0K Jan 21  2021 wp-activate.php
drwxr-xr-x  9 www-data www-data 4.0K Apr 10 06:10 wp-admin
-rw-r--r--  1 www-data www-data  351 Feb  6  2020 wp-blog-header.php
-rw-r--r--  1 www-data www-data 2.3K Apr 10 06:11 wp-comments-post.php
-rw-rw-r--  1 www-data www-data 5.4K Dec 22 12:21 wp-config-docker.php
-rw-------  1 www-data www-data 6.3K Jun  6 05:54 wp-config.php
-rw-r--r--  1 www-data www-data 3.0K Apr 10 06:11 wp-config-sample.php
drwxr-xr-x 11 www-data www-data 4.0K Jun  7 05:33 wp-content
-rw-r--r--  1 www-data www-data 3.9K May 25 01:35 wp-cron.php
drwxr-xr-x 26 www-data www-data  16K Jun  4 08:35 wp-includes
-rw-r--r--  1 www-data www-data 2.5K May 25 01:35 wp-links-opml.php
-rw-r--r--  1 www-data www-data 3.9K May 25 01:35 wp-load.php
-rw-r--r--  1 www-data www-data  48K May 25 01:35 wp-login.php
-rw-r--r--  1 www-data www-data 8.4K May 25 01:35 wp-mail.php
-rw-r--r--  1 www-data www-data  24K May 25 01:35 wp-settings.php
-rw-r--r--  1 www-data www-data  32K May 25 01:35 wp-signup.php
-rw-r--r--  1 www-data www-data 4.7K May 25 01:35 wp-trackback.php
-rw-r--r--  1 www-data www-data 3.2K Jun  8  2020 xmlrpc.php

添加文件

imgapi文件夹中添加2个文件——img.txtindex.php

img.txt

创建img.txt文件:

vim $work/imgapi/img.txt

填写一些你可以放一些自己喜欢的图片的链接,比如:

https://static.likepoems.com/2020/09/19/14d4607426a4a4e341f8144a56fbac570.jpg
https://static.likepoems.com/2020/09/19/ad30a36bd3c3d6bfd07f0357fa25ab710.jpg

这有个小建议,如果你的VPS流量比较小的话,你可以通过在Github上托管图片,并添加JsDelivr的CDN缓存链接。我为了照顾国内用户,目前暂时选择了DogeCloud的CDN进行背景图片的加速。

index.php

创建index.php文件:

vim $work/imgapi/index.php

填入以下内容:

<?php
//存放api随机图链接的文件名img.txt
$filename = "img.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"));
}

?>

改用户

最后,别忘记将文件将改为www-data所有:

sudo chown -R 33:33 $work/imgapi/

使用方法

访问一下https://<博客域名>/imgapi/img.txt,看看文件是否生效。如果生效,会返回你添加的图片链接。

最后,将https://<博客域名>/imgapi/index.php这个链接当作图片URL,即可生效。你可以多开几个新标签访问这个地址,可以看到图片将被随机切换,说明API建设成功!

小结

整个过程还是蛮简单的。另外,如果不想自建,likepoems大佬还收集了好多api网站,自己可以按需食用(特别是二次元爱好者)。不过,在源站托管背景图时,随机图API会对访客相关的网站性能造成轻微的损害。由于PHP是动态资源,背景图片将无法受益于CloudFlare CDN和Workers规则,这将导致访客每次访问网络时背景图片的流量都需要指向源站。如果你(或者你的用户)比较在意性能损失,可能并不太适合将随机图链接托管在源站,而应用通过CDN之类的手段进行缓存

参考