餐前小故事:
这是一个极度令人伤心的事情:
年少无知的单纯的蠢蠢的建站小白在给朋友分享自己之前写下的建站教程时,惊奇地发现文章中的所有图片竟都无法加载。小白有种很棒(bushi)的预感,于是立马双开了一个界面,点开了之前的一篇图片占比极大的文章,惊恐地发现:WC!图片全白了!…
小白双眼一白,万念俱灰,但是生活还要继续,bug还要解决,于是他重重吸了一口气,像是下定了什么决心,咬紧牙关,双眼死死盯住屏幕,眼神坚定地像是要入党,向着bug发起了冲锋!
经过缜密的分析(不是、
与严谨的决策(bushi),小白很快(bushi)解决了(bushi)这个问题。由于担心聪明的朋友也会不小心犯下这个问题,小白贴心地写下了这篇文章,期待下一次被朋友开心地发现(bushi)。
(小彩蛋,来数数上文中有多少个反话,答对了有奖励哦!)
问题出现原因
解决问题首先需要知道问题出现的原因
上一次解决页面访问 404 获得的经验给这次问题解决提供了头绪:URL
想要理解URL,我们最好了解下我们的网站是如何搭建起来的:
首先,我们需要一个储存博客数据的服务器
其次,创建网站是要他人能够访问的,为了增加访问功能,我们需要一个公网地址供公共访问
然后,公网地址一般是 xxx.xxxx.xxxx 类似的数字组合,不具有辨别性与可记忆性。为了具备这些性质,我们需要拥有一个自己的域名(比如说这里的zhangweihao.cn)
接下来,拥有的域名要和自己的公网地址绑定起来,让他人通过域名能够访问自己的服务器,这里就需要DNS域名解析
在这之后,我们拥有了一个具有公网地址且绑定了域名的服务器,但这样只能定位到我们的服务器,不能进行进一步的操作,此时,我们需要暴露网站程序端口(网站程序一般暴露的是默认端口 80)。
接下来,我们需要搭建网站框架,一般而言有两种方式。一种是自己手搓前后端,每一道工序都由自己操作,具有满满的全局掌控感;另一种是采用LAMP、Jekyll、WordPress等成熟架构,不自己造轮子,建站速度快,成果令人满意(本博客基于Wordpress搭建)
然后,为了增加网站安全和信用度,我们需要修改服务器程序暴露端口(修改默认端口,防止黑客攻击)、进行IPC、网安局备案、申请SSL证书等操作
最后,就是进行网站修饰以及文章发布等日常维护
什么是URL
URL 是 Uniform Resource Locator 的缩写,中文名为统一资源定位符。它是用于在互联网上定位和访问资源的一种标识方法,就像是互联网上资源的 “地址”。以下是对 URL 的详细解释:
- 组成部分
- 协议部分:指出使用的网络协议,常见的有
http://
(超文本传输协议)、https://
(安全超文本传输协议)、ftp://
(文件传输协议)等。例如,https://
表示该资源通过加密的安全连接进行传输,常用于访问需要保密信息的网站,如银行、购物网站等。 - 域名部分:标识资源所在的服务器的名称,也就是我们通常所说的网址,如
www.example.com
。域名是互联网上用于识别和定位网站的名称,通过域名系统(DNS)将域名转换为服务器的 IP 地址,从而实现对服务器的访问。 - 路径部分:用于指定服务器上具体资源的位置。例如,
/blog/article1.html
表示服务器上blog
目录下的article1.html
文件。路径可以包含多个目录层级,以斜杠分隔。 - 查询参数部分:可选部分,用于向服务器传递额外的参数信息。通常以问号
?
开头,后面跟着键值对,多个键值对之间用&
符号分隔。例如,?id=123&name=John
表示传递了两个参数,id
的值为123
,name
的值为John
。这些参数可以被服务器端的程序用来执行特定的操作或返回特定的数据。
- 协议部分:指出使用的网络协议,常见的有
- 作用
- 定位资源:通过 URL,用户可以准确地找到互联网上的各种资源,如网页、图片、视频、文件等。无论资源存储在世界上任何地方的服务器上,只要知道其 URL,就可以通过浏览器或其他网络应用程序进行访问。
- 共享资源:URL 使得在互联网上共享资源变得非常方便。用户可以将感兴趣的网页、文件等的 URL 复制并分享给他人,他人通过访问该 URL 就可以获取到相同的资源。
例如,https://www.example.com/products/item.php?id=5
就是一个完整的 URL。它表示通过安全的超文本传输协议访问www.example.com
服务器上products
目录下的item.php
文件,并传递一个参数id=5
,服务器根据这个参数可能会返回关于特定产品的详细信息。
而小白之前不小心(bushi)修改了站点URL(和资源库中的文件URL路径绑定),导致之前文章中的照片URL和现在媒体库中的URL不一致,导致原本文章中的URL找不到现在的资源库对应的文件,因此出现图片无法加载的问题
解决方法
重定向URL
淘到一个看上去不错的自动重定向文章,但无法验证其作用性
对应介绍安装的文章链接:
重新上传图片(刷新URL)
可怜的小白尽管是拼尽全力还是无法用优雅的方法一战胜BUG,于是只能憋屈地选用第二种方法补上漏洞…
然后带着憋屈的情绪做出了此篇文章,警示后人(双手合十emoji)