wordpress使用Markdown语法写的文章图片显示不正常，记录一次折腾之旅
当我把wordpress站点地址改成域名之后，wordpress上写的文章是使用Markdown语法进行写作的，但是Markdown引用的图片就会加载不出来，但如果把站点地址改成局域网的IP，所有的一切都显示正常了。除非我把图片的引用地址改成暴露在公网的URL才可以正常加载，而为了安全考虑并不想把所有图片都暴露出来，只希望它可以加载局域网IP地址下的图片，刚开始我觉得应该是图片加载的时候跨域请求，从而导致加载失败，于是就想解决一下图片跨域请求的问题。
一、Wordpress实现跨域请求
在WordPress根目录，创建一个.htaccess文件，其内容如下
root@hep-wordpress:/var/www/wordpress# vim .htaccess<IfModule mod_headers.c>
# 允许来自任何域的访问，你也可以指定特定的域，如http://www.huerpu.cc:7000
Header set Access-Control-Allow-Origin "*"
# 允许的请求方法，如GET、POST等，可根据实际情况调整。这里设置成了所有请求。
Header set Access-Control-Allow-Methods "*"
# 允许的请求头，如Content-Type等，可根据实际情况调整
Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>配置一下apache2，允许重定向
vim /etc/apache2/apache2.conf<Directory /var/www/wordpress>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>vim /etc/apache2/sites-available/000-default.conf<VirtualHost *:7000 >
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com
ServerName www.huerpu.cc
ServerAdmin webmaster@127.0.0.1
DocumentRoot /var/www/wordpress
<Directory /var/www/wordpress>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>这个时候，暴露在外网的博客就可以跨域请求照片了，任何地址的图片都可以，我还专门搞了一张百度的图片尝试了一下。
但内网的照片还是加载不出来，于是我知道了，使用的IP地址加载照片，它应该访问了公网的IP而没有访问局域网的IP，这个也就失败了。如果我把照片地址暴露在公网，那就有别于我的初衷了。
二、图片路径修改
那咱们把照片拷贝到wordpress目录下吧，这样可以使用相对路径去加载照片，也会安全一些。但是当初写的文章上传的图片都是外网的链接，因为文章中的图片链接太多了，我又不想修改数据库里的内容，当然使用sql语句执行一下，一条sql替换一下也是可以的。
于是写了一个js函数，让它把原来的外网地址替换成相对路径地址。
#这个对应的villar主题下的文件，wordpress目前就使用的这个主题
cd /var/www/wordpress/wp-content/themes/villar
vim functions.php//在functions.php文件末尾增加下面内容
//把wordpress Markdown内容中/wp-content/uploads/的链接全部替换为/wp-content/uploads/。因为文章中的图片链接太多了，我又不想修改数据库里的内容，这里就全局替换一下
function replace_image_links($content) {
$old_link_prefix = '/wp-content/uploads/';
$new_link_prefix = '/wp-content/uploads/';
return str_replace($old_link_prefix, $new_link_prefix, $content);
}
add_filter('the_content', 'replace_image_links');启动rewrite
sudo a2enmod rewrite
service apache2 restart
#apache2错误日志目录
vim /var/log/apache2/error.log这个时候，所有的链接都变成了相对路径，但是图片还没有上传到wordpress机器的对应目录。
三、两台Ubuntu特定文件夹实现实时同步
如果你一次手动上传过来所有图片也是可以的哈，但是如果后续我通过typora写的文章，图片还是会自动上传到chevereto图床，那个时候不可能再一张张照片去拷贝了，所以就想弄个同步的操作，就是把chevereto上对应的文件夹实时同步到wordpress机器上。chevereto机器IP为192.168.31.115，它上面有一个文件夹路径为/var/www/html/chevereto/images，把这个文件同步到另一台wordpress，这一台的IP为192.168.31.120，存放的路径为/var/www/wordpress/wp-content/uploads，当192.168.31.115的这个文件夹下有文件改动的时候，立刻同步到192.168.31.120。
#在两台 Ubuntu 24.04 机器上都需要安装 Rsync。
apt install rsync
#在192.168.31.115机器上生成SSH密钥对。一路按回车键，接受默认设置，这样会在~/.ssh目录下生成id_rsa和id_rsa.pub
ssh-keygen -t rsa
#将公钥复制到 192.168.31.120 机器上。在 192.168.31.115 机器上执行以下命令。输入该用户的密码后，就完成了公钥的复制，之后 192.168.31.115 机器就可以免密码登录 192.168.31.120 机器
ssh-copy-id root@192.168.31.120
#在 192.168.31.115 机器上创建一个脚本文件，例如sync_images.sh，内容如下
#!/bin/bash
rsync -avz --delete /var/www/html/chevereto/images/ root@192.168.31.120:/var/www/wordpress/wp-content/uploads
#设置文件系统监控和自动同步，使用Inotify-Tools，在 192.168.31.115 机器上安装 Inotify-Tools，用于监控文件系统的变化
apt install inotify-tools
#创建一个新的脚本文件auto_sync.sh
#!/bin/bash
inotifywait -m -r -e create,delete,modify,move /var/www/html/chevereto/images/ | while read path action file; do
./sync_images.sh
done
#在 192.168.31.115 机器上运行auto_sync.sh脚本
chmod +x auto_sync.sh
./auto_sync.sh
#后台执行脚本
nohup./auto_sync.sh &
#第一次可以先把所有文件都同步过去，执行sync_images.sh命令
./sync_images.sh当所有照片都同步过来之后，wordpress博客的图片就可以显示出来了，路径也是相对路径下的地址。
一次折腾之旅就这样愉快的结束了。