133333

public/post/21/index.html

@@ -102,10 +102,7 @@
 <p>发现又拍云对图片处理是不另外计费的，腾讯云cdn对图片转webp格式是需要另外计费的，对于我这种学生</p>
 <p>考虑成本，还是选择了又拍云，又拍云也是真的良心，有个又拍云联盟，可以免费嫖流量和储存，对于我这种白嫖怪，为之窃喜</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/4218786825.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/4218786825.png" alt="" class="lazyload"></p>
 <p>这个又拍云联盟确实不赖，加入又拍云联盟每个月免费获取每月 10GB 存储空间 + 15GB 流量，对于我们这种小访问的博客，只能说在合适不过了</p>
 <p>但是要求的是，需要你的网站底部悬挂他家的logo为它做宣传，意思是他给你白嫖流量，你给他做宣传，有兴趣的小伙伴可以看看下面的活动链接</p>
 <p><a href="https://www.upyun.com/league">https://www.upyun.com/league</a></p>
@@ -113,73 +110,43 @@
 <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;left&#34;</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral&#34;</span>&gt;&lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://img.52ql.cn/img/169&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;249px&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;400px&#34;</span>/&gt;&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
 </span></span></code></pre></div><p>然后提交申请加入又拍云联盟即可，审核小姐姐真的很给力，基本上两个小时就给你通过申请了</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/3873224529.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/3873224529.png" alt="" class="lazyload"></p>
 <p>那么我们现在开始给自己接入cdn，首先进入又拍云的cdn控制台添加域名，因为我们只需要他的图片处理功能</p>
 <p>所以你直接按照我下面图片设置就好了，应用场景选择网页图片，填写好你的域名，如果你的主域名是usj.cc</p>
 <p>那么www.usj.cc就没必要配置cdn，浪费钱且不划算，直接宝塔面板设置www.usj.cc 301跳转到usj.cc，这样我们就可以只用配置usj.cc的cdn设置就好了</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/768684432.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/768684432.png" alt="" class="lazyload"></p>
 <p>创建成功之后，直接去自己的域名管理控制台把自己的解析改为CNAME解析并按照又拍云解析到相应地址</p>
 <p>等待五到十分钟，然后打开cmd操作命令台，ping一下自己的网站，看看cdn是否生效</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/2441536733.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/2441536733.png" alt="" class="lazyload"></p>
 <p>如果你的跟我一样，就代表cdn设置成功了</p>
 <h2 id="添加https访问协议">添加https访问协议</h2>
 <p>这个直接去控制台添加，按照我下面的图片操作即可，至于证书在哪，直接去宝塔面板证书管理那里，复制过来即可</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/2158377009.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/2158377009.png" alt="" class="lazyload"></p>
 <h2 id="开启图片自动转webp格式功能">开启图片自动转webp格式功能</h2>
 <p>在控制台的这个地方把这个打开</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/4125482855.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/4125482855.png" alt="" class="lazyload"></p>
 <p>然后在把这个打开，就能实现站点的webp格式处理了</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/3889867141.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/3889867141.png" alt="" class="lazyload"></p>
 <h2 id="为什么进不去typecho的后台">为什么进不去typecho的后台</h2>
 <p>首先去控制台设置参数跟随，并设置全程跟随</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/1015724849.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/1015724849.png" alt="" class="lazyload"></p>
 <p>这里缓存配置里，这个地方不要设置全局缓存，下面不要勾选就好</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/4031660656.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/4031660656.png" alt="" class="lazyload"></p>
 <p>在不缓存设置里面，我们需要他设置不缓存后台就好</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/626355279.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/626355279.png" alt="" class="lazyload"></p>
 <p>我们还需要设置一下边缘规则，因为Typecho需要携带referer参数才可以登陆后台</p>
 <p>在未开启CDN的时候访问后台，地址栏会多出referer参数，需要在又拍云设置边缘规则，否则无限循环后台地址</p>
 <p>这个我想潘先生已经体会到了，哈哈哈，这个设置其实很简单，安装下面我的配置设置即可</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/1401014779.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/1401014779.png" alt="" class="lazyload"></p>
 <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>1.https://usj.cc/admin/login.php?referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
 </span></span><span style="display:flex;"><span>2.域名后方会带有?referer=请求
 </span></span><span style="display:flex;"><span>3.referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
@@ -241,10 +208,7 @@
 <h2 id="网站图片转换webp效果">网站图片转换webp效果</h2>
 <p>我们打开f12随便点击自己的一个博客图片，我们看下图</p>
 <p>
-<figure>
-  <img data-original="/pics/2021/11/1358044252.png" alt="" class="lazy">
-  
-</figure></p>
+<img data-lazy-src="/pics/2021/11/1358044252.png" alt="" class="lazyload"></p>
 <p>博客图片的地址是png格式，但是文件类型已经被转换了webp格式，即image/webp</p>
 <p>这样就达到了我们实现图片自动转换webp格式的效果，是不是很简单</p>
 <p>希望可以帮助各位小伙伴，提高自己的博客体验优化</p>