本文作者：zhujue

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

zhujue 2022-12-01 15:55:45 24 抢沙发
Docker系列 WordPress系列 自建随机图API摘要： ......

日志

  • 2022-10-26：更新备注代码，使得对任一图片/视频链接，当且仅当开头添加#时，该链接不会生效。

  • 2022-08-24：设置iPad按PC背景图片显示

  • 2022-07-25：新增背景图api适配移动端/PC端

前言

看完本文强烈建议看《Docker系列 WordPress系列 自建随机图API之动态壁纸》！

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

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


Docker系列 WordPress系列 自建随机图API 第1张


下面，我们就讲（shui）一下如何在WordPress个人博客里自建随机图API (～￣▽￣)～

准备工作

Add From Server插件

首先，你需要安装一个插件，叫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

Mobile_Detect.php

从这里下载：Mobile-Detect/Mobile_Detect.php

Mobile_Detect.php是一个用于检测移动设备（包括平板电脑）的轻量级PHP类。它使用 User-Agent 字符串结合特定的 HTTP 标头来检测移动环境。我也是偶然发现的，这就意味着不需要自己专门去想怎么写规则了。个人推荐！下载好可以直接放在imgapi文件夹里，像这样：


xxx@racknerd-74a241:/docker/wordpress/app/imgapi
% ls  -hl
-rw-rw-rw- 1 www-data www-data  591 Sep 18 11:32 img_mobile.txt
-rw-rw-rw- 1 www-data www-data 1.2K Sep 24 23:59 img.txt
-rw-rw-rw- 1 www-data www-data 2.0K Nov  6 00:48 index.php
-rw-r--r-- 1 root     root      89K Nov  6 00:32 Mobile_Detect.php

这个Mobile_Detect类会在index.php里被引用并构建一个设备类似判断的函数。

添加文件

在imgapi文件夹中添加2个文件——img.txt和index.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方案1

创建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!='' && substr($str , 0 , 1) != '#'){
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"));
}


?>

index.php方案2（推荐）

参考PHP判断用户是否是移动端访问的办法进行改良

因为移动端和PC端的界面不太一样，PC端多是横屏，而移动端多是竖屏。如果你的网站对移动设备进行了适配，你可能需要根据访客设备的不同（移动端/PC端）显示不同规格的壁纸。这里的方案是：你可以增加一个img_mobile.txt文件以提供移动端壁纸；而原本的img.txt则只为PC端提供壁纸。用法同上，与index.php放在同一个文件夹里即可，只是这个index.php增加了对访客设备的识别。

创建index.php文件：


vim $work/imgapi/index.php

填入以下内容：


<?php
/*
 * 函数：访客设备
 * 博客园：https://www.cnblogs.com/freephp/p/13979503.html
 * Github: https://github.com/RohanSakhale/Mobile-Detect
*/
function is_mobile(){
require('./Mobile_Detect.php');
$MobileDetect = new Mobile_Detect();


if ($MobileDetect->isTablet()) {
// 平板定义为PC类
return false;
} elseif ($MobileDetect->isMobile()) {
return true;
} else {
return false;
}
}


// 电脑与手机用不同的壁纸
if(is_mobile()){
// 手机壁纸
$filename = "img_mobile.txt";
}else{
// 电脑壁纸
$filename = "img.txt";
}


//存放api随机图链接的文件名img.txt
if(!file_exists($filename)){
die('文件不存在');
}


//从文本获取链接
$pics = [];
$fs = fopen($filename, "r");
while(!feof($fs)){
$line=trim(fgets($fs));
if($line!='' && substr($str , 0 , 1) != '#'){
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建设成功！

另外，我个人建议使用随机图API时可以关闭Pjax，这样每打开一个新的网页，用户就会看到一张随机切换的新壁纸。虽然可能有些微性能损失，但这样可以最大程度上展现你的壁纸喔！

小结

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

参考

Legacy

这里保存一些过时的代码，但仍可能有参考作用。

index.php2


<?php
// 函数：访客设备
function is_mobile() {
if (empty($_SERVER['HTTP_USER_AGENT']) ||
strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false) {
// 因为iPad有类似于PC的长宽比，所以我设置为电脑端
$is_mobile = false;
} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}
return $is_mobile;
}


// 电脑与手机用不同的壁纸
if(is_mobile()){
// 手机壁纸
$filename = "img_mobile.txt";
}else{
// 电脑壁纸
$filename = "img.txt";
}


//存放api随机图链接的文件名img.txt
if(!file_exists($filename)){
die('文件不存在');
}


//从文本获取链接
$pics = [];
$fs = fopen($filename, "r");
while(!feof($fs)){
$line=trim(fgets($fs));
if($line!='' && substr($str , 0 , 1) != '#'){
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"));
}


?>

---------------
完结，撒花！如果您点一下广告，可以养活苯苯😍😍😍


版权声明：除特殊说明，博客文章均为Bensz原创，依据CC BY-SA 4.0许可证进行授权，转载请附上出处链接及本声明。 如有需要，请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔！ | 博客订阅：RSS | 广告招租：留言板 | 博客VPS |


文章版权及转载声明

作者:zhujue本文地址：http://183.162.193.250:5900/post/125.html发布于 2022-12-01 15:55:45
文章转载或复制请以超链接形式并注明出处天云博客

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

海报
阅读
分享

发表评论

快捷回复：

评论列表 （暂无评论，24人围观）参与讨论

还没有评论，来说两句吧...