碎碎念

我在使用argon这个主题的时候，发现主题作者自己的博客里有一个很好看的小工具，叫做单向历

长这个样子

所以自己也想搞一个，在翻阅了作者文章下面的留言之后，看到了作者的回复，这个图片是调用的一个api：

https://img.owspace.com/Public/uploads/Download/2021/0831.jpg

如果你在浏览器输入这个网址，就能显示上面的图片，但是如果你在html里的img标签的src属性中写上他，这个img就不会显示任何东西

经过翻阅其他的留言，我知道了是需要进行一下反代，才能够使用

这里放上另一个大神的教程：

https://pastebin.ubuntu.com/p/Swn6drYwnD/

但是他是使用的Nginx做服务器，而我使用的apache，但这篇文章还是给我提供了思路

于是我又去搜索apache怎么进行反代，然后收到了这篇文章Apache设置反向代理 - skyfeng713 - 博客园 (cnblogs.com)

按照他的教程进行操作后，还是遇到了问题，我们要代理的这个单向历api是https协议

然后又经过一番查找，发现如果代理https协议，只需要在代理http的代码上，加上一行

1
SSLProxyEngine On

现在问题全解决了，现在来进行一下总结

解决方案

对单向历这个api进行反代（apache服务器），首先要修改apache目录下的conf文件夹下的httpd.conf，取消掉一些mod的注释（具体看上文中提到的博客园文章）

然后在该文件的最后加上以下代码

1
2
3
4
5
6
7
8
9
10
11
<VirtualHost *:80>
    ServerName  #你的域名
    SSLProxyEngine On
    <Proxy >
        AllowOverride all
        Order allow,deny
        Allow from all
    </Proxy>
    ProxyPass /Public/uploads/Download/  https://img.owspace.com/
    ProxyPassReverse /Public/uploads/Download/ https://img.owspace.com/
</VirtualHost>

保存并重启apache之后，在你服务器上访问： http:// 你的域名 /Public/uploads/Download/ xxxxxxxxx时，就会代理到 https://img.owspace.com/Public/uploads/Download/ xxxxxxxxx 上了

也就是说， https://img.owspace.com/Public/uploads/Download/2021/0831.jpg这个链接没法在img标签里使用，我们用：http://你的域名/Public/uploads/Download/2021/0831.jpg来代替访问，绕了个弯了属于是

（补充）Nginx反代方法

使用nginx要更简单一些，如果使用http反代，则只需要三四行就可以实现

首先在/www/server/panel/vhost/nginx/ 这个目录下新建一个xxx.conf（名称随意），然后写入以下内容

1
2
3
4
5
6
7
server {
    listen 80;  
    server_name 你的域名;  #不需要写www.
    location / {
        proxy_pass https://img.owspace.com/;
    }
}

保存后重启下nginx服务，直接访问http:// 你的域名 /Public/uploads/Download/2021/0831.jpg就可以了

如果使用https反代，则首先需要ssl证书，然后同上新建一个conf文件，写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
server {
    listen 443  ssl;  # 
    server_name 你的域名 ssl;  

    ssl_certificate /xxx/xxx.crt;  # 自己的 ssl 证书地址绝对路径
    ssl_certificate_key /xxx/xxx.key;

    location / {
        proxy_pass https://img.owspace.com/;
        proxy_set_header referer "";
    }
}

保存后重启nginx，把上面的http换成https，即可获得相同的效果

如何获取每一天的图片（动态链接）

这个问题其实就比较简单了，使用js就可以做到

我们添加小工具的时候，选择自定义html，然后输入以下内容

这样是显示不了图片的，还需要用js控制下src

1
2
3
4
5
6
7
8
9
10
11
<script>
var owscalendar = document.getElementsByClassName("ows-calendar")[0];
var nowdate = new Date();
var year = nowdate.getFullYear();
var month = nowdate.getMonth() + 1;
if(month <= 9) month = "0" + month;
var date = nowdate.getDate();
if(date <= 9) date = "0" + date;
var prefix = owscalendar.getAttribute("src");
owscalendar.setAttribute("src", prefix + year + "/" + month + date + ".jpg");
</script>

这样就大功告成了，具体效果可以看我博客右侧，也感谢这几位大神的攻略帮助。